1. diel - Úvod do Jetpack Compose

Vitajte v prvom dieli tutoriálu venovanom frameworku Jetpack Compose. V ňom si ukážeme, ako vytvoriť užívateľské rozhranie (GUI, z anglického Graphic User Interface) našich Kotlín aplikácií pre platformu Android. Budeme sa učiť pracovať s tlačidlami, textovými poľami a ďalšími komponentmi, ktoré sú v Jetpack Compose k dispozícii.

Minimálne požiadavky kurzu

V kurze sa naučíme pracovať s jednotlivými komponentmi a budeme postupovať od jednoduchších návrhov vzhľadu k zložitejším. Na jeho úspešné absolvovanie nie sú teda potrebné žiadne pokročilé znalosti. Všetko si postupne vysvetlíme. Predpokladáme však znalosť základov objektovo orientovaného programovania v Kotline a vývojového prostredia Android Studio.

Jetpack Compose

Jetpack Compose je moderný framework, s ktorého pomocou môžeme tvoriť užívateľsky prívetivé grafické rozhranie pre naše aplikácie. Ponúka širokú škálu možností na úpravu komponentov. Compose je iba jednou zo súčastí sady knižníc Jetpack. Samotný Jetpack potom obsahuje napríklad knižnicu Appcompat alebo knižnicu Fragment a ďalšie:

Framework Compose je založený na Compose for desktop, teda na formulárovom frameworku pre desktopové aplikácie Kotlin. Oba boli vyvinuté spoločnosťou JetBrains a umožňujú nám vytvoriť užívateľské rozhranie pomocou rovnakého kódu pre mobilné zariadenia aj pre klasické desktopové aplikácie. To nám pomôže ušetriť pomerne veľa času. Tiež bude oveľa jednoduchšie vytvoriť aplikácie s rovnakým dizajnom.

Nevýhodou týchto technológií je, že ešte nemajú veľkú komunitu používateľov. Je teda zatiaľ pomerne ťažké nájsť riešenie na internete pre konkrétny problém. To by sa však mohlo do budúcnosti zmeniť.

Komponentová architektúra

Framework má v sebe zabudovanú sadu už vytvorených komponentov, ktoré môžeme priamo používať pri tvorení užívateľského rozhrania. Ak by sme potrebovali vytvoriť vlastný komponent, je to tiež možné. Compose totiž obsahuje aj nástroje na tvorbu nových komponentov.

V súčasnej dobe je možné framework Compose považovať za najlepšiu voľbu pre tvorbu UI. Staršia možnosť tvorby používateľského rozhrania používa XML súbory, v ktorých definuje vzhľad aplikácie. Compose je založený na inom princípe a umožňuje nám tvoriť GUI bez XML súborov. Budúcnosť ukáže, či tento nový prístup postupne prácu s XML súbormi úplne nahradí.

Material Design

Compose pre svoje komponenty implementuje Material Design 2, čo je dizajnový štandard užívateľských rozhraní vytvorený spoločnosťou Google. Prvý Material Design vznikol v roku 2014 a Google postupne vyvíja ďalšie verzie. Od roku 2021 existuje aj implementácia Material Design 3, ktorá ďalej rozširuje možnosti štylovania.

Verzia Material Design 3 ale nie je ešte plne stabilná a zatiaľ sú niektoré jej funkcie označené ako experimentálne.

Použitie Compose vs. XML návrhu

Trend mobilných aplikácií ide raketovo nahor. To tiež vyvolalo potrebu vytvorenia štandardných postupov na štylovanie aplikácií. Tu Compose vylepšil starší návrh používajúci XML v nasledujúcich ohľadoch:

• V staršom návrhu sme museli svoje používateľské rozhranie definovať v XML súbore. Jeho kód bol oproti Compose pomerne dlhý. Pri zložitejších aplikáciách sa potom v ňom horšie orientovalo. Compose ponúka jednoduchší spôsob tvorby UI návrhu pomocou deklaratívneho kódu.
• Pri tvorbe používateľského rozhrania pomocou XML sme zmenu stavu aplikácie, napríklad textu v komponente, museli upravovať v kóde. Tým vznikol problém, keď programátor zabudol zmeniť text nejakého komponentu. Compose vyriešil rovnaký problém použitím architektúry nazvanej single source of truth (SSOT – jediný zdroj pravdy). Čoskoro si v našom tutoriále tento prístup ukážeme a vysvetlíme.
• Compose ďalej umožňuje jednoduchšiu tvorbu vlastných komponentov. Predtým sme museli zdediť triedu View a implementovať hneď niekoľko metód. Tento spôsob tvorby komponentov bol pomerne náročný. Oproti tomu v našom frameworku nebudeme musieť žiadnu triedu dediť. Komponenty sú tu implementované ako funkcia, na rozdiel od staršieho návrhu, kde jednotlivé komponenty reprezentujú triedy.

Prvá Compose aplikácie

Aby sme nezostali len pri teórii, vytvoríme si teraz v Compose jednoduchú aplikáciu. Ako býva dobrým zvykom, necháme v nej vypísať hlášku "Hello wordl!".

Spustíme Android Studio a klineme na New Project:

Otvorí sa nám okno s výberom aktivity. Pre potreby tohto tutoriálu budeme používať Empty Compose Activity. Na výber máme aj Empty Compose Activity (Material 3). Táto aktivita umožňuje používať novší dizajnový štandard, kde sú bohužiaľ niektoré funkcie ešte označené ako experimentálne:

Kliknite na tlačidlo Next:

V ďalšom okne s informáciami o projekte zmeníme názov na Hello World a package name na cz.itnetwork.helloworld. Jazyk je nastavený na Kotlín.

Ak by sme chceli zmeniť na Javu, tak to nemožno. Compose totiž využíva niektoré vlastnosti, ktoré Java nepodporuje.

Pri položke Minimum SDK nastavíme API 26: Android 8.0 (Oreo):

Potom klikneme na tlačidlo Finish:

Tým sa nám otvorí nový projekt. Môže chvíľu trvať, kým ho Android Studio vygeneruje celý. V projekte uvidíme nasledujúci kód:

Kód sa nachádza v súbore MainActivity.kt. Pokiaľ nám ho Android Studio neotvorilo, nájdeme ho v balíčku cz.itnetwork.helloworld, ktorý sa zobrazuje v ľavej časti okna. Pozrime sa na súbor bližšie:

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 tu všimnúť metódy, ktoré sú označené anotáciou @Composable. Táto anotácia upravuje metódu tak, aby sme ju mohli použiť pri definovaní užívateľského rozhrania. Ďalšia dôležitá časť pri tvorbe užívateľského rozhrania je v metóde onCreate(), kde vidíme blok setContent. Sem budeme písať všetok kód na definovanie používateľského rozhrania. Tu budeme tiež volať všetky @Composable metódy.

Za zmienku určite stojí konvencia pomenovania @Composable metód. Na rozdiel od normálnych metód, @Composable metódy píšeme s veľkým písmenom na začiatku. Tým ich od normálnych metód jednoducho rozlíšime.

Úprava vzorovej aplikácie

Poďme si vygenerovaný kód upraviť, aby naša aplikácia na telefón vypísala nami požadovaný text.

Vymažeme všetky volania v bloku setContent:

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

    }
}

Potom si pridáme do nášho používateľského rozhrania text, ktorý bude zobrazovať hlášku "Hello World!". Použijeme na to už existujúci @Composable komponent Text(). Tej odovzdáme do parametra text textový reťazec Hello World!:

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

Potom aplikáciu spustíme na zariadení alebo emulátore. Pri našej jednoduchej aplikácii nie je potrebné nastavovať verziu API. Pre pokročilejšie projekty odporúčame voliť verziu API 31 alebo vyššiu.

Pokiaľ by ste si nevedeli rady s pripojením zariadenia či sprevádzkovaním emulátora, všetky dôležité informácie máme uvedené v lekcii Android programovania - Spustenie aplikácie (zariadenie/e­mulátor).

Až sa nám spustí emulátor uvidíme výsledok:

Na zariadení sa nám vypísal pozdrav svetu a my sme tým dokončili svoju prvú aplikáciu v Compose.

Budúci lekcie, Základné pozíciovanie a náhľady GUI v Compose , bude zameraná na layouty. Predstavíme si v nej základné prvky pre pozíciovanie komponentov a vytvoríme náhľady nášho rozhrania pomocou anotácie @Preview.

 

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