How to change Tab Bar Item font when selected in Swift

UITabBarController problem and solution

Subscribe to my newsletter and never miss my upcoming articles

Hallo iedereen, Leo hier.

Today we will explore an easy but tricky problem about tab bar controllers. UITabBarController is a very handy component when you want to flat the navigation of your app.

The problem is that the default UITabBarItem don't behave as much as we expected and when we have to custom his attributes so this post is about one problem I found with them.

Good news before we start. I got a new job in Netherlands as iOS Developer 🎉🎉🎉. The good thing is that I'll be fulfilling a long time dream to move to Europe (now I'm in Brazil), the bad thing is that me and my wife HAVE A LOT to do before the immigration. So if I miss some weekly posts until I completely setup in a new country, take my beforehand apologies.

Special shoutout for this week supporter: Tom - You are awesome!

Let's code! But first....

Painting

This is the The River Plaisir Fontaine a 1865 painting from Gustave Courbet. He was a controversial French painter, who bridged the gap between Romanticism and the Impressionist school of painters. He was controversial not only because he addressed social issues with his work, such as peasants and the working condition of the poor, but also because of the unsentimental way in which he portrayed them. He employed spontaneous brush strokes and a roughness of paint texture, which indicated that he was observing his subject directly from life, and thus challenging the academic ideas of the way art should be painted.

I choose this painting because we are talking about fonts. Right?

Problem

You need to change the font of the selected UITabBarItem to a bigger and bold one.

The image below show a tab bar with three items: Airports, Flights and Settings.

Screen Shot 2021-05-27 at 09.29.45.png

If you look closely the selected item label is bigger and bold. To achieve that we need to make two adjustments in the UITabBarController. We need to override two variables the selectedIndex and the selectedViewController.

If you only override the selectedViewController when the app open, it will not modify the font of the default selected item.

So imagine that you have a UITabBarController called MainTabViewController you can add the selection feature using like this:

import UIKit

class MainTabViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }


    override var selectedIndex: Int { // Mark 1
        didSet {
            guard let selectedViewController = viewControllers?[selectedIndex] else {
                return
            }
            selectedViewController.tabBarItem.setTitleTextAttributes([.font: UIFont.boldSystemFont(ofSize: 13)], for: .normal) 
        }
    }

    override var selectedViewController: UIViewController? { // Mark 2
        didSet {

            guard let viewControllers = viewControllers else {
                return
            }

            for viewController in viewControllers {
                if viewController == selectedViewController {
                    viewController.tabBarItem.setTitleTextAttributes([.font: UIFont.boldSystemFont(ofSize: 13)], for: .normal)
                } else {
                    viewController.tabBarItem.setTitleTextAttributes([.font: UIFont.systemFont(ofSize: 12)], for: .normal)
                }
            }
        }
    }
}

The Mark 1 as stated earlier is necessary because the first time the APP open. After that the Mark 2 will be used to set the right font to the right TabBarItem. If is the selected we change to the bold font and a little bigger, else just set the regular font with smaller size.

And the result should be:

Conclusion

Today we see how could we add a little feature in your tab bar to make it more vivid to the user. In another post we can explore more options to make the tab bar more interactive/animated, but this is another day fight.

That's all my people, I hope you liked this as I liked writing. If you want to support this blog you can Buy Me a Coffee or just leave a comment saying hello.

Thanks for the reading and... That's all folks.

credits: image

Interested in reading more such articles from Leonardo Maia Pugliese?

Support the author by donating an amount of your choice.

Comments (2)

Pavel Stepanov's photo

Nice! And congratulations on the new job :)

Leonardo Maia Pugliese's photo

Thanks Pavel! I've worked really hard for this.