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 Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s