Tutorial: Custom iPhone tabbar using Appcelerator Titanium

While working on v2 of the Endeavour iPhone app, I was faced with a need to create a custom tab bar, this seemed a much easier task when using titanium compared to Obj-C! I actually ended up writing a library that is available on the netsells github which I will show you how to use in this tutorial.

The basic logic behind is all is to hide the existing tab bar (but keep it there for switching windows) and overlay where it should have been with a window containing buttons. Below are the steps you should take to create something shown to create the following

file

First off, we need some custom images, I’ve quickly made the following in photoshop (icky green, I know) to use in this example (I’m only doing this for the non-retina screen, adding support for retina should be as simple as adding @2x).

[Icons by Joseph Wain] Next we need to get the library into the project, my project folder is stuck on my desktop so I did the following

cd ~/Desktop/testTabApp/Resources
git clone git@github.com:netsells/customTabBar.git

After git has done it’s thing you should be able to call the customTabBar library in your app.js.

For the example app show at the beginning of this post, I replaced the contents of app.js with:

// Create the tab group
var tabGroup = Titanium.UI.createTabGroup();

// Assign windows & tabs
// IMPORTANT:
// 'tabBarHidden: true' should be set on all windows
// height should be set to 480 - customTabBar's height
// (change 480 to app screen height)
var win1 = Titanium.UI.createWindow({
	title:'Tab 1', height: 440,
	tabBarHidden: true, backgroundColor: '#111' });
var tab1 = Titanium.UI.createTab({ window:win1 });

var win2 = Titanium.UI.createWindow({
	title:'Tab 2', height: 440,
	tabBarHidden: true, backgroundColor: '#999' });
var tab2 = Titanium.UI.createTab({ window:win2 });

var win3 = Titanium.UI.createWindow({
	title:'Tab 3', height: 440,
tabBarHidden: true, backgroundColor: '#AAA' });
var tab3 = Titanium.UI.createTab({ window:win3 });

var win4 = Titanium.UI.createWindow({
	title:'Tab 4', height: 440,
tabBarHidden: true, backgroundColor: '#FFF' });
var tab4 = Titanium.UI.createTab({ window:win4 });

// Add them to the group
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.addTab(tab3);
tabGroup.addTab(tab4);

// open tab group
tabGroup.open();

// Here is the magic
Ti.include("customTabBar/customTabBar.js");

var myCustomTabBar = new CustomTabBar({
tabBar: tabGroup,
imagePath: 'iphone/images/',
width: 80,
height: 40,
items: [
{ image: 'home.png', selected: 'home_over.png' },
{ image: 'cloud.png', selected: 'cloud_over.png' },
{ image: 'cart.png', selected: 'cart_over.png' },
{ image: 'settings.png', selected: 'settings_over.png' }
]
});

As you can see, I’ve created a standard tabbar, told each window to not show it, then created an instance of the CustomTabBar class and fed it with my settings. If I were to run the app in the simulator, I get the following (woop!):

file

Finally, if you find yourself in need of hiding the newly created tab bar.. (and then showing it…)

myCustomTabBar.hide(); // Hide the tab bar

// Show after 5 seconds
setTimeout(function() {
	myCustomTabBar.show();
}, 5000);

Hope this helps anyone looking to create a tabbar! Please let me know if you use this in any projects as I love my stuff being used! :)

We are no longer supporting this library and are unable to offer help. Sorry!