iOS Week: Customising UITabBarItems

All this week I’ll be showing a quick tip or technique you can use to improve your iOS codebase.

In iOS 11, on an iPad, UITabBarItems will display with the title aligned to the right of the image. This looks kinda cool. On iPhone it wouldn’t really make sense, but if your app only has two or three tabs, you can try it out and see what it’s like. Here’s the effect:

Screen Shot 2018-03-27 at 15.23.53.png

So with a bit of Googling you might see something like UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -15). Try this out and you’ll see the titles of your UITabBar items go up vertically.

Screen Shot 2018-03-27 at 15.30.56.png

Great, so now we just need to offset them in the X axis. So add some sugar to that horizontal parameter and

Screen Shot 2018-03-27 at 15.31.20.png

oh wait that’s not right it’s just moved everything over


Ok well how about we make our own UITabBarController-type implementation and just hack it into our project and boom easy as pie right.

Or you could just subclass UITabBarController and in viewDidLoad() just go through each view controller, get its tabBaritem, create a new image using UIGraphics with the title drawn to the right of the image and then set the image to be the new image and then nil out the title.

Screen Shot 2018-03-27 at 15.34.19.png

Screen Shot 2018-03-27 at 15.34.45.png

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s