Sheet v mobilním vývoji — podstata, typy a jak fungují

Co je Sheet v mobilních aplikacích

Sheet je povrchová UI komponenta, která se vysune ze spodní části obrazovky a zobrazí další obsah nebo akce, aniž by uživatele odvedla z aktuální obrazovky. Na rozdíl od přechodů na celou obrazovku Sheet zachovává kontext: uživatel vidí obrazovku na pozadí a chápe, odkud se Sheet objevil.

Architektura Sheet je založena na kontejneru s proměnnou výškou. V minimálním stavu (collapsed) je viditelná pouze část obsahu — obvykle nadpis nebo malý panel. Uživatel může Sheet přetáhnout nahoru, aby jej rozbalil (expanded), nebo přejetím dolů zavřít. Toto chování připomíná fyzický list papíru vytažený zpod hromádky — odtud název.

Google v pokynech Material Design 3 (2024) zdůrazňuje dva klíčové scénáře použití Sheet: zobrazení dalších akcí, které se nevešly na hlavní panel nástrojů, a zobrazení formulářů nebo podrobných informací bez přechodu na samostatnou obrazovku. Na iOS Apple přidal systémovou podporu Sheet od iOS 15 přes UISheetPresentationController, což potvrzuje univerzálnost tohoto vzoru.

Typy Bottom Sheet: standardní, modální a rozšířený

Material Design definuje tři typy Bottom Sheet, každý s vlastním chováním a oblastí použití. Výběr správného typu přímo ovlivňuje uživatelský zážitek a dodržování pokynů platformy.

Standardní Bottom Sheet (Standard)

Standardní Bottom Sheet je nemodální komponenta: uživatel může interagovat s obrazovkou na pozadí, aniž by Sheet zavřel. Například při procházení seznamu produktů v okně na pozadí uživatel vidí filtry v Bottom Sheet a může je měnit bez zavření panelu. Sheet přizpůsobuje svou výšku obsahu — od 30 % do 90 % obrazovky.

Standardní Bottom Sheet neblokuje pozadí a umožňuje interakci s hlavním obsahem. To je klíčový rozdíl od modálního Sheet, který vyžaduje povinnou akci pro pokračování v práci. Použijte standardní Sheet, když doplňující informace nejsou kritické pro hlavní scénář.

Modální Bottom Sheet (Modal)

Modální Bottom Sheet blokuje interakci s obrazovkou na pozadí, dokud uživatel neprovede akci uvnitř Sheet. Takový Sheet se vždy zobrazuje v expanded stavu a vyžaduje explicitní zavření — tlačítkem, akcí nebo přejetím dolů. Material Design doporučuje modální Sheet pro přihlašovací formuláře, potvrzení a kritická nastavení.

Na Androidu je modální Bottom Sheet implementován pomocí BottomSheetDialogFragment, který automaticky blokuje pozadí. Na iOS zajišťuje podobné chování modální varianta UISheetPresentationController s parametrem .mediumDetent. Modální Sheet by se měl používat pouze tehdy, když kontext vyžaduje pozornost uživatele.

Rozšířený Bottom Sheet (Expanding)

Rozšířený Bottom Sheet kombinuje vlastnosti standardního a modálního: začíná jako nemodální v collapsed stavu, ale při přetažení nahoru se stává modálním. V praxi to znamená, že uživatel může nejprve letmo nahlédnout na obsah a poté se rozhodnout — Sheet rozbalit pro podrobné prostudování nebo zavřít.

Tento vzor je obzvláště populární v mapách a navigacích, kde spodní panel zobrazuje krátké informace o bodu trasy a při přejetí nahoru se rozbalí s podrobnostmi. Mapy Google používají přesně takový rozšířený Sheet pro zobrazení informací o místech a trasách.

Bottom Sheet na Androidu: Material Design a Jetpack Compose

Android SDK poskytuje několik API pro implementaci Bottom Sheet, od klasického přístupu View až po moderní Jetpack Compose. Material Components Library pro Android obsahuje hotové implementace BottomSheetDialogFragment a BottomSheetBehavior.

BottomSheetBehavior v XML rozvržení

BottomSheetBehavior je třída z Material Components, kterou lze připojit k libovolnému View a spravovat jeho pozici na obrazovce. Vývojář nastavuje tři stavy: STATE_COLLAPSED (sbaleno), STATE_EXPANDED (rozbaleno) a STATE_HIDDEN (skryto). Behavior automaticky zpracovává gesta přetahování a animaci.

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

Bottom Sheet v Jetpack Compose

Jetpack Compose poskytuje deklarativnější API prostřednictvím komponenty ModalBottomSheet z Material 3. Na rozdíl od přístupu View je Bottom Sheet v Compose composable funkce, která přijímá stav a obsah. Sheet automaticky animuje zobrazení, skrytí a změnu výšky při přetahování.

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

BottomSheetDialogFragment pro modální scénáře

BottomSheetDialogFragment je specializovaný DialogFragment, který se zobrazuje jako Bottom Sheet. Automaticky zpracovává modalitu, životní cyklus a změny konfigurace. Vývojář potřebuje pouze přepsat onCreateView a vrátit rozvržení Sheet. Podle dokumentace Google (Android Developers, 2024) je BottomSheetDialogFragment doporučeným způsobem pro modální Bottom Sheet v klasickém Androidu.

Sheet na iOS: UISheetPresentationController a SwiftUI

Apple zavedl systémovou podporu Sheet od iOS 15 prostřednictvím UISheetPresentationController. Předtím vývojáři implementovali Bottom Sheet ručně pomocí vlastních přechodů nebo knihoven třetích stran. Nativní Sheet od Apple podporuje detents — předdefinované úrovně otevření.

UISheetPresentationController v UIKit

UISheetPresentationController je vestavěný prezentační kontrolér, který zobrazuje View Controller jako Sheet. Vývojář nastavuje pole detents — hodnot výšky, na kterých se Sheet může zastavit. iOS 16 přidal vlastní detents s libovolnou výškou. Apple doporučuje používat medium (.medium) a large (.large) detents jako hlavní.

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

.sheet modifikátor ve SwiftUI

SwiftUI poskytuje modifikátor .sheet, který váže zobrazení Sheet na stav. Když se published proměnná stane true, SwiftUI automaticky zobrazí Sheet. SwiftUI také podporuje detents prostřednictvím modifikátoru .presentationDetents, přidaného v iOS 16.

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 v multiplatformních frameworkách: Flutter a React Native

Multiplatformní frameworky také podporují Bottom Sheet a přizpůsobují chování cílové platformě. Flutter a React Native poskytují vestavěné a vlastní implementace s různou mírou flexibility.

Bottom Sheet ve Flutteru

Flutter SDK obsahuje dvě metody pro zobrazení Bottom Sheet: showBottomSheet (standardní) a showModalBottomSheet (modální). Material Design ve Flutteru se řídí stejnými principy jako v Androidu — Sheet se objevuje zespodu, podporuje přetahování a nastavitelnou výšku. Pro rozšířené chování s detents se používá DraggableScrollableSheet.

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 v React Native

React Native nemá ve svém jádru vestavěnou komponentu Bottom Sheet, takže vývojáři používají knihovny třetích stran. Nejoblíbenější je @gorhom/bottom-sheet (více než 7 tisíc hvězdiček na GitHubu, 2024). Poskytuje Bottom Sheet řízený gesty s podporou snap points, animací a pevných záhlaví. Knihovna je napsána v Reanimated 2 a Gesture Handler pro výkon na 60 FPS.

Nejlepší postupy a typické chyby

Správné použití Bottom Sheet vyžaduje dodržování pokynů platformy a pochopení scénářů, ve kterých je Sheet vhodný. Podívejme se na hlavní doporučení a běžné chyby při navrhování Sheet.

Kdy použít Bottom Sheet

Bottom Sheet je optimální pro akce, které jsou doplňkové k hlavnímu obsahu na obrazovce. Filtry, řazení, výběr možností, krátké informace o prvku — typické scénáře. Material Design doporučuje používat Sheet pro nástroje, které by neměly zabírat celou obrazovku, ale vyžadují více místa než Action Sheet nebo Popup Menu.

Kdy NEPOUŽÍVAT Bottom Sheet

Nepoužívejte Bottom Sheet pro kritická varování nebo chyby — k tomu jsou vhodná dialogová okna. Vyhněte se Sheet s velkým množstvím vstupních polí, která vyžadují rolování: uživatel se obtížně dostává ke klávesnici a ztrácí kontext. Pokud Sheet obsahuje více než sedm akčních prvků, zvažte samostatnou obrazovku místo Sheet.

Chyba: příliš vysoký collapsed režim

Typická chyba je nastavení peekHeight (výška ve sbaleném stavu) na více než 40 % obrazovky. Uživatel nechápe, zda vidí Sheet celý nebo jej lze rozbalit. Material Design doporučuje peekHeight v rozmezí 15–30 % výšky obrazovky, aby zůstala znatelná část obsahu skrytá a motivovala k přetahování.

Chyba: ignorování gesta přejetí na iOS

Na iOS uživatelé očekávají, že Sheet lze zavřít přejetím dolů z jakékoli pozice. Pokud toto gesto vypnete (pomocí UISheetPresentationController.prefersEdgeAttachedInCompactHeight), uživatel je frustrovaný, když se snaží Sheet zavřít obvyklým způsobem. Apple Human Interface Guidelines (2024) zdůrazňují, že přejetí pro zavření je základním očekáváním uživatelů iOS.