Jetpack Compose Basics - Vyskúšaj Scaffold a zostav niekoľko materiálových komponentov so správnym rozložením!

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

‍

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
)

• 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

• 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

topBar: @Composable () -> Unit = {}

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.

topBar = {
    TopAppBar(
        title = { Text(text = "Title text") },
        navigationIcon = {
            Icon(modifier = padding, imageVector = Icons.Default.ArrowBack, contentDescription = "Back")
        },
        actions = {
            Icon(modifier = padding, imageVector = Icons.Default.Favorite, contentDescription = "Favorite")
            Icon(modifier = padding, imageVector = Icons.Default.Search, contentDescription = "Search")
        }
    )
}

BottomBar

bottomBar: @Composable () -> Unit = {}

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.

bottomBar = {
    BottomAppBar(
        content = {
            Icon(modifier = padding, imageVector = Icons.Default.Menu, contentDescription = "Menu")
            Icon(modifier = padding, imageVector = Icons.Default.Search, contentDescription = "Search")
            Text(text = "Anything can be here")
        }
    )
}

FloatingActionButton

floatingActionButton: @Composable () -> Unit = {}

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.

floatingActionButton = {
    FloatingActionButton(
        onClick = {},
        content = {
            Icon(imageVector = Icons.Default.Favorite,contentDescription = "")
        }
    )
}

Drawer

drawerContent: @Composable (ColumnScope.() -> Unit)? = null

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.

drawerContent = {
    Icon(
        modifier = Modifier.padding(16.dp),
        imageVector = Icons.Default.Person,
        contentDescription = ""
    )
    Text(modifier = Modifier.padding(16.dp), text = "First line")
    Text(modifier = Modifier.padding(16.dp), text = "Second line")
    Text(modifier = Modifier.padding(16.dp), text = "Third line")

SnackbarHost

snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }

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.

val scope = rememberCoroutineScope()
val scaffoldState = rememberScaffoldState()
.
.
.
scaffoldState = scaffoldState,
floatingActionButton = {
    FloatingActionButton(
        onClick = {
            scope.launch {
                scaffoldState.snackbarHostState.showSnackbar("Hello there!")
            }
        },
        content = {
            Icon(imageVector = Icons.Default.Favorite, contentDescription = "")
        }
    )
}

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

content: @Composable (PaddingValues) -> Unit

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.

Ď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!
• Nauč sa používať Snackbar správne
• 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