Jetpack Compose Basics – Jak používat Backdrop Scaffold composable

‍

BackdropScaffold

BackdropScaffold má, jak je v Jetpack Compose obvyklé, mnoho parametrů, které lze přizpůsobit, a tři z nich jsou povinné:

• appBar – app bar pro zadní vrstvu. App bar je plně viditelný pouze tehdy, pokud je hodnota peekHeight přesně stejná jako výška appbar. Můžete tu ponechat prázdnou lambda pro požadovaný app bar, nebo použít doporučený TopAppBar, případně poskytnout vlastní.
• composablebackLayerContent – obsah zadní vrstvy
• frontLayerContent – obsah přední vrstvy

@Composable
fun BackdropScaffold(
    appBar: @Composable () -> Unit,
    backLayerContent: @Composable () -> Unit,
    frontLayerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed),
    gesturesEnabled: Boolean = true,
    peekHeight: Dp = BackdropScaffoldDefaults.PeekHeight,
    headerHeight: Dp = BackdropScaffoldDefaults.HeaderHeight,
    persistentAppBar: Boolean = true,
    stickyFrontLayer: Boolean = true,
    backLayerBackgroundColor: Color = MaterialTheme.colors.primary,
    backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor),
    frontLayerShape: Shape = BackdropScaffoldDefaults.frontLayerShape,
    frontLayerElevation: Dp = BackdropScaffoldDefaults.FrontLayerElevation,
    frontLayerBackgroundColor: Color = MaterialTheme.colors.surface,
    frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor),
    frontLayerScrimColor: Color = BackdropScaffoldDefaults.frontLayerScrimColor,
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }
)

Další parametry jsou volitelné:

• modifier – používá se pro změny z caller side
• scaffoldState – slouží ke kontrole stavu backdropu. Prostřednictvím tohoto stavu můžete nastavit animaci odkrývání pozadí nebo BackdropValue of backdrop. Může být skrytá (zadní vrstva je skrytá) nebo odkrytá (zobrazuje se zadní vrstva).
• gesturesEnabled – zda je možné s pozadím interagovat pomocí gesta
• peekHeight – výška viditelné části zadní vrstvy, když je skrytá
• headerHeight – minimální výška přední vrstvy při nečinnosti
• persistentAppBar – jestli se má panel aplikace zobrazit, když je zadní vrstva odkrytá
• stickyFrontLayer – jestli se má přední vrstva držet ve výšce zadní vrstvy
• backLayerBackgroundColor – barva pozadí zadní vrstvy
• backLayerContentColor – barva obsahu zadní vrstvy
• frontLayerShape – tvar přední vrstvy
• frontLayerElevation – výška přední vrstvy na pozadí 
• frontLayerContentColor – barva obsahu přední vrstvy
• frontLayerScrimColor – barva plátna aplikovaného na přední vrstvu v neaktivním stavu. Dá se použít průhledná barva snackbarHost – obal na snackbar.
• frontLayerBackgroundColor – barva pozadí přední vrstvy
• frontLayerContentColor – barva obsahu přední vrstvy
• frontLayerScrimColor – barva plátna aplikovaného na přední vrstvu v neaktivním stavu. Je možné použít průhlednou barvu.
• snackbarHost – snackbar wrapper

Většina z nich je snadno pochopitelná, některé jsou trochu složitější. Příklady si ukážeme na BackdropScaffold, který vypadá takto. Aplikace má appBar s navigační šipkou a názvem. Zadní vrstva se 2 textovými poli a přední vrstva se seznamem koček.

peekHeight

Výška viditelné části zadní vrstvy, když je skrytá. V tomto příkladu je peekHeight nastavena na 100 dp. Zjednodušeně řečeno, pokud je zadní vrstva skrytá, bude vidět 100 dp.

peekHeight = 100.dp

stickyFrontLayer

Pokud by se měla přední vrstva přilepit na výšku zadní vrstvy. Předvolená hodnota je true, takže horní část přední vrstvy je přilepena ke spodní části zadní vrstvy. Pokud je nastavena hodnota false a hodnota headerHeight je ponechána na předvolené hodnotě (56 dp), bude viditelných pouze 56 dp přední vrstvy. V příkladu není hodnota headerHeight upravená a hodnota stickyFrontLayer je nastavena na false.

stickyFrontLayer = false

headerHeight

Minimální výška přední vrstvy při nečinnosti. V tomto příkladu je hodnota headerHeight nastavena na 100 dp. stickyFrontLayer je třeba nastavit na hodnotu false, pokud chceme tak malou výšku přední vrstvy, jinak se přední vrstva přilepí na výšku zadní vrstvy.

headerHeight = 100.dp,
stickyFrontLayer = false

persistentAppBar

Pokud se má po odkrytí zadní vrstvy zobrazit lišta aplikací. V tomto příkladu je počáteční stav zadní vrstvy odkrytý a panel nástrojů není viditelný. Pomocí gesta se stav změní na skrytý, čímž se zobrazí panel aplikací.

persistentAppBar = false
 

Výchozí vzhled BackdropScaffold

Toto je příklad pozadí bez jakýchkoli úprav. Počínaje odkrytým stavem zadní vrstvy s přetrvávající lištou aplikací a přední vrstvou přiléhající k zadní vrstvě.