Programmatic Tab Bar

Sun, 26 May 2024 22:17:06 +0000

Tabs bars are one the most recognizable UI elements for an iOS apps. We can find this element in build in apps like Phone, Photos, Music, AppStore, and many more.

Lucky for us, this element is quite easy to use, and in this tutorial, we’ll learn how to create a tab bar programmatically using UIKit. Let’s start!

Simple example

Let’s start by configuring our project to allow us to instantiate our views programmatically. You can follow this guide.

1. Create the Tab Bar class

I prefer to have a separate class that handle all the Tab Bar related responsibilities, so let’s create a new file called TabBarViewController.swift and add the following code.

import UIKit

final class TabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

This is the minimum code we need to have a working tab bar.

2. Adding the tab bar to the app

Now we can instantiate this as we would do with a UINavigationController.

Open SceneDelegate.swift and and update the willConnectTo method as follows:

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: windowScene)
        window?.rootViewController = TabBarController()
        window?.makeKeyAndVisible()
    }

We are assigning the new Tab Bar as the window root view controller. This will present this as the first element in our screen.

Now run the app, you should see an empty tab bar in the screen.

3. Creating the View Controllers to show

We need to have some view controllers to show on the screen. Let’s make two simple dummy ones.

Create two new files, AViewController.swift and BViewController.swift and add the following code:

// A View Controller
import UIKit

final class AViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .yellow
    }
}

// B View Controller
import UIKit

final class BViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .orange
    }
}

These two view controllers are quite simple, with the only difference being their background color.

4. Presenting the View Controllers in the Tab Bar

Each UIViewController has a property called tabBarItem to which we can assign the tab bar item it will display in a tab bar.

Open the TabBarController.swift and update the code as follows:

import UIKit

enum TabBarTag: Int {
    case a, b
}

final class TabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTabBar() // 3. Call the new function
    }
}

// 1 .Add this private extension
private extension TabBarController {
    // 2. Add this function that will instantiate the ViewControllers and assign their tab bar items
    func setupTabBar() {
        let aViewController = AViewController()
        // Adding the tab bar item to show in the tab bar for AViewController
        aViewController.tabBarItem = UITabBarItem(
            title: "A",
            image: UIImage(systemName: "1.lane"),
            tag: TabBarTag.a.hashValue
        )
        
        let bViewController = BViewController()
        // Adding the tab bar item to show in the tab bar for BViewController
        bViewController.tabBarItem = UITabBarItem(
            title: "B",
            image: UIImage(systemName: "2.lane"),
            tag: TabBarTag.b.hashValue
        )
        
        // UITabBarController contains an array of the view controllers that will be showing in the screen
        self.viewControllers = [aViewController, bViewController]
    }
}

I’m using an enum for the tag, so that we can refer to each tab bar item easily in the future for other parts of our app.

5. Run the app

Now run the app and see the tab bar in action.

With this little code, we have a simple tab bar implemented in our app.

Advanced Usage

Under development …

UITabBar on entangledDEV