Tab Bar — nó là gì, bảng tab trong ứng dụng di động

Tab Bar là gì?

Tab Bar (thanh tab) là một phần tử giao diện đồ họa nằm ở cuối màn hình của ứng dụng di động. Nó cung cấp truy cập nhanh đến 3–5 phần chính của ứng dụng. Mỗi phần được đại diện bằng một biểu tượng và nhãn văn bản. Người dùng chạm vào một tab để chuyển đến phần tương ứng. Tab Bar vẫn hiển thị trên tất cả các màn hình trong mỗi phần, cung cấp một điểm vào liên tục.

Apple khuyên dùng Tab Bar cho các phần có tầm quan trọng ngang nhau. Hướng dẫn Giao diện Người dùng (2026) nêu rõ: "Tab Bar hiển thị 3–5 tab. Nếu cần nhiều hơn, tab cuối cùng trở thành mục 'Thêm' chứa phần còn lại." Material Design của Google (2026) khuyên dùng Bottom Navigation cho cùng mục đích — 3–5 mục, tab hoạt động được làm nổi bật bằng màu sắc và hoạt ảnh.

Không giống như thanh tab trên cùng, bảng dưới cùng thuận tiện hơn cho thao tác bằng một tay — ngón tay cái dễ dàng chạm đến cuối màn hình. Nghiên cứu của Nielsen Norman Group (2025) cho thấy điều hướng dưới cùng giảm thời gian hoàn thành tác vụ 22% so với điều hướng trên cùng trên điện thoại thông minh có màn hình từ 6 inch trở lên.

UITabBarController trong iOS

UITabBarController là bộ điều khiển tích hợp sẵn của iOS để tổ chức điều hướng qua các tab. Mỗi tab quản lý bộ màn hình riêng của nó, thường được tổ chức trong UINavigationController. UITabBarController tự động tạo Tab Bar ở cuối màn hình với nền trong suốt của hệ thống và hoạt ảnh chuyển đổi.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "Trang chủ",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Tìm kiếm",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Hồ sơ",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

Mỗi tab trong ví dụ chứa một UINavigationController, cho phép điều hướng ngăn xếp bên trong phần. tabBarItem cấu hình biểu tượng, tiêu đề và huy hiệu. Hệ thống tự động áp dụng kiểu SF Symbols cho biểu tượng — các ký hiệu tiêu chuẩn của Apple hỗ trợ kiểu động và đa màu sắc.

BottomNavigationView trong Android

BottomNavigationView là một thành phần Android từ Material Design Library triển khai bảng điều hướng dưới cùng. Trong Android 13+, NavigationBarView được sử dụng — phiên bản kế nhiệm với hoạt ảnh cải tiến và hành vi thích ứng. BottomNavigationView tuân theo đặc tả Material Design 3 (Material You) và hỗ trợ chủ đề ứng dụng, màu sắc động và hoạt ảnh chuyển đổi.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Liên kết BottomNavigation với NavController
        navView.setupWithNavController(navController)

        // Thiết lập huy hiệu trên tab thông báo
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Thành phần BottomNavigationView hỗ trợ Material Design 3 với ba kiểu: default (nhãn + biểu tượng), labeled (nhãn lớn hơn) và unlabeled (chỉ biểu tượng). Phương thức setupWithNavController liên kết bảng với Navigation Component, tự động cập nhật tab hoạt động khi thay đổi màn hình. Huy hiệu được tạo qua getOrCreateBadge và hỗ trợ chỉ thị số và chấm.

Huy hiệu và Chỉ thị trên Tab Bar

Huy hiệu là chỉ thị số hoặc chấm trên biểu tượng tab, hiển thị số lượng thông báo, tin nhắn mới hoặc tác vụ. Trên iOS, huy hiệu được đặt qua thuộc tính badgeValue trên UITabBarItem. Trên Android, huy hiệu được quản lý qua BadgeDrawable (Material 3) hoặc getOrCreateBadge trong NavigationBarView.

Huy hiệu là một công cụ tương tác mạnh mẽ: nghiên cứu của Localytics (2025) cho thấy ứng dụng có huy hiệu có tỷ lệ giữ chân cao hơn 18% vào ngày thứ 7. Tuy nhiên, lạm dụng huy hiệu (hơn 3 cùng lúc) làm giảm CTR 12%. Apple và Google khuyên chỉ hiển thị huy hiệu cho thông báo liên quan và đặt lại khi mở phần.

Tùy chỉnh Tab Bar: Biểu tượng, Màu sắc, Hoạt ảnh

Cả hai nền tảng đều cung cấp các tùy chọn tùy chỉnh rộng rãi cho Tab Bar. Trên iOS, bạn có thể thay đổi màu nền, màu tint của tab hoạt động, phông chữ nhãn và thêm biểu tượng tùy chỉnh qua SF Symbols hoặc tài sản riêng. Trên Android, tùy chỉnh bao gồm kiểu Material 3, hoạt ảnh chuyển đổi, hiệu ứng gợn sóng và màu sắc động dựa trên hình nền.

// Tùy chỉnh Tab Bar trong iOS
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

Trên Android, tùy chỉnh BottomNavigationView được thực hiện qua thuộc tính XML hoặc lập trình. Material 3 giới thiệu khái niệm màu sắc động: bảng màu được tạo từ hình nền của người dùng và tự động áp dụng cho các thành phần. Nhà phát triển có thể ghi đè màu sắc qua chủ đề, đặt hoạt ảnh chỉ thị tùy chỉnh và cấu hình hiệu ứng gợn sóng.

// Tùy chỉnh BottomNavigationView trong Android
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// Trong XML: app:menu="@menu/bottom_nav_menu"
// Trong XML: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Thực hành Tốt nhất cho Điều hướng Dưới cùng

Khi thiết kế Tab Bar, điều quan trọng là tuân theo các khuyến nghị của nền tảng và nghiên cứu về khả năng sử dụng. Apple HIG: không quá 5 tab, văn bản ngắn gọn, biểu tượng ngữ nghĩa. Material Design: 3–5 mục, mục hoạt động được làm nổi bật, bộ đếm huy hiệu không quá 99. NN Group (2025): điều hướng dưới cùng nên hiển thị trên tất cả các màn hình của phần, nếu không người dùng sẽ mất ngữ cảnh.

Các lỗi phổ biến: 6+ tab (buộc phải sử dụng 'Thêm' — giảm khả năng khám phá), thay đổi thứ tự tab khi điều hướng (làm người dùng mất phương hướng), ẩn Tab Bar trên màn hình lồng nhau (mất neo điều hướng). Thực hành tốt nhất bao gồm thứ tự cố định, biểu tượng và nhãn văn bản nhất quán, huy hiệu chỉ cho hành động của người dùng (không phải tiếp thị).

• 3–5 tab — số lượng tối ưu để chọn nhanh mà không quá tải
• Thứ tự cố định — các tab nên ổn định, không sắp xếp lại động
• Biểu tượng + nhãn — cả hai yếu tố đều cần thiết để hiểu phần
• Tab hoạt động — nên khác biệt trực quan bằng màu sắc, biểu tượng hoặc hoạt ảnh
• Huy hiệu — sử dụng cho thông báo, đặt lại khi mở phần