Custom Tabs

app.js

// 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 });
var btn1 = Ti.UI.createButton({title: 'Hide Tabs', height: 40});
win1.add(btn1);
var tab1 = Titanium.UI.createTab({ window:win1 });
var win2 = Titanium.UI.createWindow({ title:'Tab 2', height: 440, tabBarHidden: true });
var tab2 = Titanium.UI.createTab({ window:win2 });
var win3 = Titanium.UI.createWindow({ title:'Tab 3', height: 440, tabBarHidden: true });
var tab3 = Titanium.UI.createTab({ window:win3 });
var win4 = Titanium.UI.createWindow({ title:'Tab 4', height: 440, tabBarHidden: true });
var tab4 = Titanium.UI.createTab({ window:win4 });
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);
tabGroup.addTab(tab3);
tabGroup.addTab(tab4);  

// open tab group
tabGroup.open();

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

var ctb = new CustomTabBar({
    tabBar: tabGroup,
    imagePath: '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' }
    ]
});

var isHide = false;
btn1.addEventListener('click', function() {
	isHide = !isHide;
	
	if ( isHide ) {
		btn1.title = 'Show Tabs';
		ctb.hide();		
	} else {
		btn1.title = 'Hide Tabs';
		ctb.show(); 
	}
});

customTabBar.js

// https://github.com/netsells/customTabBar

CustomTabBar = function(settings) {
	var tabBarItems = [];
	var	tabCurrent = 0;
	
	var resetTabs = function() {
		for(var i = 0; i < tabBarItems.length; i++) {
			// Clear all the images to make sure only
			// one is shown as selected
			tabBarItems[i].image = null;
		}
	};
	
	var assignClick = function(tabItem) {
		tabItem.addEventListener('click', function(e) {
			// Just fetching the 'i' variable from the loop
			var pos = e.source.pos;

			if (tabCurrent == pos) {
				// TODO
				// Change back to root window, like the native tab action.
    			return false;
	        }		
			
			// Switch to the tab associated with the image pressed
			settings.tabBar.tabs[pos].active = true;
			tabCurrent = pos;

			
			// Reset all the tab images
			resetTabs();
			
			// Set the current tab as selected
			tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;		
		});
	};
	
	// Create the container for our tab items
	var customTabBar = Ti.UI.createWindow({
		height: settings.height,
		bottom: 0
	});
	
	
	for(var i = 0; i < settings.items.length; i++) {
		// Go through each item and create an imageView
		tabBarItems[i] = Titanium.UI.createImageView({
			// background is the default image
			backgroundImage: settings.imagePath + settings.items[i].image,
			
			// image is the selected image
			image: settings.imagePath + settings.items[i].selected,
			width: settings.width,
			height: settings.height,
			left: settings.width * i
		});

		// Pass the item number (used later for changing tabs)
		tabBarItems[i].pos = i;
		assignClick(tabBarItems[i]);

		// Add to the container window
		customTabBar.add(tabBarItems[i]);
	}

	// Display the container and it's items
	customTabBar.open();

	// Set the first item as current :)
	resetTabs();
	tabBarItems[0].image = settings.imagePath + settings.items[0].selected;
	
	return {
		hide: function() { customTabBar.hide(); },
		show: function() { customTabBar.show(); }
	};
};