3. diel - Material Dizajn a tvorba Theme v Compose

V minulej lekcii, Úvod do Jetpack Compose , sme si predstavili framework Jetpack Compose a tiež sme spolu vytvorili prvú Hello World aplikáciu. Vysvetlili sme si základný koncept Compose a jeho výhody oproti návrhu v XML.

V dnešnom Compose tutoriále si predstavíme Material Design, ktorý nám pomôže tvoriť kvalitnú grafiku Kotlín aplikácií. Vysvetlíme si, čo je to primárna a sekundárna farba. V praktickom príklade si ukážeme, ako v Android Studiu definovať farebnú schému a ako ju použiť pre naše Compose komponenty. Pre úpravu nášho GUI pomocou konceptu Material Design použijeme Modifier, pomocou ktorého upravíme aj tvar tlačidla.

Material Design

Material Design je dizajnový jazyk vytvorený spoločnosťou Google v roku 2014. V dnešnej dobe sa bežne stretávame s dvoma verziami. Používa sa Material Design 2 alebo Material Design 3. Pre potreby nášho tutoriálu budeme používať skratky M2 a M3. M3 je vylepšením staršieho štandardu M2, ale vychádza z rovnakých princípov a základy zostávajú rovnaké. Oba jazyky pracujem s tieňmi, hĺbkou a riešia farebný, typografický aj tvarový systém.

Farebný systém

Základnou vecou pri tvorení aplikácie je zvolenie správnych farieb, ktoré budú reprezentovať našu značku. Nie je vhodné, aby sme v jednej aplikácii používali desať farieb a mali v nej napríklad desať rôzne farebných tlačidiel. To by mohlo byť pre užívateľov mätúce. Keď sa budeme držať štandardu M2 alebo M3, použijeme iba pár farieb. Celkový dojem z našej aplikácie bude tak ucelenejší.

V základe rozlišujeme primárnu a sekundárnu farbu. Primárnu farbu použijeme pri komponente, ktorý má byť viac viditeľný. Napríklad v prípade kalkulačky ju využijeme pri tlačidle rovná sa. Sekundárnu farbu použijeme na komponenty, ktoré nepotrebujeme až tak veľmi zvýrazniť. Máme k dispozícii niekoľko ďalších farebných rozlíšení, ale tie si budeme vysvetľovať postupne v ďalších dieloch.

Ako ďalšie spomeňme tzv. on farby, ktorých použitie si ukážeme ďalej v lekcii. Tieto farby nám slúžia napríklad na písanie textu na určitý komponent, ako napríklad tlačidlo.

Typografický systém

Ďalej je určite žiaduce, aby sme nepoužívali niekoľko fontov naraz a rôzne ich miešali. To má potom za výsledok opäť zlý dojem z aplikácie. Pokiaľ potrebujeme viac fontov, vyberieme iba tie, ktoré k sebe ladia. A znovu platí, čím menej rozdielnych typov písma použijeme, tým lepšie.

Na výber fontov použijeme webovú stránku priamo od Googlu, ktorá sa volá Google Fonts. Na nej nájdeme niekoľko stoviek fontov a Google nám aj pomôže vybrať k sebe tie správne.

Tvarový systém

Určite by sme chceli nejako "okoreniť" vzhľad našej aplikácie, aby nevyzerala ako stovky ďalších. K tomu nám určite pomôžu rôzne tvary našich komponentov. Vylepšíme tak dojem z našej aplikácie. Nebudú to už klasické štvorcové tvary, ktoré pôsobia ohrane. S pomocou Compose a Material Design vytvoríme zaoblené aj zastrihnuté tvary. Pre úpravu komponentov využijeme už skôr spomínaný Modifier.

Tvorba aplikácie v Material Design

Poďme si teraz ukázať všetko v praxi. Vytvoríme si nový projekt, rovnako ako v minulých lekciách. Dnešný príklad pomenujeme PrvniAplikaceMaterial:

Farebné konštanty

Ako obvykle sa nám otvorí súbor MainActivity.kt. Tento súbor zatiaľ upravovať nebudeme. Najprv si ukážeme, kde môžeme meniť naše farby. Hneď nad súborom MainActivity.kt máme priečinok ui.theme\. Otvoríme ju av nej dvakrát klikneme na súbor Color.kt:

Tento súbor slúži na tvorbu farebných konštánt. Vďaka tomu potom nemusíme zakaždým písať hexadecimálne kódy farieb. Jeho pôvodný obsah vyzerá nasledovne:

package cz.itnetwork.prvniaplikacematerial.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

Máme tu konštanty pre štyri farby, ktoré budeme používať v Material Design. Aby sme ich mohli používať, musíme ich pridať do farebnej schémy.

Farebná schéma

Schéma nám tiež automaticky vygenerovalo Android Studio, nájdeme ho v súbore ui.theme/Theme.kt.

Aby sme celý princíp stavby grafického vzhľadu správne pochopili, popíšme si, čo robí kód vo vygenerovanom súbore:

package cz.itnetwork.prvniaplikacematerial.ui.theme

import ...

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)
   ...

Na začiatku je uvedený balíček našej aplikácie, nasledujú potrebné importy. Ďalej definujeme farebnú paletu pre tmavý režim. V nej určíme primárnu farbu, vrátane možnej varianty a potom vyberieme sekundárnu farbu.

Podobne vytvoríme farebnú paletu pre svetlý režim:

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
    */
)

V druhom odseku máme zakomentovaný kód, v ktorom je možné definovať spomínané on farby. V predvolenom nastavení bude použitá biela a čierna farba, ktoré sa vzájomne striedajú. Pokiaľ by sme to chceli zmeniť, kód odkomentujeme a definujeme si v ňom vlastné farby.

Nakoniec v súbore máme @Composable metódu:

@Composable
fun PrvniAplikaceMaterialTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Táto metóda je anotovaná anotáciou @Composable, môžeme ju teda použiť pri tvorbe rozhrania. V prvej časti zisťujeme, či má byť nastavený tmavý alebo svetlý režim a pomocou podmienky vyberieme zodpovedajúcu farebnú paletu. V druhej časti odkazujeme na definované farby, písmo a tvary nášho GUI.

Tvorba tlačidla

V aplikácii si teraz vytvoríme farebné tlačidlo. Začneme tak s využitím farieb nášho MaterialTheme. Tlačidlo definujeme v súbore MainActivity.kt. Najprv si tu vytvoríme @Composable metódu, pomenujeme ju BarevneTlacitko() a pridáme jej anotáciu @Preview:

@Preview
@Composable
fun BarevneTlacitko() {
    Button(
        onClick = { /*TODO*/ },
        colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
    ) {
        Text(
            text = "Tlačidlo",
            color = MaterialTheme.colors.onPrimary,
            modifier = Modifier.background(MaterialTheme.colors.primary)
        )
    }
}

Pomocou parametra colors sme nastavili tlačidlu farbu pozadia. Použili sme príkaz ButtonDefaults.buttonColors() av parametri sme mu nastavili primárnu farbu z MaterialTheme. Potom sme tlačidlu pridali text a jeho farbu nastavili na hodnotu, ktorá je uložená v MaterialTheme.colors.onPrimary. Pri texte sme teda použili on farbu. Na nastavenie pozadia sme použili Modifier s primárnou farbou.

V kóde máme aj farbu onPrimary, ktorá je v súbore Theme.kt zakomentovaná. V našom prípade teda Android Studio použije predvolené farby, tj bielu a čiernu. Ak by sme ich chceli explicitne nastaviť, definujeme ich práve v súbore Theme.kt.

Nastavenie farebnej schémy

Ďalej potrebujeme nastaviť konkrétny MaterialTheme nášmu tlačidlu. To docielime úplne jednoducho. Celý Button() vložíme do bloku PrvniAplikaceMaterialTheme:

@Preview
@Composable
fun BarevneTlacitko() {
    PrvniAplikaceMaterialTheme {
        Button(
            onClick = { /*TODO*/ },
            colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
        ) {
            Text(
                text = "Tlačidlo",
                color = MaterialTheme.colors.onPrimary,
                modifier = Modifier.background(MaterialTheme.colors.primary)
            )
        }
    }
}

Takto nastavený MaterialTheme bude použitý pre všetky elementy vo vnútri bloku. Zmení teda aj vzhľad komponentov vytvorených v iných @Composable metódach, pokiaľ sú súčasťou bloku. Všetky zmeny môžeme pozorovať v režime Split:

Úprava tvaru tlačidla

Na záver si ukážeme, ako zmeniť tvar tlačidla. To urobíme opäť pomocou Modifier:

Button(
        onClick = { /*TODO*/ },
        modifier = Modifier.clip(CutCornerShape(16.dp)),
        colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
    ) {
        Text(
            text = "Tlačidlo",
            color = MaterialTheme.colors.onPrimary,
            modifier = Modifier.background(MaterialTheme.colors.primary)
        )
    }

Pridali sme parameter modifier do komponentu Button(). Tlačidlu sme v ňom nastavili odstrihnutý tvar. Výsledok môžeme vidieť v Split režime:

Vidíme, že Modifier využijeme aj na úpravy tvarov komponentov. Môžeme ho použiť pre ktorýkoľvek komponent v Compose, dokonca aj pre naše vlastné. Tým ale jeho využitie nekončí, ako uvidíme v ďalších lekciách.

V budúcej lekcii, Jednoduchá kalkulačka v Compose - Tvorba komponentov , začneme tvoriť kalkulačku. Pripravíme si tlačidlá pre jednotlivé početné operácie, ktoré budeme používať v našom grafickom rozhraní a ukážeme si, ako správne štruktúrovať náš projekt.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.