3.1 Modifikátory pozadia a rámčeka

Skôr než naše UI začne vyzerať ako z rozprávky (neverím, že tento svet je skutočný), musíme sa oboznámiť s Modifikátormi. Nejedná sa o modifikátory prístupu z Objektov Orientovaného programovania (public/private), ale o samostatnú triedu s názvom Modifier.

Asi všetky @Composable funkcie podporujú atribút modifier typu Modifier. Tento atribút umožní programátorovi nejakým spôsobom ovplyvniť vzhľad, ale aj správanie komponentov. Správaniu sa až tak venovať nebudeme. Ale pozrime si ako vieme pomocou modifikátorov odsadiť komponenty a zmeniť farbu pozadia, či nastaviť rámček.

Použitie modifikátora border

Keď Compose umiestni komponent na obrazovku, tento komponent má nejakú veľkosť. Predstav si túto veľkosť ako obdĺžnikový “bounding box” v 2D strieľačke. Tento “bounding box” je v našom prípade najmenší možný obdĺžnik, ktorý obsahuje komponent. Ak chceš vedieť, ako vyzerá “bounding box” tvojho komponentu, pridaj mu Modifier s názvom border nasledovne:

Text(
    text = "Hello World",
    modifier = Modifier
        .border(
            width = 1.dp,                       // sirka ramceka = 1
            color = Color.Red,                  // farba ramceka = cervena
            shape = RoundedCornerShape(4.dp)    // tvar ramceka = obdlznik so zaoblenymi rohmi (polomer 4)
        )
)

Info: Tak, ako pri použití sp, v prípade Text používame dp pri označovaní akejkoľvek inej veľkosti (nesúvisiacej s textom).

Použitie modifikátora background

Funkcia border sa aplikuje a zároveň vracia Modifier, takže môžeme jednoducho cez bodku aplikovať ďalší modifikátor, takto vie vyzerať border v kombinácii s background:

Text(
    text = "Hello World",
    modifier = Modifier
        .border(
            width = 1.dp,
            color = Color.Red,
            shape = RoundedCornerShape(4.dp)
        )
        .background(
            color = Color.Blue,
            shape = RoundedCornerShape(2.dp)
        )
)