Jetpack Compose Basics - Ako používať Backdrop Scaffold composable

Nezabudnite si pozrieť predchádzajúce články zo série Jetpack compose basics. Už sme sa zaoberali Scaffoldom, Snackbarom, Showing Image a Text Input.

‍

BackdropScaffold

BackdropScaffold, ako obvykle v Jetpack Compose, má veľa parametrov na prispôsobenie a tri z nich sú povinné:

• appBar - app bar pre zadnú vrstvu. App bar je plne viditeľná iba vtedy, ak je peekHeight presne rovnaká ako výška appbar. Môžete tu ponechať prázdnu lambda pre žiadny app bar alebo použiť odporúčaný TopAppBar alebo poskytnúť vlastný
• composablebackLayerContent – obsah zadnej vrstvy
• frontLayerContent – obsah prednej 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) }
)

Ďalšie parametre sú voliteľné:

• modifier - používa sa na zmeny z caller side
• scaffoldState - používa sa na kontrolu stavu backdropu. Prostredníctvom tohto stavu môžete nastaviť animáciu odkrývania pozadia alebo BackdropValue of backdrop. Môže byť skrytá (zadná vrstva je skrytá) alebo odkrytá (zobrazuje sa zadná vrstva)
• gesturesEnabled - či je možné s pozadím interagovať gestom
• peekHeight  - výška viditeľnej časti zadnej vrstvy, keď je skrytá
• headerHeight - minimálna výška prednej vrstvy, keď je inactive
• persistentAppBar – ak sa má panel aplikácie zobraziť, keď je zadná vrstva odhalená
• stickyFrontLayer – ak sa má predná vrstva držať vo výške zadnej vrstvy
• backLayerBackgroundColor – farba pozadia zadnej vrstvy
• backLayerContentColor – farba obsahu zadnej vrstvy
• frontLayerShape – tvar prednej vrstvy
• frontLayerElevation – výška prednej vrstvy na pozadí 
• frontLayerContentColor - farba obsahu prednej vrstvy
• frontLayerScrimColor - farba plátna aplikovaného na prednú vrstvu v neaktívnom stave. Dá sa použiť priehľadná farbasnackbarHost - obal na snackbar
• frontLayerBackgroundColor - farba pozadia prednej vrstvy
• frontLayerContentColor - farba obsahu prednej vrstvy
• frontLayerScrimColor - farba plátna aplikovaného na prednú vrstvu v neaktívnom stave. Je možné použiť priehľadnú farbu
• snackbarHost - snackbar wrapper

Väčšina z nich je ľahko pochopiteľná, niektoré sú o niečo ťažšie. Príklady budú demonštrované na BackdropScaffold vyzerajúcom takto. Aplikácia má appBar s navigačnou šípkou a názvom. Zadná vrstva s 2 textovými poľami a predná vrstva so zoznamom mačiek.

peekHeight

Výška viditeľnej časti zadnej vrstvy, keď je skrytá. V tomto príklade je peekHeight nastavená na 100dp, jednoduchšie povedané, keď je zadná vrstva skrytá, bude viditeľných 100dp.

peekHeight = 100.dp
 

stickyFrontLayer

Ak by sa predná vrstva mala prilepiť na výšku zadnej vrstvy. Predvolená hodnota je true, takže horná časť prednej vrstvy je prilepená k spodnej časti zadnej vrstvy. Keď je nastavené false a headerHeight je ponechaná s predvolenou hodnotou (56dp), potom bude viditeľných iba 56dp prednej vrstvy. V príklade headerHeight nie je upravený a stickyFrontLayer je nastavený na false.

‍

stickyFrontLayer = false
 

headerHeight

Minimálna výška prednej vrstvy, keď je neaktívna. V tomto príklade je headerHeight nastavená na 100dp. stickyFrontLayer je potrebné nastaviť na hodnotu false, ak chceme takú malú výšku prednej vrstvy, inak sa predná vrstva prilepí na výšku zadnej vrstvy.

headerHeight = 100.dp,
stickyFrontLayer = false
 

persistentAppBar

Ak by sa pri odhalení zadnej vrstvy mala zobraziť lišta aplikácií. V tomto príklade je odhalený počiatočný stav zadnej vrstvy a panel nástrojov nie je viditeľný. Pomocou gesta sa stav zmení na skrytý, ktorý zobrazuje panel aplikácií.

persistentAppBar = false
 

Default look of BackdropScaffold

Toto je príklad pozadia bez akýchkoľvek úprav. Počnúc odhaleným stavom zadnej vrstvy s pretrvávajúcou lištou aplikácií a prednou vrstvou priliehajúcou k zadnej vrstve.

Chcete byť Android developer? Hľadáme nových kolegov!