Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15450] iOS7: Can't style more-tab same as other tabs

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-05-12T14:28:31.000+0000
Affected Version/sn/a
Fix Version/s2014 Sprint 10, 2014 Sprint 10 SDK, Release 3.3.0
ComponentsiOS
Labelsextendedges, ios7, module_tabgroup, navtintcolor, qe-testadded, tabgroup
ReporterFokke Zandbergen
AssigneeVishal Duggal
Created2013-10-09T15:18:14.000+0000
Updated2014-05-20T18:18:21.000+0000

Description

I try to style a tab group's navigation bar background- and tint colors in such a way that both the 4 showing tabs as well as the the automatic *More* tab holding any other tabs look exactly the same. This seems impossible. Run the following code:
Ti.UI.backgroundColor = '#0F0';

var tabGroup = Titanium.UI.createTabGroup({
    barColor: '#F00',
    // Doesn't do anything     navTintColor: '#FFF',
    // Doesn't do good         tintColor: '#FFF'
});

function createTab(nr) {

    var win = Titanium.UI.createWindow({
        backgroundColor: '#fff',
        barColor: '#f00',
        title: 'Window ' + nr,
        navTintColor: '#FFF'
    });

    var label = Titanium.UI.createLabel({
        text: 'Label ' + nr
    });

    win.add(label);

    var tab = Titanium.UI.createTab({
        icon: 'KS_nav_views.png',
        title: 'Tab ' + nr,
        window: win
    });

    return tab;
}

for (var i = 1; i <= 20; i++) {
    tabGroup.addTab(createTab(i));
}

tabGroup.open();

More-Tab extendEdges

When you're on one of the first 4 tabs you'll see the green of Ti.UI.backgroundColor shine through the tab bar, like shown in screenshot A. But on the *More* tab, the tab bar is grey-ish like shown in screenshot B. It looks like this window has extendEdges for bottom enabled by default and setting extendEdges to NONE on the TabGroup doesn't change this.

More-Tab barColor

The above is also true for the nav bar, which is clear red instead of translucent like on the other tabs (screenshots A and B).

More-Tab edit-dialog barColor

When you press the *Edit* button on the *More* tab, you will see that the nav bar for the modal window that pops up is grey-ish (screenshot C), instead of the red I've set on the tab group. Again, I could not find a way to change this.

More-Tab navTintColor

If you go to one of the tabs you find under the *More* tab, you'll see the back arrow is white (screenshot D) because I've set the navTintColor of all windows to green. Now when you return to the *More* tab by pressing that arrow, you'll notice the *Edit* button of the *More* tab now also changed to white (screenshot E and compare B)! You would think you can set navTintColor on the TabGroup as well, but this has no effect. On the other hand, when you set tintColor it does change the *Edit* button's color, but also the color of the active tab's icon, all icons in the *Edit* window that are currently not in the tab bar, as well as the *Done* button on that window (screenshot F). And since we cannot change the barColor of that *Edit* window, this leaves you with a lot of white-on-white.

More-Tab title

The color of the nav bar titles nicely changes to white when you set UIStatusBarStyle to UIStatusBarStyleLightContent. However, only on the *More* tab the title will still be black and I cannot see how to change this (screenshot G).

Attachments

FileDateSize
ScreenshotA.png2013-10-09T15:18:14.000+000031592
ScreenshotB.png2013-10-09T15:18:14.000+000059767
ScreenshotC.png2013-10-09T15:18:14.000+000041384
ScreenshotD.png2013-10-10T06:38:31.000+000032920
ScreenshotE.png2013-10-10T06:38:42.000+000059523
ScreenshotF.png2013-10-10T06:38:53.000+000026086
ScreenshotG.png2013-10-10T07:43:24.000+000045337

Comments

  1. Ingo Muschenetz 2014-03-12

    We don't have enough bandwidth in 3.2.3, so saving this for 3.3.0.
  2. Vishal Duggal 2014-05-06

    Expose titleAttributes, navTintColor and translucent in addition to the current property barColor on the tabGroup to control the "MORE" navigation controller. Test case
       Ti.UI.backgroundColor = '#0F0';
        
       var tabGroup = Titanium.UI.createTabGroup({
           orientationModes:[1,2,3,4],
           barColor: '#FF0000',
           navTintColor: '#FFFFFF',
           titleAttributes:{color:'white'},
       });
        
       function createTab(nr) {
        
           var win = Titanium.UI.createWindow({
               backgroundColor: '#fff',
               title: 'Window ' + nr,
               barColor: '#FF0000',
               navTintColor: '#FFFFFF',
               titleAttributes:{color:'white'},
           });
       
           if(nr%2 == 0) {
             win.barColor = '#00FF00'
             win.titleAttributes = {color:'blue'}
           }
        
           var label = Titanium.UI.createLabel({
               text: 'Label ' + nr
           });
        
           win.add(label);
        
           var tab = Titanium.UI.createTab({
               icon: 'KS_nav_views.png',
               title: 'Tab ' + nr,
               window: win
           });
        
           return tab;
       }
        
       for (var i = 1; i <= 10; i++) {
           tabGroup.addTab(createTab(i));
       }
        
       tabGroup.open();
       
  3. Vishal Duggal 2014-05-06

    Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5664
  4. Samuel Dowse 2014-05-16

    Verified fixed on: Mac OSX 10.9.3 Appcelerator Studio, build: 3.3.0.201405121247 Titanium SDK, build: 3.3.0.v20140516120912 Titanium CLI, build: 3.3.0-dev Alloy: 1.4.0-alpha 'More' tab correctly styled using test code provided by Vishal. Closing.

JSON Source