2. diel - Základné pozíciovanie a náhľady GUI 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 ukážeme základné prvky pozíciovania. Bez nich sa pri tvorbe moderných Android aplikácií v Kotline nezaobídeme. Predstavíme si komponent Row() pre horizontálne pozíciovanie a komponent Column() pre vertikálne pozíciovanie. Vytvoríme si praktické príklady, v ktorých sa obe komponenty naučíme používať. Povieme si tiež o anotácii @Preview, ktorá umožňuje vytvoriť náhľad nášho rozhrania. Ide o veľmi praktickú vec, aplikáciu totiž vďaka nej nebudeme musieť na kontrolu zobrazenia zakaždým znovu spúšťať.

Základné prvky pozíciovania

Aby sme mohli pozíciovať komponenty našej aplikácie, budeme používať tzv. layouty. Predstavíme si základné komponenty Row() a Column(), teda riadok a stĺpec. Obe sú v knižnici Compose už preddefinované. Row() nám umožňuje rozložiť komponenty horizontálne. Naopak Column() nám slúži na vertikálne pozíciovanie.

Väčšinou si vystačíme s layoutmi, ktoré už máme v Compose k dispozícii. V prípade potreby Compose umožňuje aj tvorbu ďalších vlastných layoutov.

V klasickom návrhu užívateľského rozhrania s pomocou XML súborov by sme použili LinearLayout, prípadne ConstraintLayout, ktorý nájdeme aj v Compose. ConstraintLayout si predstavíme a vyskúšame v niektorom z ďalších dielov nášho kurzu. Dnes sa zameriame na komponenty Row() a Column().

Vytvorenie ComposeLayout aplikácie

Poďme sa pustiť do práce. Otvoríme si Android Studio a vytvoríme nový projekt. Urobíme to úplne rovnako, ako pri tvorbe HelloWorld aplikácie. Meno projektu tentoraz zmeníme na ComposeLayout:

Chvíľku počkáme, kým Android Studio načíta nový projekt.

Pokiaľ sa nám neotvoril automaticky súbor MainActivity.kt, nájdeme ho v ľavej časti IDE, dvakrát naň klikneme a tým si ho otvoríme:

Teraz môžeme začať pozicovať komponenty nášho používateľského rozhrania.

Metóda ColumnTest()

Pre začiatok si ukážeme, ako funguje komponent Column(). Vytvoríme si novú @Composable metódu, v ktorej budeme pozíciovať položky nášho užívateľského rozhrania. Pomenujeme ju ColumnTest():

@Composable
fun ColumnTest() {

}

Pripomeňme si, že meno @Composable metód začína veľkým písmenom. Mohli by sme samozrejme metódu pomenovať aj s malým písmenom na začiatku. V rámci dobrých praktík však odporúčame začínať veľkým písmenom, aby sme mohli rozlíšiť @Composable metódy od ostatných.

Do metódy ColumnTest() teraz pridáme dva komponenty Text(), ktoré chceme umiestniť pod seba:

@Composable
fun ColumnTest() {
    Text(text = "Hello")
    Text(text = "Android")
}

Metóda onCreate()

Presunieme sa do metódy onCreate() av bloku setContent zavoláme našu novú metódu. Tým zaistíme, aby sa nám zobrazili položky, ktoré máme definované v metóde ColumnTest():

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        ColumnTest()
    }
}

Teraz aplikáciu spustíme. Hneď vidíme, že výsledok nie je taký, ako by sme chceli. Naše texty nie sú pod sebou, ale prekrývajú sa v ľavom hornom rohu:

Pridanie komponentu Column()

Aby sme túto chybu opravili, budeme musieť do metódy ColumnTest() doplniť komponent Column(). Je to veľmi jednoduché, iba ju zavoláme a vložíme do nej komponenty, ktoré chceme umiestniť pod seba. Ich poradie bude zachované tak, ako ho máme v kóde:

@Composable
fun ColumnTest() {
    Column() {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

Komponent Column() pridáme ešte Modifier a nastavíme v ňom farbu pozadia. Zmena sa prejaví pri všetkých komponentoch v Column() zahrnutých:

@Composable
fun ColumnTest() {
    Column(modifier = Modifier.background(Color.Cyan)) {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

Modifier je ďalší mocný nástroj v Compose, preto sa mu bližšie budeme venovať v niektorej z ďalších lekcií.

Keď potom našu aplikáciu znovu spustíme, uvidíme dva texty pod sebou so zvýrazneným pozadím. To je presne to, čo potrebujeme:

Možnosti komponentu Column()

Predstavme si, že by sme teraz chceli zarovnať naše textové komponenty na stred. Komponent Column() nám ponúka jednoduchú možnosť, ako to zariadiť. Pomocou parametra horizontalAlignment nastavíme zarovnanie na stred. Tiež ďalej upravíme Modifier a roztiahneme pozadie oboch textov na celú šírku obrazovky. Upravený kód bude vyzerať nasledovne:

@Composable
fun ColumnTest() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth().background(Color.Cyan)
    ) {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

Príkaz Alignment.CenterHorizontally nám zaistí, aby boli elementy zarovnané na stred. Roztiahnutie komponentov na celú šírku obrazovky docielime použitím metódy fillMaxWidth().

Potom, čo aplikáciu opäť spustíme uvidíme nasledujúci výsledok:

Vidíme, že Column() zarovnal naše komponenty Text() na stred a veľkosť komponentu sa roztiahla na celú šírku obrazovky.

Náhľady rozhrania

Zatiaľ sme zakaždým museli aplikáciu spustiť, aby sme zistili, ako vyzerá jej aktuálny vzhľad. To je vcelku zdĺhavé a môže to byť veľký problém. Pri tvorbe zložitejšieho GUI by sme takouto kontrolou stratili dosť času. Aby sme eliminovali tento problém, prichádza do hry anotácia @Preview.

Anotáciu @Preview môžeme pridať ktorejkoľvek @Composable metóde, ktorá spĺňa dve základné požiadavky:

• neprijíma žiadne argumenty a
• nevracia žiadnu hodnotu.

Názorne si to ukážeme na metóde ColumnTest(), ktorá oba požiadavky spĺňa. Metódu teda anotujeme pomocou @Preview:

@Preview
@Composable
fun ColumnTest() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.background(Color.Cyan).fillMaxWidth(),
    ) {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

Teraz prepneme náš editor do režimu Split kliknutím na rovnomenné tlačidlo v pravej hornej oblasti Android Štúdia:

Následne musíme zostaviť náš projekt, ak sme to ešte neurobili:

Potom už uvidíme náš náhľad grafického rozhrania:

Takto môžeme veľmi jednoducho kontrolovať jednotlivé layouty a rýchlo zistiť, či vyzerajú, ako sme chceli.

Súčasť Row()

Druhý z komponentov, ktorý si dnes predstavíme, je veľmi podobný komponentu Column(). Komponent Row() však použijeme, ak chceme pozíciovať elementy horizontálne.

Poďme si do projektu pridať novú metódu RowTest():

@Preview
@Composable
fun RowTest() {
    Row(modifier = Modifier.fillMaxWidth().background(Color.Cyan)) {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

Do metódy sme vložili dve textové komponenty. Roztiahli sme jej veľkosť na celú šírku obrazovky a taktiež sme zmenili farbu pozadia. V jej náhľade, uvidíme nasledujúce rozhranie:

Pokiaľ sa nám grafické rozhranie nezobrazuje, zostavíme najskôr projekt kliknutím na Build v hornej lište IDE.

Nakoniec si dnes ešte ukážeme, ako zarovnať elementy v Row() komponente na stred. Urobíme to obdobne, ako pri vertikálnom centrovaní. Komponent tentoraz nastavíme parameter verticalAlignment:

@Preview
@Composable
fun RowTest() {
    Row(
        modifier = Modifier.fillMaxWidth().height(150.dp).background(Color.Cyan),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Hello")
        Text(text = "Android")
    }
}

Doplnili sme aj Modifier a nastavili výšku komponentov na 150 dp.

Jednotka dp nám určuje veľkosť, ktorá nie je závislá na hustote pixelov. Veľkosť komponentov bude takto rovnaká na všetkých zariadeniach.

V náhľade teraz uvidíme, ako sú jednotlivé elementy zarovnané na stred:

To je pre dnešok všetko. Vzorovú aplikáciu si môžete ďalej upraviť a zmeniť napríklad farbu pozadia, experimentovať s centrovaním, pridať ďalší text a podobne.

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