TopAppBar: bu nima, sozlash va Jetpack Compose-da foydalanish

Jetpack Compose-da TopAppBar nima?

TopAppBar — Jetpack Compose uchun Material Design kutubxonasidan ilovaning yuqori panelini (App Bar) amalga oshiradigan composable funksiyadir. Komponent joriy ekran sarlavhasini, chap tomonda navigatsiya tugmasini va o'ng tomonda qo'shimcha harakatlarni ko'rsatadi.

Klassik View tizimidan farqli o'laroq, Compose versiyasi TopAppBar to'liq deklarativdir: panel holat o'zgarganda qayta chiziladi, findViewById orqali boshqarilmaydi. TopAppBar slot API tushunchasidan foydalanadi, bunda title, navigationIcon va actions composable lambda sifatida uzatiladi. Bu merosxo'rliksiz panelning istalgan elementini sozlash imkonini beradi.

Google Material Design (2025) ma'lumotlariga ko'ra, Compose-da TopAppBar uch turda mavjud: CenterAlignedTopAppBar (markazlashtirilgan sarlavha), SmallTopAppBar (standart) va MediumTopAppBar (kengaytirilgan). Har bir tur panel balandligi, sarlavha shrift o'lchami va aylantirishdagi xatti-harakatni belgilaydi. Markazlashtirilgan variant asosiy ekranlarda ko'proq ishlatiladi, MediumTopAppBar esa aylantirishda sarlavha asta-sekin kichiklashadigan tarkib sahifalari uchun.

TopAppBar to'g'ri ishlashi uchun tizim bo'shliqlarini hisobga olish kerak: WindowInsetsCompat-dan Insets. Android Developers (2025) tavsiyalariga ko'ra, Modifier.statusBarsPadding() yoki windowInsetsPadding(WindowInsets.systemBars) chaqiruvi panelning status bar ustiga tushishining oldini oladi.

TopAppBar parametrlari: sarlavha va modifierlarni sozlash

TopAppBar komponenti bir qator majburiy va ixtiyoriy parametrlarni qabul qiladi. Asosiysi title bo'lib, unga sarlavha matni bilan composable bloki uzatiladi. title @Composable lambda bo'lgani uchun faqat matn emas, balki matn bilan ikonka, qidiruv satri yoki taraqqiyot paneli ham joylashtirilishi mumkin.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar() {
    TopAppBar(
        title = { Text("Asosiy") },
        navigationIcon = {
            IconButton(onClick = { /* open drawer */ }) {
                Icon(
                    Icons.Filled.Menu,
                    contentDescription = "Menu"
                )
            }
        },
        actions = {
            IconButton(onClick = { /* search */ }) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
        }
    )
}

Modifier parametri butun panel uchun bo'shliqlar, o'lcham va tekislashni belgilashga imkon beradi. Modifier.heightIn orqali minimal va maksimal balandlikni cheklash mumkin. colors parametri fon, sarlavha va ikonkalar ranglarini o'zgartirish uchun TopAppBarColors obyektini qabul qiladi.

Sukut bo'yicha TopAppBar joriy MaterialTheme rang sxemasidan foydalanadi. Agar maxsus palitra kerak bo'lsa, TopAppBarDefaults.smallTopAppBarColors() dan foydalaning. Material3-da fon rangi avtomatik ravishda yorug' va qorong'i temalarda surfaceColor ga moslashadi, bu esa qo'lda sozlash zaruratini bartaraf qiladi.

TopAppBar-da navigatsiya tugmasi

NavigationIcon — TopAppBar ning chap qismida navigatsiyani amalga oshiradigan composable blokdir. Oddiy stsenariylar: Navigation Drawer-ni ochish (Menu ikonkasi), oldingi ekranga qaytish (ArrowBack ikonkasi) yoki joriy ekranni yopish (Close ikonkasi).

Ikonka tanlovi ekranning navigatsiya stekidagi joylashuviga bog'liq. Ekran ildiz bo'lsa — Drawer-ni ochish uchun Menu ikonkasi ko'rsatiladi. Ekran ichki joylashgan bo'lsa — qaytish uchun ArrowBack ikonkasi. Compose-da bu mantiq NavController orqali amalga oshiriladi: joriy back stack yozuvi qaysi ikonka ko'rsatilishini aniqlaydi.

Material Design (2025) tavsiyasiga ko'ra, navigatsiya maydoni kengligi 48 dp — sensorli o'zaro ta'sir uchun standart nishon. Ikonka vizual qayta aloqa (ripple) bilan bosiladigan bo'lishi kerak. Compose-da bu navigatsiyani ishga tushiradigan onClick callback bilan IconButton ga o'rash orqali ta'minlanadi.

Scaffold dan foydalanganda navigatsiya tugmasi to'g'ridan-to'g'ri TopAppBar ga emas, balki Scaffold ga uzatiladigan DrawerState ni takrorlashi mumkin. Bu holda navigationIcon rememberDrawerState orqali Drawer holatiga murojaat qiladi.

Harakatlar va ochiladigan menyuni qo'shish

TopAppBar da actions parametri RowScope konteksti bilan composable blokni qabul qiladi, bu sarlavhaning o'ng tomonida bir nechta ikonka yoki tugmalarni joylashtirishga imkon beradi. Har bir harakat bosiladigan ikonografik element bo'lishi kerak: qidiruv, bildirishnomalar, sozlamalar, sevimlilar.

Haddan tashqari harakatlar uchun DropdownMenu orqali ochiladigan menyu ishlatiladi. Harakatlar soni uchtadan oshsa, qo'shimchalari MoreVert ikonkasi bilan OverflowMenu da joylashtiriladi. Bosilganda yashirin harakatlar ro'yxati ochiladi. DropdownMenu avtomatik ravishda ikonkaga nisbatan pozitsiyalanadi.

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profil") },
        actions = {
            IconButton(onClick = { /* share */ }) {
                Icon(Icons.Filled.Share, contentDescription = "Share")
            }
            Box {
                IconButton(onClick = { menuExpanded = true }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "More")
                }
                DropdownMenu(
                    expanded = menuExpanded,
                    onDismissRequest = { menuExpanded = false }
                ) {
                    DropdownMenuItem(text = { Text("Sozlamalar") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("Haqida") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

Har bir ikonka uchun contentDescription belgilash muhim — bu foydalanish qulayligi talabi. Ta'rifsiz TalkBack tugmani ovoz bilan aytmaydi. Sof dekorativ elementlar uchun contentDescription = null dan foydalaning.

Material3-da TopAppBar: Dynamic Color va moslashuv

Material3 (M3) — Google tomonidan yangi loyihalar uchun tavsiya etilgan Material Design ning joriy versiyasidir. M3 da TopAppBar TopAppBar, CenterAlignedTopAppBar va MediumTopAppBar orqali amalga oshiriladi. Material2 dan asosiy farq — dynamic color, adaptiv balandlik va scroll behavior uchun ichki qo'llab-quvvatlash.

Dynamic Color avtomatik ravishda qurilma fon rasmi asosida panel ranglarini tanlaydi (Android 12+). M3 da TopAppBar fon uchun surfaceColor, sarlavha uchun primary dan foydalanadi. Dynamic color mavjud bo'lmasa, MaterialTheme dan fallback palitrasi qo'llaniladi. Google Material Design (2025) ma'lumotlariga ko'ra, Android 12+ foydalanuvchilarining 63% ilovalarda dynamic color dan foydalanadi.

MediumTopAppBar — katta sarlavhali (32 sp) kengaytirilgan variant bo'lib, aylantirishda asta-sekin 20 sp gacha kichiklashadi va SmallTopAppBar ga aylanadi. Bu effekt TopAppBarDefaults.mediumTopAppBarColors() va scrollBehavior parametri orqali amalga oshiriladi. O'tish animatsiyasi sarlavhaning yig'ilishini kuzatadigan TopAppBarState tomonidan boshqariladi.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MediumTopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = { Text("Kutubxona") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(contentPadding = padding) { /* content */ }
    }
}

Material3 TopAppBar uchun @OptIn(ExperimentalMaterial3Api::class) dan foydalanish kerak — annotatsiya API kelajakdagi versiyalarda o'zgarishi mumkinligini ko'rsatadi. 2025 yilga kelib M3 da TopAppBar experimental bo'lib qolmoqda, ammo Google tegishli tekshirish bilan ishlab chiqarishda foydalanishni tavsiya qiladi.

ScrollBehavior: aylantirishda panelni yashirish

ScrollBehavior — tarkibning vertikal aylantirilishi vaqtida TopAppBar ko'rinishini boshqaradigan mexanizmdir. Jetpack Compose da scrollBehavior panelni yashirish yoki kichiklashtirishga imkon beradi, bu ayniqsa katta tarkib ro'yxati bo'lgan ekranlarda foydalidir.

Material3 uchta strategiyani taqdim etadi: enterAlways (panel yuqoriga aylantirilganda paydo bo'ladi va pastga aylantirilganda yashirinadi), exitUntilCollapsed (panel faqat sarlavha to'liq yig'ilgandan keyin yashirinadi) va TopAppBarScrollBehavior interfeysini amalga oshirish orqali maxsus. Birinchi variant tarkib lentalari uchun, ikkinchisi — MediumTopAppBar bo'lgan ekranlar uchun mos keladi.

ScrollBehavior rememberLazyListState() orqali LazyColumn yoki LazyRow bilan muvofiqlashtirishni talab qiladi. Aylantirish holati scrollBehavior parametri orqali TopAppBar ga uzatiladi. Komponent avtomatik ravishda aylantirish hodisalariga obuna bo'ladi va panel ko'rinishini animatsiya qiladi. Android Developers (2025) ma'lumotlariga ko'ra, enterAlwaysScrollBehavior eng mashhur strategiya bo'lib, aylantiriladigan TopAppBar ga ega ilovalarning 75% ida ishlatiladi.

Maxsus ScrollBehavior sozlash

Maxsus xatti-harakat yaratish uchun TopAppBarScrollBehavior dan meros oling va onScroll va onDrag metodlarini qayta belgilang. Maxsus xatti-harakat standart stsenariylar dizayn talablarini qamrab olmaganda foydalidir — masalan, panel faqat ma'lum aylantirish chegarasidan o'tgandan keyin yashirinishi kerak.

Sukut bo'yicha scrollBehavior tarkib uchun bo'shliq qo'shmaydi — paddingTop ni qo'lda Scaffold da contentPadding yoki LazyColumn da Modifier.padding orqali belgilash kerak. MediumTopAppBar da bo'shliqlar avtomatik ravishda TopAppBarState.collapsedFraction orqali hisoblanadi.

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    topBar = {
        MediumTopAppBar(
            title = { Text("Tarkib") },
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    LazyColumn(contentPadding = padding) { /* items */ }
}

ScrollBehavior faqat Material3 da mavjud. Material2 da TopAppBar aylantirishda yashirish uchun ichki qo'llab-quvvatlashga ega emas — o'xshash xatti-harakat uchun NestedScrollConnection orqali qo'lda amalga oshirish talab qilinadi.