3.2 Modifikátory veľkostí

Ak by bol jednoriadkový Text stále najužší možný, nemalo by ho zmysel zarovnávať. Vrámci svojho bounding boxu totiž nemá žiadne miesto na manipuláciu. Keď ale Textu zväčšíme veľkosť, zrazu sa nám otvoria nové možnosti.

Pre nastavenie veľkostí použijeme niektorý z modifikátorov:

Text(
    text = "Sample",
    textAlign = TextAlign.Center, // zarovnanie textu na stred (horizontalne)
    modifier = Modifier
        .size(200.dp)             // nastav velkost na 200x200
        .size(200.dp,  100.dp)    // nastav velkost na 200x100
        .width(100.dp)            // nastav sirku na 100
        .height(100.dp)           // nastav vysku na 100
        .fillMaxSize()            // nastav maximalnu velkost
        .fillMaxWidth()           // nastav maximalnu sirku
        .fillMaxHeight()          // nastav maximalnu vysku
)

V prípade nastavenia veľkosti sa vždy aplikuje prvý z použitých modifikátorov. Prvé volanie size nastavilo fixnú výšku aj šírku, preto sa ostatné modifikátory už neaplikujú.

Padding

Ďalším modifikátorom je padding, ktorý umožňuje nastaviť medzery okolo komponentu. Modifikátor margin neexistuje (aj keď sa mi ho práve teraz snaží LLMko nanútiť). V JetPack Compose sú “vonkajšie” a “vnútorné” paddingy určené len poradím.

Dôležité: V JetPack Compose záleží na poradí aplikovania modifikátorov! Aplikovanie background a následne padding vytvorí iný efekt, ako padding a následne background.

Cvičenie - poradie modifikátorov

Veľmi pekným cvičením môže byť nasledovné:

Použitím jedinej Composable funkcie Box a modifikátormi, vytvor takýto layout:

Pomôcka

1. Aplikuj background pre najväčší štvorec a aplikuj padding
2. Aplikuj background pre prostredný štvorec a aplikuj padding
3. Aplikuj background pre najmenší štvorec a aplikuj size = veľkosť najmenšieho štvorca