readme.md

Custom Tab Controller written in Titanium Alloy

• iOS native tabControllers have limited customisation options.
• unlike Android, you cannot specify separate selected and disabled images for each tab.
• you can only specify a single transparent icon.
• This custom Tab Controller allows you to specify your own pngs for the selected and deselected state.
• enjoy and codestrong!

app.tss

/* Window and View Styling */

'.container': {
  height: Ti.UI.FILL,
	width: Ti.UI.FILL,
	backgroundColor: 'white'
}

/* TabGroup styling */
'#tabGroup':{
    zIndex: 			9,
	bottom: 			0,
	height: 			'55dp',
	width: 				Ti.UI.FILL,
	backgroundColor: 	'transparent',
	layout: 			'horizontal'
}


'#tab1':{
	top: 				'0dp',
	left:				'0dp',
	width: 				'107dp',
	height: 			'55dp',
	backgroundImage: 	'/images/tab1_active.png',
	disabledImage: 		'/images/tab1.png',
	selectedImage: 		'/images/tab1_active.png',
	zIndex:				3,
	childTab: 			'tabOneView',
	selected: 			true
}

'#tab2':{
	top: 				'0dp',
	left:				'0dp',
	width: 				'106dp',
	height: 			'55dp',
	backgroundImage: 	'/images/tab2.png',
	disabledImage: 		'/images/tab2.png',
	selectedImage: 		'/images/tab2_active.png',
	zIndex:				2,
	childTab: 			'tabTwoView',
	selected: 			false
}

'#tab3':{
	top: 				'0dp',
	left:				'0dp',
	width: 				'107dp',
	height: 			'55dp',
	backgroundImage: 	'/images/tab3_settings.png',
	disabledImage: 		'/images/tab3_settings.png',
	selectedImage: 		'/images/tab3_settings_active.png',
	zIndex:				2,
	childTab: 			'tabThreeView',
	selected: 			false
}

common.js

exports.tabGroupClicked = function(e){
    if (Alloy.Globals.selectedTab !== e.source){
      
      // reset the selected tab
    	Alloy.Globals.previousTab = Alloy.Globals.selectedTab;
    	Alloy.Globals.selectedTab = e.source;
    	
    	// change the selected flag
    	Alloy.Globals.previousTab.selected = false;
    	Alloy.Globals.selectedTab.selected = true;

    	// change the background image
    	Alloy.Globals.previousTab.backgroundImage = Alloy.Globals.previousTab.disabledImage;	
    	Alloy.Globals.selectedTab.backgroundImage = Alloy.Globals.selectedTab.selectedImage;

    	// swapping the zindexes of the childTabs
    	Alloy.Globals.parent.getView(Alloy.Globals.previousTab.childTab).getView().zIndex=2;
    	Alloy.Globals.parent.getView(Alloy.Globals.selectedTab.childTab).getView().zIndex=3;
	}
}

index.js

var common = require('common');

function tabGroupClicked(e){
    common.tabGroupClicked(e);
}

Alloy.Globals.parent = $;
Alloy.Globals.tabGroup = $.tabGroup;
Alloy.Globals.selectedTab = $.tab1;

$.index.open();

index.xml

<Alloy>
  
  		<Window id="index" class="container">
	
	 			<View id="tabGroupWindow" zIndex="0" class="container">
					<Require src="tabThreeView" id="tabThreeView"/>
					<Require src="tabTwoView" id="tabTwoView"/>
					<Require src="tabOneView" id="tabOneView" />
				</View>

				<!-- Custom tab group -->
				<View id="tabGroup">		
					<View id="tab1" onClick="tabGroupClicked"></View>
					<View id="tab2" onClick="tabGroupClicked"></View>
					<View id="tab3" onClick="tabGroupClicked"></View>
				</View>
			
			</Window>
</Alloy>