Jetpack Compose Basics - Scaffold
Technology
4
 min read
September 10, 2021

Jetpack Compose Basics - Scaffold

Peter Šuly
Peter Šuly
Android developer

Jetpack Compose môže byť budúcnosťou programovania pre Android. Väčšina z jeho funkcií a composables je ľahko použiteľná a skutočne zrozumiteľná, iné môžu mať obrovské množstvo atribútov. V základoch Jetpack Compose budú vysvetlené niektoré z nich, Scaffold ako prvý.

Čo je to Scaffold a ako ho používať?

Scaffold je základnou composable funkciou používanou v Material aplikáciách. Tento komponent poskytuje jednoduchý spôsob, ako zostaviť niekoľko "materiálových" komponentov na vytvorenie obrazovky aplikácie so zaistením správneho rozloženia (napr. správna poloha snackbaru v hornej časti plávajúceho akčného tlačidla, animácie, stav draweru a ďalšie)

Scaffold obsahuje sloty pre TopBar, BottomBar, Snackbar, FloatingActionButton a Drawer. Prispôsobenie vyžaduje veľa parametrov, ale nebojte sa, väčšina z nich je celkom zrejmá a vyžaduje iba jednoduché vysvetlenie.

  • modifier - voliteľný parameter používaný na úpravu vlastností Scaffold z vonku
  • scaffoldState - zapamätaný stav obrazovky. ScaffoldState obsahuje informácie o draweri (či je otvorený alebo zatvorený) a snackbarHost (či sa zobrazuje snackbar). Ak nepotrebujete komunikovať so stavom (napr. showing snackbar alebo opening drawer, nechajte ho ako je)
  • floatingActionButtonPosition - poloha floating tlačidla akcie, možné hodnoty sú buď Center alebo End
  • isFloatingActionButtonDocked - booleanovský parameter, ak by sa tlačidlo plávajúcej akcie malo prekrývať so spodnou lištou na polovicu svojej výšky. Tento parameter sa ignoruje, ak nie je použitý žiadny dolný bar
Jetpack Compose Basics - Kombinácia floatingActionButtonPosition as Center a isFloatingActionButtonDocked as true
Kombinácia floatingActionButtonPosition as Center a isFloatingActionButtonDocked as true
  • drawerGestureEnabled - či je možné so drawerom interagovať prostredníctvom gest
  • drawerShape - tvar draweru
  • drawerElevation - pozícia draweru
  • drawerBackgroundColor - farba pozadia, ktorá sa použije pre drawer
  • drawerContentColor - farba obsahu, ktorý sa má použiť vo vnútri draweru
  • drawerScrimColor - farba scrimu, ktorý zakrýva obsah, keď je drawer otvorený
  • backgroundColor - farba pozadia tela Scaffoldu, vo väčšine prípadov ponecháte tento parameter na predvolenej hodnote
  • contentColor - farba obsahu v tele Scaffoldu, vo väčšine prípadov ponecháte tento parameter na predvolenej hodnote

Teraz je načase diskutovať o netriviálnych, ale stále pomerne jednoduchých parametroch.

TopBar

Voliteľný parameter. Ako vidíte v definícii, mali by ste poskytnúť composable funkciu, ktorá vyplní slot v hornej časti obrazovky. Je možné použiť buď preddefinovany composable TopAppBar, alebo môžete použiť vlastnú implementáciu na prispôsobenie vlastných návrhov. Predvolená hodnota je prázdna lambda, v tomto prípade sa nepoužíva horná lišta. Tento útržok kódu implementuje program TopAppBar odovzdaný parametru topBar.

Jetpack Compose Scaffold - Používanie TopAppBar
Používanie TopAppBar

BottomBar

Voliteľný parameter. V takom prípade je potrebná composable funkcia, ktorá vyplní slot v spodnej časti obrazovky. Môžu sa použiť prefeginovane composables ako BottomAppBar alebo BottomNavigation, ale sú to skutočne len odporúčania. Môžete poskytnúť vlastnú composable funkciu. Tento útržok kódu implementuje BottomAppBar odovzdaný parametru bottomBar.

Jetpack Compose BottomBar
Používanie BottomAppBar

FloatingActionButton

Voliteľný parameter. Tlačidlo plávajúcej akcie (FAB) predstavuje primárnu akciu obrazovky. Je možné ho nakonfigurovať aj pomocou funkcie floatingActionButtonPosition (Center alebo End) a isFloatingActionButtonDocked (boolean, či sa má FAB prekrývať s BottomBar). Preferovaná composable pre tento slot je FloatingActionButton, ale môžete použiť akúkoľvek composable funkciu. Tento útržok kódu implementuje FloatingActionButton odovzdaný parametru floatingActionButton.

Jetpack Compose Basics FAB s polohou = center
FAB s polohou = Center
Floating action button with position = End
FAB s polohou = End

Drawer

Voliteľný parameter. Drawer predstavuje obsah, ktorý je možné ťahať zľava (alebo vpravo pre RTL). Drawer je možné zobraziť aj pomocou funkcie scaffoldState.drawerState.open () v coroutine scope. Lambda, ktorá je tu potrebná, je už funkciou nad ColumnScope, takže každá composable, ktorá bude použitý v lambde, bude umiestnený ako v stĺpci (zhora nadol). O animáciu, scrim pozadia a potiahnutie prstom sa stará Scaffold. Tento útržok kódu implementuje 4 položky odovzdané parametru drawerContent.

Jetpack Compose Basics drawer

SnackbarHost

Snackbar je trochu komplikovanejší. Parameter snackbarHost môžeme použiť, ak chceme vlastný vzhľad Snackbaru, inak sa použije predvolený dizajn a správanie implementované v SnackbarHost. Môžeme nechať tak, aby to robil SnackbarHost. Snackbars poskytujú v spodnej časti obrazovky stručné správy o procesoch aplikácie. V našom ukážkovom úryvku sa panel Snackbar zobrazí po kliknutí na položku FAB.

Niekoľko vecí, ktoré treba spomenúť. showSnackbar (...) je suspend funkcia, takže je potrebný coroutine scope. Zavislý scope na kompozicii môžeme získať jednoducho pomocou rememberCoroutineScope (). SnackbarHost zaručuje, že sa naraz zobrazí maximálne jeden snackbar, ostatné budú v poradí.

Content

Zostávajúca časť na obrazovke. Tu môžete použiť akúkoľvek composable funkciu. Lambda prijíma hodnoty PaddingValues, ktoré by mali byť použité na root obsahu pomocou Modifier.padding, aby sa správne odsadili horné a dolné bary.

Celý Scaffold so všetkými widgetami môže vyzerať takto.

Scaffold so všetkými widgetami
Scaffold so všetkými widgets

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.