index.coffee

IosCustomTabBar = require('components/IosCustomTabBar')
new IosCustomTabBar(tabGroup: $.index, backgroundImage: '/designer/tabbar_background.png')

index.xml

<Alloy>
  <TabGroup>
    <Tab id='homeTab' title="Home" icon="/designer/tabbar_homerest.png" selectedIcon="/designer/tabbar_homeselect.png">
      <Require src="home" id="home"/>
    </Tab>
    <Tab id='nearbyTab' title="Nearby" icon="/designer/tabbar_nearbyrest.png" selectedIcon="/designer/tabbar_nearbyselect.png">
      <Require src="nearby/index" id="nearby"/>
    </Tab>
    <Tab id='searchTab' title="Search" icon="/designer/tabbar_searchrest.png" selectedIcon="/designer/tabbar_searchselect.png">
      <Require src="search/index" id="search"/>
    </Tab>
    <Tab id='favoritesTab' title="Favorites" icon="/designer/tabbar_favoritesrest.png" selectedIcon="/designer/tabbar_favoritesselect.png">
      <Require src="favorites/index" id="favorites"/>
    </Tab>
    <Tab id='moreTab' title="More" icon="/designer/tabbar_morerest.png" selectedIcon="/designer/tabbar_morerselect.png">
      <Require src="more/index" id="more"/>
    </Tab>
  </TabGroup>
</Alloy>

IosCustomTabBar.coffee

class IosCustomTabBar

  constructor: (options) ->
    @tabGroup = options.tabGroup
    @backgroundImage = options.backgroundImage
    @initializeUI()

  initializeUI: ->
    @createCustomTabBar()

    @tabGroup.addEventListener 'focus', (event) =>
      customTabs = @customTabBar.getChildren()
      #Reset icon for previous custom tab
      if event.previousIndex >= 0
        customTabImageView = customTabs[event.previousIndex].getChildren()[0]
        customTabImageView.applyProperties(image: @tabGroup.tabs[event.previousIndex].getIcon(), bottom: 12)
      #Set the selected icon for current custom tab in focus
      selectedCustomTabImageView = customTabs[event.index].getChildren()[0]
      selectedCustomTabImageView.applyProperties(image: @tabGroup.tabs[event.index].getSelectedIcon(), bottom: 0)

  createCustomTabBar: ->
    @customTabBar = Ti.UI.createImageView(image: @backgroundImage, bottom: 0, touchEnabled: false)
    @tabGroup.add(@customTabBar)
    @addCustomTabs()

  addCustomTabs: ->
    for tab, pos in @tabGroup.tabs
      options =
        width: Ti.Platform.displayCaps.platformWidth / @tabGroup.tabs.length
        height: 60
        bottom: 2
        left: ((Ti.Platform.displayCaps.platformWidth / @tabGroup.tabs.length) * pos) + 1
      #Special Handling for custom search tab
      options.bottom = 8 if pos == 2
      #Create a container view and add imageView to container
      containerView = Ti.UI.createView(options)
      containerView.add Ti.UI.createImageView(image: tab.getIcon(), bottom: 12)
      @customTabBar.add containerView

module.exports = IosCustomTabBar