UITabBar Customizations

bar-tab

In an Instagram Clone app I started working on I had to make the following two customizations in order to match Instagram.

  1. Changing the tint color on the tab bar and

  2. Removing the bar item text in the tab bar

1. Changing the tint color on the Tab Bar

I choose to do this in the AppDelegate in the didFinishLaunchingWithOptions method by adding the following line:

UITabBar.appearance().tintColor = .black

This changed the tab bar color across the app in one line.

2. Removing the bar item text in the tab bar

Since I added the Tab Bar Controller in Storyboard – that is where I went to make this change. I selected the Tab Bar Item and in it’s Attribute Inspector I removed the Title.

bar-item-attributes

This does not automatically center the Image vertically. The fix for that is to nudge the Image down by say 5 points in the Size Inspector by adding 5 points to the Top image inset and -5 points to the Bottom image inset.

bar-item-size-inspector

That’s all there is to it. With these two customizations the App’s Tab Bar has the proper color and look.

tab-bar

Leave a comment