Back to blog

How To: Working With Tab Bar Controllers In Swift

---

A tab bar controller is a powerful UI component for iOS apps. It’s a container view, and you use it to group view controllers together. They give your app’s user access to the most important screens of your app.

In this mobile app development tutorial, you’ll learn:

• How to work with tab bar controllers
• How you can customize the tab bar items
• Why tab bars are useful in iOS apps
• How to combine them with a navigation controller, and vice versa

What’s A Tab Bar Controller?

A tab bar controller, of class UITabBarController, is a container view controller. It typically organizes 3-5 view controllers in a group. The user of your app can switch between view controllers by tapping one of the tabs in the tab bar at the bottom of the screen.

A tab bar is often used to switch between different, but comparable view controllers. In the above example, the first tab represents the Home User Interface (UI). The next tab, a magnifying glass icon, enables the user to search in the app. Assuming that this app displays Instagram-like social media posts, the Search UI is used to search posts.

The pattern of representing similar data points with different UIs is common usage of the tab bar controller. In many apps, they’re used to give the user access to main parts and UIs of the app. You can also see this in default iOS apps, such as the Phone and Clock apps.

Tab bar-style navigation systems are a staple in smartphone apps. You see them in iOS and Android apps, but the tab bar UI component goes as far back as Palm OS and Symbian. Tab bars are effective UIs for thumbs and fingers. When you hold a phone in your hand, your thumb is close to the bottom of the screen. It’s natural to navigate an app this way!

Configuring A Tab Bar’s View Controllers

Working with a tab bar controller on iOS is simple. You only need an instance of UITabBarController. You then assign view controllers to the viewControllers property of the controller. Let’s take a look at an example!

let mainVC = MainViewController()
let searchVC = SearchViewController()
let profileVC = ProfileViewController()

let tabBarController = UITabBarController()
tabBarController.viewControllers = [mainVC, searchVC, profileVC]

In the above code, we’ve first created 3 different view controllers. Then, we’re creating an instance of UITabBarController(). Finally, the 3 view controllers are assigned to the viewControllers property of tabBarController by making use of an array.

You can use the selectedViewController property to indicate which view controller should be shown initially. You can also change them by using the array index and the selectedIndex property. Like this:

// Use the view controller reference to select the second tab
tabBarController.selectedViewController = searchVC

// Use the array index to select the third tab
tabBarController.selectedIndex = 2

Depending on the structure of your app, you can use the view property of a UITabBarController instance to show it on screen. Consider that, for example, that the controller is the root view controller of your app. Here’s how:

let tabBarController = UITabBarController()
tabBarController.viewControllers = [mainVC, searchVC, profileVC]

window!.rootViewController = tabBarController

You use the above code in the application(_:didFinishLaunchingWithOptions:) function of the AppDelegate class. It’ll assign the tab bar controller to the rootViewController property of the app window, which will effectively make it the main UI of the app.

In the next section, you’ll learn how to configure the individual tabs in the tab bar, including their titles and icons. Later on, we’ll discuss how you can use a tab bar controller and a navigation controller together.

A tab bar controller can show 5 view controllers at most. If you add 6 or more view controllers, it’ll show 4 tab items plus a special “More” item. When the user taps More, they can customize the view controllers that are included. Neat!

Configuring Tab Bar Items

Every view controller that’s embedded in a tab bar controller has a corresponding tab bar item. This tab bar item, of class UITabBarItem, determines what attributes are displayed in the tab bar, such as an icon and a title.

What’s really cool, is that you can simply assign an instance of UITabBarItem to the view controller’s property tabBarItem – and iOS will use that object to customize the tab itself. Here, see for yourself!

let item = UITabBarItem()
item.title = “Home”
item.image = UIImage(named: “home_icon”)

let homeVC = HomeViewController()
homeVC.tabBarItem = item

let tabBarController = UITabBarController()
tabBarController.viewControllers = [homeVC, …]

In the above code, we’re creating an instance of UITabBarItem. We then change some of its properties, such as image, the tab bar icon; and title, the text that’s shown below the tab bar icon.

A tab bar item has many properties you can customize, such as:

• The title and icon properties, as shown above. You can also customize the selectedImage property, with a UIImage object that’s shown when the tab bar item is selected.
• You can change the badgeValue and badgeColor properties, to show a small colored circle with a number in it on the tab bar item. You can find an example in the Phone app, if you have any unanswered calls.
• You can also change the tag property of a tab bar item, which is helpful for identifying items.

And last but not least, the UITabBarItem class has a few convenience initializers, such as init(title:image:selectedImage:). They let you set the properties of the tab bar item directly, when initializing the object.

It’s worth noting here that you can change the appearance of the tab bar, and its items, by using the properties and/or appearance proxy of the UITabBar class.

Tab Bar Controller vs. Navigation Controller

Using a tab bar controller with a navigation controller makes for a powerful combo. You can use them to give the user access to important User Interfaces, and to provide left-to-right navigation into more detailed view controllers.

In the above screenshot, we’re using a tab bar to give the user access to a few main view controllers, such as Home and Search. The navigation controller lets the user navigate between detail view controllers, such as an individual social media post.

A common issue when using a navigation controller in conjunction with a tab bar controller, is figuring out which goes into which. Do you embed the tab bar controller in a navigation controller, or vice versa?

You can use two approaches:

• Tab Bar Controller In Navigation Controller. In this scenario, the navigation controller is the top-most container. The tab bar is embedded within. This means that if you push a new view controller onto the navigation controller stack, you’ll move away from the tab bar.
• Navigation Controller In Tab Bar Controller. In the other scenario, the tab bar controller is the top-most container. The navigation controller is embedded within the tab bar controller. If you push a new view controller into the navigation controller stack, the tab bar controller remains in the UI!

Both approaches have a few benefits:

• Embedding a tab bar controller in a navigation controller, i.e. losing the tab bar on subsequent navigation, means you’ll have more screen real-estate for the rest of the UI. You often use this approach if the user doesn’t need access to the tab bar all the time.
• Embedding a navigation controller in a tab bar controller, i.e. keeping the tab bar always on-screen, means you have less screen real-estate. The added benefit is that the user can always find their way back to the main UIs of your app by using the tab bar.

In the two images above, you can clearly see that the navigation controller is embedded in the tab bar controller. The tab bar remains visible on navigation, so the user can always jump back to one of the main UIs. Awesome!

If you’re designing UIs for iOS apps, it’s a smart idea to dive into Apple’s Human Interface Guidelines. You’ll learn a thing or two about iOS app design, and what you can use tab bars for!

Further Reading

The tab bar controller is a staple in User Interfaces for iOS app. It’s such a convenient component! You can let the user switch between the main screens of your app, without giving up too much screen real-estate.

Because a user’s thumb is located at the bottom of the iPhone, a tab bar is a natural way to navigate through an app. And if you combine it with a navigation controller, you’re sure to create a logical, usable flow through the UI of your app.

Create Your App Now