Lekce 5 - Android programování - První aplikace, návrh kalkulačky

V minulé lekci, Android programování - Spuštění aplikace (zařízení/emulátor), jsme připravili reálné zařízení s Androidem ke spuštění kalkulačky. Také jsme si vytvořili virtuální zařízení v emulátoru.

V dnešním Kotlin tutoriálu vývoje pro Android si vytvoříme jednoduchou kalkulačku. Programátorsky nepůjde o nic složitého, řešení koncipujeme tak, aby nám stačila jedna metoda v jedné třídě. Také se dnes naučíme pracovat s XML rozložením aktivit. Složitější aplikace nás pak samozřejmě čekají dále v kurzu

Kalkulačka

Pusťme se tedy do tvorby naší první aplikace. A co bychom to byli za programátory, kdyby naší první aplikací nebyla kalkulačka?

Vytvoříme kalkulačku, která:

• bude mít co nejjednodušší GUI,
• bude umět čtyři základní matematické operace (+, -, *, /),
• čísla a výsledky bude zobrazovat na displeji.

Výsledek bude vypadat takto:

Vytvoření projektu

Máme-li ještě v Android Studiu otevřen projekt Hello World!, klikneme nahoře v menu na File -> New -> New Project, čímž bude nový projekt vytvořen v novém okně. Otevřené projekty lze případně zavřít bez ukončení Android Studia přes menu File -> Close Project. Pokud není současně otevřen další projekt, zobrazí se úvodní okno, které jsme viděli při prvním spuštění Android Studia. Z toho nový projekt již vytvořit umíme také.

Postup vytváření projektu je stejný jako u Hello World!, pouze projekt kalkulačky pojmenujeme SimpleCalc.

Uživatelské rozhraní

Dalším naším krokem bude návrh grafického uživatelského rozhraní, kde se seznámíme se základními Android komponentami. Když se přesuneme do souboru activity_main.xml (složka res/layout/), máme na výběr tři možnosti zobrazení:

• Design,
• Code nebo
• Split (kód i design vedle sebe)

Již jsme si říkali, že mezi nimi přepínáme pomocí třech ikonek vpravo nahoře. Doporučuji při začátcích používat hlavně zobrazení Design.

Layouty

Komponenty nemůžeme začít dávat jen tak na aktivitu (obrazovku aplikace), ale je třeba je vložit do layoutu. Ten udává, jak budou v obrazovce uspořádány. Layouty si můžeme představit jako "kontejnery" pro komponenty. Před každým layoutem (v oknech Component Tree a Palette) je miniatura, která napoví, jak se v něm komponenty "skládají". Layouty bez problémů také můžeme kombinovat.

Výchozím layoutem je ConstraintLayout, který již máme "nasazený" v projektu po jeho vygenerování. Tento layout si detailně popíšeme v jedné z dalších lekcí. Pokud se nám v aktivitě vyskytnou různé skupiny komponent, je nejlepší je uzavírat do dalších layoutů, které skládáme na původní ConstraintLayout.

Návrh UI kalkulačky

Vytvořme tedy nyní požadovaný vzhled aplikace kalkulačky ze základních komponent. Půjde skutečně o velice jednoduchý design bez žádných složitých prvků.

Po otevření souboru activity_main.xml, který byl Android Studiem vygenerován, nalezneme v návrhu jeden TextView s textem "Hello World!", který z layoutu odstraníme.

Postupně přetaháme myší následující komponenty z okna Palette do okna rozvržení. Umístěným komponentám přiřazujeme ID na prvním řádku v okně Attributes, takto:

Do naší aktivity postupně vložíme tyto komponenty:

• EditText pro první číslo, nastavíme mu ID etNumber1,
• Spinner pro výběr operace, jako ID zadáme spinnerOperation,
• EditText pro druhé číslo a přidáme ID etNumber2,
• Button s textem = a nastavíme ID btnCalculate,
• TextView pro zobrazení výsledku výpočtu, ID pojmenujeme labelResult.

Do XML návrhu se nám vygeneroval kód jednotlivých prvků. Ten si vysvětlíme a ještě si do něj přidáme nějaké atributy navíc.

Políčko pro zadávání prvního čísla

Když se přepneme do zobrazení Code, uvidíme vygenerovaný kód. Zaměříme se na EditText a rovnou si do něj i doplníme další atributy:

<EditText
    android:id="@+id/etNumber1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="Zadej číslo"
    android:inputType="numberSigned|numberDecimal"
    android:textSize="36sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Atributy komponenty si nyní vysvětlíme. Ty, které by se opakovaly, si vysvětlíme pouze jednou, u jejich prvního výskytu:

• android:id="@+id/etNumber1" - V prvním řádku je ID políčka. Díky tomuto ID můžeme v Kotlin kódu získat referenci na tento EditText a pracovat s ním (např. získávat zadaný text). ID je důležité i zde, v XML. Pokud budeme jiný objekt v XML pozicovat vzhledem k tomuto objektu, musí mít tento objekt přiřazené ID.
• android:layout_width="0dp" - V kontejneru ConstraintLayout tato hodnota šířky způsobí vyplnění celého dostupného prostoru, v našem případě celou šířku displeje.
• android:layout_height="wrap_content" - Tato hodnota nastaví políčku takovou výšku, která mu stačí k zobrazení jeho obsahu.
• android:hint="Zadej číslo" - Další položka obsahuje textový řetězec, který bude v políčku zobrazen, pokud nebude obsahovat žádný zadaný text.
• android:inputType="numberSigned|numberDecimal" - Tímto parametrem ovlivňujeme, jaký typ znaků lze do políčka zadat. Zároveň tím určíme, jaká klávesnice bude uživateli zobrazena pro zadání textu. Nastavili jsme možnost zadat pouze čísla včetně záporných a desetinných, na klávesnici lze tedy zadat také desetinnou tečku. Všimněte si, že jsme do atributu inputType vložili dvě hodnoty, oddělené svislítkem.

Jen pro zajímavost se podíváme na další možnosti nastavení tohoto atributu. Pokud v okně Component Tree nebo přímo v náhledu označíme EditText, vpravo, v okně Attributes, nalezneme rozbalovací parametr inputType. V jeho nabídce uvidíme poměrně velké množství možností - viz obrázek:

Popišme si vybrané položky:

• android:textSize="36sp" - Nastavení velikosti textu políčka v jednotkách SP (scale-independent pixels),
• app:layout_constraintEnd_toEndOf="parent" - parametr kontejneru ConstraintLayout pro přichycení pravé hrany EditText k pravému okraji nadřazeného layoutu,
• app:layout_constraintStart_toStartOf="parent" - parametr kontejneru ConstraintLayout pro přichycení levé hrany EditText k levému okraji nadřazeného layoutu,
• app:layout_constraintTop_toTopOf="parent" - parametr kontejneru ConstraintLayout pro přichycení horní hrany EditText k hornímu okraji nadřazeného layoutu.

Spinner pro volbu operátoru

Výběr operace bude v kódu vypadat následovně:

<Spinner
    android:id="@+id/spinnerOperation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:dropDownWidth="match_parent"
    android:spinnerMode="dropdown"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/etNumber1" />

Význam nových atributů je:

• android:dropDownWidth="match_parent" - Šířka rozbalovací nabídky,
• android:spinnerMode="dropdown" - způsob zobrazení nabídky, můžeme nastavit mód "rozbalování" nebo dialog, kdy je obsah rozbalovacího menu zobrazen v podobě dialogového okna,
• app:layout_constraintTop_toBottomOf="@+id/etNumber1" - parametr kontejneru ConstraintLayout pro přichycení horní hrany komponenty Spinner ke spodnímu okraji objektu s ID etNumber1 (první zadávací políčko).

Políčko pro zadávání druhého čísla

Políčko pro druhé číslo je analogické:

<EditText
    android:id="@+id/etNumber2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="Zadej číslo"
    android:inputType="numberSigned|numberDecimal"
    android:textSize="36sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/spinnerOperation" />

Tlačítko pro výpočet zadaného příkladu

Dostáváme se k tlačítku:

<Button
    android:id="@+id/btnCalculate"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:gravity="start"
    android:onClick="calculate"
    android:text="="
    android:textSize="36sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/etNumber2" />

Nové atributy jsou:

• android:gravity="start" - Zarovnání textu tlačítka k levé straně a
• android:onClick="calculate" - zde určujeme, že kliknutím na tlačítko spustíme v Kotlin kódu metodu calculate().

Aktivita, která bude mít tento XML návrh nastaven jako GUI, musí tedy deklarovat metodu calculate(View view) i s parametrem typu View. Parametr bude při kliknutí obsahovat referenci na komponentu, na kterou bylo kliknuto. Vše si pak ukážeme v části s Kotlin kódem. Pokud takovou metodu ve třídě již máme, což pro nás teď neplatí, je možné ji nastavit i v okně Attributes:

Dále nastavujeme text tlačítka, bude zobrazovat = a tučný styl textu tlačítka (android:textStyle="bold"). Přichycení komponenty jsme si už vysvětlili.

Label pro výsledek výpočtu

A jsme u poslední komponenty, textu pro výpis výsledku:

<TextView
    android:id="@+id/labelResult"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:gravity="start"
    android:textSize="36sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/btnCalculate" />

Tímto máme připravený vzhled kalkulačky. Příště se pustíme do psaní Kotlin kódu

Příště, v lekci Android programování - Implementace Kotlin kódu kalkulačky , se podíváme na implementaci Kotlin kódu kalkulačky.

 

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.