Lekce 1 - Úvod do Jetpack Compose

Vítejte v prvním dílu tutoriálu věnovaném frameworku Jetpack Compose. V něm si ukážeme, jak vytvořit uživatelské rozhraní (GUI, z anglického Graphic User Interface) našich Kotlin aplikací pro platformu Android. Budeme se učit pracovat s tlačítky, textovými poli a dalšími komponentami, které jsou v Jetpack Compose k dispozici.

Minimální požadavky kurzu

V kurzu se naučíme pracovat s jednotlivými komponentami a budeme postupovat od jednodušších návrhů vzhledu ke složitějším. K jeho úspěšnému absolvování není tedy třeba žádných pokročilých znalostí. Vše si postupně vysvětlíme. Předpokládáme však znalost základů objektově orientovaného programování v Kotlin a vývojového prostředí Android Studio.

Jetpack Compose

Jetpack Compose je moderní framework, s jehož pomocí můžeme tvořit uživatelsky přívětivé grafické rozhraní pro naše aplikace. Nabízí širokou škálu možností na úpravu komponent. Compose je pouze jednou ze součástí sady knihoven Jetpack. Samotný Jetpack pak obsahuje například knihovnu Appcompat nebo knihovnu Fragment a další:

Framework Compose využívá také Compose for Desktop, formulářový framework pro desktopové aplikace Kotlin. Byl vyvinut společností JetBrains a umožňuje nám vytvořit uživatelské rozhraní pomocí stejného kódu. To nám pomůže ušetřit poměrně hodně času. Díky tomu budeme moci mnohem jednodušeji tvořit aplikace se stejným designem pro PC i mobilní zařízení.

Nevýhodou těchto technologií je, že ještě nemají velkou komunitu uživatelů. Je tedy zatím poměrně těžké najít řešení na internetu pro konkrétní problém. To by se však mohlo do budoucna změnit.

Komponentová architektura

Framework má v sobě zabudovanou sadu už vytvořených komponent, které můžeme přímo používat při tvoření uživatelského rozhraní. Pokud bychom potřebovali vytvořit vlastní komponentu, je to také možné. Compose totiž obsahuje také nástroje na tvorbu nových komponent.

V současné době lze framework Compose považovat za nejlepší volbu pro tvorbu UI. Starší možnost tvorby uživatelského rozhraní používá XML soubory, v nichž definuje vzhled aplikace. Compose je založen na jiném principu a umožňuje nám tvořit GUI bez XML souborů. Budoucnost ukáže, zda tento nový přístup postupně práci s XML soubory úplně nahradí.

Material Design

Compose pro své komponenty implementuje Material Design 2, což je designový standart uživatelských rozhraní vytvořený společností Google. První Material Design vznikl v roce 2014 a Google postupně vyvíjí další verze. Od roku 2021 existuje i implementace Material Design 3, která dále rozšiřuje možnosti stylování.

Verze Material Design 3 ale není ještě plně stabilní a zatím jsou některé její funkce označeny jako experimentální.

Použití Compose vs. XML návrhu

Trend mobilních aplikací jde raketově nahoru. To také vyvolalo potřebu vytvoření standardních postupů na stylování aplikací. Zde Compose vylepšil starší návrh používající XML v následujících ohledech:

• Ve starším návrhu jsme museli svoje uživatelské rozhraní definovat v XML souboru. Jeho kód byl oproti Compose poměrně dlouhý. U složitějších aplikací se pak v něm hůře orientovalo. Compose nabízí jednodušší způsob tvorby UI návrhu pomocí deklarativního kódu.
• Při tvorbě uživatelského rozhraní pomocí XML jsme změnu stavu aplikace, například textu v komponentě, museli upravovat v kódu. Tím vznikl problém, když programátor zapomněl změnit text nějaké komponenty. Compose vyřešil stejný problém použitím architektury nazvané single source of truth (SSOT - jediný zdroj pravdy). Brzy si v našem tutoriálu tento přístup ukážeme a vysvětlíme.
• Compose dále umožňuje jednodušší tvorbu vlastních komponent. Dříve jsme museli zdědit třídu View a implementovat hned několik metod. Tento způsob tvorby komponent byl poměrně náročný. Oproti tomu v našem frameworku nebudeme muset žádnou třídu dědit. Komponenty jsou zde implementovány jako funkce, na rozdíl od staršího návrhu, kde jednotlivé komponenty reprezentují třídy.

První Compose aplikace

Abychom nezůstali jen u teorie, vytvoříme si nyní v Compose jednoduchou aplikaci. Jak bývá dobrým zvykem, necháme v ní vypsat hlášku "Hello wordl!".

Spustíme Android Studio a klineme na New Project:

Otevře se nám okno s výběrem aktivity. Pro potřeby tohoto tutoriálu budeme používat Empty Compose Activity. Na výběr máme také Empty Compose Activity (Material 3). Tato aktivita umožňuje používat novější designový standard, kde jsou bohužel některé funkce ještě označeny jako experimentální:

Klikneme na tlačítko Next:

V dalším okně s informacemi o projektu změníme název na Hello World a package name na cz.itnetwork.helloworld. Jazyk je nastaven na Kotlin.

Pokud bychom chtěli změnit na Javu, tak to nelze. Compose totiž využívá některé vlastnosti, které Java nepodporuje.

U položky Minimum SDK nastavíme API 26: Android 8.0 (Oreo):

Poté klikneme na tlačítko Finish:

Tím se nám otevře nový projekt. Může chvíli trvat, než ho Android Studio vygeneruje celý. V projektu uvidíme následující kód:

Kód se nachází v souboru MainActivity.kt. Pokud nám ho Android Studio neotevřelo, najdeme ho v balíčku cz.itnetwork.helloworld, který se zobrazuje v levé části okna. Podívejme se na soubor blíže:

package cz.itnetwork.helloworld

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import cz.itnetwork.helloworld.ui.theme.HelloWorldTheme

class MainActivity : ComponentActivity() {

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

        setContent {
            HelloWorldTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    HelloWorldTheme {
        Greeting("Android")
    }
}

Můžeme si zde všimnout metod, které jsou označeny anotací @Composable. Tato anotace upravuje metodu tak, abychom ji mohli použít při definování uživatelského rozhraní. Další důležitá část při tvorbě uživatelského rozhraní je v metodě onCreate(), kde vidíme blok setContent. Sem budeme psát veškerý kód na definování uživatelského rozhraní. Zde budeme také volat všechny @Composable metody.

Za zmínku určitě stojí konvence pojmenování @Composable metod. Na rozdíl od normálních metod, @Composable metody píšeme s velkým písmenem na začátku. Tím je od normálních metod jednoduše rozlišíme.

Úprava vzorové aplikace

Pojďme si vygenerovaný kód upravit, aby naše aplikace na telefon vypsala námi požadovaný text.

Smažeme všechna volání v bloku setContent:

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

    }
}

Poté si přidáme do našeho uživatelského rozhraní text, který bude zobrazovat hlášku "Hello World!". Použijeme k tomu již existující @Composable komponentu Text(). Té předáme do parametru text textový řetězec Hello World!:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        Text(text = "Hello World!")
    }
}

Poté aplikaci spustíme na zařízení nebo emulátoru. U naší jednoduché aplikace není třeba nastavovat verzi API. Pro pokročilejší projekty doporučujeme volit verzi API 31 nebo vyšší.

Pokud byste si nevěděli rady s připojením zařízení či zprovozněním emulátoru, všechny důležité informace máme uvedené v lekci Android programování - Spuštění aplikace (zařízení/emu­látor).

Až se nám spustí emulátor uvidíme výsledek:

Na zařízení se nám vypsal pozdrav světu a my jsme tím dokončili svou první aplikaci v Compose.

Příští lekce, Základní pozicovaní a náhledy GUI v Compose, bude zaměřená na layouty. Představíme si v ní základní prvky pro pozicování komponent a vytvoříme náhledy našeho rozhraní pomocí anotace @Preview.

 

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