Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on December 6, 2019

Basic iOS tutorial : Tabbar Controller

iOS & Swift

Contents

  • Chuẩn bị
  • 1. Tabbar Controller
    • 1.1. Định nghĩa
    • 1.2. So sánh với NavigationController
  • 2. Cấu trúc UITabbarController
    • 2.1. Chung
    • 2.2. Views
    • 2.3. Items
  • 3. Custom Default Tabbar
    • 3.1. Create Tabbar
      • 3.1.1. Tạo các View Controller
      • 3.1.2. Tạo UITabbarController
    • 3.2. Tabbar Item
      • 3.2.1. Sử dụng Tabbar Item hệ thống
      • 3.2.2. Custom Tabbar Item với image
      • 3.2.3. Không dùng title cho Tabbar Item
      • 3.2.4. Custom Tabbar Item đơn giản
    • 3.3. Color & Image
      • 3.3.1. TintColor
      • 3.3.2. Background Images
    • 3.4. Badge number
    • 3.5. Delegate
  • Tạm kết

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:

    • Basic iOS tutorial : ViewController life cycle
    • Basic iOS tutorial : Navigation Controller

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:

    • Bắt đầu iOS Project không sử dụng Storyboard với Xcode 11 và Swift 5.1

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!

FacebookTweetPinYummlyLinkedInPrintEmailShares14

Related Posts:

  • testing
    Hello Testing iOS
  • feature_bg_3
    Clean Architecture trong iOS
Tags: basic ios tutorial, blog, TabbarController
Written by chuotfx

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 Cancel reply

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

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift AI api AppDistribution autolayout basic ios tutorial blog ci/cd closure collectionview combine concurrency crashlytics dart dart basic dart tour Declarative delegate deploy design pattern fabric fastlane firebase flavor flutter GCD gradients iOS MVVM optional Prompt engineering protocol Python rxswift safearea Swift Swift 5.5 SwiftData SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • [Swift 6.2] Raw Identifiers – Đặt tên hàm có dấu cách, tại sao không?
  • Vibe Coding là gì?
  • Cách Đọc Sách Lập Trình Nhanh và Hiệu Quả Bằng GEN AI
  • Nỗ Lực – Hành Trình Kiến Tạo Ý Nghĩa Cuộc Sống
  • Ai Sẽ Là Người Fix Bug Khi AI Thống Trị Lập Trình?
  • Thời Đại Của “Dev Tay To” Đã Qua Chưa?
  • Prompt Engineering – Con Đường Để Trở Thành Một Nghề Nghiệp
  • Vấn đề Ảo Giác (hallucination) khi tương tác với Gen AI và cách khắc phục nó qua Prompt
  • Điều Gì Xảy Ra Nếu… Những Người Dệt Mã Trở Thành Những Người Bảo Vệ Cuối Cùng Của Sự Sáng Tạo?
  • Khi Cô Đơn Gặp Python

You may also like:

  • Clean Architecture trong iOS
    feature_bg_3
  • Hello Testing iOS
    testing

Archives

  • May 2025 (1)
  • April 2025 (1)
  • March 2025 (8)
  • January 2025 (7)
  • December 2024 (4)
  • September 2024 (1)
  • July 2024 (1)
  • June 2024 (1)
  • May 2024 (4)
  • April 2024 (2)
  • March 2024 (5)
  • January 2024 (4)
  • February 2023 (1)
  • January 2023 (2)
  • November 2022 (2)
  • October 2022 (1)
  • September 2022 (5)
  • August 2022 (6)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (43)
  • Code (11)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (102)
  • No Category (1)
  • RxSwift (37)
  • SwiftUI (80)
  • Tutorials (86)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2025 Fx Studio - All rights reserved.