Customize the look of the tab bar in iOS Appcelerator Titanium

app.js

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

/**
 * 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.

THANKYOU! THIS WORKED PERFECTLY!

@haseloff THIS IS BECAUSE Ti.include('overrideTabs.js'); WAS DEPRECATED, I USED IT AS GLOBAL FUNCTION AND WORKED.

Hello Thanks for this wonderful code. Works great for me. I have only one question.. When I have 4 tabs and each tab name length is 4 or 5 chars. I feel fontsize is bigger. Is there anyway we can decrease the fond size .. please help me..

This needs a screenshot. All UI code does, really.
I have no idea what you're trying to do or what you achieved.

Thank you for your snippet illustrating the undocumented TabGroup.overrideTabs property. Didn't know this was accessible. Thanks for sharing.