Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14936] iOS7: Titanium.UI.Tab icon and activeIcon issue and proposed selectedIcon

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-08-28T17:42:07.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 18, 2013 Sprint 18 API, Release 3.1.3, Release 3.2.0
ComponentsiOS
Labelsios7, module_tabgroup, qe-closed-3.1.3, qe-testadded
ReporterMatt Raj
AssigneeVishal Duggal
Created2013-08-22T13:42:19.000+0000
Updated2014-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

FileDateSize
iOS Simulator Screen shot Aug 22, 2013 9.36.10 AM.png2013-08-22T13:42:19.000+000021286

Comments

  1. Vishal Duggal 2013-08-27

    Test Code
       var tabGroup = Titanium.UI.createTabGroup(
       {
           backgroundColor:'white',
           activeTabIconTint: 'red', //FOR IOS 5 & 6
           tabsTintColor:'red' //FOR IOS 7
       });
       var win1 = Titanium.UI.createWindow();
       var tab1 = Titanium.UI.createTab({
           window:win1,
           icon:'images/chat.png',
           activeIcon:'images/send_selected.png',
           title:'tab1',
           iconIsMask:false,
           activeIconIsMask:false
       });
        
       var win2 = Titanium.UI.createWindow();
       var tab2 = Titanium.UI.createTab({
           icon:'images/tabs/KS_nav_views.png',
           title:'tab2',
           window:win2
       });
        
       var win3 = Titanium.UI.createWindow();
       var tab3 = Titanium.UI.createTab({
           window:win3,
           icon:'images/tabs/KS_nav_views.png',
           activeIcon:'images/send_selected.png',
           title:'tab3',
           iconIsMask:false,
           activeIconIsMask:false
       });
        
       var win4 = Titanium.UI.createWindow();
       var tab4 = Titanium.UI.createTab({
           window:win4,
           icon:'images/tabs/KS_nav_views.png',
           activeIcon:'images/send_selected.png',
           title:'tab3',
           activeIconIsMask:false
       });
        
       tabGroup.addTab(tab1);
       tabGroup.addTab(tab2);
       tabGroup.addTab(tab3);
       tabGroup.addTab(tab4);
       tabGroup.open();
       
  2. Vishal Duggal 2013-08-27

    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.
  3. Vishal Duggal 2013-08-28

    Backport PR https://github.com/appcelerator/titanium_mobile/pull/4613
  4. Olga Romero 2013-08-28

    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
  5. Matej 2014-01-02

    Vishal Duggal, so what I can do if I want to change color on all tabs ,but tabsTinColor doesn't work properly...?
  6. Joseph Sachs 2014-07-30

    tabsTintColor is not being honored... for some reason all icons are set to: #929292

JSON Source