Norway


Topics

Topics

Tab Bars have been around since the very first iPhone. They are a fantastic way to organize the level screens in our , 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 .

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 , 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 1 - #268: What’s New in Tab Bar Customization 🎨 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

Nice. Now let’s customize that badge. All we need is one function and some attributes:

tabBarItem.setBadgeTextAttributes([
  NSFontAttributeName : UIFont(name: "AvenirNextCondensed-Medium", : 14.0)
], for: .normal)

- 268 2 - #268: What’s New in Tab Bar Customization 🎨 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

Neat.

Next, we can now easily change the background color of the badge:

- 268 3 - #268: What’s New in Tab Bar Customization 🎨 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

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

- 268 4 - #268: What’s New in Tab Bar Customization 🎨 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

Success!





Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here