20. Sep 2021Android

Jetpack Compose Basics - Nauč sa používať Snackbar správne

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á.

Peter ŠulyAndroid developer

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 https://material.io/components/snackbars#anatomy

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.

Chceš používať najnovšie technológie na 🔝 projektoch? Náš Android tím hľadá parťáka!

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á.