Sheet a mobilfejlesztésben — lényeg, típusok és működés

Mi az a Sheet a mobilalkalmazásokban

A Sheet egy felszíni UI-komponens, amely a képernyő aljáról bukkan elő, és további tartalmat vagy műveleteket jelenít meg anélkül, hogy elvinné a felhasználót az aktuális képernyőről. A teljes képernyős átmenetekkel ellentétben a Sheet megtartja a kontextust: a felhasználó látja a háttérképernyőt, és megérti, honnan jelent meg a Sheet.

A Sheet architektúrája egy változtatható magasságú tárolón alapul. Minimális állapotban (collapsed) csak a tartalom egy része látható — általában egy cím vagy egy kis panel. A felhasználó felhúzhatja a Sheetet a kibontáshoz (expanded), vagy lefelé húzva bezárhatja. Ez a viselkedés egy fizikai papírlapra emlékeztet, amelyet egy köteg alól húznak elő — innen az elnevezés.

A Google a Material Design 3 (2024) irányelveiben két fő forgatókönyvet emel ki a Sheet használatához: további műveletek megjelenítése, amelyek nem férnek el a fő eszköztáron, valamint űrlapok vagy részletes információk megjelenítése anélkül, hogy külön képernyőre kellene lépni. Az iOS rendszeren az Apple az iOS 15-től kezdve az UISheetPresentationController segítségével rendszerszintű támogatást adott a Sheethez, ami megerősíti a minta univerzalitását.

A Bottom Sheet típusai: szabványos, modális és kibővített

A Material Design három típusú Bottom Sheetet határoz meg, mindegyik saját viselkedéssel és alkalmazási területtel. A megfelelő típus kiválasztása közvetlenül befolyásolja a felhasználói élményt és a platformirányelveknek való megfelelést.

Szabványos Bottom Sheet (Standard)

A szabványos Bottom Sheet egy nem modális komponens: a felhasználó interakcióba léphet a háttérképernyővel anélkül, hogy bezárná a Sheetet. Például, miközben a felhasználó a háttérablakban terméklistát böngész, látja a szűrőket a Bottom Sheetben, és módosíthatja azokat a panel bezárása nélkül. A Sheet a magasságát a tartalomhoz igazítja — a képernyő 30%-ától 90%-áig.

A szabványos Bottom Sheet nem blokkolja a hátteret, és lehetővé teszi a fő tartalommal való interakciót. Ez a legfőbb különbség a modális Sheettől, amely kötelező műveletet igényel a munka folytatásához. Használjon szabványos Sheetet, ha a kiegészítő információ nem kritikus a fő forgatókönyv szempontjából.

Modális Bottom Sheet (Modal)

A modális Bottom Sheet blokkolja a háttérképernyővel való interakciót, amíg a felhasználó nem hajt végre egy műveletet a Sheet belsejében. Az ilyen Sheet mindig expanded állapotban jelenik meg, és explicit bezárást igényel — gomb, művelet vagy lefelé húzás által. A Material Design a modális Sheetet bejelentkezési űrlapokhoz, megerősítésekhez és kritikus beállításokhoz ajánlja.

Androidon a modális Bottom Sheet a BottomSheetDialogFragment segítségével valósul meg, amely automatikusan blokkolja a hátteret. iOS-en hasonló viselkedést biztosít az UISheetPresentationController modális változata a .mediumDetent paraméterrel. A modális Sheetet csak akkor szabad használni, ha a kontextus megköveteli a felhasználó figyelmét.

Kibővített Bottom Sheet (Expanding)

A kibővített Bottom Sheet egyesíti a szabványos és a modális tulajdonságait: nem modálisként indul a collapsed állapotban, de felhúzáskor modálissá válik. A gyakorlatban ez azt jelenti, hogy a felhasználó először pillanatképet kaphat a tartalomról, majd dönthet — kibonthatja a Sheetet a részletes tanulmányozáshoz, vagy bezárhatja.

Ez a minta különösen népszerű a térképekben és navigátorokban, ahol az alsó panel rövid információt jelenít meg egy útvonalpontról, majd felhúzáskor részletekkel nyílik ki. A Google Maps pontosan ilyen kibővített Sheetet használ a helyekkel és útvonalakkal kapcsolatos információk megjelenítéséhez.

Bottom Sheet Androidon: Material Design és Jetpack Compose

Az Android SDK több API-t is kínál a Bottom Sheet megvalósításához, a klasszikus View-megközelítéstől a modern Jetpack Compose-ig. Az Androidhoz készült Material Components Library tartalmazza a BottomSheetDialogFragment és a BottomSheetBehavior kész implementációit.

BottomSheetBehavior XML-elrendezésben

A BottomSheetBehavior egy osztály a Material Componentsból, amely bármely View-hoz hozzácsatolható, és kezeli annak pozícióját a képernyőn. A fejlesztő három állapotot állít be: STATE_COLLAPSED (összecsukva), STATE_EXPANDED (kibontva) és STATE_HIDDEN (rejtve). A Behavior automatikusan kezeli a húzási gesztusokat és az animációt.

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

Bottom Sheet Jetpack Compose-ban

A Jetpack Compose deklaratívabb API-t kínál a Material 3 ModalBottomSheet komponensén keresztül. A View-megközelítéssel ellentétben a Compose-ban a Bottom Sheet egy composable függvény, amely állapotot és tartalmat fogad. A Sheet automatikusan animálja a megjelenést, elrejtést és a magasságváltozást húzás közben.

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

BottomSheetDialogFragment modális forgatókönyvekhez

A BottomSheetDialogFragment egy specializált DialogFragment, amely Bottom Sheetként jelenik meg. Automatikusan kezeli a modalitást, az életciklust és a konfigurációs változásokat. A fejlesztőnek csak az onCreateView-t kell felülírnia és visszaadnia a Sheet elrendezését. A Google dokumentációja (Android Developers, 2024) szerint a BottomSheetDialogFragment az ajánlott módszer a modális Bottom Sheetekhez klasszikus Androidon.

Sheet iOS-en: UISheetPresentationController és SwiftUI

Az Apple az iOS 15-től kezdve vezette be a Sheet rendszerszintű támogatását az UISheetPresentationController segítségével. Ezelőtt a fejlesztők manuálisan valósították meg a Bottom Sheetet egyéni átmenetekkel vagy külső könyvtárakkal. Az Apple natív Sheetje támogatja a detenteket — előre meghatározott kinyílási szinteket.

UISheetPresentationController UIKitben

Az UISheetPresentationController egy beépített prezentációs vezérlő, amely View Controller-t jelenít meg Sheetként. A fejlesztő detentek tömbjét adja meg — magasságértékeket, amelyeken a Sheet megállhat. Az iOS 16 egyéni detenteket adott hozzá tetszőleges magassággal. Az Apple a medium (.medium) és large (.large) detentek használatát ajánlja főként.

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

.sheet módosító SwiftUI-ban

A SwiftUI .sheet módosítót biztosít, amely a Sheet megjelenítését állapothoz köti. Amikor egy published változó igazzá válik, a SwiftUI automatikusan megjeleníti a Sheetet. A SwiftUI a .presentationDetents módosítón keresztül is támogatja a detenteket, amely az iOS 16-ban került hozzáadásra.

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

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

Sheet többplatformos keretrendszerekben: Flutter és React Native

A többplatformos keretrendszerek szintén támogatják a Bottom Sheetet, a viselkedést a célplatformhoz igazítva. A Flutter és a React Native beépített és egyéni implementációkat kínálnak különböző rugalmassági szintekkel.

Bottom Sheet Flutterben

A Flutter SDK két metódust tartalmaz a Bottom Sheet megjelenítéséhez: showBottomSheet (szabványos) és showModalBottomSheet (modális). A Material Design a Flutterben ugyanazokat az elveket követi, mint Androidban — a Sheet alulról jelenik meg, támogatja a húzást és a konfigurálható magasságot. A kibővített viselkedéshez detentekkel a DraggableScrollableSheet használatos.

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")
                )
            ]
        )
    );
})

Bottom Sheet React Native-ben

A React Native magjában nincs beépített Bottom Sheet komponens, ezért a fejlesztők külső könyvtárakat használnak. A legnépszerűbb a @gorhom/bottom-sheet (több mint 7 ezer csillag a GitHubon, 2024). Gesztusvezérelt Bottom Sheetet kínál snap pontok, animációk és rögzített fejlécek támogatásával. A könyvtár a Reanimated 2 és Gesture Handler segítségével készült a 60 FPS-es teljesítmény érdekében.

Legjobb gyakorlatok és tipikus hibák

A Bottom Sheet helyes használata megköveteli a platformirányelvek betartását és annak megértését, hogy milyen forgatókönyvekben megfelelő a Sheet. Tekintsük át a főbb ajánlásokat és a Sheet tervezése során elkövetett gyakori hibákat.

Mikor használjuk a Bottom Sheetet

A Bottom Sheet optimális olyan műveletekhez, amelyek kiegészítő jellegűek a képernyő fő tartalmához képest. Szűrők, rendezés, opciók kiválasztása, rövid információ egy elemről — tipikus forgatókönyvek. A Material Design a Sheetet olyan eszközökhöz ajánlja, amelyek nem foglalhatják el a teljes képernyőt, de több helyet igényelnek, mint az Action Sheet vagy a Popup Menu.

Mikor NE használjuk a Bottom Sheetet

Ne használja a Bottom Sheetet kritikus figyelmeztetésekhez vagy hibákhoz — ehhez a párbeszédablakok alkalmasak. Kerülje a Sheetet sok beviteli mezővel, amelyek görgetést igényelnek: a felhasználó nehezen éri el a billentyűzetet, és elveszíti a kontextust. Ha a Sheet hétnél több műveleti elemet tartalmaz, fontolja meg egy külön képernyő használatát a Sheet helyett.

Hiba: túl magas collapsed mód

Gyakori hiba a peekHeight (magasság összecsukott állapotban) beállítása a képernyő 40%-a fölé. A felhasználó nem érti, hogy teljes egészében látja-e a Sheetet, vagy ki lehet bontani. A Material Design a peekHeight-t a képernyőmagasság 15-30%-a közé ajánlja, hogy a tartalom jelentős része rejtve maradjon és húzásra ösztönözzön.

Hiba: az iOS húzási gesztus figyelmen kívül hagyása

iOS-en a felhasználók elvárják, hogy a Sheet bármely pozícióból lefelé húzva bezárható legyen. Ha letiltja ezt a gesztust (az UISheetPresentationController.prefersEdgeAttachedInCompactHeight segítségével), a felhasználó frusztrációt él át, amikor a Sheetet a megszokott módon próbálja bezárni. Az Apple Human Interface Guidelines (2024) hangsúlyozza, hogy a húzással történő bezárás az iOS-felhasználók alapvető elvárása.