Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde

Lekce 2 - LinearLayout a jednoduchá kalkulačka pro Android v Kotlin

Kotlin Android LinearLayout a jednoduchá kalkulačka pro Android v Kotlin

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Úvod do Android programování v Kotlin a vývojového prostředí, jsme si nainstalovali a nastavili Android Studio a založili jsme si jednoduchý projekt, který nám vypsal světově známou hlášku "Hello World!".

V dnešním Android tutoriálu si nejprve vysvětlíme co to je layout a k tomu si ukážeme nejprimitivnější variantu layoutu, LinearLayout. Ke konci lekce si vytvoříme jednoduchou kalkulačku, která bude vypadat následovně:

Funkční kalkulačka pro Android v Kotlin

Programátorsky nepůjde o nic složitého, řešení jsem koncipoval tak, abychom zasahovali do co nejméně souborů. Složitější aplikace nás čekají až v následujících lekcích.

Layouty

Pojďme si nejdříve vysvětlit co to jsou layouty. Layouty si můžeme představit jako "kontejnery" pro ovládací prvky, které nám je umožňují na formulář poskládat. Tento systém se používá zejména z důvodu, aby se aplikace přizpůsobovala různým rozměrům obrazovek různých zařízení. Kdybychom pozice ovládacích prvků na formuláři určovali pevně jako souřadnice, aplikace by pak na menší obrazovce vytekla za okraj nebo by na menší nebyla celá vidět. A my chceme určitě, aby se zobrazila všem stejně, i když mají jinak velkou obrazovku než máme my.

Při návrhu designu naší aplikace je před každým layoutem zobrazena i miniatura, která napoví, jak se v něm komponenty "skládají". Layouty také můžeme bez problémů kombinovat.

ConstraintLayout je výchozí a máme ho již "nasazený" v naší Hello world aplikaci. Umožňuje nám umisťovat komponenty podle tzv. constraints. Jednoduše řečeno si každý prvek v layoutu určí jak daleko má být od jednotlivých stran a podle toho si mění velikost a pozici. Tento layout je pro začátek zbytečně komplikovaný a vysvětlíme si ho lépe v následujících lekcích :)

LinearLayout

LinearLayout je nejprimitivnější layout a dle mého názoru nejjednodušší na pochopení, proto ho budeme používat v dnešní lekci. Všechny prvky v LinearLayout se skládají za sebe nebo pod sebe, bez ohledu na to jak jsou široké nebo vysoké. LinearLayout může být buď horizontální nebo vertikální:

LinearLayout

Na ukázce si vše vyzkoušíme, je to opravdu velmi jednoduché :)

Kalkulačka

Naše kalkulačka bude obsahovat několik ovládacích prvků neboli komponent. Budou to dva EditTexty (textová pole), Spinner (dropdown menu) a několik TextView (textových popisků).

Jelikož již víme, jak LinearLayout funguje, pojďme se vrhnout na naši kalkulačku. Založme si projekt, úplně stejně jako jsme to udělali v předchozí lekci. Pojmenujete si jej SimpleCalculator.

Design

Až se projekt založí, otevřeme soubor, který definuje jak má aplikace vypadat. Pokud jste ponechali výchozí nastavení projektu, měl by se tento soubor jmenovat activity_main.xml. Je to jediný soubor ve složce res/layout/.

Složka layout v Android Studio projektu

Zobrazí se nám vzhled naši aplikace. Po levé straně se nachází paleta, která nám umožní do aplikace přetahovat různé komponenty. Ačkoliv tato možnost je "cool", psaní kódu manuálně do XML se nevyhneme (a je to také rychlejší). Právě pomocí XML je vizuální stránka Android aplikací definována. Proto doporučuji používat GUI editor jako takovou "dokumentaci", která nám při nejhorším vygeneruje syntaxi, na kterou jsi zrovna nemůžeme vzpomenout.

Pojďme tedy nakouknout do XML kódu. To uděláme kliknutím na tlačítko "Text" na spodní liště.

GUI do textu

Měli bychom vidět na jedné polovině obrazovky XML kód a na druhé stále vzhled naší aplikace. Pokud se vám neotevřel automaticky vzhled obrazovky, na pravé straně Android Studia máte lištu s tlačítkem "Preview", které vám vzhled aplikace otevře.

Layout

Všimněte si, že máme "nasazený" ConstraintLayout. Chceme přeci ale LinearLayout, tak to pojďme napravit. Smažeme rovnou i TextView, popisek, který nám vypisuje text "Hello World!". Náš XML soubor bude vypadat nyní nějak 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>

Pojďme si popsat atributy LinearLayoutu, které používáme:

  • layout_width - Nastaví šířku, možné hodnoty jsou: match_parent, wrap_content nebo nějaká číselná hodnota, např. "10dp" nebo "10px".
  • layout_height - Nastaví výšku, možné hodnoty jsou stejné jako u layout_width.
  • orientation - Nastaví, zda chceme skládat prvky horizontálně nebo vertikálně, tedy zda vedle sebe nebo pod sebe.
  • gravity - Nastaví zarovnání prvků. My jsme v ukázce nastavili center, abychom měli prvky vycentrované.
  • tools:context - Říká jaká Kotlin třída má obsluhovat tento layout.

Ovládací prvky

Je na čase přidat do naší aplikace ovládací prvky, které se tedy nyní budou skládat vedle sebe. Prvně chceme přidat EditText k zadání prvního čísla, to v XML uděláme následovně:

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

Kód vkládáme do místa označeného komentářem <!-- Zde budeme vkládat naše komponenty -->.

Vidíme zde 2 nové atributy, pojďme si je vysvětlit:

  • hint - Text, který se zobrazuje když je textové políčko prázdné, něco jako placeholder v HTML.
  • id - Identifikace objektu, pomocí něj budeme později přistupovat k objektu v Kotlin kódu.
  • inputType - Definuje typ dat, v našem případě, že se jedná o číslo.

Zatím docela lehké, ne?

Spinner (dropdown menu) s výběrem početní operace přidáme za náš EditText následovně:

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

Zde je asi vše jasné. Tak pojďme přidat EditText i na druhé číslo:

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

Teď již nám schází jen přidat Button (tlačítko) na znaménko a TextView label/štítek na výsledek:

<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" nyní vypadá takto:

Preview

V případě problémů si kód zkontrolujte znovu nebo si jej porovnejte s XML kódem přiloženým ke stažení na konci lekce.

Logická část - Obsluha prvků

Ta nejtěžší část je za námi, už nám pouze schází obsluhovat EditText a Button. Z designu se přesouváme do logické části aplikace. Přejdeme do souboru MainActivity.kt, což je soubor obsluhující layout. Měli bychom vidět následující 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ší obsluhu prvků do metody onCreate(). Aplikace je jednoduchá a jak to udělat přehledněji si ukážeme dále v kurzu.

Vyhledání prvků

Nejdříve vždy potřebujeme dané ovládací prvky v aktivitě vyhledat, to provedeme následujícím kódem:

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 prvkům přistupujeme v kódu přes jejich ID. ID získáváme pomocí R.id. Všimněte si, že R.id se při každé změně v našem XML souboru přegeneruje. Vyhledání prvků podle ID dále provedeme pomocí generické metody findViewById<>().

Naplnění spinneru

Musíme také naplnit náš Spinner, bude obsahovat +, -, ÷ a X. To uděláme následovně:

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

Třída ArrayAdapter nám umožňuje zobrazit nějakou kolekci dat, v našem případě právě seznam operací. Vysvětlíme si ji více ještě v následujících lekcích.

Obsluha tlačítka

Aplikaci dokončíme obsluhou tlačítka při kliknutí na něj. K tlačítku přidáme tzv. listener (posluchač), který bude "poslouchat" jestli na tlačítko někdo neklikl, a pokud ano, 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ální Kotlin kód by měl vypadat takto (za předpokladu, že uživatel doopravdy vyplnil všechna 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
}

Pojďme aplikaci otestovat:

Funkční kalkulačka pro Android v Kotlin

Vidíme, že funguje. Za úkol si můžete opravit chybu, kvůli které aplikace padá, když uživatel nezadá do textového políčka žádné číslo (je to jeden if :) ).

Doporučuji si pohrát s kódem a přeházet si prvky v LinearLayout, abyste si zažili práci s ním, i přesto, že v praxi se používá už pouze minimálně.


 

Stáhnout

Staženo 10x (21.4 MB)
Aplikace je včetně zdrojových kódů v jazyce Kotlin

 

 

Článek pro vás napsal Samuel Kodytek
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje všem jazykům okolo JVM. Rád pomáhá lidem, kteří se zajímají o programování. Věří, že všichni mají šanci se naučit programovat, jen je potřeba prorazit tu bariéru, který se říká lenost.
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!