Sheet mobil inkişafda — mahiyyəti, növləri və işləmə prinsipi

Mobil tətbiqlərdə Sheet nədir

Sheet — bu istifadəçini cari ekrandan uzaqlaşdırmadan əlavə məzmun və ya hərəkətləri göstərmək üçün ekranın aşağısından çıxan səth komponentidir. Tam ekran keçidlərindən fərqli olaraq, Sheet konteksti qoruyur: istifadəçi fon ekranını görür və Sheet-in haradan gəldiyini başa düşür.

Sheet memarlığı dəyişən hündürlüklü konteynerə əsaslanır. Minimal vəziyyətdə (collapsed) məzmunun yalnız bir hissəsi görünür — adətən başlıq və ya kiçik panel. İstifadəçi Sheet-i genişləndirmək (expanded) üçün yuxarı dartıb çəkə və ya bağlamaq üçün aşağı sürükləyə bilər. Bu davranış bir vərəq kağızın yığının altından çəkilməsini xatırladır — adı da buradan gəlir.

Google (öz Material Design 3 (2024) təlimatlarında) Sheet-dən istifadə üçün iki əsas ssenari müəyyən edir: əsas alətlər panelinə sığmayan əlavə hərəkətlərin göstərilməsi və ayrıca ekrana keçmədən formaların və ya ətraflı məlumatın göstərilməsi. Apple iOS 15-dən etibarən UISheetPresentationController vasitəsilə Sheet-ə sistem dəstəyi əlavə edib ki, bu da nümunənin universallığını təsdiqləyir.

Bottom Sheet növləri: standart, modal və genişləndirilmiş

Material Design hər biri öz davranışı və tətbiq sahəsi olan üç Bottom Sheet növü müəyyən edir. Düzgün növün seçilməsi istifadəçi təcrübəsinə və platforma təlimatlarına uyğunluğa birbaşa təsir edir.

Standart Bottom Sheet

Standart Bottom Sheet — qeyri-modal komponent: istifadəçi Sheet-i bağlamadan fon ekranı ilə qarşılıqlı əlaqə yarada bilər. Məsələn, fon pəncərəsində məhsul siyahısına baxarkən, istifadəçi Bottom Sheet-də filtrləri görür və paneli bağlamadan onları dəyişə bilər. Sheet öz hündürlüyünü məzmuna uyğunlaşdırır — ekranın 30%-dən 90%-dək.

Standart Bottom Sheet fonu bloklamır və əsas məzmunla qarşılıqlı əlaqəyə imkan verir. Bu, işi davam etdirmək üçün məcburi hərəkət tələb edən modal Sheet-dən əsas fərqdir. Əlavə məlumat əsas ssenari üçün kritik deyilsə, standart Sheet-dən istifadə edin.

Modal Bottom Sheet

Modal Bottom Sheet istifadəçi Sheet daxilində hərəkət etməyənə qədər fon ekranı ilə qarşılıqlı əlaqəni bloklayır. Belə Sheet həmişə expanded vəziyyətdə göstərilir və açıq şəkildə bağlanmağı tələb edir — dümə, hərəkət və ya aşağı sürüşdürmə ilə. Material Design giriş formaları, təsdiqlər və kritik parametrlər üçün modal Sheet-i tövsiyə edir.

Android-də modal Bottom Sheet avtomatik olaraq fonu bloklayan BottomSheetDialogFragment vasitəsilə tətbiq edilir. iOS-da analoji davranış .mediumDetent parametri ilə UISheetPresentationController-ın modal variantı tərəfindən təmin edilir. Modal Sheet yalnız kontekst istifadəçinin diqqətini tələb etdikdə istifadə edilməlidir.

Genişləndirilmiş Bottom Sheet

Genişləndirilmiş Bottom Sheet standart və modalın xüsusiyyətlərini birləşdirir: collapsed vəziyyətdə qeyri-modal başlayır, lakin yuxarı dartılanda modal olur. Praktikada bu o deməkdir ki, istifadəçi əvvəlcə məzmuna qısaca nəzər sala, sonra qərar verə bilər — Sheet-i ətraflı öyrənmək üçün genişləndirsin və ya bağlasın.

Bu nümunə xüsusilə xəritə və naviqatorlarda məşhurdur, burada aşağı panel marşru tənəqüzü haqqında qısa məlumat göstərir, yuxarı sürüşdürmə ilə isə təfşüratla açılır. Google Maps məkanlar və marşrutlar haqqında məlumat göstərmək üçün məhz belə genişləndirilmiş Sheet-dən istifadə edir.

Android-də Bottom Sheet: Material Design və Jetpack Compose

Android SDK klassik View yanaşmasından müasir Jetpack Compose-a qədər Bottom Sheet tətbiqi üçün bir neçə API təqdim edir. Android üçün Material Components Library BottomSheetDialogFragment və BottomSheetBehavior-ın hazır tətbiqlərini ehtiva edir.

XML layout-da BottomSheetBehavior

BottomSheetBehavior — bu Material Components-dən istənilən View-ə qoşulan və onun ekrandakı mövqeyini idarə edən sinifdir. Tərtibatçı üç vəziyyət təyin edir: STATE_COLLAPSED (yığılmış), STATE_EXPANDED (genişləndirilmiş) və STATE_HIDDEN (gizlədilmiş). Behavior avtomatik olaraq dartma jestlərini və animasiyanı idarə edir.

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-dən ModalBottomSheet komponenti vasitəsilə daha deklarativ API təqdim edir. View yanaşmasından fərqli olaraq, Compose-da Bottom Sheet vəziyyət və məzmun qəbul edən bir composable funksiyasıdır. Sheet görünmə, gizlənmə və dartma zamanı hündürlüyün dəyişməsini avtomatik animasiya edir.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(onDismissRequest = onDismiss) {
        Text("Filtrlər")
        Button(onClick = onDismiss) { Text("Tətbiq et") }
    }
}

Modal ssenarilər üçün BottomSheetDialogFragment

BottomSheetDialogFragment — Bottom Sheet kimi göstərilən ixtisaslaşdırılmış DialogFragment-dir. O, avtomatik olaraq modallığı, həyat dövrünü və konfiqurasiya dəyişikliklərini idarə edir. Tərtibatçı yalnız onCreateView-i ləğv etməli və Sheet layout-unu qaytarmalıdır. Google sənədlərinə (Android Developers, 2024) görə, BottomSheetDialogFragment klassik Android-də modal Bottom Sheet üçün tövsiyə olunan üsuldur.

iOS-da Sheet: UISheetPresentationController və SwiftUI

Apple iOS 15-dən etibarən UISheetPresentationController vasitəsilə Sheet-ə sistem dəstəyi əlavə etmişdir. Bundan əvvəl tərtibatçılar Bottom Sheet-i custom transition və ya üçüncü tərəf kitabxanalar vasitəsilə əl ilə tətbiq edirdilər. Apple-ın yerli Sheet-i detents — əvvəlcədən müəyyən edilmiş açılma səviyyələrini dəstəkləyir.

UIKit-də UISheetPresentationController

UISheetPresentationController — View Controller-ı Sheet kimi göstərən daxili təqdimat nəzarətçisidir. Tərtibatçı Sheet-in dayana biləcəyi hündürlük dəyərləri olan detents massivini təyin edir. iOS 16 ixtiyari hündürlükdə custom detents əlavə etmişdir. Apple əsas olaraq medium (.medium) və large (.large) detents-dən istifadə etməyi tövsiyə edir.

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

SwiftUI-də .sheet modifieri

SwiftUI Sheet-in göstərilməsini vəziyyətlə əlaqələndirən .sheet modifierini təqdim edir. Published dəyişən true olduqda, SwiftUI avtomatik olaraq Sheet-i göstərir. SwiftUI həmçinin iOS 16-da əlavə edilmiş .presentationDetents modifieri vasitəsilə detents-i dəstəkləyir.

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

    var body: some View {
        Button("Sheet-i göstər") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                FilterView()
                    .presentationDetents([.medium, .large])
            }
    }
}

Cross-platform freymvorklarda Sheet: Flutter və React Native

Cross-platform freymvorklar da Bottom Sheet-i dəstəkləyir, davranışı hədəf platformaya uyğunlaşdırır. Flutter və React Native müxtəlif çeviklik dərəcəsi ilə daxili və fərdi tətbiqlər təqdim edir.

Flutter-də Bottom Sheet

Flutter SDK Bottom Sheet göstərmək üçün iki metod ehtiva edir: showBottomSheet (standart) və showModalBottomSheet (modal). Flutter-də Material Design Android-dəki eyni prinsiplərə əməl edir — Sheet aşağıdan görünür, dartma və konfiqurasiya oluna bilən hündürlüyü dəstəkləyir. Detectors ilə genişləndirilmiş davranış üçün DraggableScrollableSheet istifadə olunur.

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

React Native-də Bottom Sheet

React Native’in özəyində daxili Bottom Sheet komponenti yoxdur, buna görə tərtibatçılar üçüncü tərəf kitabxanalardan istifadə edirlər. Ən populyarı — @gorhom/bottom-sheet (2024-cü ildə GitHub-da 7 mindən çox ulduz). O, snap points, animasiyalar və bərkidilmiş başlıqlar dəstəyi ilə gesture-driven Bottom Sheet təqdim edir. Kitabxana 60 FPS performansı üçün Reanimated 2 və Gesture Handler əsasında yazılmışdır.

Best practices və tipik səhvlər

Bottom Sheet-dən düzgün istifadə platforma təlimatlarına riayət etməyi və Sheet-in uyğun olduğu ssenariləri başa düşməyi tələb edir. Sheet-in layihələndirilməsi zamanı əsas tövsiyələri və geniş yayılmış səhvləri nəzərdən keçirək.

Bottom Sheet-dən nə vaxt istifadə etməli

Bottom Sheet optimaldır ekrandakı əsas məzmuna nisbətən əlavə olan hərəkətlər üçün. Filtrlər, sıralama, seçimlərin seçilməsi, element haqqında qısa məlumat — tipik ssenarilər. Material Design bütöv ekranı tutmamalı, lakin Action Sheet və ya Popup Menu-dən daha çox yer tələb edən alətlər üçün Bottom Sheet-dən istifadə etməyi tövsiyə edir.

Bottom Sheet-dən nə vaxt istifadə etməməli

Kritik xəbərdarlıqlar və ya səhvlər üçün Bottom Sheet-dən istifadə etməyin — bunun üçün dialoq pəncərələri uyğundur. Skroll tələb edən çoxsaylı daxiletmə sahəsi olan Sheet-lərdən çəkinin: istifadəçi klaviaturaya çatmaqda çətinlik çəkir və konteksti itirir. Sheet yeddi elementdən çox hərəkət ehtiva edirsə, Sheet əvəzinə ayrıca ekran düşünün.

Səhv: çox yüksək collapsed rejimi

Tipik səhv peekHeight-in (yığılmış vəziyyətdə hündürlük) ekranın 40%-dən çox təyin edilməsidir. İstifadəçi Sheet-i tam gördüyünü və ya genişləndirilə biləcəyini başa düşmür. Material Design peekHeight-i ekran hündürlüyünün 15–30% diapazonunda təyin etməyi tövsiyə edir ki, məzmunun əhəmiyyətli hissəsi gizli qalsın və dartmağa həvəsləndirsin.

Səhv: iOS-da sürüşdürmə jestinin görməməzlik edilməsi

iOS-da istifadəçilər Sheet-in istənilən mövqedən aşağı sürüşdürməklə bağlana biləcəyini gözləyirlər. Bu jesti söndürsəniz (UISheetPresentationController.prefersEdgeAttachedInCompactHeight vasitəsilə), istifadəçi Sheet-i adət etdiyi şəkildə bağlamağa çalışaraq məyus olacaq. Apple Human Interface Guidelines (2024) qeyd edir ki, bağlamaq üçün sürüşdürmə iOS istifadəçisinin əsas gözləntisidir.