[TIMOB-3557] iOS: Custom TabGroup Design

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2013-03-12T16:33:22.000+0000
Affected Version/s	n/a
Fix Version/s	Release 3.1.0, 2013 Sprint 05 API, 2013 Sprint 05
Components	iOS
Labels	api, insight, module_tabgroup, qe-testadded, release-note
Reporter	Doney
Assignee	Blain Hamon
Created	2011-04-15T03:46:39.000+0000
Updated	2013-10-23T23:15:27.000+0000

Description

Currently, there is no other way to tweak the TabGroup-bar design other than creating a set of cumbersome views, labels, images etc.

Can we please get some more freedom in this design process? Being able to edit the icon-mask of active (currently blue glossy) and inactive (gray) tab icons, backgroundImage of the tabBar and backgroundImage of the tabs themselves would help a lot. It seems that this is something that is relatively easy to do in Objective-C, if you have experience in that language.

This would allow beautiful designs like:
http://dribbble.com/system/users/1356/screenshots/11904/iphone-dribble2.png?1302007439" alt="Custom TabGroup">

Comments

Blain Hamon 2013-03-07

In terms of what native gives us, we have the following yet to expose: On Tab bar itself: 5.0 * selectedImageTintColor 5.0 * backgroundImage 5.0 * selectionIndicatorImage 5.0 * shadowImage 6.0 On individual tabs: * finishedSelectedImage 5.0 * finishedUnselectedImage 5.0 Of these, only backgroundImage and selectionIndicatorImage have analogs in other OSes (MW's tabsBackgroundImage and activeTabBackgroundImage) finishedSelectedImage will become activeIcon on the tab (with standard icon being finishedUnselectedImage if and only if activeIcon is set) shadowImage will still be named such. selectedImageTintColor will become activeTabIconTint.

Blain Hamon 2013-03-08

Test code:

   var tabGroup = Titanium.UI.createTabGroup(
   {
   	tabsBackgroundImage:'images/BUTT_drk_off.png',
   	activeTabBackgroundImage:'images/BUTT_grn_off.png',
   	shadowImage: 'images/corkboard.jpg',
   	activeTabIconTint: 'purple'
   });
   var win1 = Titanium.UI.createWindow();
   var tab1 = Titanium.UI.createTab({
   	window:win1,
   	icon:'images/send.png',
   	activeIcon:'images/send_selected.png',
   	title:'tab1',
   });
   
   var win2 = Titanium.UI.createWindow();
   var tab2 = Titanium.UI.createTab({
   	icon:'images/tabs/KS_nav_ui.png',
   	title:'tab2',
   	window:win2
   });
   
   
   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);
   tabGroup.open();

Blain Hamon 2013-03-08

https://github.com/appcelerator/titanium_mobile/pull/3942
Sabil Rahim 2013-03-12

CR & FR
Eric Merriman 2013-03-30

Verified feature implemented with: Mac OS 10.8.3 SDK: 3.1.0.v20130329175112 Titanium Studio, build: 3.1.0.201303261815 CLI 3.0.25-alpha node-appc 1.0.29-alpha iPhone 5 iOS 6.0 iPhone 4 Simulator iOS 6.1 iPad Simulator iOS 5.0

JSON Source