[TIMOB-18515] iOS: TabGroup - Support UIEdgeInsets for Tab items so we can have Instagram-like tabs with only images

GitHub Issue	n/a
Type	New Feature
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2015-11-27T10:31:37.000+0000
Affected Version/s	Release 3.5.0
Fix Version/s	Release 5.2.0
Components	iOS
Labels	notable, tab, tabGroup, tabbar
Reporter	Ygor Lemos
Assignee	Hans Knöchel
Created	2015-02-04T18:32:54.000+0000
Updated	2016-02-15T14:12:18.000+0000

Description

The default native way to make a custom (image only) tab bar (like the one on instagram) is to use UIEdgeInsets so we can reposition the image inside the Tab when it has no title text. The best way for making this happen on Titanium is mapping a method and properties, allowing developers to set the Tab Item Insets for the Tab bar image (both for regular as for active images). There is a property on UIBarItem (UIBarButton item inherits from this class) called imageInsets.

tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);

I suggest a Ti method on the Tab object named setImageInsets() in which developers can pass the absolute values for image insets and properly realign images inside the tabs. It would be ideal to have the imageInsets property as well so we can instance the tabs with the proper insets avoiding rendering flicks. This is the best way to have a native tab bar without using the actual solutions of hiding the tab bar and creating a bunch of custom views on the bottom of the app or using unmaintained modules. References: http://stackoverflow.com/questions/10533917/ios-5-custom-tab-bar-image-vertical-alignment http://stackoverflow.com/questions/26494130/remove-tab-bar-item-text-show-only-image

Comments

Rene Pot 2015-11-26

Any progress yet on this issue?
Jason David Miller 2015-11-26

*+1* · I am also very interested in more TabGroup flexibility :)
Matthew Delmarter 2015-11-26

+1

Hans Knöchel 2015-11-27

Happy Thanksgiving! PR: https://github.com/appcelerator/titanium_mobile/pull/7507 Example (1st tab with 6,0,-6,0 insets, 2nd tab no insets): http://abload.de/img/simulatorscreenshot26mbs5n.png Related demo:

   Titanium.UI.setBackgroundColor('#fff');
   var tabGroup = Titanium.UI.createTabGroup();
   
   var win1 = Titanium.UI.createWindow();
   var tab1 = Titanium.UI.createTab({
   	window: win1,
   	icon:'images/tabs/KS_nav_ui.png',
   	iconInsets: {
   		top:6,
   		bottom:-6,
   		right:0,
   		left:0
   	}
   });
   
   var win2 = Titanium.UI.createWindow();
   var tab2 = Titanium.UI.createTab({
   	window: win2,
   	icon:'images/tabs/KS_nav_ui.png',
   	title: "Test"
   });
   
   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);
   
   tabGroup.open();

Chee Kiat Ng 2015-11-27

CR and FT Passed. PR Merged! Happy Thanksgiving!
Carlos Henrique Zinato 2015-11-27

can't believe this! Finally! Valew @Yg
Eric Wieber 2016-01-14

Verified fixed, using: MacOS 10.11.2 (15C50) Studio 4.4.0.201511241829 Ti SDK 5.2.0.v20160114021251 Appc NPM 4.2.2 Appc CLI 5.2.0-224 Xcode 7.2 (7C68) Node v0.12.7 Java 1.7.0_80 Tab icons can now be set with the iconInsets property. Tested using custom app and sample code provided.

JSON Source