Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-3557] iOS: Custom TabGroup Design

GitHub Issuen/a
TypeNew Feature
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2013-03-12T16:33:22.000+0000
Affected Version/sn/a
Fix Version/sRelease 3.1.0, 2013 Sprint 05 API, 2013 Sprint 05
ComponentsiOS
Labelsapi, insight, module_tabgroup, qe-testadded, release-note
ReporterDoney
AssigneeBlain Hamon
Created2011-04-15T03:46:39.000+0000
Updated2013-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

  1. 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.
  2. 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();
       
  3. Blain Hamon 2013-03-08

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

    CR & FR
  5. 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