Skip to content

Instantly share code, notes, and snippets.

/IosCustomTabBar.coffee

Created December 29, 2012 01:08
Show Gist options
  • Save anonymous/4403663 to your computer and use it in GitHub Desktop.
Save anonymous/4403663 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Dec 29, 2012.
    42 changes: 42 additions & 0 deletions IosCustomTabBar.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    class IosCustomTabBar

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

    initializeUI: ->
    @createCustomTabBar()

    @tabGroup.addEventListener 'focus', (event) =>
    customTabs = @customTabBar.getChildren()
    #Reset icons for custom tabs
    for customTab, pos in customTabs
    customTabimageView = customTab.getChildren()[0]
    customTabimageView.setImage(@tabGroup.tabs[pos].getIcon())
    customTabimageView.setBottom(12)
    #Set the selected icon for current custom tab in focus
    selectedCustomTabImageView = customTabs[event.index].getChildren()[0]
    selectedCustomTabImageView.setBottom(0)
    selectedCustomTabImageView.setImage(@tabGroup.tabs[event.index].getSelectedIcon())

    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
    2 changes: 2 additions & 0 deletions index.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    IosCustomTabBar = require('components/IosCustomTabBar')
    new IosCustomTabBar(tabGroup: $.index, backgroundImage: '/designer/tabbar_background.png')
    19 changes: 19 additions & 0 deletions index.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <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>