[TIMOB-14936] iOS7: Titanium.UI.Tab icon and activeIcon issue and proposed selectedIcon
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2013-08-28T17:42:07.000+0000 |
Affected Version/s | n/a |
Fix Version/s | 2013 Sprint 18, 2013 Sprint 18 API, Release 3.1.3, Release 3.2.0 |
Components | iOS |
Labels | ios7, module_tabgroup, qe-closed-3.1.3, qe-testadded |
Reporter | Matt Raj |
Assignee | Vishal Duggal |
Created | 2013-08-22T13:42:19.000+0000 |
Updated | 2014-07-30T01:28:21.000+0000 |
Description
According to ios7 UIKit User Interface Catalog under Tab Bars:
Each item in a tab bar can have a custom selected image and unselected image. You can specify these images when you initialize a tab bar item using the initWithTitle:image:selectedImage: method.
When you look at the bundled ios7 apps from Apple, you'll notice that they use outline icons for the unselected tabs, and then the icon subtly changes to a new image for the selected tab. This is an important feature of ios7 tabs.
sdk 3.1.2 has properties for icon and activeIcon, though the activeIcon doesn't work. If you specify the activeIcon, then you get a non-tinted icon that acts as both the icon and activeIcon. In effect, you never see the activeIcon image, just the icon without tinting.
Ideally there would be icon and selectedIcon properties and let ios7 do the coloring/tinting.
// In this screenshot for the code using a new project,
// the icon and activeIcon properties are set on the first two tabs.
// The first tab is selected and should have the activeIcon, it shows the icon.
// Tab 3 is showing the selected image for reference and it does not have activeIcon set.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
// create base UI tab and root window
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'tab-groups.png',
activeIcon:'tab-groups-selected.png',
title:'Tab 1',
window:win1
});
// create controls tab and root window
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'tab-groups.png',
activeIcon:'tab-groups-selected.png',
title:'Tab 2',
window:win2
});
var win3 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab3 = Titanium.UI.createTab({
icon:'tab-groups-selected.png',
title:'Tab 3',
window:win3
});
// add tabs
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.addTab(tab3);
// open tab group
tabGroup.open();
Attachments
File | Date | Size |
---|---|---|
iOS Simulator Screen shot Aug 22, 2013 9.36.10 AM.png | 2013-08-22T13:42:19.000+0000 | 21286 |
Test Code
Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4607 Change Log: New property on tabGroup - tabsTintColor icon and activeIcon can now be specified to be rendered in original or template mode on IOS7+. Properties iconIsMask, activeIconIsMask. Default - true Known Issue: 1. On IOS7+ activeTabIconTint property of tabGroup is not being honored. No idea why. tabsTintColor seems to work better (though it tints the title as well and works on active tab only though the docs say it should apply to all tabs.) Docs will be updated along with the windowRefactor doc PR.
Backport PR https://github.com/appcelerator/titanium_mobile/pull/4613
Tested the above code with Images folder from KS. Verified the fix with: Mac osx 10.8.4 Mountain Lion Appcelerator Studio, build: 3.1.3.201308252005 Titanium SDK, build:3.1.3.v20130828104626 alloy:1.2.1 CLI:3.1.2 Xcode5-DP6 KS 3_1_X branch Devices: Ipad4 iOS 7 beta6(11A4449d) iPnone5 iOS 7 beta6
Vishal Duggal, so what I can do if I want to change color on all tabs ,but tabsTinColor doesn't work properly...?
tabsTintColor is not being honored... for some reason all icons are set to: #929292