Sheet mobil ishlanmalarda — mohiyati, turlari va ishlash prinsipi

Mobil ilovalarda Sheet nima

Sheet — bu ekranning pastki qismidan chiqadigan va qo'shimcha kontent yoki harakatlarni ko'rsatadigan, foydalanuvchini joriy ekrandan olib ketmaydigan yuzaki UI-komponent. To'liq ekranli o'tishlardan farqli o'laroq, Sheet kontekstni saqlaydi: foydalanuvchi fon ekranini ko'radi va Sheet qayerdan paydo bo'lganini tushunadi.

Sheet arxitekturasi o'zgaruvchan balandlikdagi konteynerga asoslangan. Minimal holatda (collapsed) faqat kontentning bir qismi ko'rinadi — odatda sarlavha yoki kichik panel. Foydalanuvchi Sheet'ni yuqoriga tortib, uni kengaytirishi (expanded) yoki pastga surib yopishi mumkin. Bu xatti-harakat qog'oz varag'ining dastadan tortib olinishini eslatadi — shuning uchun ham shunday nomlangan.

Google Material Design 3 (2024) yo'riqnomalarida Sheet'dan foydalanishning ikkita asosiy stsenariysini ajratadi: asosiy asboblar paneliga sig'magan qo'shimcha harakatlarni ko'rsatish va alohida ekranga o'tmasdan forma yoki batafsil ma'lumotni ko'rsatish. iOS'da Apple iOS 15 dan boshlab UISheetPresentationController orqali Sheet'ni tizimli qo'llab-quvvatlashni qo'shdi, bu patternning universalligini tasdiqlaydi.

Bottom Sheet turlari: standart, modal va kengaytirilgan

Material Design uch turdagi Bottom Sheet'ni belgilaydi, har biri o'z xatti-harakati va qo'llash sohasiga ega. To'g'ri turni tanlash to'g'ridan-to'g'ri foydalanuvchi tajribasiga va platforma yo'riqnomalariga mos kelishiga ta'sir qiladi.

Standart Bottom Sheet (Standard)

Standart Bottom Sheet — modal bo'lmagan komponent: foydalanuvchi Sheet'ni yopmasdan fon ekrani bilan o'zaro ta'sir qilishi mumkin. Masalan, fon oynasida mahsulotlar ro'yxatini varaqlab, foydalanuvchi Bottom Sheet'dagi filtrlarni ko'radi va ularni panelni yopmasdan o'zgartirishi mumkin. Sheet o'z balandligini kontentga moslashtiradi — ekranning 30% dan 90% gacha.

Standart Bottom Sheet fonni bloklamaydi va asosiy kontent bilan o'zaro ta'sir qilish imkonini beradi. Bu modal Sheet'dan asosiy farq, chunki modal Sheet ishni davom ettirish uchun majburiy harakatni talab qiladi. Qo'shimcha ma'lumot asosiy stsenariy uchun muhim bo'lmaganda standart Sheet'dan foydalaning.

Modal Bottom Sheet (Modal)

Modal Bottom Sheet foydalanuvchi Sheet ichida harakatni bajarmaguncha fon ekrani bilan o'zaro ta'sirni bloklaydi. Bunday Sheet har doim expanded holatida ko'rsatiladi va aniq yopishni talab qiladi — tugma, harakat yoki pastga surish orqali. Material Design modal Sheet'ni kirish formalari, tasdiqlashlar va muhim sozlamalar uchun tavsiya qiladi.

Android'da modal Bottom Sheet BottomSheetDialogFragment orqali amalga oshiriladi, u avtomatik ravishda fonni bloklaydi. iOS'da shunga o'xshash xatti-harakat .mediumDetent parametri bilan UISheetPresentationController'ning modal varianti orqali ta'minlanadi. Modal Sheet'dan faqat kontekst foydalanuvchi diqqatini talab qilganda foydalanish kerak.

Kengaytirilgan Bottom Sheet (Expanding)

Kengaytirilgan Bottom Sheet standart va modal xususiyatlarini birlashtiradi: u collapsed holatida modal bo'lmagan holda boshlanadi, lekin yuqoriga tortilganda modal holatga o'tadi. Amalda bu foydalanuvchi avval kontentni qisqacha ko'rib chiqishi, keyin qaror qabul qilishi — Sheet'ni batafsil o'rganish uchun kengaytirish yoki yopish mumkinligini anglatadi.

Bu pattern ayniqsa xaritalar va navigatorlarda mashhur bo'lib, pastki panel marshrut nuqtasi haqida qisqa ma'lumotni ko'rsatadi va yuqoriga surilganda tafsilotlar bilan ochiladi. Google Maps aynan shunday kengaytirilgan Sheet'dan joylar va marshrutlar haqida ma'lumot ko'rsatish uchun foydalanadi.

Android'da Bottom Sheet: Material Design va Jetpack Compose

Android SDK Bottom Sheet'ni amalga oshirish uchun bir nechta API'ni taqdim etadi, klassik View yondashuvidan tortib zamonaviy Jetpack Compose'gacha. Android uchun Material Components Library BottomSheetDialogFragment va BottomSheetBehavior'ning tayyor implementatsiyalarini o'z ichiga oladi.

XML maketida BottomSheetBehavior

BottomSheetBehavior — bu Material Components'dan olingan sinf bo'lib, istalgan View'ga biriktiriladi va uning ekrandagi joylashuvini boshqaradi. Dasturchi uchta holatni belgilaydi: STATE_COLLAPSED (yig'ilgan), STATE_EXPANDED (kengaytirilgan) va STATE_HIDDEN (yashirin). Behavior avtomatik ravishda sudrab tashlash harakatlarini va animatsiyani boshqaradi.

val sheet = findViewById<View>(R.id.bottom_sheet)
val behavior = BottomSheetBehavior.from(sheet)
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
behavior.peekHeight = 200

Jetpack Compose'da Bottom Sheet

Jetpack Compose Material 3'ning ModalBottomSheet komponenti orqali deklarativ API'ni taqdim etadi. View yondashuvidan farqli o'laroq, Compose'da Bottom Sheet holat va kontentni qabul qiluvchi composable-funksiyadir. Sheet avtomatik ravishda paydo bo'lish, yopilish va sudrab tashlashda balandlik o'zgarishini animatsiya qiladi.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(onDismissRequest = onDismiss) {
        Text("Filters")
        Button(onClick = onDismiss) { Text("Apply") }
    }
}

Modal stsenariylar uchun BottomSheetDialogFragment

BottomSheetDialogFragment — bu Bottom Sheet sifatida ko'rsatiladigan ixtisoslashtirilgan DialogFragment. U avtomatik ravishda modallik, hayotiy tsikl va konfiguratsion o'zgarishlarni boshqaradi. Dasturchi faqat onCreateView'ni bekor qilishi va Sheet layout'ini qaytarishi kerak. Google dokumentatsiyasiga ko'ra (Android Developers, 2024), BottomSheetDialogFragment klassik Android'da modal Bottom Sheet uchun tavsiya etilgan usuldir.

iOS'da Sheet: UISheetPresentationController va SwiftUI

Apple iOS 15 dan boshlab UISheetPresentationController orqali Sheet'ni tizimli qo'llab-quvvatlashni joriy qildi. Bungacha dasturchilar Bottom Sheet'ni qo'lda custom transition yoki uchinchi tomon kutubxonalari orqali amalga oshirardi. Apple'ning mahalliy Sheet'i detents — oldindan belgilangan ochilish darajalarini qo'llab-quvvatlaydi.

UIKit'da UISheetPresentationController

UISheetPresentationController — bu View Controller'ni Sheet sifatida ko'rsatadigan o'rnatilgan prezentatsiya kontrolleri. Dasturchi detents massivini — Sheet to'xtashi mumkin bo'lgan balandlik qiymatlarini belgilaydi. iOS 16 ixtiyoriy balandlikdagi custom detents'larni qo'shdi. Apple asosiy sifatida medium (.medium) va large (.large) detents'lardan foydalanishni tavsiya qiladi.

let viewController = MySheetViewController()
if let sheet = viewController.sheetPresentationController {
    sheet.detents = [.medium, .large]
    sheet.prefersGrabberVisible = true
    sheet.preferredCornerRadius = 16
}
present(viewController, animated: true)

SwiftUI'da .sheet modifikatori

SwiftUI .sheet modifikatorini taqdim etadi, u Sheet ko'rinishini holatga bog'laydi. Published-o'zgaruvchi true bo'lganda, SwiftUI avtomatik ravishda Sheet'ni ko'rsatadi. SwiftUI shuningdek iOS 16 da qo'shilgan .presentationDetents modifikatori orqali detents'larni qo'llab-quvvatlaydi.

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show Sheet") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                FilterView()
                    .presentationDetents([.medium, .large])
            }
    }
}

Kross-platforma freymvorklarida Sheet: Flutter va React Native

Kross-platforma freymvorklari ham Bottom Sheet'ni qo'llab-quvvatlaydi, xatti-harakatni maqsadli platformaga moslashtiradi. Flutter va React Native turli darajadagi moslashuvchanlik bilan o'rnatilgan va custom implementatsiyalarni taqdim etadi.

Flutter'da Bottom Sheet

Flutter SDK Bottom Sheet'ni ko'rsatish uchun ikkita metodni o'z ichiga oladi: showBottomSheet (standart) va showModalBottomSheet (modal). Flutter'da Material Design Android'dagi kabi prinsiplarga amal qiladi — Sheet pastdan paydo bo'ladi, sudrab tashlashni va sozlanishi balandlikni qo'llab-quvvatlaydi. Detektlar bilan kengaytirilgan xatti-harakat uchun DraggableScrollableSheet ishlatiladi.

Scaffold.of(context).showBottomSheet((context) {
    return Container(
        padding: EdgeInsets.all(16),
        child: Column(
            children: [
                Text("Sheet Content"),
                ElevatedButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text("Close")
                )
            ]
        )
    );
})

React Native'da Bottom Sheet

React Native o'z yadrosida o'rnatilgan Bottom Sheet komponentiga ega emas, shuning uchun dasturchilar uchinchi tomon kutubxonalaridan foydalanadi. Eng mashhuri — @gorhom/bottom-sheet (GitHub'da 7 mingdan ortiq yulduz, 2024). U snap points, animatsiyalar va mahkamlangan sarlavhalarni qo'llab-quvvatlovchi gesture-driven Bottom Sheet'ni taqdim etadi. Kutubxona 60 FPS unumdorlik uchun Reanimated 2 va Gesture Handler'da yozilgan.

Eng yaxshi amaliyotlar va tipik xatolar

To'g'ri foydalanish Bottom Sheet platforma yo'riqnomalariga rioya qilishni va Sheet o'rinli bo'lgan stsenariylarni tushunishni talab qiladi. Sheet'ni loyihalashda asosiy tavsiyalar va keng tarqalgan xatolarni ko'rib chiqamiz.

Bottom Sheet'dan qachon foydalanish kerak

Bottom Sheet optimal ekrandagi asosiy kontentga nisbatan qo'shimcha bo'lgan harakatlar uchun. Filtrlar, saralash, variantlarni tanlash, element haqida qisqa ma'lumot — tipik stsenariylar. Material Design Sheet'dan butun ekranni egallamasligi kerak bo'lgan, ammo Action Sheet yoki Popup Menu'dan ko'proq joy talab qiladigan asboblar uchun foydalanishni tavsiya qiladi.

Bottom Sheet'dan qachon foydalanmaslik kerak

Muhim ogohlantirishlar yoki xatolar uchun Bottom Sheet'dan foydalanmang — buning uchun dialog oynalari mos keladi. Skrollni talab qiladigan ko'p kiritish maydonlari bo'lgan Sheet'dan saqlaning: foydalanuvchi klaviaturaga zo'rg'a yetadi va kontekstni yo'qotadi. Agar Sheet ettidan ortiq harakat elementini o'z ichiga olgan bo'lsa, Sheet o'rniga alohida ekranni ko'rib chiqing.

Xato: juda baland collapsed-rejim

Tipik xato — peekHeight (yig'ilgan holatdagi balandlik) ni ekranning 40% dan ortiq qilib o'rnatish. Foydalanuvchi Sheet'ni to'liq ko'rayotganini yoki uni kengaytirish mumkinligini tushunmaydi. Material Design peekHeight'ni ekran balandligining 15-30% oralig'ida o'rnatishni tavsiya qiladi, bu kontentning sezilarli qismini yashirin qoldirish va sudrab tashlashga undash uchun.

Xato: iOS'da surish harakatini e'tiborsiz qoldirish

iOS'da foydalanuvchilar Sheet'ni istalgan holatdan pastga surib yopish mumkinligini kutishadi. Agar siz bu harakatni o'chirsangiz (UISheetPresentationController.prefersEdgeAttachedInCompactHeight orqali), foydalanuvchi Sheet'ni odatdagi usulda yopishga urinib, xafa bo'ladi. Apple Human Interface Guidelines (2024) surish orqali yopish iOS foydalanuvchisining asosiy kutishmasi ekanligini ta'kidlaydi.