Giới thiệu
Tab Bar Controller là một thành phần giao diện người dùng quan trọng trong iOS, cho phép người dùng chuyển đổi giữa các màn hình ứng dụng dễ dàng thông qua các tab. Trong bài viết này, chúng ta sẽ khám phá chi tiết cách tạo và tùy chỉnh Tab Bar Controller từ những bước cơ bản đến nâng cao, bao gồm kiến trúc của Tab Bar Controller, quy trình tạo và cấu hình nó trong Storyboard cũng như bằng mã nguồn, và cách xử lý các sự kiện liên quan.
1. Cấu trúc Tổng Quan của Tab Bar Controller
Tab Bar Controller (UITabBarController) là một subclass của UIViewController, thực hiện vai trò quản lý một tập hợp các view controllers. Mỗi view controller ứng với một tab và được quản lý bởi tab bar controller. Cấu trúc chính của Tab Bar Controller bao gồm:
UITabBarController: Quản lý các view controllers và hiển thị tab bar nằm ở dưới cùng của màn hình.UITabBar: Thanh chứa các tab (tab bar items) dưới cùng 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 Dự Án Mới
Mở Xcode và chọn "Create a new Xcode project". Chọn "App" và tiếp tục để đặt tên cho dự án, sau đó hoàn tất các tùy chọn và nhấn "Create".
-
Bước 2: Thêm Tab Bar Controller vào Storyboard
Mở file Main.storyboard. Xoá View Controller mặc định được Xcode tạo ra. Kéo và thả Tab Bar Controller từ thư viện (Library) vào Storyboard. Xcode sẽ tự động thêm hai View Controllers được liên kết với Tab Bar Controller như là các tab.
-
Bước 3: Cấu Hình Các View Controllers
Chọn từng View Controller kết nối với Tab Bar Controller và 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 các tab tương ứng.
-
Bước 4: Thêm Các View Controllers Mới
Để bổ sung nhiều View Controllers vào Tab Bar Controller, kéo và thả thêm View Controllers mới vào Storyboard. Kết nối các View Controllers này 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ừ menu pop-up.
3. Tạo Tab Bar Controller bằng Mã Lệnh
Bước 1: Thiết Lập Dự Án
Bắt đầu với một dự án mới hoặc sử dụng dự án đã có.
Bước 2: Tạo Các View Controllers
Tạo các View Controllers bằng cách thêm các file Swift mới.
HomeViewController.swift
swift
import UIKit
class HomeViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
title = "Home"
}
}SettingsViewController.swift
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)
swift
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)
swift
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ể dễ dàng điều chỉnh màu sắc của Tab Bar bằng cách sử dụng thuộc tính tabBar. Ví dụ:
swift
tabBarController.tabBar.tintColor = .systemBlue
tabBarController.tabBar.barTintColor = .white2. Thêm Hình Ảnh và Tiêu Đề cho Tab Bar Item
Có thể thiết lập hình ảnh và tiêu đề cho các mục trong Tab Bar:
swift
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ể theo dõi các sự kiện khi người dùng chuyển đổi giữa các tab bằng cách sử dụng UITabBarControllerDelegate. Phương thức sau cho phép bạn nhận biết khi một tab được chọn:
swift
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("Tab đã chọn: \(viewController.title ?? \"\")")
}
}6. Kết Luận
Tab Bar Controller là một công cụ mạnh mẽ trong việc thiết kế giao diện người dùng cho các ứng dụng iOS. Bằng cách áp dụng theo các bước hướng dẫn chi tiết trong bài viết này, bạn sẽ dễ dàng tạo và tùy chỉnh Tab Bar Controller theo nhu cầu phát triển ứng dụng của mình. Hy vọng rằng bài viết đã cung cấp những kiến thức bổ ích để bạn bắt đầu hành trình phát triển với Tab Bar Controller trong iOS.
source: viblo
