Tab Bar — mi ez, lapfülek panel mobilalkalmazásokban

Mi az a Tab Bar?

Tab Bar (lapfülek panel) — grafikus felületi elem a mobilalkalmazás képernyőjének alsó részén. Gyors hozzáférést biztosít az alkalmazás 3–5 fő szakaszához. Minden szakaszt egy ikon és szöveges címke képvisel. A felhasználó a lapfülre kattintva vált a megfelelő szakaszra. A Tab Bar látható marad a szakasz összes képernyőjén, állandó belépési pontot biztosítva.

Az Apple a Tab Bar használatát ajánlja az alkalmazás egyenlő fontosságú szakaszaihoz. A Human Interface Guidelines (2026) kijelenti: «A Tab Bar 3–5 lapfület mutat. Ha többre van szükség — az utolsó lapfül lesz a «Több» pont a többivel együtt». A Google Material Design (2026) a Bottom Navigation-t ajánlja ugyanerre a célra — 3–5 pont, az aktív lapfül színnel és animációval kiemelve.

Ellentétben a felső lapfülekkel (Top Tab Bar), az alsó panel kényelmesebb egykezes használatra — a hüvelykujj természetesen eléri a képernyő alsó részét. A Nielsen Norman Group (2025) kutatása kimutatta, hogy az alsó navigáció 22%-kal csökkenti a feladat végrehajtási idejét a felső navigációhoz képest a 6 hüvelykes átlójú okostelefonokon.

UITabBarController iOS-ben

UITabBarController — beépített iOS vezérlő a navigáció lapfüleken keresztüli szervezéséhez. Minden lapfül saját képernyőkészletet kezel, általában UINavigationController-ben szervezve. Az UITabBarController automatikusan létrehoz egy Tab Bar-t a képernyő alján rendszer-féligáteresztő háttérrel és váltási animációval.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Kezdőlap",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Keresés",
            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]
    }
}

A példában minden lapfül UINavigationController-t tartalmaz, ami lehetővé teszi a verem navigáció használatát a szakaszon belül. A tabBarItem konfigurálja az ikont, a címet és a jelvényt. A rendszer automatikusan alkalmazza az SF Symbols stílust az ikonokhoz — szabványos Apple szimbólumok dinamikus típus és többszínűség támogatással.

BottomNavigationView Androidban

BottomNavigationView — Android komponens a Material Design Library-ból, amely az alsó navigációs panelt valósítja meg. Android 13+-ban a NavigationBarView használatos — utódja továbbfejlesztett animációval és adaptív viselkedéssel. A BottomNavigationView követi a Material Design 3 (Material You) specifikációt, és támogatja az alkalmazás témáját, a dinamikus színeket és a váltási animációt.

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)

        // BottomNavigation csatlakoztatása NavController-hez
        navView.setupWithNavController(navController)

        // Jelvény konfigurálása az értesítések lapfülön
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

A BottomNavigationView komponens három stílussal támogatja a Material Design 3-at: default (felirat + ikon), labeled (nagyított felirat) és unlabeled (csak ikon). A setupWithNavController metódus összeköti a panelt a Navigation Component-tel, automatikusan frissítve az aktív lapfül képernyőváltáskor. A jelvények a getOrCreateBadge-en keresztül jönnek létre, és támogatják a numerikus és pont jelzőket.

Jelvények és jelzők a Tab Bar-on

Jelvények — numerikus vagy pont jelzők a lapikonokon, amelyek az értesítések, új üzenetek vagy feladatok számát jelenítik meg. iOS-ben a jelvény a UITabBarItem badgeValue tulajdonságán keresztül állítható be. Androidban a jelvények a BadgeDrawable (Material 3) vagy a NavigationBarView getOrCreateBadge metódusa segítségével kezelhetők.

A jelvények erőteljes elköteleződési eszközök: a Localytics (2025) kutatása kimutatta, hogy a jelvényekkel rendelkező alkalmazások 18%-kal magasabb retention-t mutatnak a 7. napon. A jelvények túlzott használata (egyszerre több mint 3) azonban 12%-kal csökkenti a CTR-t. Az Apple és a Google azt ajánlja, hogy a jelvényt csak releváns értesítésekhez jelenítsék meg, és a szakasz megnyitásakor állítsák vissza.

Tab Bar testreszabása: ikonok, színek, animációk

Mindkét platform széles körű testreszabási lehetőségeket kínál a Tab Bar számára. iOS-ben megváltoztatható a háttérszín, az aktív lapfül tint színe, a felirat betűtípusa, és egyéni ikonok adhatók hozzá SF Symbols vagy saját erőforrások segítségével. Androidban a testreszabás Material 3 stílusokat, váltási animációt, ripple effektust és a háttérkép alapú dinamikus színeket foglal magában.

// Tab Bar testreszabása iOS-ben
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.

Androidban a BottomNavigationView testreszabása XML attribútumokon vagy programozottan történik. A Material 3 bevezeti a dinamikus színek koncepcióját: a paletta a felhasználó háttérképéből generálódik, és automatikusan alkalmazódik a komponensekre. A fejlesztő felülírhatja a színeket a témán keresztül, beállíthat egyéni aláhúzási animációt (indicator), és konfigurálhatja a ripple effektust.

// BottomNavigationView testreszabása Androidban
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")
    )
}

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

Legjobb gyakorlatok az alsó navigációhoz

A Tab Bar tervezésekor fontos betartani a platform ajánlásait és a használhatósági kutatásokat. Apple HIG: legfeljebb 5 lapfül, tömör szöveg, szemantikus ikonok. Material Design: 3–5 pont, aktív pont kiemelve, jelvényszámláló legfeljebb 99. NN Group (2025): az alsó navigációnak láthatónak kell maradnia a szakasz összes képernyőjén, különben a felhasználó elveszíti a kontextust.

Fő hibák: 6+ lapfül (kényszeríti a «Több» használatát — csökkenti a felfedezhetőséget), a lapfülek sorrendjének megváltozása navigáció közben (dezorientálja a felhasználót), a Tab Bar elrejtése beágyazott képernyőkön (navigációs horgony elvesztése). Legjobb gyakorlat — rögzített sorrend, egységes ikonok és szöveges címkék, jelvények csak felhasználói műveletekhez (nem marketinghez).

• 3–5 lapfül — optimális szám a gyors kiválasztáshoz túlterhelés nélkül
• Rögzített sorrend — a lapfüleknek stabilnak kell lenniük, dinamikus átrendezés nélkül
• Ikon + felirat — mindkét elem kötelező a szakasz megértéséhez
• Aktív lapfül — vizuálisan kell különböznie színben, ikonban vagy animációban
• Jelvények — használja értesítésekhez, állítsa vissza a szakasz megnyitásakor