Tab Bar — ano ito, panel ng tab sa mga mobile app

Ano ang Tab Bar?

Tab Bar (panel ng tab) — elemento ng graphical na interface na matatagpuan sa ibabang bahagi ng screen ng mobile app. Nagbibigay ito ng mabilis na access sa 3–5 pangunahing seksyon ng app. Bawat seksyon ay kinakatawan ng isang icon at text label. Pinipindot ng user ang tab upang lumipat sa kaukulang seksyon. Ang Tab Bar ay nananatiling nakikita sa lahat ng screen sa loob ng bawat seksyon, na nagbibigay ng patuloy na entry point.

Inirerekomenda ng Apple ang paggamit ng Tab Bar para sa mga seksyon ng app na may pantay na antas ng kahalagahan. Ang Human Interface Guidelines (2026) ay nagsasaad: «Ang Tab Bar ay nagpapakita ng 3–5 tab. Kung kailangan ng higit pa — ang huling tab ay nagiging puntong «Higit Pa» kasama ang natitira sa loob». Ang Material Design ng Google (2026) ay nagrerekomenda ng Bottom Navigation para sa parehong layunin — 3–5 punto, aktibong tab na naka-highlight ng kulay at animation.

Hindi tulad ng mga itaas na tab (Top Tab Bar), ang ibabang panel ay mas maginhawa para sa isang-kamay na operasyon — natural na naaabot ng hinlalaki ang ibabang bahagi ng screen. Ang pananaliksik ng Nielsen Norman Group (2025) ay nagpakita na ang ibabang nabigasyon ay nagbabawas ng oras ng pagkumpleto ng gawain ng 22% kumpara sa itaas na nabigasyon sa mga smartphone na may diagonal na 6 pulgada.

UITabBarController sa iOS

UITabBarController — built-in na controller ng iOS para sa pag-oorganisa ng nabigasyon sa pamamagitan ng mga tab. Bawat tab ay namamahala ng sarili nitong set ng mga screen, karaniwang nakaayos sa UINavigationController. Ang UITabBarController ay awtomatikong lumilikha ng Tab Bar sa ibabang bahagi ng screen na may sistemang semi-transparent na background at animation sa paglipat.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Home",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Maghanap",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profile",
            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]
    }
}

Bawat tab sa halimbawa ay naglalaman ng UINavigationController, na nagpapahintulot sa paggamit ng stack nabigasyon sa loob ng seksyon. Ang tabBarItem ay nagko-configure ng icon, pamagat, at badge. Awtomatikong inilalapat ng system ang istilong SF Symbols para sa mga icon — karaniwang simbolo ng Apple na may suporta para sa dynamic na tipo at maraming kulay.

BottomNavigationView sa Android

BottomNavigationView — bahagi ng Android mula sa Material Design Library na nagpapatupad ng ibabang panel ng nabigasyon. Sa Android 13+ ginagamit ang NavigationBarView — ang kahalili nito na may pinahusay na animation at adaptibong pag-uugali. Ang BottomNavigationView ay sumusunod sa specipikasyon ng Material Design 3 (Material You) at sumusuporta sa tema ng app, dinamikong kulay, at animation sa paglipat.

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)

        // Pagkonekta ng BottomNavigation sa NavController
        navView.setupWithNavController(navController)

        // Pag-configure ng badge sa tab ng notipikasyon
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Ang bahaging BottomNavigationView ay sumusuporta sa Material Design 3 na may tatlong istilo: default (lagda + icon), labeled (pinalaking lagda), at unlabeled (icon lamang). Ang paraang setupWithNavController ay nag-uugnay ng panel sa Navigation Component, awtomatikong nag-a-update ng aktibong tab kapag nagbago ang screen. Ang badge ay nilikha sa pamamagitan ng getOrCreateBadge at sumusuporta sa numeriko at puntong tagapagpahiwatig.

Badge at tagapagpahiwatig sa Tab Bar

Badge — numeriko o puntong tagapagpahiwatig sa mga icon ng tab na nagpapakita ng bilang ng mga notipikasyon, bagong mensahe, o gawain. Sa iOS ang badge ay itinatakda sa pamamagitan ng property na badgeValue sa UITabBarItem. Sa Android ang badge ay pinamamahalaan sa pamamagitan ng BadgeDrawable (Material 3) o getOrCreateBadge sa NavigationBarView.

Ang badge ay isang makapangyarihang kasangkapan ng pakikipag-ugnayan: ipinakita ng pananaliksik ng Localytics (2025) na ang mga app na may badge ay may 18% na mas mataas na retention sa ika-7 araw. Gayunpaman, ang pag-abuso sa badge (higit sa 3 sabay-sabay) ay nagbabawas ng CTR ng 12%. Inirerekomenda ng Apple at Google na magpakita ng badge para lamang sa mga kaugnay na notipikasyon at i-reset ito kapag binuksan ang seksyon.

Pagpapasadya ng Tab Bar: mga icon, kulay, animation

Ang parehong platform ay nag-aalok ng malawak na posibilidad ng pagpapasadya para sa Tab Bar. Sa iOS maaaring baguhin ang kulay ng background, tint color ng aktibong tab, font ng label, at magdagdag ng custom na icon sa pamamagitan ng SF Symbols o sariling assets. Sa Android ang pagpapasadya ay may kasamang mga istilo ng Material 3, animation ng paglipat, ripple effect, at dinamikong kulay batay sa wallpaper.

// Pagpapasadya ng Tab Bar sa 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.

Sa Android ang pagpapasadya ng BottomNavigationView ay ginagawa sa pamamagitan ng mga XML attribute o programmatically. Ipinakilala ng Material 3 ang konsepto ng dinamikong kulay: ang palette ay nabuo mula sa wallpaper ng user at awtomatikong inilalapat sa mga bahagi. Maaaring i-override ng developer ang mga kulay sa pamamagitan ng tema, magtakda ng custom na animation ng salungguhit (indicator), at i-configure ang ripple effect.

// Pagpapasadya ng BottomNavigationView sa 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")
    )
}

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

Pinakamahusay na kasanayan sa ibabang nabigasyon

Sa pagdidisenyo ng Tab Bar mahalagang sundin ang mga rekomendasyon ng platform at pananaliksik sa kakayahang magamit. Apple HIG: hindi hihigit sa 5 tab, maikling teksto, semantikong icon. Material Design: 3–5 punto, aktibong punto na naka-highlight, bilang ng badge na hindi hihigit sa 99. NN Group (2025): ang ibabang nabigasyon ay dapat manatiling nakikita sa lahat ng screen ng seksyon, kung hindi mawawalan ng konteksto ang user.

Mga pangunahing pagkakamali: 6+ tab (pinipilit ang paggamit ng «Higit Pa» — nagbabawas ng discoverability), pagbabago ng pagkakasunod-sunod ng tab sa nabigasyon (nakakalito), pagtatago ng Tab Bar sa nested screen (pagkawala ng nabigasyong angkla). Pinakamahusay na kasanayan — nakapirming pagkakasunod-sunod, pare-parehong icon at text label, badge lamang para sa mga aksyon ng user (hindi para sa marketing).

• 3–5 tab — pinakamainam na bilang para sa mabilis na pagpili nang walang labis na karga
• Nakapirming pagkakasunod-sunod — ang mga tab ay dapat maging matatag, walang dinamikong pag-aayos
• Icon + label — parehong elemento ay kinakailangan para sa pag-unawa sa seksyon
• Aktibong tab — dapat biswal na naiiba sa kulay, icon, o animation
• Badge — gamitin para sa mga notipikasyon, i-reset kapag binuksan ang seksyon