2. diel - LinearLayout a jednoduchá kalkulačka pre Android v Kotlin

V minulej lekcii, Úvod do Android programovania v Kotlin a vývojového prostredia , sme si nainštalovali a nastavili Android Studio a založili sme si jednoduchý projekt, ktorý nám vypísal svetovo známu hlášku "Hello World!".

V dnešnom Android tutoriálu si najprv vysvetlíme čo to je layout ak tomu si ukážeme najprimitívnejšie variantu layoutu, LinearLayout. Ku koncu lekcie si vytvoríme jednoduchú kalkulačku, ktorá bude vyzerať nasledovne:

Programátorská nepôjde o nič zložité, riešenie som koncipoval tak, aby sme zasahovali do čo najmenej súborov. Zložitejšie aplikácie nás čakajú až v nasledujúcich lekciách.

Layouty

Poďme si najskôr vysvetliť čo to sú layouty. Layouty si môžeme predstaviť ako "kontajnery" pre ovládacie prvky, ktoré nám ich umožňujú na formulár poskladať. Tento systém sa používa najmä z dôvodu, aby sa aplikácia prispôsobovala rôznym rozmerom obrazoviek rôznych zariadení. Keby sme pozície ovládacích prvkov na formulári určovali pevne ako súradnice, aplikácia by potom na menšie obrazovke vytiekla za okraj alebo by na menšiu nebola celá vidieť. A my chceme určite, aby sa zobrazila všetkým rovnako, aj keď majú inak veľkú obrazovku ako máme my.

Pri návrhu dizajnu našej aplikácie je pred každým layoutom zobrazená aj miniatúra, ktorá napovie, ako sa v ňom komponenty "skladajú". Layouty tiež môžeme bez problémov kombinovať.

ConstraintLayout je predvolená a máme ho už "nasadený" v našej Hello world aplikáciu. Umožňuje nám umiestňovať komponenty podľa tzv. Constraints. Jednoducho povedané si každý prvok v layoutu určí ako ďaleko má byť od jednotlivých strán a podľa toho si mení veľkosť a pozíciu. Tento layout je pre začiatok zbytočne komplikovaný a vysvetlíme si ho lepšie v nasledujúcich lekciách

LinearLayout

LinearLayout je najprimitívnejšie layout a podľa môjho názoru najjednoduchšie na pochopenie, preto ho budeme používať v dnešnej lekcii. Všetky prvky v LinearLayout sa skladajú za seba alebo pod seba, bez ohľadu na to ako sú široké alebo vysoké. LinearLayout môže byť buď horizontálne alebo vertikálne:

Na ukážke si všetko vyskúšame, je to naozaj veľmi jednoduché

Kalkulačka

Naša kalkulačka bude obsahovať niekoľko ovládacích prvkov čiže komponentov. Budú to dva EditText y (textové polia), Spinner (dropdown menu) a niekoľko TextView (textových popiskov).

Keďže už vieme, ako LinearLayout funguje, poďme sa vrhnúť na našu kalkulačku. Založme si projekt, úplne rovnako ako sme to urobili v predchádzajúcej lekcii. Pomenujete si ho SimpleCalculator.

Dizajn

Až sa projekt založí, otvoríme súbor, ktorý definuje ako má aplikácia vyzerať. Ak ste ponechali predvolené nastavenia projektu, mal by sa tento súbor menovať activity_main.xml. Je to jediný súbor v priečinku res/layout/.

Zobrazí sa nám vzhľad našu aplikácie. Po ľavej strane sa nachádza paleta, ktorá nám umožní do aplikácie preťahovať rôzne komponenty. Hoci táto možnosť je "cool", písanie kódu manuálne do XML sa nevyhneme (a je to tiež rýchlejšie). Práve pomocou XML je vizuálna stránka Android aplikácií definovaná. Preto odporúčam používať GUI editor ako takú "dokumentáciu", ktorá nám pri najhoršom vygeneruje syntax, na ktorú si práve nemôžeme spomenúť.

Poďme teda nakuknúť do XML kódu. To urobíme kliknutím na tlačidlo "Text" na spodnej lište.

Mali by sme vidieť na jednej polovici obrazovky XML kód a na druhej stále vzhľad našej aplikácie. Ak sa vám neotvoril automaticky vzhľad obrazovky, na pravej strane Android Studia máte lištu s tlačidlom "Preview", ktoré vám vzhľad aplikácie otvorí.

Layout

Všimnite si, že máme "nasadený" ConstraintLayout. Chceme predsa ale LinearLayout, tak to poďme napraviť. Zmažeme rovno aj TextView, popis, ktorý nám vypisuje text "Hello World!". Náš XML súbor bude vyzerať teraz nejako takto:

<?xml version="1.0" encoding="utf-8"?>
<android.widget.LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center">

    <!-- Zde budeme vkládat naše komponenty -->

</android.widget.LinearLayout>

Poďme si popísať atribúty LinearLayout u, ktoré používame:

• layout_width - Nastaví šírku, možné hodnoty sú: match_parent, wrap_content alebo nejaká číselná hodnota, napr. "10dp" alebo "10px".
• layout_height - Nastaví výšku, možné hodnoty sú rovnaké ako u layout_width.
• orientation - Nastavuje, či chceme skladať prvky horizontálne alebo vertikálne, teda či vedľa seba alebo pod seba.
• gravity - Nastaví zarovnanie prvkov. My sme v ukážke nastavili center, aby sme mali prvky vycentrované.
• tools:context - Hovorí aká Kotlin trieda má obsluhovať tento layout.

Ovládacie prvky

Je na čase pridať do našej aplikácie ovládacie prvky, ktoré sa teda teraz budú skladať vedľa seba. Najprv chceme pridať EditText na zadanie prvého čísla, to v XML urobíme nasledovne:

<EditText
        android:id="@+id/prvniCislo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="a"
        android:inputType="number" />

Kód vkladáme do miesta označeného komentárom <!-- Zde budeme vkládat naše komponenty -->.

Vidíme tu 2 nové atribúty, poďme si ich vysvetliť:

• hint - Text, ktorý sa zobrazuje keď je textové políčko prázdne, niečo ako placeholder v HTML.
• id - Identifikácia objektu, pomocou neho budeme neskôr pristupovať k objektu v Kotlin kódu.
• inputType - Definuje typ dát, v našom prípade, že sa jedná o číslo.

Zatiaľ celkom ľahké, nie?

Spinner (dropdown menu) s výberom početné operácie pridáme za náš EditText nasledovne:

<Spinner
        android:id="@+id/operace"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Tu je asi všetko jasné. Tak poďme pridať EditText aj na druhé číslo:

<EditText
        android:id="@+id/druheCislo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="b"
        android:inputType="number" />

Teraz už nám chýba len pridať Button (tlačidlo) na znamienko a TextView label / štítok na výsledok:

<Button
    android:id="@+id/spocitej"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:text="=" />

 <TextView
    android:id="@+id/vysledek"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Náš "Preview" teraz vyzerá takto:

V prípade problémov si kód skontrolujte znovu alebo si ho porovnajte s XML kódom priloženým k stiahnutiu na konci lekcie.

Logická časť - Obsluha prvkov

Tá najťažšia časť je za nami, už nám len schádza obsluhovať EditText a Button. Z dizajnu sa presúvame do logickej časti aplikácie. Prejdeme do súboru MainActivity.kt, čo je súbor obsluhujúci layout. Mali by sme vidieť nasledujúci kód:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //Sem napíšeme naši obsluhu
    }
}

Nekomplikujme si život a "nabušme" našej obsluhu prvkov do metódy onCreate(). Aplikácia je jednoduchá a ako to urobiť prehľadnejšie si ukážeme ďalej v kurze.

Vyhľadanie prvkov

Najskôr vždy potrebujeme danej ovládacie prvky v aktivite vyhľadať, to vykonáme nasledujúcim kódom:

val prvniCislo = findViewById<EditText>(R.id.prvniCislo)
val druheCislo = findViewById<EditText>(R.id.druheCislo)
val tlacitkoRovnaSe = findViewById<Button>(R.id.spocitej)
val vysledek = findViewById<TextView>(R.id.vysledek)
val operace = findViewById<Spinner>(R.id.operace)

K našim prvkom pristupujeme v kóde cez ich ID. ID získavame pomocou R.id. Všimnite si, že R.id sa pri každej zmene v našom XML súboru přegeneruje. Vyhľadanie prvkov podľa ID ďalej vykonáme pomocou generické metódy findViewById<>().

Naplnenie spinnera

Musíme tiež naplniť náš Spinner, bude obsahovať +, -, ÷ a X. To urobíme nasledovne:

val mnozinaOperaci = listOf("+", "-", "÷", "X")
operace.adapter = ArrayAdapter<String>(this, android.R.layout.simple_spinner_dropdown_item, mnozinaOperaci)

Trieda ArrayAdapter nám umožňuje zobraziť nejakú kolekciu dát, v našom prípade práve zoznam operácií. Vysvetlíme si ju viac ešte v nasledujúcich lekciách.

Obsluha tlačidla

Aplikáciu dokončíme obsluhou tlačidla pri kliknutí naň. K tlačidlu pridáme tzv. Listener (poslucháč), ktorý bude "počúvať" či na tlačidlo niekto neklikol, a ak áno, tak spustí daný kód:

tlacitkoRovnaSe.setOnClickListener {
    // Tento kus kódu ve složených závorkách se zavolá pouze když někdo klikne na tlačítko
}

Finálny Kotlin kód by mal vyzerať takto (za predpokladu, že užívateľ naozaj vyplnil všetky políčka):

tlacitkoRovnaSe.setOnClickListener {
    val a = prvniCislo.text.toString().toInt()
    val b = druheCislo.text.toString().toInt()
    val o = operace.selectedItem as String

    var c = ""
    when(o) {
        "+" -> c = (a + b).toString()
        "-" -> c = (a - b).toString()
        "÷" -> c = (a.toFloat() / b).toString()
        "X" -> c = (a.toFloat() * b).toString()
    }

    vysledek.text = c
}

Poďme aplikáciu otestovať:

Vidíme, že funguje. Za úlohu si môžete opraviť chybu, kvôli ktorej aplikácia padá, keď používateľ nezadá do textového poľa žiadne číslo (je to jeden if ).

Odporúčam sa pohrať s kódom a prehádzať si prvky v LinearLayout, aby ste si zažili prácu s ním, aj napriek tomu, že v praxi sa používa už len minimálne.

V budúcej lekcii, Android programovanie - Spustenie aplikácie (zariadenie/emulátor) , si ukážeme, ako projekt spustiť na reálnom zariadení s Androidom a dozvieme sa tiež, ako si vytvoriť virtuálne zariadenie v emulátore.