public
Last active

Customize the look of the tab bar in iOS Appcelerator Titanium

  • Download Gist
app.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Ti.include('overrideTabs.js');
 
/*
This is a typical new project -- a tab group with three tabs.
*/
 
var tabGroup = Ti.UI.createTabGroup();
 
/*
Tab 1.
*/
var win1 = Ti.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff' });
var tab1 = Ti.UI.createTab({
backgroundImage: 'appicon.png',
window: win1
});
var button1 = Ti.UI.createButton({
title: 'Open Sub Window',
width: 200, height: 40
});
button1.addEventListener('click', function (evt) {
tab1.open(Ti.UI.createWindow({ title: 'Tab 1 Sub Window', backgroundColor: '#fff' }));
});
win1.add(button1);
tabGroup.addTab(tab1);
 
/*
Tab 2.
*/
tabGroup.addTab(Ti.UI.createTab({
backgroundImage: 'appicon.jpg',
window: Ti.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff' })
}));
 
/*
Tab 3.
*/
tabGroup.addTab(Ti.UI.createTab({
backgroundImage: 'appicon.png',
window: Ti.UI.createWindow({ title: 'Tab 3', backgroundColor: '#fff' })
}));
 
/*
Now call the overrideTabs function, and we're done!
*/
overrideTabs(
tabGroup, // The tab group
{ backgroundColor: '#f00' }, // View parameters for the background
{ backgroundColor: '#999', color: '#000', style: 0 }, // View parameters for selected tabs
{ backgroundColor: '#333', color: '#888', style: 0 } // View parameters for deselected tabs
);
 
tabGroup.open();
overrideTabs.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
/**
* Override a tab group's tab bar on iOS.
*
* NOTE: Call this function on a tabGroup AFTER you have added all of your tabs to it! We'll look at the tabs that exist
* to generate the overriding tab bar view. If your tabs change, call this function again and we'll update the display.
*
* @param tabGroup The tab group to override
* @param backgroundOptions The options for the background view; use properties like backgroundColor, or backgroundImage.
* @param selectedOptions The options for a selected tab button.
* @param deselectedOptions The options for a deselected tab button.
*/
function overrideTabs(tabGroup, backgroundOptions, selectedOptions, deselectedOptions) {
// a bunch of our options need to default to 0 for everything to position correctly; we'll do it en mass:
deselectedOptions.top = deselectedOptions.bottom
= selectedOptions.top = selectedOptions.bottom
= backgroundOptions.left = backgroundOptions.right = backgroundOptions.bottom = 0;
 
// create the overriding tab bar using the passed in background options
backgroundOptions.height = 50;
var background = Ti.UI.createView(backgroundOptions);
 
// pass all touch events through to the tabs beneath our background
background.touchEnabled = false;
 
// create our individual tab buttons
var increment = 100 / tabGroup.tabs.length;
deselectedOptions.width = selectedOptions.width = increment + '%';
for (var i = 0, l = tabGroup.tabs.length; i < l; i++) {
var tab = tabGroup.tabs[i];
 
// position our views over the tab.
selectedOptions.left = deselectedOptions.left = increment * i + '%';
 
// customize the selected and deselected based on properties in the tab.
selectedOptions.title = deselectedOptions.title = tab.title;
if (tab.backgroundImage) {
selectedOptions.backgroundImage = deselectedOptions.backgroundImage = tab.backgroundImage;
}
if (tab.selectedBackgroundImage) {
selectedOptions.backgroundImage = tab.selectedBackgroundImage;
}
if (tab.deselectedBackgroundImage) {
deselectedOptions.backgroundImage = tab.deselectedBackgroundImage;
}
selectedOptions.visible = false;
background.add(tab.deselected = Ti.UI.createButton(deselectedOptions));
background.add(tab.selected = Ti.UI.createButton(selectedOptions));
}
 
// update the tab group, removing any old overrides
if (tabGroup.overrideTabs) {
tabGroup.remove(tabGroup.overrideTabs);
}
else {
tabGroup.addEventListener('focus', overrideFocusTab);
}
 
tabGroup.add(background);
tabGroup.overrideTabs = background;
}
 
function overrideFocusTab(evt) {
if (evt.previousIndex >= 0) {
evt.source.tabs[evt.previousIndex].selected.visible = false;
}
evt.tab.selected.visible = true;
}

hi,

I want to be able to simulate the behavior of the normal tab when you press it a second time and the tab group returns to the root window. I have tries several ways but failed so far. Do you know how to do this?

Regards

Jonathan Carter

I don't get it. I've manipulated this code and it didn't work. I've pasted this code in verbatim and it didn't work. I've even just downloaded this code and created a new project. I keep getting "Could not find the file overrideTabs.js". I've placed it in the same file as my app.js, I've put it in my resources file, I've put them both out in my main, I'm lost.

Can anyone tell me where the files are supposed to be located and if the are calling to each other appropriately? I've even changed line Ti.include line to be anatomocally correct: Ti.include('resources/overrideTabs.js') so that it points to wherever I've adjusted the file.

Any assist? Thanks in advance.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.