Jetpack Compose Basics series - Ako používať Backdrop Scaffold composable
Technology
3
 min read
November 29, 2021

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

Peter Šuly
Peter Šuly
Android developer

Backdrop component sa skladá z dvoch vrstiev: zadnej a prednej vrstvy. Účelom zadnej vrstvy je zobraziť kontext. Súčasťou toho je appBar. Účelom prednej vrstvy je zobraziť obsah na základe kontextu zo zadnej vrstvy. Backdrop je implementovaný v Jetpack Compose ako BackdropScaffold composable.

Anatómia pozadia, ako je uvedené v Material Design guidelines
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
  • layerfrontLayerContent – obsah prednej vrstvy

Ď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
Skrytá zadná vrstva s výškou 100dp

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
Odhalená zadná vrstva so sitckyFrontLayer 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
Odhalená zadná vrstva s hlavičkouHeight 100dp a 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
Prechod medzi odhaleným a skrytým stavom pozadia, zobrazenie a skrytie lišty aplikácií

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!

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.