20. Sep 2021
AndroidJetpack 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á.
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.
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á.
Ďalšie články zo série Jetpack Compose Basics:
- Vyskúšaj Scaffold a zostav niekoľko materiálových komponentov so správnym rozložením!
- Ako načítať obrázky z Bitmapy, Vectoru, Painteru alebo z URL pomocou funkcie Coil
- Ako používať text field composables pre splnenie Material design špecifikácie
- Ako používať Backdrop Scaffold composable
- Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet
- Ako používať a vytvoriť vlastný CompositionLocal