Bottom Navigation: əsaslar, BottomNavigationView və TabView

Bottom Navigation nədir?

Bottom Navigation — tətbiqin əsas bölmələrinin ekranın aşağı hissəsindəki panel vasitəsilə əlçatan olduğu naviqasiya nümunəsi. Bu nümunə bir əllə idarəetmənin rahatlığı sayəsində mobil dizaynın standartına çevrilib. Yan menüdən (Drawer) fərqli olaraq, Bottom Navigation həmişə görünür və açmaq üçün əlavə jestlər tələb etmir.

Material Design 3 (2026) Navigation Bar-ı üç vəziyyətli komponent kimi təyin edir: default (ikona + etiket), labeled (böyüdülmüş etiket, bir aktiv əlavə) və unlabeled (yalnız ikonalar). Google Navigation Bar-ı 3–5 bərabər dəyərli bölməsi olan tətbiqlər üçün tövsiyə edir. 6+ bölmə üçün — Navigation Drawer. iOS SwiftUI-də TabView sistem üslubu ilə avtomatik olaraq aşağı paneldən istifadə edir.

UX Movement (2025) tədqiqatı göstərdi: Bottom Navigation, istifadəçinin əlavə hərəkətlər etmədən bütün əlçatan bölmələri görməsi sayəsində, tapşırıqların yerinə yetirilmə müddətini açılan menyu ilə müqayisədə 27% yaxşılaşdırır. Səhv toxunuşların sayı böyük toxunma hədəfləri (Android-də minimum 48x48 dp, iOS-da 44x44 pt) sayəsində 34% azalır.

Android-də BottomNavigationView (Material 3)

BottomNavigationView Android-də — Material 3 Library-dən (com.google.android.material.navigation.NavigationBarView) komponent. O, Material 2-dən köhnəlmiş BottomNavigationView-i əvəz etdi və Material You dinamik rəngləri, animasiya edilmiş aktiv əlavə indikatoru və daxili nişanlar üçün dəstək əlavə etdi. Komponent XML-menü vasitəsilə konfiqurasiya edilir və Navigation Component ilə tam uyğundur.

// BottomNavigationView və NavHostFragment ilə Aktiviti
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)

        // Naviqasiyanın avtomatik sinxronizasiyası
        navView.setupWithNavController(navController)

        // Nişanın konfiqurasiyası
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Bottom Navigation üçün XML menyu (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="Ana səhifə" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Çatlar" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView üç labelVisibilityMode rejimini dəstəkləyir: LABEL_VISIBILITY_AUTO (defolt — etiket aktiv əlavə üçün göstərilir), LABEL_VISIBILITY_LABELED (hamısında etiketlər), LABEL_VISIBILITY_UNLABELED (yalnız ikonalar). Aktiv əlavənin animasiya edilmiş indikatoru fərdi ripple effekti ilə itemActiveIndicatorStyle vasitəsilə konfiqurasiya edilir.

iOS üçün SwiftUI-də TabView

TabView — aşağı naviqasiya yaratmaq üçün SwiftUI-nin daxili konteyneri. Hər əlavə ikona və mətn ilə .tabItem modifikatoru ilə təyin edilir. TabView avtomatik olaraq UITabBarController yaradır və bütün yerli panel funksiyalarını dəstəkləyir: nişanlar, nişan rəngi, keçid animasiyası və Dynamic Type-a uyğunlaşma.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Ana səhifə", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Axtarış", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Bildirişlər", systemImage: "bell.fill")
                }
                .badge("12")

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

TabView .badge modifikatorunu (iOS 15+) dəstəkləyir, o Int (rəqəm nişanı) və ya String (mətn) qəbul edir. Nişanın rəngini .badgeProminence(.increased) vasitəsilə dəyişmək olar — nişanı daha parlaq edir. Əlavələrin dəyişdirilməsi animasiyası .tabViewStyle(.automatic) və ya fərdi üslublar vasitəsilə konfiqurasiya edilir. Proqramlı keçidə nəzarət üçün @State selection ilə istifadə olunur.

Aşağı və yığın naviqasiyasının kombinasiyası

Bottom Navigation nadir hallarda tək istifadə olunur — hər əlavə adətən yığın naviqatoru ehtiva edir (SwiftUI-də NavigationView/NavigationStack, Android-də NavHostFragment). Belə kombinasiya istifadəçiyə həm bölmələrə sürətli giriş (Tab), həm də hər bölmə daxilində dərin naviqasiya (Stack) verir. Bu, istehsalat tətbiqləri üçün standart arxitekturadır.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Ana səhifə", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Axtarış", systemImage: "magnifyingglass")
            }
        }
    }
}

// HomeView daxilində — yığın naviqasiyası
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)
        }
    }
}

Android-də eyni kombinasiya hər əlavə üçün NavHostFragment vasitəsilə tətbiq edilir. Navigation Component hər əlavə üçün back stack yaradılmasını avtomatlaşdırır: əlavələr dəyişdirilərkən yığının vəziyyəti saxlanılır, qayıdışda bərpa olunur. Bu, Google-un sistem tətbiqlərindəki (Play Market, YouTube) kimi fasiləsiz UX təmin edir.

Material 3: dinamik rənglər və animasiyalar

Material 3 (Material You) Bottom Navigation-a əsas dəyişiklik gətirir — istifadəçinin divar kağızından yaradılan dinamik rənglər. Sistem divar kağızından dominant rəngləri çıxarır və 5 əsas tondan ibarət palitra yaradır. NavigationBarView bu rəngləri avtomatik tətbiq edir: aktiv əlavə primary rəngi alır, qeyri-aktivlər — onSurface variant.

Aktiv əlavə indikatorunun animasiyası hamar oldu: keçid zamanı indikator interpolyasiya ilə yeni əlavəyə doğru animasiya edilərək hərəkət edir. Toxunma zamanı ripple effekti secondary rəngindən istifadə edir. Bottom Navigation Material 3-də həmçinin itemActiveIndicatorStyle vasitəsilə fərdi animasiyaları dəstəkləyir — tərtibatçı indikatorun formasını (oval, düzbucaqlı), boşluqlarını və rəngini təyin edə bilər.

<!-- NavigationBarView aktiv indikatorunun üslubu -->
<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>

Aşağı naviqasiya üçün UX tövsiyələri

Bottom Navigation layihələndirilərkən istifadəyə yararlılıq tədqiqatları nəzərə alınmalıdır. NN Group (2026): aşağı panelin hündürlüyü minimum 56 dp, toxunma hədəfləri — ən azı 48 dp olmalıdır. Etiket mətni — maksimum 12 simvol (latın) və ya 8 simvol (kiril). Aktiv əlavə təkcə rənglə deyil, həm də ikonanın vəziyyəti ilə (filled vs outlined) fərqlənməlidir.

Material Design 3 aşağıdakı nümunələri tövsiyə edir: 4 əlavə — rahat skan etmək üçün optimaldır; mərkəzdə „+“ işarəsi (FloatingActionButton) — əsas hərəkət üçün; nişanlar — yalnız istifadəçi hərəkətlərinin sayğacları üçün. Aşağıdakılar tövsiyə edilmir: 2 əlavə ilə Bottom Navigation istifadə etmək (daha yaxşı Tab Layout), əlavələrin sırasını dinamik dəyişmək, paneli iç-içə ekranlarda gizlətmək.

• Hündürlük — baş barmaqla rahat toxunma üçün minimum 56 dp
• Kontrast — aktiv əlavə fərqlənməlidir (rəng + ikona doldurulması)
• Yazılar — qısa, 1-2 söz, kəsilmədən (12 simvoldan çox olmayaraq)
• Sıra — sabit, ən vacibdən az vacibə doğru
• Sayğaclar — yalnız istifadəçi bildirişləri üçün, marketinq üçün deyil