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
- Drag & Drop a
UITabBarController
from the Object Library. - Each tab is linked to a UIViewController (by default, two are provided).
- Add more view controllers and set their tab bar icons and titles in the Attributes Inspector.
- 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? 🚀