Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-18515

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

    Details

    • Story Points:
      3
    • Sprint:
      2015 Sprint 24 SDK

      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

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                hknoechel Hans Knöchel
                Reporter:
                ygbr Ygor Lemos
                Reviewer:
                Chee Kiat Ng (Inactive)
              • Watchers:
                18 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Source Code