Bottom Navigation: alapok, BottomNavigationView és TabView

Mi az a Bottom Navigation?

Bottom Navigation — navigációs minta, amelyben az alkalmazás fő szekciói a képernyő alján lévő panelen keresztül érhetők el. Ez a minta az egykezes használat kényelme miatt a mobil design szabványává vált. Az oldalsó menütől (Drawer) eltérően a Bottom Navigation mindig látható, és nem igényel további gesztusokat a megnyitáshoz.

Material Design 3 (2026) a Navigation Bar-t három állapotú komponensként határozza meg: default (ikon + címke), labeled (nagyított címke, egy aktív lap) és unlabeled (csak ikonok). A Google a Navigation Bar-t 3–5 egyenrangú szekcióval rendelkező alkalmazásokhoz ajánlja. 6+ szekcióhoz — Navigation Drawer. iOS SwiftUI-ban a TabView automatikusan az alsó panelt használja rendszerstílussal.

Az UX Movement (2025) kutatása kimutatta: a Bottom Navigation 27%-kal javítja a feladatok végrehajtási idejét a kihúzható menühöz képest, mivel a felhasználó minden elérhető szekciót lát további műveletek nélkül. A téves érintések száma 34%-kal csökken a nagy érintési célpontoknak köszönhetően (minimum 48x48 dp Androidon, 44x44 pt iOS-en).

BottomNavigationView Androidon (Material 3)

BottomNavigationView Androidon — komponens a Material 3 Library-ből (com.google.android.material.navigation.NavigationBarView). Ez felváltotta az elavult BottomNavigationView-t a Material 2-ből és hozzáadta a Material You dinamikus színeinek, az animált aktív lap indikátornak és a beépített jelvényeknek a támogatását. A komponens XML menün keresztül konfigurálható és teljesen kompatibilis a Navigation Component-tel.

// Aktivitás BottomNavigationView-val és NavHostFragment-tel
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // Navigáció automatikus szinkronizálása
        navView.setupWithNavController(navController)

        // Jelvény konfiguráció
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// XML menü Bottom Navigation-hoz (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="Főoldal" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Csevegések" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView három labelVisibilityMode módot támogat: LABEL_VISIBILITY_AUTO (alapértelmezett — címke az aktív laphoz jelenik meg), LABEL_VISIBILITY_LABELED (címkék mindenkinél), LABEL_VISIBILITY_UNLABELED (csak ikonok). Az animált aktív lap indikátor az itemActiveIndicatorStyle-on keresztül konfigurálható egyedi ripple effektussal.

TabView a SwiftUI-ban iOS-hez

TabView — beépített SwiftUI konténer alsó navigáció létrehozásához. Minden lapot a .tabItem módosító határoz meg ikonnal és szöveggel. A TabView automatikusan létrehoz egy UITabBarController-t a motorháztető alatt, és támogatja a natív panel összes funkcióját: jelvények, jelvényszín, váltási animáció és Dynamic Type-hoz való alkalmazkodás.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Főoldal", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Keresés", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Értesítések", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Profil", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView támogatja a .badge módosítót (iOS 15+), amely Int (numerikus jelvény) vagy String (szöveges) értéket fogad. A jelvény színe a .badgeProminence(.increased) segítségével változtatható — világosabbá teszi a jelvényt. A lapváltás animációja a .tabViewStyle(.automatic) vagy egyedi stílusok segítségével konfigurálható. A programozott váltás vezérléséhez @State használatos selection-nel.

Az alsó és verem navigáció kombinációja

Bottom Navigation ritkán használatos önállóan — minden lap általában tartalmaz egy verem navigátort (NavigationView/NavigationStack SwiftUI-ban, NavHostFragment Androidon). Ez a kombináció gyors hozzáférést biztosít a felhasználónak a szekciókhoz (Tab) és mély navigációt minden szekción belül (Stack). Ez a standard architektúra production alkalmazásokhoz.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Főoldal", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Keresés", systemImage: "magnifyingglass")
            }
        }
    }
}

// A HomeView-on belül — verem navigáció
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

Androidon ugyanez a kombináció NavHostFragment-en keresztül valósul meg minden laphoz. A Navigation Component automatizálja a back stack létrehozását minden laphoz: lapváltáskor a verem állapota mentésre kerül, visszatéréskor — visszaállításra. Ez zökkenőmentes UX-et biztosít, mint a Google rendszeralkalmazásaiban (Play Market, YouTube).

Material 3: dinamikus színek és animációk

Material 3 (Material You) kulcsfontosságú változást hoz a Bottom Navigation-ba — a felhasználó háttérképéből generált dinamikus színeket. A rendszer kivonja a domináns színeket a wallpaper-ből, és egy 5 kulcsfontosságú tónusú palettát hoz létre. A NavigationBarView automatikusan alkalmazza ezeket a színeket: az aktív lap megkapja a primary színt, az inaktívak — onSurface variant.

Az aktív lap indikátorának animációja simává vált: váltáskor az indikátor animáltan mozog az új lap felé interpolációval. Az érintéskori ripple effektus a secondary színt használja. Bottom Navigation a Material 3-ban egyedi animációkat is támogat az itemActiveIndicatorStyle-on keresztül — a fejlesztő beállíthatja az indikátor alakját (ovális, téglalap), margóit és színét.

<!-- NavigationBarView aktív indikátorának stílusa -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

UX ajánlások az alsó navigációhoz

A Bottom Navigation tervezésekor figyelembe kell venni a használhatósági kutatásokat. NN Group (2026): az alsó panel magassága minimum 56 dp, az érintési célpontok — legalább 48 dp. A címkék szövege — maximum 12 karakter (latin) vagy 8 karakter (cirill). Az aktív lapnak nemcsak színében, hanem ikonállapotában is különböznie kell (filled vs outlined).

Material Design 3 a következő mintákat ajánlja: 4 lap — optimális a nyugodt szkenneléshez; „+“ jel középen (FloatingActionButton) — a fő művelethez; jelvények — csak a felhasználói műveletek számlálóihoz. Nem ajánlott: Bottom Navigation használata 2 lappal (jobb a Tab Layout), a lapok sorrendjének dinamikus megváltoztatása, a panel elrejtése beágyazott képernyőkön.

• Magasság — minimum 56 dp a kényelmes hüvelykujjas érintéshez
• Kontraszt — az aktív lapnak megkülönböztethetőnek kell lennie (szín + ikon kitöltés)
• Címkék — rövidek, 1-2 szó, vágás nélkül (legfeljebb 12 karakter)
• Sorrend — rögzített, a legfontosabbtól a kevésbé fontos felé
• Számlálók — csak felhasználói értesítésekhez, nem marketinghez