Tab Bar — co to je, panel karet v mobilních aplikacích

Co je Tab Bar?

Tab Bar (panel karet) — prvek grafického rozhraní umístěný ve spodní části obrazovky mobilní aplikace. Poskytuje rychlý přístup k 3–5 hlavním sekcím aplikace. Každá sekce je reprezentována ikonou a textovým popiskem. Uživatel klepne na kartu pro přepnutí do příslušné sekce. Tab Bar zůstává viditelný na všech obrazovkách v rámci každé sekce a poskytuje stálý vstupní bod.

Apple doporučuje používat Tab Bar pro sekce aplikace se stejnou úrovní důležitosti. Human Interface Guidelines (2026) uvádějí: «Tab Bar zobrazuje 3–5 karet. Pokud je potřeba více — poslední karta se stane bodem «Více» s ostatními uvnitř». Material Design Google (2026) doporučuje Bottom Navigation pro stejné účely — 3–5 bodů, aktivní karta zvýrazněná barvou a animací.

Na rozdíl od horních karet (Top Tab Bar) je spodní panel pohodlnější pro ovládání jednou rukou — palec přirozeně dosáhne na spodní část obrazovky. Výzkum Nielsen Norman Group (2025) ukázal, že spodní navigace zkracuje dobu dokončení úkolu o 22% ve srovnání s horní navigací na smartphonech s úhlopříčkou od 6 palců.

UITabBarController v iOS

UITabBarController — vestavěný řadič iOS pro organizaci navigace přes karty. Každá karta spravuje vlastní sadu obrazovek, obvykle organizovanou v UINavigationController. UITabBarController automaticky vytváří Tab Bar ve spodní části obrazovky se systémovým poloprůhledným pozadím a animací při přepínání.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Domů",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Hledat",
            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ždá karta v příkladu obsahuje UINavigationController, což umožňuje použití zásobníkové navigace uvnitř sekce. tabBarItem konfiguruje ikonu, název a odznak. Systém automaticky aplikuje styl SF Symbols pro ikony — standardní symboly Apple s podporou dynamického typu a vícebarevnosti.

BottomNavigationView v Android

BottomNavigationView — komponenta Android z Material Design Library implementující spodní navigační panel. V Android 13+ se používá NavigationBarView — jeho nástupce s vylepšenou animací a adaptivním chováním. BottomNavigationView sleduje specifikaci Material Design 3 (Material You) a podporuje téma aplikace, dynamické barvy a animaci při přepínání.

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)

        // Připojení BottomNavigation k NavController
        navView.setupWithNavController(navController)

        // Konfigurace odznaku na kartě oznámení
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

Komponenta BottomNavigationView podporuje Material Design 3 se třemi styly: default (popisek + ikona), labeled (zvětšený popisek) a unlabeled (pouze ikona). Metoda setupWithNavController propojuje panel s Navigation Component a automaticky aktualizuje aktivní kartu při změně obrazovky. Odznaky se vytvářejí přes getOrCreateBadge a podporují číselné a bodové indikátory.

Odznaky a indikátory na Tab Bar

Odznaky — číselné nebo bodové indikátory na ikonách karet zobrazující počet oznámení, nových zpráv nebo úkolů. V iOS se odznak nastavuje přes vlastnost badgeValue na UITabBarItem. V Android se odznaky spravují přes BadgeDrawable (Material 3) nebo getOrCreateBadge v NavigationBarView.

Odznaky jsou silným nástrojem zapojení: výzkumy Localytics (2025) ukázaly, že aplikace s odznaky mají o 18% vyšší retention 7. den. Nadměrné používání odznaků (více než 3 současně) však snižuje CTR o 12%. Apple a Google doporučují zobrazovat odznak pouze pro relevantní oznámení a resetovat jej při otevření sekce.

Přizpůsobení Tab Bar: ikony, barvy, animace

Obě platformy nabízejí široké možnosti přizpůsobení Tab Bar. V iOS lze změnit barvu pozadí, tint barvu aktivní karty, písmo popisku a přidat vlastní ikony přes SF Symbols nebo vlastní zdroje. V Android přizpůsobení zahrnuje styly Material 3, animaci přepínání, efekt ripple a dynamické barvy na základě tapety.

// Přizpůsobení Tab Bar v 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.

V Android se přizpůsobení BottomNavigationView provádí přes XML atributy nebo programově. Material 3 zavádí koncept dynamických barev: paleta je generována z tapety uživatele a automaticky aplikována na komponenty. Vývojář může přepsat barvy přes téma, nastavit vlastní animaci podtržení (indicator) a nakonfigurovat efekt ripple.

// Přizpůsobení BottomNavigationView v 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")
    )
}

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

Nejlepší postupy spodní navigace

Při navrhování Tab Bar je důležité dodržovat doporučení platforem a výzkumy použitelnosti. Apple HIG: ne více než 5 karet, stručný text, sémantické ikony. Material Design: 3–5 bodů, aktivní bod zvýrazněn, počítadlo odznaku ne více než 99. NN Group (2025): spodní navigace by měla zůstat viditelná na všech obrazovkách sekce, jinak uživatel ztrácí kontext.

Hlavní chyby: 6+ karet (nutí používat «Více» — snižuje objevitelnost), změna pořadí karet při navigaci (dezorientuje), skrytí Tab Bar na vnořených obrazovkách (ztráta navigační kotvy). Nejlepší postup — pevné pořadí, jednotné ikony a textové popisky, odznaky pouze pro akce uživatele (ne pro marketing).

• 3–5 karet — optimální počet pro rychlý výběr bez přetížení
• Pevné pořadí — karty by měly být stabilní, bez dynamického přeskupování
• Ikona + popisek — oba prvky jsou povinné pro pochopení sekce
• Aktivní karta — měla by se vizuálně lišit barvou, ikonou nebo animací
• Odznaky — používejte pro oznámení, resetujte při otevření sekce