Bottom Navigation: asoslar, BottomNavigationView va TabView

Bottom Navigation nima?

Bottom Navigation — ilovaning asosiy bo'limlari ekranning pastki qismidagi panel orqali mavjud bo'lgan navigatsiya namunasi. Bu usul bir qo'l bilan boshqarish qulayligi tufayli mobil dizayn standartiga aylandi. Yon menyudan (Drawer) farqli o'laroq, Bottom Navigation har doim ko'rinadi va ochish uchun qo'shimcha imo-ishoralarni talab qilmaydi.

Material Design 3 (2026) Navigation Bar-ni uch holatli komponent sifatida belgilaydi: default(belgi + yorliq), labeled (kattalashtirilgan yorliq, bitta faol yorliq) va unlabeled (faqat belgilar). Google Navigation Bar-ni 3–5 teng qiymatli bo'limli ilovalar uchun tavsiya qiladi. 6+ bo'lim uchun — Navigation Drawer. iOS SwiftUI-da TabView tizim uslubi bilan avtomatik ravishda pastki paneldan foydalanadi.

UX Movement (2025) tadqiqoti shuni ko'rsatdiki: Bottom Navigation vazifalarni bajarish vaqtini ochiladigan menyuga nisbatan 27% yaxshilaydi, chunki foydalanuvchi qo'shimcha harakatlarsiz barcha mavjud bo'limlarni ko'radi. Noto'g'ri bosishlar soni katta teginish nishonlari (Android-da kamida 48x48 dp, iOS-da 44x44 pt) tufayli 34% ga kamayadi.

Android-da BottomNavigationView (Material 3)

BottomNavigationView Android-da — Material 3 Library (com.google.android.material.navigation.NavigationBarView) dan komponent. U Material 2 dan eskirgan BottomNavigationView ni almashtirdi va Material You dinamik ranglari, animatsiyalangan faol yorliq indikatori va o'rnatilgan belgilar uchun qo'llab-quvvatlashni qo'shdi. Komponent XML menyu orqali sozlanadi va Navigation Component bilan to'liq mos keladi.

// BottomNavigationView va NavHostFragment bilan Activity
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)

        // Navigatsiyaning avtomatik sinxronizatsiyasi
        navView.setupWithNavController(navController)

        // Belgini sozlash
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Bottom Navigation uchun 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="Bosh sahifa" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chatlar" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView uchta labelVisibilityMode rejimini qo'llab-quvvatlaydi: LABEL_VISIBILITY_AUTO (standart — yorliq faol yorliq uchun ko'rsatiladi), LABEL_VISIBILITY_LABELED (barchasida yorliqlar), LABEL_VISIBILITY_UNLABELED (faqat belgilar). Faol yorliqning animatsiyalangan indikatori maxsus ripple effekti bilan itemActiveIndicatorStyle orqali sozlanadi.

iOS uchun SwiftUI-da TabView

TabView — pastki navigatsiya yaratish uchun SwiftUI ning ichki konteyneri. Har bir yorliq .tabItem modifikatori bilan belgi va matn orqali aniqlanadi. TabView avtomatik ravishda UITabBarController yaratadi va barcha mahalliy panel funksiyalarini qo'llab-quvvatlaydi: belgilar, belgi rangi, almashish animatsiyasi va Dynamic Type ga moslashish.

import SwiftUI

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

            SearchView()
                .tabItem {
                    Label("Qidirish", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Bildirishnomalar", systemImage: "bell.fill")
                }
                .badge("12")

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

TabView .badge modifikatorini (iOS 15+) qo'llab-quvvatlaydi, u Int (raqamli belgi) yoki String (matnli) qabul qiladi. Belgining rangini .badgeProminence(.increased) orqali o'zgartirish mumkin — belgini yorqinroq qiladi. Yorliqlarni almashish animatsiyasi .tabViewStyle(.automatic) yoki maxsus uslublar orqali sozlanadi. Dasturiy almashishni nazorat qilish uchun @State selection bilan ishlatiladi.

Pastki va stek navigatsiyasining kombinatsiyasi

Bottom Navigation kamdan-kam hollarda yolg'iz ishlatiladi — har bir yorliq odatda stek navigatorini o'z ichiga oladi (SwiftUI-da NavigationView/NavigationStack, Android-da NavHostFragment). Bunday kombinatsiya foydalanuvchiga ham bo'limlarga tezkor kirish (Tab), ham har bir bo'lim ichida chuqur navigatsiya (Stack) beradi. Bu ishlab chiqarish ilovalari uchun standart arxitekturadir.

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

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Qidirish", systemImage: "magnifyingglass")
            }
        }
    }
}

// HomeView ichida — stek navigatsiyasi
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-da xuddi shu kombinatsiya har bir yorliq uchun NavHostFragment orqali amalga oshiriladi. Navigation Component har bir yorliq uchun back stack yaratishni avtomatlashtiradi: yorliqlar almashtirilganda stek holati saqlanadi, qaytishda — tiklanadi. Bu Google tizim ilovalaridagi (Play Market, YouTube) kabi uzluksiz UX ta'minlaydi.

Material 3: dinamik ranglar va animatsiyalar

Material 3 (Material You) Bottom Navigation-ga asosiy o'zgarish kiritadi — foydalanuvchi fon rasmidan yaratiladigan dinamik ranglar. Tizim fon rasmidan dominant ranglarni ajratib oladi va 5 asosiy tonli palitra yaratadi. NavigationBarView bu ranglarni avtomatik qo'llaydi: faol yorliq primary rangini oladi, faol bo'lmaganlar — onSurface variant.

Faol yorliq indikatorining animatsiyasi silliq bo'ldi: almashish paytida indikator interpolatsiya bilan yangi yorliq tomon animatsiyalanadi. Tegish paytida ripple effekti secondary rangidan foydalanadi. Bottom Navigation Material 3-da shuningdek itemActiveIndicatorStyle orqali maxsus animatsiyalarni qo'llab-quvvatlaydi — dasturchi indikatorning shaklini (oval, to'rtburchak), chetlari va rangini belgilashi mumkin.

<!-- NavigationBarView faol indikatorining uslubi -->
<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>

Pastki navigatsiya uchun UX tavsiyalari

Bottom Navigation ni loyihalashda foydalanish qulayligi tadqiqotlarini hisobga olish kerak. NN Group (2026): pastki panelning balandligi kamida 56 dp, teginish nishonlari — kamida 48 dp bo'lishi kerak. Yorliq matni — maksimal 12 belgi (lotin) yoki 8 belgi (kirill). Faol yorliq nafaqat rang bilan, balki belgining holati bilan ham (filled vs outlined) farqlanishi kerak.

Material Design 3 quyidagi namunalarni tavsiya qiladi: 4 yorliq — tinch skanerlash uchun optimal; markazda „+“ belgisi (FloatingActionButton) — asosiy harakat uchun; belgilar — faqat foydalanuvchi harakatlari hisoblagichlari uchun. Quyidagilar tavsiya etilmaydi: 2 yorliq bilan Bottom Navigation ishlatish (yaxshiroq Tab Layout), yorliqlar tartibini dinamik o'zgartirish, panelni ichma-ich ekranlarda yashirish.

• Balandlik — bosh barmoq bilan qulay teginish uchun kamida 56 dp
• Kontrast — faol yorliq farqlanishi kerak (rang + belgi to'ldirilishi)
• Yorliqlar — qisqa, 1-2 so'z, kesilmasdan (12 belgidan ko'p bo'lmagan)
• Tartib — qat'iy, eng muhimdan kam muhimga
• Hisoblagichlar — faqat foydalanuvchi bildirishnomalari uchun, marketing uchun emas