Tab Bar — co to jest, panel zakładek w aplikacjach mobilnych

Czym jest Tab Bar?

Tab Bar (panel zakładek) — element interfejsu graficznego umieszczony w dolnej części ekranu aplikacji mobilnej. Zapewnia szybki dostęp do 3–5 głównych sekcji aplikacji. Każda sekcja jest reprezentowana przez ikonę i etykietę tekstową. Użytkownik naciska zakładkę, aby przełączyć się do odpowiedniej sekcji. Tab Bar pozostaje widoczny na wszystkich ekranach w obrębie każdej sekcji, zapewniając stały punkt wejścia.

Apple zaleca używanie Tab Bar dla sekcji aplikacji o równym poziomie ważności. Human Interface Guidelines (2026) wskazują: „Tab Bar pokazuje 3–5 zakładek. Jeśli potrzeba więcej — ostatnia zakładka staje się punktem „Więcej” z pozostałymi w środku”. Material Design Google (2026) zaleca Bottom Navigation dla tych samych celów — 3–5 punktów, aktywna zakładka wyróżniona kolorem i animacją.

W przeciwieństwie do górnych zakładek (Top Tab Bar), dolny panel jest wygodniejszy do obsługi jedną ręką — kciuk naturalnie sięga do dolnej części ekranu. Badanie Nielsen Norman Group (2025) wykazało, że nawigacja dolna skraca czas wykonania zadania o 22% w porównaniu z górną na smartfonach z przekątną od 6 cali.

UITabBarController w iOS

UITabBarController — wbudowany kontroler iOS do organizacji nawigacji przez zakładki. Każda zakładka zarządza własnym zestawem ekranów, zwykle zorganizowanym w UINavigationController. UITabBarController automatycznie tworzy Tab Bar w dolnej części ekranu z systemowym półprzezroczystym tłem i animacją przy przełączaniu.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Główna",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Szukaj",
            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]
    }
}

Każda zakładka w przykładzie zawiera UINavigationController, co umożliwia wewnątrz sekcji korzystanie z nawigacji stosowej. tabBarItem konfiguruje ikonę, tytuł i badge. System automatycznie stosuje styl SF Symbols dla ikon — standardowych symboli Apple z obsługą typu dynamicznego i wielokolorowości.

BottomNavigationView w Android

BottomNavigationView — komponent Android z Material Design Library implementujący dolny panel nawigacji. W Android 13+ używany jest NavigationBarView — jego następca z ulepszoną animacją i adaptacyjnym zachowaniem. BottomNavigationView jest zgodny ze specyfikacją Material Design 3 (Material You) i obsługuje motyw aplikacji, dynamiczne kolory oraz animację przy przełączaniu.

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)

        // Podłączenie BottomNavigation do NavController
        navView.setupWithNavController(navController)

        // Konfiguracja badge'a na zakładce powiadomień
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Komponent BottomNavigationView obsługuje Material Design 3 z trzema stylami: default (podpis + ikona), labeled (powiększony podpis) i unlabeled (tylko ikona). Metoda setupWithNavController łączy panel z Navigation Component, automatycznie aktualizując aktywną zakładkę przy zmianie ekranu. Badge są tworzone przez getOrCreateBadge i obsługują wskaźniki liczbowe i punktowe.

Badge i wskaźniki na Tab Bar

Badge — wskaźniki liczbowe lub punktowe na ikonach zakładek wyświetlające liczbę powiadomień, nowych wiadomości lub zadań. W iOS badge ustawia się przez właściwość badgeValue na UITabBarItem. W Android badge są zarządzane przez BadgeDrawable (Material 3) lub getOrCreateBadge w NavigationBarView.

Badge to potężne narzędzie zaangażowania: badania Localytics (2025) wykazały, że aplikacje z badge mają o 18% wyższy retention w 7. dniu. Jednak nadużywanie badge (więcej niż 3 jednocześnie) obniża CTR o 12%. Apple i Google zalecają pokazywanie badge tylko dla istotnych powiadomień i resetowanie go przy otwarciu sekcji.

Dostosowywanie Tab Bar: ikony, kolory, animacje

Obie platformy oferują szerokie możliwości dostosowywania Tab Bar. W iOS można zmienić kolor tła, tint color aktywnej zakładki, czcionkę podpisu i dodać niestandardowe ikony przez SF Symbols lub własne zasoby. W Android dostosowywanie obejmuje style Material 3, animację przełączania, efekt ripple i kolory dynamiczne oparte na tapecie.

// Dostosowywanie Tab Bar w 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.

W Android dostosowywanie BottomNavigationView wykonuje się przez atrybuty XML lub programowo. Material 3 wprowadza koncepcję kolorów dynamicznych: paleta jest generowana z tapety użytkownika i automatycznie stosowana do komponentów. Deweloper może nadpisać kolory przez motyw, ustawić niestandardową animację podkreślenia (indicator) i skonfigurować efekt ripple.

// Dostosowywanie BottomNavigationView w 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")
    )
}

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

Najlepsze praktyki nawigacji dolnej

Projektując Tab Bar, ważne jest przestrzeganie zaleceń platform i badań użyteczności. Apple HIG: nie więcej niż 5 zakładek, tekst zwięzły, ikony semantyczne. Material Design: 3–5 punktów, aktywny punkt wyróżniony, licznik badge nie więcej niż 99. NN Group (2025): nawigacja dolna powinna pozostać widoczna na wszystkich ekranach sekcji, w przeciwnym razie użytkownik traci kontekst.

Główne błędy: 6+ zakładek (wymusza użycie „Więcej” — obniża discoverability), zmiana kolejności zakładek podczas nawigacji (dezorientuje), ukrywanie Tab Bar na zagnieżdżonych ekranach (utrata punktu zaczepienia nawigacji). Najlepsza praktyka — stała kolejność, jednolite ikony i etykiety tekstowe, badge tylko dla działań użytkownika (nie dla marketingu).

• 3–5 zakładek — optymalna liczba dla szybkiego wyboru bez przeciążenia
• Stała kolejność — zakładki powinny być stabilne, bez dynamicznego przestawiania
• Ikona + podpis — oba elementy są obowiązkowe do zrozumienia sekcji
• Aktywna zakładka — powinna wizualnie różnić się kolorem, ikoną lub animacją
• Badge — używaj do powiadomień, resetuj przy otwarciu sekcji