Giới thiệu
Tab Bar Controller là một thành phần giao diện người dùng phổ biến trong iOS, cho phép người dùng dễ dàng chuyển đổi giữa các màn hình khác nhau của ứng dụng bằng cách sử dụng các tab. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo và cấu hình một Tab Bar Controller từ cơ bản đến nâng cao, bao gồm cấu trúc chung của một Tab Bar Controller, cách tạo và tùy chỉnh nó trong Storyboard và bằng code, cũng như cách xử lý các sự kiện liên quan.
1. Cấu trúc chung của Tab Bar Controller
Tab Bar Controller (UITabBarController) là một subclass của UIViewController và chứa một mảng các view controllers. Mỗi view controller đại diện cho một tab và được quản lý bởi tab bar controller. Cấu trúc cơ bản bao gồm:
UITabBarController: Quản lý các view controllers và hiển thị tab bar ở dưới cùng của màn hình.UITabBar: Thanh chứa các tab (tab bar items) ở dưới cùng của màn hình.UITabBarItem: Đại diện cho từng tab trong tab bar, bao gồm tiêu đề, hình ảnh, và các thuộc tính khác.
2. Tạo Tab Bar Controller trong Storyboard
-
Bước 1: Tạo một dự án mới
Mở Xcode và tạo một dự án mới bằng cách chọn "Create a new Xcode project". Chọn "App" và nhấn "Next". Đặt tên cho dự án và chọn các tùy chọn khác theo ý muốn, sau đó nhấn "Next" và "Create".
-
Bước 2: Thêm Tab Bar Controller vào Storyboard
Mở Main.storyboard. Xóa View Controller mặc định mà Xcode tạo ra. Kéo và thả một Tab Bar Controller từ Library vào Storyboard. Xcode sẽ tự động thêm hai View Controllers được kết nối với Tab Bar Controller dưới dạng các tab.
-
Bước 3: Cấu hình các View Controllers
Chọn từng View Controller được kết nối với Tab Bar Controller. Thiết lập các thuộc tính như Title và Tab Bar Item để xác định tên và biểu tượng cho từng tab.
-
Bước 4: Thêm các View Controllers mới
Để thêm nhiều View Controllers vào Tab Bar Controller, kéo và thả các View Controllers mới vào Storyboard. Kết nối các View Controllers mới với Tab Bar Controller bằng cách Ctrl-kéo từ Tab Bar Controller đến View Controller và chọn "view controllers" từ popup menu.
3. Tạo Tab Bar Controller bằng Code
Bước 1: Thiết lập dự án
Tạo một dự án mới hoặc sử dụng dự án hiện tại.
Bước 2: Tạo các View Controllers
Tạo các View Controllers mới bằng cách thêm các tệp Swift mới.
HomeViewController.swift
import UIKit class HomeViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white title = "Home" }
}
SettingsViewController.swift
import UIKit class SettingsViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white title = "Settings" }
}
Bước 3: Tạo Tab Bar Controller trong AppDelegate hoặc SceneDelegate
AppDelegate.swift (iOS 12 trở xuống)
import UIKit @UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { window = UIWindow(frame: UIScreen.main.bounds) let tabBarController = UITabBarController() let homeViewController = HomeViewController() homeViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0) let settingsViewController = SettingsViewController() settingsViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .more, tag: 1) tabBarController.viewControllers = [homeViewController, settingsViewController] window?.rootViewController = tabBarController window?.makeKeyAndVisible() return true }
}
SceneDelegate.swift (iOS 13 trở lên)
import UIKit 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) let tabBarController = UITabBarController() let homeViewController = HomeViewController() homeViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0) let settingsViewController = SettingsViewController() settingsViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .more, tag: 1) tabBarController.viewControllers = [homeViewController, settingsViewController] window?.rootViewController = tabBarController window?.makeKeyAndVisible() }
}
4.Tùy chỉnh Tab Bar Controller
1. Thay đổi màu sắc của Tab Bar
Bạn có thể tùy chỉnh màu sắc của Tab Bar bằng cách sử dụng thuộc tính tabBar.
tabBarController.tabBar.tintColor = .systemBlue
tabBarController.tabBar.barTintColor = .white
2. Thêm hình ảnh và tiêu đề cho Tab Bar Item
Bạn có thể thêm hình ảnh và tiêu đề cho các mục trong Tab Bar.
homeViewController.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0)
settingsViewController.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(systemName: "gear"), tag: 1)
5.Xử lý sự kiện khi chuyển tab
Bạn có thể xử lý sự kiện khi người dùng chuyển đổi giữa các tab bằng cách sử dụng UITabBarControllerDelegate.
class SceneDelegate: UIResponder, UIWindowSceneDelegate, UITabBarControllerDelegate { 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) let tabBarController = UITabBarController() let homeViewController = HomeViewController() homeViewController.tabBarItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0) let settingsViewController = SettingsViewController() settingsViewController.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(systemName: "gear"), tag: 1) tabBarController.viewControllers = [homeViewController, settingsViewController] tabBarController.delegate = self window?.rootViewController = tabBarController window?.makeKeyAndVisible() } func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) { print("Selected tab: \(viewController.title ?? "")") }
}
6.Kết luận
Tab Bar Controller là một công cụ mạnh mẽ và linh hoạt để xây dựng giao diện người dùng trong các ứng dụng iOS. Bằng cách làm theo các bước trên, bạn có thể tạo và tùy chỉnh Tab Bar Controller để phù hợp với nhu cầu của ứng dụng. Hy vọng bài viết này cung cấp cho bạn những kiến thức cần thiết để bắt đầu làm việc với Tab Bar Controller trong iOS.