Is there a way to change the text position in UITabBar or UITabBarItem?

Question

This is a custom tab bar I intended to put up on the screen. However, my partner want the text to be slightly up. How can I do so?

Solution 1

Why don't you just have an empty title property for your view controller and add the title to your custom images for the tab?

UPDATE: For the sake of completeness of answer; from comments and ios tabbar put text in the middle when no image

[tab.tabBarItem setTitlePositionAdjustment:UIOffsetMake(0, -10)]

Solution 2

You probably want to apply this offset globally, so I'd suggest

Obj-C

[UITabBarItem appearance].titlePositionAdjustment = UIOffsetMake(0, -4);

Swift:

UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -4)

Solution 3

Here's the same trick with Interface builder:

Solution 4

You can do it directly from Interface Builder (Custom Offset in Title Position), like this:

Solution 5

For iOS 13 and later:

if #available(iOS 13, *) {
        let appearance = UITabBarAppearance()
           appearance.stackedLayoutAppearance.selected.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -10)
           appearance.stackedLayoutAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -10) 
     }

View more solutions

Comments

[user4234]

Good enough. I found a better way:stackoverflow.com/questions/12586411/…

[user4234]

ended up selecting your answers because it's more comprehensive :)

[LKM]

Why (0, -10) ? I don't understand... Can you explain me?

[Jeremy Wiebe]

@LKM 0 means no horizontal offset, -10 moves the text up.

[262Hz]

correction for Swift: UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -4)

[benrudhart]

If you just want to adjust the vertical position (in swift) you might also use this UITabBarItem.appearance().titlePositionAdjustment.vertical = -4

[Nike Kov]

You also can do it in storyboard.

[Starwave]

Just tried it and it works, however, when you go into landscape mode, your text will not be centered to your image anymore (because in landscape mode image and label are positioned horizontaly, not vertically)

[craft]

Nice one! Also introduces the user defined runtime attributes section, thanks!

[Utku Dalmaz]

saved my day !!