[TIMOB-15450] iOS7: Can't style more-tab same as other tabs
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2014-05-12T14:28:31.000+0000 |
Affected Version/s | n/a |
Fix Version/s | 2014 Sprint 10, 2014 Sprint 10 SDK, Release 3.3.0 |
Components | iOS |
Labels | extendedges, ios7, module_tabgroup, navtintcolor, qe-testadded, tabgroup |
Reporter | Fokke Zandbergen |
Assignee | Vishal Duggal |
Created | 2013-10-09T15:18:14.000+0000 |
Updated | 2014-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 ofTi.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 thenavTintColor
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 setUIStatusBarStyle
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
File | Date | Size |
---|---|---|
ScreenshotA.png | 2013-10-09T15:18:14.000+0000 | 31592 |
ScreenshotB.png | 2013-10-09T15:18:14.000+0000 | 59767 |
ScreenshotC.png | 2013-10-09T15:18:14.000+0000 | 41384 |
ScreenshotD.png | 2013-10-10T06:38:31.000+0000 | 32920 |
ScreenshotE.png | 2013-10-10T06:38:42.000+0000 | 59523 |
ScreenshotF.png | 2013-10-10T06:38:53.000+0000 | 26086 |
ScreenshotG.png | 2013-10-10T07:43:24.000+0000 | 45337 |
We don't have enough bandwidth in 3.2.3, so saving this for 3.3.0.
Expose titleAttributes, navTintColor and translucent in addition to the current property barColor on the tabGroup to control the "MORE" navigation controller. Test case
Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5664
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.