Jetpack Compose Basics - Snackbar
Technology
2
 min read
October 19, 2021

Jetpack Compose Basics - Snackbar

Peter Šuly
Peter Šuly
Android developer

Snackbar je súčasť používateľského rozhrania, ktorá poskytuje krátke správy v spodnej časti obrazovky. Slúži na informovanie používateľov, že aplikácia vykonala akciu alebo vykoná akciu. Naraz je možné použiť iba jeden snackbar a musí obsahovať iba jednu akciu, ktorá je voliteľná.

Tento jednoduchý komponent pozostáva zo správy (1), kontajnera (2) a voliteľného akčného tlačidla (3). Správa môže mať maximálne 2 riadky.

Anatómia snackbaru, ako je uvedené v usmerneniach k dizajnu materiálov
Anatómia snackbaru, ako je uvedené v usmerneniach k dizajnu materiálov https://material.io/components/snackbars#anatomy
Príklad použitia snackbaru
Príklad použitia snackbaru

Snackbar v Jetpack Compose

Snackbar

V Jetpack Compose je composable funkcia s názvom Snackbar. Je to len vizuálna reprezentácia snackbaru definovaného v Material design guidelines, bez možnosti zobraziť alebo skryť a bez animácií. Obvykle budete musieť použiť SnackbarHost.

SnackbarHost

Tento komponent je zodpovedný za zobrazovanie (alebo skrývanie snackbaru po definovanom čase) a za jeho animácie. Jednoducho povedané, SnackbarHost je wrapper Snackbaru uvedeného vyššie. Na to sú potrebné 3 parametre:

  • hostState - tento parameter je uvedený nižšie
  • modifikátor - používa sa na zmeny zo strany volajúceho
  • snackbar - composable funkcia, ktorá získava SnackbarData, v predvolenom nastavení iba Snackbar composable. Ak ste zvedavý, SnackbarData je rozhranie pozostávajúce zo správy, štítka akcie a trvania snackbaru
  • hostState - tento parameter je popísaný nižšie

SnackbarHostState

Ako naznačuje popisný názov triedy, používa sa na ovládanie stavu SnackbarHost. Ako uvádzajú Material design guidelines, súčasne by sa mal zobrazovať iba jeden snackbar, ostatné sú v poradí a neskôr ich zobrazí SnackbarHostState.

Jediným povinným parametrom SnackbarHostState je hostState, ktorý je možné získať jednoducho s konštruktorom. Potom môžete SnackbarHost jednoducho umiestniť kdekoľvek chcete. Snabar sa však stále nezobrazuje, ako to teda urobiť?

Ako zobraziť snackbar v Jetpack Compose?

Snackbar sa zobrazuje ako reakcia na niečo, v našom prípade „niečo“ je kliknutie na tlačidlo. ShowSnackbar je suspend funkcia, takže je potrebný coroutine scope. Coroutine scope programu si musíte zapamätať mimo funkcie onClick, pretože keď sa rozsah zruší, snackbar sa odstráni z frontu.

Vlastný snackbar v Jetpack Compose

Tu je dôležité upraviť parameter SnabarbarHost. Bez našich úprav sa použije predvolený Snackbar composable. S nižšie uvedeným kódom sa použije náš dizajn snackbaru, ale predvolené správanie snackbaru sa zachová.

Vlastný snackbar z vyššie uvedeného príkladu
Vlastný snackbar z vyššie uvedeného príkladu

Ďalšie články zo série Jetpack Compose Basics:

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.