Question

I have an app that contains a messaging system. It consists of a TableView that splits off into two TabGroups, using a NavGroup (I’m using Ti 1.7.5).

The problem I’m seeing is two fold;

• Both title bars of the NavGroup and the Tab are being displayed, and
• The TabGroup’s title is not being displayed in the NavGroup title bar.

The following screenshot illustrates both problems:

Code (please note this is heavily summarised):

csu.module.messages.createMainWindow = function() {
    csu.module.messages.mainWindow = Ti.UI.createWindow($$.moduleMainWindow);
    csu.module.messages.navGroupContainer = Ti.UI.createWindow($$.modalContainer);
    var mainTableView = Ti.UI.createTableView($$.tableView);

    csu.module.messages.navGroup = Ti.UI.iPhone.createNavigationGroup({
        window: csu.module.messages.mainWindow
    }); 

    ...

    mainTableView.addEventListener('click', function(e){
        // Event info
        var index = e.index, section = e.section, row = e.row, rowData = e.rowData;

        switch(index) {
            case 0:
                // inbox;
                csu.module.messages.inboxView = csu.module.messages.createInboxView(); // returns the tabgroup
                csu.module.messages.navGroup.open(csu.module.messages.inboxView);
                break;
            case 1:
                // archive;
                csu.module.messages.archiveView = csu.module.messages.createArchiveView(); // Returns another tabgroup
                csu.module.messages.navGroup.open(csu.module.messages.archiveView);
                break;
        }
    });

    ...

    csu.module.messages.mainWindow.add(mainTableView);
    csu.module.messages.navGroupContainer.add(csu.module.messages.navGroup);
}

csu.module.messages.createInboxView = function() {
    var tabGroup = Ti.UI.createTabGroup({
        title: 'Inbox',
        navBarHidden: false,
        backgroundColor: '#000000',
        barColor: csu.ui.theme.headerColor // black
    });

    var criticalInbox = csu.module.messages.createListWindow(m_Config.MESSAGE_TYPE_CRITICAL, true);

    csu.module.messages.criticalInboxTab = Ti.UI.createTab({
        title: 'Critical',
        icon: 'images/tab-critical.png',
        window: criticalInbox
    });

    ...

    // two other tabs are created

    tabGroup.addTab(csu.module.messages.criticalInboxTab);
    tabGroup.addTab(csu.module.messages.importantInboxTab);
    tabGroup.addTab(csu.module.messages.generalInboxTab);

    return tabGroup;
};

csu.module.messages.createListWindow = function(listType, isInbox) {
    var tabWindow, title, tableView;

    switch(listType) {
        case m_Config.MESSAGE_TYPE_CRITICAL:
            title = 'Critical';
            break;
        case m_Config.MESSAGE_TYPE_IMPORTANT:
            title = 'Important';
            break;
        case m_Config.MESSAGE_TYPE_GENERAL:
            title = 'General';
            break;
    };

    tableView = Ti.UI.createTableView();
    var tableData = new Array();
    tableView.setData(tableData);

    tabWindow = Ti.UI.createWindow({
        title: title,
        navBarHidden: false         
    });

    tabWindow.add(tableView);

    return tabWindow;
}

Does anyone know of a work around or something to get the title in the Navigation bar from the TabGroup? Is this a bug?

Your assistance is appreciated.

Answer 1

Titanium discourage the use of tab groups within navigation groups as they are both window managers, displaying a titlebar at the top.

See: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window

While it doesn’t look the same, a tabbed bar should be used instead.