iOS

⌘K
  1. Home
  2. Docs
  3. iOS
  4. UI Controls
  5. Tab Bars (UITabBar)

Tab Bars (UITabBar)

What is UITabBar?

UITabBar is a navigation component in iOS that allows users to switch between multiple views using a set of tabs located at the bottom of the screen. It is typically used in combination with UITabBarController.


1. Key Features of UITabBar

✅ Provides easy navigation between multiple view controllers
✅ Supports icons and text labels for each tab
✅ Automatically manages view hierarchy
✅ Supports custom icons and badges
✅ Works seamlessly with UINavigationController


2. Creating a UITabBarController in Storyboard

  1. Drag & Drop a UITabBarController from the Object Library.
  2. Each tab is linked to a UIViewController (by default, two are provided).
  3. Add more view controllers and set their tab bar icons and titles in the Attributes Inspector.
  4. Run the app to see the tab navigation in action.

3. Implementing UITabBarController Programmatically

import UIKit

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create View Controllers
        let homeVC = HomeViewController()
        let settingsVC = SettingsViewController()

        // Set Tab Bar Titles & Icons
        homeVC.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house.fill"), tag: 0)
        settingsVC.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(systemName: "gearshape.fill"), tag: 1)

        // Assign View Controllers to the TabBar
        viewControllers = [homeVC, settingsVC]
    }
}

This will create a tab bar with two tabs: Home & Settings.


4. Customizing UITabBar

4.1 Changing Tab Bar Background Color

tabBar.barTintColor = UIColor.systemGray

4.2 Changing Tab Bar Item Text & Icon Color

tabBar.tintColor = UIColor.systemBlue  // Active tab color
tabBar.unselectedItemTintColor = UIColor.lightGray  // Inactive tab color

4.3 Setting a Custom Background Image

tabBar.backgroundImage = UIImage(named: "custom_bg")

5. Adding a Badge to a Tab Item

tabBar.items?[0].badgeValue = "3"  // Adds a badge to the first tab

➡️ Set badgeValue = nil to remove the badge.


6. Handling Tab Bar Selection

class TabBarController: UITabBarController, UITabBarControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.delegate = self
    }

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

✅ This will print the name of the selected tab whenever the user switches.


7. Using UITabBar Without UITabBarController

If you want a standalone UITabBar, you can add one manually.

let tabBar = UITabBar()
tabBar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(tabBar)

// Set constraints
NSLayoutConstraint.activate([
    tabBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
    tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    tabBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    tabBar.heightAnchor.constraint(equalToConstant: 50)
])

// Add Tab Bar Items
let homeItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0)
let settingsItem = UITabBarItem(title: "Settings", image: UIImage(systemName: "gear"), tag: 1)

tabBar.setItems([homeItem, settingsItem], animated: false)

✅ This manually adds a UITabBar with two items at the bottom of the screen.


8. Common Issues & Fixes

❌ Issue: Tab Bar is Not Appearing

Fix: Ensure TabBarController is set as the root view controller.

window?.rootViewController = TabBarController()

❌ Issue: Custom Images Not Displaying

Fix: Make sure the images are added to the Assets folder and referenced correctly.


9. Conclusion

✔️ UITabBar simplifies multi-view navigation
✔️ Supports custom icons, colors, and badges
✔️ Works best with UITabBarController
✔️ Can be customized for a unique UI experience

Would you like a custom UITabBar implementation for your project? 🚀