Programmatic Tab Bar
Table of Contents
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 thewillConnectTo
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 …