UITabBar in UIKit

UITabBar is an essential component in the UIKit framework, providing a convenient way to manage and switch between different views or sections of your iOS application. In this article, we will explore what UITabBars are, the various functionalities they offer, and provide practical code examples to demonstrate how you can implement and customize them in your iOS projects.

What is a UITabBar?

A UITabBar is a control that provides a bar at the bottom of the screen, containing multiple tab bar items. Each tab bar item represents a different section or view of the application. UITabBars are typically used in conjunction with UITabBarController to manage and navigate between different view controllers in a user-friendly way.

UITabBars offer a range of functionalities and customization options. Here are some key things you can do with UITabBars:

• Multiple Tabs: Create a tab bar with multiple tabs, each associated with a different view controller.
• Custom Icons and Titles: Set custom icons and titles for each tab bar item.
• Badge Values: Display badge values on tab bar items to indicate notifications or updates.
• Custom Appearance: Customize the appearance of the tab bar, including its color, background, and text attributes.
• Tab Bar Delegates: Use UITabBarDelegate methods to respond to tab bar interactions and customize behavior.

Implementing UITabBar in Swift

Let's dive into some code examples to see how you can create, customize, and work with UITabBars in Swift.

To create a simple UITabBarController, you need to initialize it with multiple view controllers, each representing a different tab. Here is an example:

import UIKit

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "First"
    }
}

class SecondViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .lightGray
        title = "Second"
    }
}

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        
        // Create view controllers
        let firstViewController = FirstViewController()
        let secondViewController = SecondViewController()
        
        // Create tab bar items
        firstViewController.tabBarItem = UITabBarItem(title: "First", image: UIImage(systemName: "1.circle"), tag: 0)
        secondViewController.tabBarItem = UITabBarItem(title: "Second", image: UIImage(systemName: "2.circle"), tag: 1)
        
        // Create tab bar controller and set view controllers
        let tabBarController = UITabBarController()
        tabBarController.viewControllers = [firstViewController, secondViewController]
        
        // Set root view controller
        window?.rootViewController = tabBarController
        window?.makeKeyAndVisible()
        
        return true
    }
}

In this example, we create a UITabBarController and set two view controllers as its tabs. We also assign tab bar items with titles and icons to each view controller.

Customizing UITabBar Appearance

You can customize the appearance of the UITabBar to match the design of your application. Here is an example of customizing the tab bar's background color and item appearance:

import UIKit

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "First"
    }
}

class SecondViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .lightGray
        title = "Second"
    }
}

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        
        // Create view controllers
        let firstViewController = FirstViewController()
        let secondViewController = SecondViewController()
        
        // Create tab bar items
        firstViewController.tabBarItem = UITabBarItem(title: "First", image: UIImage(systemName: "1.circle"), tag: 0)
        secondViewController.tabBarItem = UITabBarItem(title: "Second", image: UIImage(systemName: "2.circle"), tag: 1)
        
        // Create tab bar controller and set view controllers
        let tabBarController = UITabBarController()
        tabBarController.viewControllers = [firstViewController, secondViewController]
        
        // Customize tab bar appearance
        tabBarController.tabBar.barTintColor = .darkGray
        tabBarController.tabBar.tintColor = .white
        tabBarController.tabBar.unselectedItemTintColor = .lightGray
        
        // Set root view controller
        window?.rootViewController = tabBarController
        window?.makeKeyAndVisible()
        
        return true
    }
}

In this example, we customize the UITabBar's appearance by setting its bar tint color, selected item tint color, and unselected item tint color. This changes the background color of the tab bar and the colors of the tab bar items.

Using Badge Values on UITabBar Items

You can display badge values on UITabBar items to indicate notifications or updates. Here is an example of setting badge values on tab bar items:

import UIKit

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "First"
    }
}

class SecondViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .lightGray
        title = "Second"
    }
}

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        
        // Create view controllers
        let firstViewController = FirstViewController()
        let secondViewController = SecondViewController()
        
        // Create tab bar items
        firstViewController.tabBarItem = UITabBarItem(title: "First", image: UIImage(systemName: "1.circle"), tag: 0)
        secondViewController.tabBarItem = UITabBarItem(title: "Second", image: UIImage(systemName: "2.circle"), tag: 1)
        
        // Set badge values
        firstViewController.tabBarItem.badgeValue = "3"
        secondViewController.tabBarItem.badgeValue = "New"
        
        // Create tab bar controller and set view controllers
        let tabBarController = UITabBarController()
        tabBarController.viewControllers = [firstViewController, secondViewController]
        
        // Set root view controller
        window?.rootViewController = tabBarController
        window?.makeKeyAndVisible()
        
        return true
    }
}

In this example, we set badge values on the tab bar items to indicate notifications or updates. The first tab displays a badge with the number "3", and the second tab displays a badge with the text "New".

Implementing UITabBarDelegate

You can use the UITabBarDelegate methods to respond to tab bar interactions and customize behavior. Here is an example of implementing the UITabBarDelegate to handle tab bar selection:

import UIKit

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "First"
    }
}

class SecondViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .lightGray
        title = "Second"
    }
}

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, UITabBarControllerDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        
        // Create view controllers
        let firstViewController = FirstViewController()
        let secondViewController = SecondViewController()
        
        // Create tab bar items
        firstViewController.tabBarItem = UITabBarItem(title: "First", image: UIImage(systemName: "1.circle"), tag: 0)
        secondViewController.tabBarItem = UITabBarItem(title: "Second", image: UIImage(systemName: "2.circle"), tag: 1)
        
        // Create tab bar controller and set view controllers
        let tabBarController = UITabBarController()
        tabBarController.viewControllers = [firstViewController, secondViewController]
        tabBarController.delegate = self
        
        // Set root view controller
        window?.rootViewController = tabBarController
        window?.makeKeyAndVisible()
        
        return true
    }

    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        print("Selected tab: \(viewController.title ?? "")")
    }
}

In this example, we implement the UITabBarControllerDelegate and set it as the delegate of the UITabBarController. The tabBarController(_:didSelect:) method is called whenever a tab is selected, allowing us to handle tab bar interactions.

Conclusion

UITabBars are essential components for managing and navigating between different sections or views of your iOS applications. In this article, we've covered the basics of what UITabBars are, their various functionalities, and provided practical code examples to help you implement and customize them in your own projects. From creating simple tab bar controllers to customizing appearance and handling interactions, mastering UITabBars is crucial for building intuitive and user-friendly navigation interfaces.