Hallo iedereen, Leo hier. This week I was challenged on How to change the Tab Bar Item font when selected in Swift.
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 doesn’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 the Netherlands as an 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 my wife and IHAVE A LOT to do before immigration. So if I miss some weekly posts until I am completely set up in a new country, take my beforehand apologies.
Special shoutout for this week’s supporter: Tom – You are awesome!
Let’s code! But first…
Painting of The Day
This is The River Plaisir Fontaine an 1865 painting from Gustave Courbet. He was a controversial French painter, who bridged the gap between Romanticism and the Impressionist school of painters.
The controversy was 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 roughness of paint texture, which indicated that he was observing his subject directly from life, thus challenging the theoretical ideas of the way art should be painted.
I choose this painting because we are talking about fonts. Right?
Problem – Change Tab Bar Item Font
You need to change the font of the selected UITabBarItem to a bigger and bold one.
The image below shows a tab bar with three items: Airports, Flights, and Settings.
If you look closely the selected item label is bigger and bold. To achieve that we need to make two adjustments to the UITabBarController. We need to override two variables the selectedIndex and the selectedViewController.
If you only override the selectedViewController when the app opens, 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 this:
Mark 1 as stated earlier is necessary because the first time the APP opens. After that, Mark 2 will be used to set the right font to the right TabBarItem. If is selected we change to the bold font and a little bigger, else just set the regular font with a smaller size.
And the result should be:
Summary – Change Tab Bar Item Font
Today we see how we could 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 reading this article as much as I enjoyed writing it. If you want to support this blog you can Buy Me a Coffee or leave a comment saying hello.
You can also sponsor posts and I’m open to freelance writing! You can reach me on LinkedIn or Twitter and send me an e-mail through the contact page.
Thanks for reading and… That’s all folks.
Credits: image
