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!