Lekce 2 - Základní pozicovaní a náhledy GUI v Compose

V minulé lekci, Úvod do Jetpack Compose, jsme si představili framework Jetpack Compose a také jsme spolu vytvořili první Hello World aplikaci. Vysvětlili jsme si základní koncept Compose a jeho výhody oproti návrhu v XML.

V dnešním Compose tutoriálu si ukážeme základní prvky pozicování. Bez nich se při tvorbě moderních Android aplikací v Kotlin neobejdeme. Představíme si komponenty pro horizontální a vertikální pozicování. Vytvoříme si praktické příklady, ve kterých se obě komponenty naučíme používat. Povíme si také o anotaci @Preview, která umožňuje vytvořit náhled našeho rozhraní. Jde o velice praktickou věc, aplikaci totiž díky ní nebudeme muset pro kontrolu zobrazení pokaždé znovu spouštět.

Prvky pozicování v Compose

Abychom mohli pozicovat komponenty naší aplikace, budeme používat tzv. layouty. Dnes se naučíme používat základní komponenty Row() a Column(), tedy řádek a sloupec. Obě jsou v knihovně Compose už předdefinované. Row() nám umožňuje rozložit komponenty horizontálně. Naopak Column() nám slouží k vertikálnímu pozicování.

Většinou si vystačíme s layouty, které už máme v Compose k dispozici. V případě potřeby Compose umožňuje také tvorbu dalších vlastních layoutů.

V klasickém návrhu uživatelského rozhraní s pomocí XML souborů bychom použili LinearLayout, případně ConstraintLayout, který nalezneme i v Compose. ConstraintLayout si představíme a vyzkoušíme v některém z dalších dílů našeho kurzu.

Vytvoření ComposeLayout aplikace

Pojďme se pustit do práce. Otevřeme si Android Studio a vytvoříme nový projekt. Uděláme to úplně stejně, jako při tvorbě HelloWorld aplikace. Jméno projektu tentokrát změníme na ComposeLayout:

Chvilku počkáme, než Android Studio načte nový projekt.

Pokud se nám neotevřel automaticky soubor MainActivity.kt, najdeme jej v levé části IDE, dvakrát na něj klikneme a tím si ho otevřeme:

Teď můžeme začít pozicovat komponenty našeho uživatelského rozhraní.

Metoda ColumnTest()

Pro začátek si ukážeme, jak funguje komponenta Column(). Vytvoříme si novou @Composable metodu, ve které budeme pozicovat položky našeho uživatelského rozhraní. Pojmenujeme ji ColumnTest():

@Composable
fun ColumnTest() {

}

Připomeňme si, že jméno @Composable metod začíná velkým písmenem. Mohli bychom samozřejmě metodu pojmenovat i s malým písmenem na začátku. V rámci dobrých praktik ale doporučujeme začínat velkým písmenem, abychom mohli rozlišit @Composable metody od ostatních.

Do metody ColumnTest() teď přidáme dvě komponenty Text(), které chceme umístit pod sebe:

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

Metoda onCreate()

Přesuneme se do metody onCreate() a v bloku setContent zavoláme naši novou metodu. Tím zajistíme, aby se nám zobrazily položky, které máme definované v metodě ColumnTest():

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

Nyní aplikaci spustíme. Hned vidíme, že výsledek není takový, jaký bychom chtěli. Naše texty nejsou pod sebou, ale překrývají se v levém horním rohu:

Přidání komponenty Column()

Abychom tuto chybu opravili, budeme muset do metody ColumnTest() doplnit komponentu Column(). Je to velice jednoduché, pouze ji zavoláme a vložíme do ní komponenty, které chceme umístit pod sebe. Jejich pořadí bude zachováno tak, jak jej máme v kódu:

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

Komponentě Column() přidáme ještě Modifier a nastavíme v něm barvu pozadí. Změna se projeví u všech komponent v Column() zahrnutých:

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

Modifier je další mocný nástroj v Compose, proto se mu blíže budeme věnovat v některé z dalších lekcí.

Když pak naší aplikaci znovu spustíme, uvidíme dva texty pod sebou se zvýrazněným pozadím. To je přesně to, co potřebujeme:

Možnosti komponenty Column()

Představme si, že bychom nyní chtěli zarovnat naše textové komponenty na střed. Komponenta Column() nám nabízí jednoduchou možnost, jak to zařídit. Pomocí parametru horizontalAlignment nastavíme zarovnání na střed. Také dále upravíme Modifier a roztáhneme pozadí obou textů na celou šířku obrazovky. Upravený kód bude vypadat následovně:

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

Nastavením vlastnosti Alignment.CenterHorizontally zajistíme, aby byly elementy zarovnány na střed. Roztažení komponent na celou šířku obrazovky docílíme použitím metody fillMaxWidth().

Poté, co aplikaci opět spustíme uvidíme následující výsledek:

Vidíme, že Column() zarovnal naše komponenty Text() na střed a velikost komponenty se roztáhla na celou šířku obrazovky.

Náhledy rozhraní v Compose

Doposud jsme pokaždé museli aplikaci spustit, abychom zjistili, jak vypadá její aktuální vzhled. To je vcelku zdlouhavé a může to být velký problém. Při tvorbě složitějšího GUI bychom takovou kontrolou ztratili dost času. Abychom eliminovali tento problém, přichází do hry anotace @Preview.

Anotaci @Preview můžeme přidat kterékoliv @Composable metodě, která splňuje dva základní požadavky:

• nepřijímá žádné argumenty a
• nevrací žádnou hodnotu.

Názorně si to ukážeme na metodě ColumnTest(), která oba požadavky splňuje. Metodu tedy anotujeme pomocí @Preview:

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

Nyní přepneme náš editor do režimu Split kliknutím na stejnojmenné tlačítko v pravé horní oblasti Android Studia:

Následně musíme sestavit náš projekt:

Pak už uvidíme náš náhled grafického rozhraní:

Takto můžeme velice jednoduše kontrolovat jednotlivé layouty a rychle zjistit, zda vypadají, jak jsme chtěli.

Komponenta Row()

Druhá z komponent, kterou si dneska představíme, je velice podobá komponentě Column(). Komponentu Row() však použijeme, chceme-li pozicovat elementy horizontálně.

Pojďme si do projektu přidat novou metodu RowTest():

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

Do metody jsme vložili dvě textové komponenty. Roztáhli jsme její velikost na celou šířku obrazovky a také jsme změnili barvu pozadí. V jejím náhledu, uvidíme následující rozhraní:

Pokud se nám grafické rozhraní nezobrazuje, sestavíme nejdříve projekt kliknutím na Build v horní liště IDE.

Nakonec si dnes ještě ukážeme, jak zarovnat elementy v Row() komponentě na střed. Uděláme to obdobně, jako u vertikálního centrování. Komponentě tentokrát nastavíme parametr 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 jsme také Modifier a nastavili výšku komponent na 150.dp.

Jednotka dp nám určuje velikost, která není závislá na hustotě pixelů. Velikost komponent bude takto stejná na všech zařízeních.

V náhledu nyní uvidíme, jak jsou jednotlivé elementy zarovnány na střed:

To je pro dnešek vše. Vzorovou aplikaci si můžete dále upravit a změnit například barvu pozadí, experimentovat s centrováním, přidat další text a podobně.

V příští lekci, Material Design a tvorba Theme v Compose, si popíšeme základní koncept Material Designu, ukážeme si soubory Color.kt a Theme.kt, v nichž definujeme celkový vzhled aplikace a naučíme se dále upravovat naše komponenty.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.