Tab Bars have been around since the very first iPhone. They are a fantastic way to organize the top level screens in our app, and give users a quick way to get to each. Today we'll check out the latest improvements to how e can customize the look and feel of UITabBars in our app. Let's begin.
First up: Badge Customization.
For years we've had to resort to custom drawing or other methods to change how the badge would appear on a tab bar in our app.
In iOS 10, Apple has added a couple of features to allow us to completely customize how this looks with only a few lines of code.
Let's try this out. First, we'll set a badge value on one of the tabs:
func configureTabBar() {
guard let tabBarItem = self.tabBarItem else { return }
tabBarItem.badgeValue = "268"
}
Nice. Now let's customize that badge. All we need is one function and some attributes:
tabBarItem.setBadgeTextAttributes([
NSFontAttributeName : UIFont(name: "AvenirNextCondensed-Medium", size: 14.0)
], for: .normal)
Neat.
Next, we can now easily change the background color of the badge:
Lastly, we'll customize the tabs themselves using one final new feature, unselectedItemTintColor
(Finally):
guard let tabBar = self.tabBarController?.tabBar else { return }
tabBar.tintColor = UIColor(white: 0.1, alpha: 1.0)
tabBar.unselectedItemTintColor = UIColor.lightGray
Success!