Tab Bar — ce este, panoul de file în aplicațiile mobile

Ce este Tab Bar?

Tab Bar (panoul de file) — element de interfață grafică situat în partea de jos a ecranului aplicației mobile. Oferă acces rapid la 3–5 secțiuni principale ale aplicației. Fiecare secțiune este reprezentată printr-o iconiță și o etichetă text. Utilizatorul apasă pe o filă pentru a comuta la secțiunea corespunzătoare. Tab Bar rămâne vizibil pe toate ecranele din fiecare secțiune, asigurând un punct de intrare constant.

Apple recomandă utilizarea Tab Bar pentru secțiunile aplicației cu nivel egal de importanță. Human Interface Guidelines (2026) indică: «Tab Bar afișează 3–5 file. Dacă sunt necesare mai multe — ultima filă devine punctul «Mai multe» cu restul înăuntru». Material Design Google (2026) recomandă Bottom Navigation pentru aceleași scopuri — 3–5 puncte, fila activă evidențiată prin culoare și animație.

Spre deosebire de filele superioare (Top Tab Bar), panoul de jos este mai comod pentru operarea cu o singură mână — degetul mare ajunge natural în partea de jos a ecranului. Cercetarea Nielsen Norman Group (2025) a arătat că navigarea de jos reduce timpul de execuție a sarcinii cu 22% comparativ cu cea de sus pe smartphone-uri cu diagonală de la 6 inci.

UITabBarController în iOS

UITabBarController — controlerul încorporat iOS pentru organizarea navigării prin file. Fiecare filă gestionează propriul set de ecrane, de obicei organizat în UINavigationController. UITabBarController creează automat Tab Bar în partea de jos a ecranului cu fond semi-transparent sistem și animație la comutare.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

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

Fiecare filă din exemplu conține UINavigationController, ceea ce permite utilizarea navigării în stivă în interiorul secțiunii. tabBarItem configurează iconița, titlul și insigne. Sistemul aplică automat stilul SF Symbols pentru iconițe — simboluri standard Apple cu suport pentru tip dinamic și multicolor.

BottomNavigationView în Android

BottomNavigationView — componenta Android din Material Design Library care implementează panoul de navigare de jos. În Android 13+ se utilizează NavigationBarView — succesorul său cu animație îmbunătățită și comportament adaptiv. BottomNavigationView urmează specificația Material Design 3 (Material You) și suportă tema aplicației, culori dinamice și animație la comutare.

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)

        // Conectarea BottomNavigation la NavController
        navView.setupWithNavController(navController)

        // Configurarea insignei pe fila de notificări
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Componenta BottomNavigationView suportă Material Design 3 cu trei stiluri: default (semnătură + iconiță), labeled (semnătură mărită) și unlabeled (doar iconiță). Metoda setupWithNavController leagă panoul de Navigation Component, actualizând automat fila activă la schimbarea ecranului. Insignele se creează prin getOrCreateBadge și suportă indicatori numerici și punctiformi.

Insigne și indicatori pe Tab Bar

Insigne — indicatori numerici sau punctiformi pe iconițele filelor care afișează numărul de notificări, mesaje noi sau sarcini. Pe iOS insigne se setează prin proprietatea badgeValue pe UITabBarItem. Pe Android insigne se gestionează prin BadgeDrawable (Material 3) sau getOrCreateBadge în NavigationBarView.

Insignele sunt un instrument puternic de implicare: cercetările Localytics (2025) au arătat că aplicațiile cu insigne au un retention cu 18% mai mare în ziua 7. Cu toate acestea, abuzul de insigne (mai mult de 3 simultan) reduce CTR cu 12%. Apple și Google recomandă afișarea insignei doar pentru notificări relevante și resetarea acesteia la deschiderea secțiunii.

Personalizarea Tab Bar: iconițe, culori, animații

Ambele platforme oferă posibilități largi de personalizare a Tab Bar. Pe iOS se poate schimba culoarea de fundal, culoarea tint a filei active, fontul etichetei și se pot adăuga iconițe personalizate prin SF Symbols sau active proprii. Pe Android personalizarea include stiluri Material 3, animație de comutare, efect ripple și culori dinamice bazate pe wallpaper.

// Personalizarea Tab Bar în 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.

Pe Android personalizarea BottomNavigationView se realizează prin atribute XML sau programatic. Material 3 introduce conceptul de culori dinamice: paleta este generată din wallpaper-ul utilizatorului și se aplică automat componentelor. Dezvoltatorul poate suprascrie culorile prin temă, poate seta o animație personalizată de subliniere (indicator) și poate configura efectul ripple.

// Personalizarea BottomNavigationView în 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")
    )
}

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

Cele mai bune practici de navigare jos

La proiectarea Tab Bar este important să se respecte recomandările platformelor și cercetările de utilizabilitate. Apple HIG: nu mai mult de 5 file, text concis, iconițe semantice. Material Design: 3–5 puncte, punctul activ evidențiat, contorul insignei nu mai mult de 99. NN Group (2025): navigarea de jos trebuie să rămână vizibilă pe toate ecranele secțiunii, altfel utilizatorul pierde contextul.

Principalele greșeli: 6+ file (forțează utilizarea «Mai multe» — reduce discoverability), schimbarea ordinii filelor la navigare (dezorientează), ascunderea Tab Bar pe ecranele imbricate (pierderea ancorei de navigare). Cea mai bună practică — ordine fixă, iconițe și etichete text uniforme, insigne doar pentru acțiunile utilizatorului (nu pentru marketing).

• 3–5 file — numărul optim pentru selecție rapidă fără suprasolicitare
• Ordine fixă — filele trebuie să fie stabile, fără rearanjare dinamică
• Iconiță + etichetă — ambele elemente sunt obligatorii pentru înțelegerea secțiunii
• Fila activă — trebuie să se diferențieze vizual prin culoare, iconiță sau animație
• Insigne — utilizați pentru notificări, resetați la deschiderea secțiunii