Part 6 — Tab Bar Controllers

In this tutorial, we will learn how to make tab bar and navigate between screen using navigation controllers.

IECSE Crash Course: Development with Swift

This article is going to be the sixth article of the series IECSE Crash Course: Development with Swift. Through the course of 10 articles, we are going to make a small app which will display a set of users that we will fetch from the net. While making the app, we will cover some of the most important topics that every iOS developer must know. You can get the code till the previous article here.

Starting off, let’s make a new file using Command + N save it as TabBarController.swift.

Creating a new file

Add this code here, we need to make this a subclass of UITabBarController.

A tab bar controller, of class UITabBarController, is a container view controller. We typically group together 3–5 together for better organisation. We switch from views by tapping the tab bar items in the bottom bar.

Let’s add a function to setup the tabs. In the previous article, we embedded the table view inside the navigation controller and the code was placed in SceneDelegate.swift. Now, we will shift that part from SceneDelegate.swift to TabBarController.swift.

We should call the function from viewDidLoad().

override func viewDidLoad() {
    super.viewDidLoad()
    setupTabs()
    //more code to come 
}

Let’s look at how we setup tabs.

We are making 2 tab bar items — one will have the tableview inside the navigation controller and other will be our sample screen, that we made earlier.

The 2 view controllers are assigned to the viewControllersproperty of tabBarController by making use of an array.

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.

Let’s look at different ways we can intialise UITabBarItem.

Source

Tag here is an integer which identifies each TaBar item in our application, (think of it as an index of an array).

Let’s make a function to setup the TabBar properties.

fileprivate func setupLayout(){ 
    tabBar.isTranslucent = true
    tabBar.barTintColor = UIColor.systemGroupedBackground
}

The barTintColor applies background color to our TabBar , we have to set isTranslucent to false or else, this color is made to translucent by default.

We have done a really simple setup where we can have custom background images and do much more with the TabBar.

We need to call this function inside viewDidLoad()

override func viewDidLoad() {
    super.viewDidLoad()
    setupLayout()
    setupTabs()
}

Now, we need to load our MasterTabBarController inside the SceneDelegate.swift.

On building ( command + R ) your app, we should see something like this:

Final App

Wrapping Up

In this article, we have segmented our app into two tabs and learnt how to navigate between them. You can continue with the series in the next article where we create a form and learn to validate the data we receive.

Congratulations🎉! You have just completed the sixth tutorial!

All of the above-written code is available on Github. Watch this space for more interesting challenges, up next in this series!

Confused about something? Let us know in the responses below. 😄