anthonychung · November 13, 2017 07:27 · Apr 3, 2013 · Apr 3, 2013
diff --git a/readme.md b/readme.md
@@ -3,4 +3,5 @@
 - 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.
+- This custom Tab Controller allows you to specify your own pngs for the selected and deselected state.
+- enjoy and codestrong!
diff --git a/app.tss b/app.tss
@@ -0,0 +1,58 @@
+/* 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
+}
+
diff --git a/common.js b/common.js
@@ -0,0 +1,20 @@
+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;
+	}
+}
diff --git a/index.js b/index.js
@@ -0,0 +1,11 @@
+var common = require('common');
+
+function tabGroupClicked(e){
+    common.tabGroupClicked(e);
+}
+
+Alloy.Globals.parent = $;
+Alloy.Globals.tabGroup = $.tabGroup;
+Alloy.Globals.selectedTab = $.tab1;
+
+$.index.open();
diff --git a/index.xml b/index.xml
@@ -0,0 +1,19 @@
+<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>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,6 @@
+# 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.