Change iOS Default UI Tab Bar Font and Size

Rahul Singha Roy
2 min readJun 28, 2018

--

Have you ever tried it ?? impossible ?? let’s check it out :)

In iOS project we often use UITabBarController to make the navigation simple and easy. Another benefit of using the Default Tab Bar is we don’t have to worry about a lot of things while coding,

like…

  1. The space between the 2 icons
  2. The image and the title spacing
  3. The normal and selected colors for each icon menus
    …. and many more

So!! Tab Bars are good right ???

  • But can you customize it as per the required project UI design ??

Yes absolutely !! we can customize it as per our requirement but we also have some limitations!

let’s talk about the things we can customize first -

* Color of the icon and Title
* Font & size
* Background color and many more …

The default font and size of the default Tab Bar does not always look good, sometimes they feel little small and sometimes they didn’t match with the project fonts at all.

So! how do we customize them?

The code is very simple, To customize a UI Tab Bar we need the help of UIAppearance Protocol in iOS.
“A collection of methods that gives you access to the appearance proxy for a class.
You can customize the appearance of instances of a class by sending appearance modification messages to the class’s appearance proxy. “

You can find out more about this on the Apple developer website —
https://developer.apple.com/documentation/uikit/uiappearance

Let’s jump in the code and change some fonts -

___________________________________________________________________

let fontAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 12.0)]
UITabBarItem.appearance().setTitleTextAttributes(fontAttributes, for: .normal)

___________________________________________________________________

You can also set any custom fonts in the code -

let fontAttributes = [NSAttributedStringKey.font: UIFont(name: “Font_Name”, size: Font_Size)]
UITabBarItem.appearance().setTitleTextAttributes(fontAttributes, for: .normal)

___________________________________________________________________

Bammmm!!!! Its … Done

You have done it !!!!

Hope you like my article … please comment if you have any question related to Tab Bar… and also give me a feedback about the blog, if something needs to improve :)

--

--