Written by on December 6, 2019

Basic iOS tutorial : Tabbar Controller

iOS & Swift

Chào bạn, chúng ta lại sang một phần mới của series Lập trình iOS cho mọi người. Chủ đề bài viết này sẽ là Tabbar Controller, một trong các Controller quan trọng trong iOS. Nếu bạn chưa tìm hiểu về các Controller trước đây thì có thể tham khảo 2 bài viết sau:

Bắt đầu thôi!

Chuẩn bị

  • MacOS 10.14.4
  • Xcode 11.0
  • Swift 5.1

1. Tabbar Controller

1.1. Định nghĩa

Giao diện của ứng dụng Clock có sẵn trong iOS.

Như hình trên thì bạn cũng đã thấy, Tabbar Controller như thế nào rồi. Để định nghĩa nó thì chúng ta có như sau:

Sử dụng Tabbar Controller để tổ chức ứng dụng thành các thành phần chức năng riêng biệt và ngang hàng nhau.

Chúng ta bắt gặp giao diện ứng dụng iOS mà sử dụng kiểu giao diện là Tabbar rất nhiều, điển hình như Facbook. Nó cho người dùng có thể tương tác với nhiều màn hình ở cùng cấp độ ngang cấp.

Class đại diện cho nó là UITabbarController.

Thanh Tabbar được hiển thị ở phần bên dưới của window, dành cho việc lựa chọn các chức năng khác nhau, từ đó hiển thị giao diện của chức năng đó.

Mỗi tab trên giao diện Tabbar Controller có liên quan đến một Custom view controller. Khi người dùng chọn một tab, Tabbar Controller sẽ hiển thị view gốc của view controller tương ứng và thay thế những view trước đó.

1.2. So sánh với NavigationController

  • Tabbar Controller
    • Dùng để thiết kế những chức năng ngang hàng.
    • Sự chuyển đổi giữa các tab khác nhau là thay thế giao diện, không có hiệu ứng chuyển đổi.
    • Config tab bar item thông qua thuộc tính tabBarItem của view controller tương ứng với tab đó.
  • Navigation Controller
    • Dùng để điều hướng các màn hình.
    • Sự điều hướng giữa các màn hình có hiệu ứng chuyển đổi chèn giao diện.
    • Config giao diện navigation bar thông qua thuộc tính navigationItems của view controller tương ứng.

2. Cấu trúc UITabbarController

2.1. Chung

Hình trên mà mô tả cơ bản nhất cấu trúc chung của một Tabbar Controller. Trong đó:

    • Thuộc tính viewControllers là một array view controller. Mỗi view controller trong mảng này cài đặt view gốc cho mỗi tab.
    • Có thể sử dụng navigation controller hoặc custom view controller cho các tab.
    • Thứ tự của các view controller xác định thứ tự của các tab trên tab bar.
    • Để xác định view controller nào được chọn ngay từ lúc bắt đầu, thay đổi giá trị thuộc tính selectedViewController hoặc selectedIndex.

Ví dụ: Cấu trúc của app Clock có 4 tab: World Clock, Alarm, Stopwatch và Timer

2.2. Views

Vì UITabbarController là class kế thừa lại UIViewController, thì view của nó là property view có sẵn của supper-class. View này là một khung chứa (container view) để hiển thị 1 View Controller con của nó cho người dùng thấy. Các View Controller con đều nằm trong viewControllers.

Tiếp theo, Tabbar Controller còn có một view thứ 2 đó là UITabbar. Nó chưa các item cho các tab. Các item này nhận sự kiện của người dùng và báo cho Tabbar Controller biết. Sau đó, Tabbar Controller sẽ lựa chọn 1 View Controller nào đó trong viewControllersphù hợp với item được chọn. Để hiển thị View Controller đó lên trên giao diện.

View Controller là một đối tượng của UIViewController, nên Tabbar Controller có thể nhận các đối tượng sau đây:

  • UIViewController
  • UINavigationController
  • Custom View Controller
  • sub-class của UIViewController

2.3. Items

  • Được config cùng với view controller tương ứng với nó. Thay đổi thuộc tính tabBarItem của view controller để config tab bar item tương ứng.
  • Vì giới hạn màn hình, nếu thêm nhiều hơn 5 view controller thì tab bar item cuối sẽ thành item More.

3. Custom Default Tabbar

Để phục vụ cho việc Custom Tabbar và sử dụng Tabbar Controller trong iOS project. Thì chúng ta sử dụng một project không sử dụng Storyboard. Nếu bạn chưa biết cách tạo iOS project mà không sử dụng Storyboard thì có thể tham khảo link sau:

3.1. Create Tabbar

3.1.1. Tạo các View Controller

Tạo các View Controller cần thiết. Trong ví dụ thì sử dụng 4 View Controller cho 4 tab của Tabbar Controller.

  • HomeViewController
  • FriendsViewController
  • MessagesViewController
  • ProfileViewController

Về giao diện của các View Controller thì bạn có thể design đơn giản để phân biệt giữa chúng. Trong bài viết này chúng ta chưa đề cập tới chi tiết cho các View Controller.

3.1.2. Tạo UITabbarController

Mở file SceneDelegate.swift, tiến hành tạo các đối tượng cho các View Controller vừa tạo ở trên

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        let window = UIWindow(windowScene: windowScene)
        
        //Home
        let homeVC = HomeViewController()
        let homeNavi = UINavigationController(rootViewController: homeVC)
        
        //Messages
        let messagesVC = MessagesViewController()
        let messagesNavi = UINavigationController(rootViewController: messagesVC)
        
        //Friends
        let friendsVC = FriendsViewController()
        let friendsNavi = UINavigationController(rootViewController: friendsVC)
        
        //Profile
        let profileVC = ProfileViewController()
        let profileNavi = UINavigationController(rootViewController: profileVC)
        
        self.window = window
        window.makeKeyAndVisible()
    }

Thay vì sử dụng trực tiếp các UIViewController, cho Tabbar Controller. Thì mỗi Tab ta dùng UINavigationController để bọc chúng lại. Điều này có ý nghĩa cho việc điều hướng màn hình. Ví dụ tại Home, khi kích vào 1 button nào đó thì cần màn hình Detail push vào. Khi đó, phải sử dụng Navigation Controller để điều hướng màn hình.

Tiếp tục thêm đoạn code để khởi tạo Tabbar Controller. Trong đó:

  • Khởi tạo Tabbar Controller từ class UITabBarController
  • Xét thuộc tính viewControllers, bằng 1 array các Navigation tạo ở trên
  • Xét rootViewController, của window bằng chính đối tượng Tabbar Controller tạo ở trên
//tabbar controller
let tabbarController = UITabBarController()
tabbarController.viewControllers = [homeNavi, messagesNavi, friendsNavi, profileNavi]
        
window.rootViewController = tabbarController

Xem kết quả

Chúng ta đã thấy Tabbar Controller hiện ra, nhưng có gì đó sai sai ở đây. Các Tab còn lại đâu rồi? Bạn chỉ cần kích vào Tabbar thì các title của các tab khác sẽ xuất hiện.

Khá là vất vả, để giải quyết vấn đề này thì chúng ta qua phần tiếp theo là custom các TabbarItem.

3.2. Tabbar Item

Để custom các Tabbar Item, thì có nhiều cách khác nhau. Trong bài này chúng ta dùng cách đơn giản nhất là:

  • Xét trực tiếp thuộc tính tabbarItem của View Controller hoặc Navigation Controller

3.2.1. Sử dụng Tabbar Item hệ thống

let homeVC = HomeViewController()
let homeNavi = UINavigationController(rootViewController: homeVC)
homeVC.tabBarItem = UITabBarItem(tabBarSystemItem: .featured, tag: 0)

Có rất nhiều Tabbar Item mà hệ thống cung cấp. Bạn có thể lợi dụng để tiết kiệm thời gian design cho ứng dụng. Với đoạn code trên thì Tabbar Item là hình ngôi sao và có title là Featured.

3.2.2. Custom Tabbar Item với image

let messagesVC = MessagesViewController()
let messagesNavi = UINavigationController(rootViewController: messagesVC)
messagesVC.tabBarItem = UITabBarItem(title: "Messages", image: UIImage(named: "ic-tabbar-messages"), selectedImage: UIImage(named: "ic-tabbar-messages-selected"))

Tạo một UITabbarItem mới, với 2 image:

  • image : dùng để hiện thị ở trạng thái không được chọn
  • selectedImage: dùng để hiện thị ở trạng thái được chọn

Với cách này thì bạn có thể sử dụng 2 image khác nhau để mô tả trạng thái của Tab.

3.2.3. Không dùng title cho Tabbar Item

let friendsVC = FriendsViewController()
let friendsNavi = UINavigationController(rootViewController: friendsVC)
friendsNavi.tabBarItem = UITabBarItem(title: "", image: UIImage(named: "ic-tabbar-friends"), tag: 2)

Đơn giản thì xét title bằng đoạn text rỗng. Bên cạch đó, nếu bạn xét title của View Controller, thì mặc định Tabbar Controller sẽ lấy title của View Controller đó là title cho Tabbar Item. Đây là điều cần phải chú ý.

3.2.4. Custom Tabbar Item đơn giản

let profileVC = ProfileViewController()
let profileNavi = UINavigationController(rootViewController: profileVC)
profileVC.tabBarItem = UITabBarItem(title: "Profile", image: UIImage(named: "ic-tabbar-profile"), tag: 3)

Nếu không quá cầu kì, thì đây là cách đơn giản và hiệu quả nhất với custom Tabbar Item cho Tabbar Controller.

Xem kết quả của tất cả các custom Tabbar Item trên

3.3. Color & Image

3.3.1. TintColor

Đây là một trong những điểm thú vị của iOS. Chúng ta không cần chuẩn bị nhiều hình với nhiều màu sắc khác nhau. iOS tự động quét và render lại Image. iOS sẽ tự động quét các pixel có màu và pixel không có màu. Với các pixel có màu thì iOS sẽ fill nó lại bằng màu của tintColor.

Nên khi bạn muốn đổi màu tất cả các Tabbar Item thì chỉ cần thay đổi thuộc tính tintColor là xong.

let tabbarController = UITabBarController()
tabbarController.viewControllers = [homeNavi, messagesNavi, friendsNavi, profileNavi]
tabbarController.tabBar.tintColor = .red

Xem kết quả

3.3.2. Background Images

Thay đổi ảnh cho Tabbar thì có nhiều cách, trong bày này chúng ta dùng appearance để thay đổi một lúc cho tất cả các UITabbar. Cách này được sử dụng vì trong ứng dụng chỉ có 1 đối tượng UITabbarController tạo ra và sử dụng. Với nhiều đối tượng TabbarController nếu được sự dụng, thì cần cẩn thận hơn trong việc sử dụng appearance.

3.4. Badge number

Nếu bạn để ý, thì có nhiều ứng dụng sử dụng 1 số hiển thị để thông báo cho người dùng biết rằng có nhiều thông tin mà họ chưa đuọc qua. Đó được gọi là badge number. Với Tabbar Item, thì chúng ta có thể xét được giá trị này, với 2 thuộc tính:

  • value thông qua badgeValue . Nếu khác rỗng thì sẽ hiển thị, bằng rỗng thì sẽ ẩn đi
  • color thông qua badgeColor. Màu nền của badge
let messagesVC = MessagesViewController()
let messagesNavi = UINavigationController(rootViewController: messagesVC)
messagesNavi.tabBarItem = UITabBarItem(title: "Messages", image: UIImage(named: "ic-tabbar-messages"), selectedImage: UIImage(named: "ic-tabbar-messages-selected"))
messagesNavi.tabBarItem.badgeValue = "99"
messagesNavi.tabBarItem.badgeColor = .blue

Kết quả như sau:

3.5. Delegate

Để biết được các trạng thái của Tabbar Controller, thì sử dụng delegate của nó. Đó là 1 protocol UITabBarControllerDelegate. Cách sử dụng thì tương tự như các delegate khác.

extension SceneDelegate: UITabBarControllerDelegate {
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        print("Selected Tab : \(tabBarController.selectedIndex)")
    }
}

Tới đây thì bạn đã nắm được khá nhiều về Tabbar Controller. Và có thể sử dụng nó trong việc thiết kế ứng dụng iOS của riêng bạn. Bạn có thể checkout mã nguồn tại đây (github).

Tạm kết

  • Biết về Tabbar Controller
  • Cấu trúc và thành phần quan trọng trong Tabbar Controller
  • Tạo và sử dụng Tabbar Controller
  • Custom Tabbar Item
  • Custom UITabbar
  • Sử dụng Tabbar Controller Delegate

Cảm ơn bạn đã theo dõi bài viết này!

PinYummlyLinkedInPrintShares14

Related Posts:

Written by

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply

Your email address will not be published. Required fields are marked *