Đã đăng vào thg 5 29, 5:23 SA 4 phút đọc

Tab Bar Controller trong iOS

MayFest2024

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.

#AppMobile @iOS @swift @SwiftUI