Customized TabBar for iOS in pure JS

Back when I first started using Titanium, I was working on an app that I wanted to have a color button (aka not use the gradient that iOS uses by default). To do this I hacked away for days to come up with a solution, and I found it! but repeating this look in new apps meant starting from zero time and again.

Fast forward about a year and I come on board Appcelerator and I vowed to get this script finished and out in the wild! Why? Two reasons, the first is its a cool script (if I do say so myself) But also it proves a point, that you can do a lot with the bare APIs in Titanium.

So lets go through this shall we? What does this script provide?

• A drop in replacement for the default tabGroup, that with less then 3 lines of JS can get you started with adding these cool features to your already started app.
• The ability to have large (bigger then the default tabbar height) full color tabs to enhance your UI using the new tabHeight and tabWidth properties on your tab.
• An onClick property for your tabs so tabs can be more then just a window, for example a tab could end up being a reload button, or open the camera view…
• A modal property to open your window in a modal window
• A currentTab property to access the currently active tab off the tabGroup object
• A currentTabIndex to access the index of the current tab off the tabGroup object
• hideTabBar and showTabBar methods off of the tab group to hide and show the tabBar
• selectedImage property to use an image for the highlighted bg of the currently selected tab

This code is compatible with all iOS devices ONLY, android is not supported at this time.

So how do we set it up? Simple!

Simply copy the files from the customTabBar Github repo to the Resources dir of your project, then replace your Ti.UI.createTabGroup(); code in your app with:

and add your newly available properties as desired! (for more advanced details on usage, checkout this file in the repo)

Have any questions? hit me up in the comments!