UITabBarController

What is UITabBarController?

UITabBarController is a container view controller that manages multiple child view controllers in a tab-based interface. It allows users to switch between different screens using a bottom navigation bar.

---

1. Key Features of UITabBarController

✅ Manages Multiple View Controllers – Each tab represents a different screen.
✅ Easy Navigation – Users can switch between screens with a single tap.
✅ Customizable Appearance – Supports icons, titles, and custom styles.
✅ Supports Navigation Controllers – Each tab can be embedded in a UINavigationController.
✅ Dynamic Tab Bar Items – Can be updated programmatically.

---

2. Creating a UITabBarController

You can create a UITabBarController in two ways:

• Using Storyboard
• Programmatically

---

2.1 Using Storyboard

1. Drag a UITabBarController from the Object Library into your storyboard.
2. Add UIViewController instances as tabs.
3. Set the Tab Bar Item title and icon for each tab.
4. Embed view controllers in UINavigationController (if needed).
5. Set UITabBarController as the initial view controller.

---

2.2 Creating UITabBarController Programmatically

import UIKit

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

        let firstVC = FirstViewController()
        let secondVC = SecondViewController()

        firstVC.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0)
        secondVC.tabBarItem = UITabBarItem(title: "Profile", image: UIImage(systemName: "person"), tag: 1)

        self.viewControllers = [UINavigationController(rootViewController: firstVC),
                                UINavigationController(rootViewController: secondVC)]
    }
}

✅ This creates a UITabBarController with two tabs: Home and Profile.

---

3. Customizing UITabBar Appearance

You can customize the UITabBar’s look and feel using UITabBarAppearance (iOS 13+).

3.1 Changing the Background Color and Style

let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .systemBlue
tabBar.standardAppearance = appearance
tabBar.scrollEdgeAppearance = tabBar.standardAppearance

3.2 Customizing Tab Bar Item Appearance

appearance.stackedLayoutAppearance.normal.iconColor = .white
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
tabBar.standardAppearance = appearance

✅ This sets the tab bar background color to blue and text/icons to white.

---

4. Handling Tab Bar Item Selection

You can detect when a user switches tabs by implementing UITabBarControllerDelegate.

4.1 Detecting Tab 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 prints the selected tab title when the user switches tabs.

---

5. Adding a Custom Action to a Tab Bar Item

You can override viewDidAppear in a child view controller to perform an action when it becomes active.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    print("Home tab appeared")
}

✅ This prints a message when the tab is selected.

---

6. Adding a Floating Action Button (FAB)

A floating action button (FAB) can be added above the tab bar for quick actions.

let fabButton = UIButton()
fabButton.frame = CGRect(x: UIScreen.main.bounds.width / 2 - 30, y: UIScreen.main.bounds.height - 100, width: 60, height: 60)
fabButton.backgroundColor = .red
fabButton.layer.cornerRadius = 30
fabButton.setImage(UIImage(systemName: "plus"), for: .normal)
fabButton.addTarget(self, action: #selector(fabTapped), for: .touchUpInside)
view.addSubview(fabButton)

@objc func fabTapped() {
    print("Floating button tapped!")
}

✅ This adds a floating red button above the tab bar.

---

7. Hiding the UITabBar on Certain Screens

You may want to hide the tab bar in specific view controllers.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    self.tabBarController?.tabBar.isHidden = true
}

✅ This hides the tab bar when the view appears.

---

8. Example: Full UITabBarController Implementation

import UIKit

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

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

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

class CustomTabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = UINavigationController(rootViewController: HomeViewController())
        let profileVC = UINavigationController(rootViewController: ProfileViewController())
        let settingsVC = UINavigationController(rootViewController: SettingsViewController())

        homeVC.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house.fill"), tag: 0)
        profileVC.tabBarItem = UITabBarItem(title: "Profile", image: UIImage(systemName: "person.fill"), tag: 1)
        settingsVC.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(systemName: "gear"), tag: 2)

        self.viewControllers = [homeVC, profileVC, settingsVC]
    }
}

// Setting CustomTabBarController as Root
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    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 = CustomTabBarController()
        window?.makeKeyAndVisible()
    }
}

✅ This creates a functional tab-based app with three tabs: Home, Profile, and Settings.

---

9. Summary

✔️ UITabBarController manages multiple view controllers in a tab-based layout.
✔️ Supports custom icons, titles, and appearances.
✔️ Can detect tab switches and trigger actions.
✔️ Allows floating action buttons (FABs) for quick access.
✔️ Provides navigation integration via UINavigationController.

Would you like to implement custom animations or advanced tab bar transitions in your app? 🚀