ITnetwork summer 2020
80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

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 a také si vytvořili virtuální zařízení v emulátoru.

V dnešním Java 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 4 základní matematické operace (+, -, *, /)
  • čísla a výsledky bude zobrazovat na displeji

Výsledek bude vypadat takto:

Vytvoření projektu

Pokud ještě máte v Android Studiu otevřen projekt Hello World!, klikněte 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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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ě vyskytnout 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ů.

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:

Komponenty nataháme tyto:

  • EditText pro první číslo, nastavíme mu ID etNumber1
  • Spinner pro výběr operace, ID spinnerOperation
  • EditText pro druhé číslo, ID etNumber2
  • Button s textem =, ID nastavíme btnCalculate
  • TextView pro zobrazení výsledku výpočtu, ID 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, že EditText v XML vypadá takto. 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" - ID políčka. Díky tomuto ID můžeme v Java 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" - 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. V tomto případě bude zobrazena klávesnice s možností zadat pouze čísla, která budou moci být i záporná a bude umožněno na klávesnici zadat 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:

  • 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. Zde je nastaven mód "rozbalování". Existuje ještě typ 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ě.
  • android:onClick="calculate" - Tímto atributem určujeme, že kliknutím na tlačítko spustíme v Java 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 Java 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:
  • android:text="=" - Nastavení textu tlačítka.
  • android:textStyle="bold" - Text tlačítka bude tučně.

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í Java kódu ;-)

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


 

Předchozí článek
Android programování - Spuštění aplikace (zařízení/emulátor)
Všechny články v sekci
Základy vývoje Android aplikací v Javě
Článek pro vás napsal Jiří Frank
Avatar
Jak se ti líbí článek?
16 hlasů
Autor se věnuje programování v C# a vývoji aplikací pro platformu Android a dalším věcem spojeným s Android OS
Aktivity (11)

 

 

Komentáře
Zobrazit starší komentáře (51)

Avatar
Libor Šimo (libcosenior):12.10.2018 13:06

Príloha

Odpovědět
12.10.2018 13:06
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Lukáš Bura
Člen
Avatar
Odpovídá na Libor Šimo (libcosenior)
Lukáš Bura:12.10.2018 13:45

já mám design identický až na ten vršek :). Ten předělávám na víceřádkový displej, aby bylo možno zadávat více operací najednou. Zrovna teď si s tím hraju :) Když tak pak můžeme porovnat výsledky po mailu :)

 
Odpovědět
12.10.2018 13:45
Avatar
Odpovídá na Lukáš Bura
Libor Šimo (libcosenior):12.10.2018 13:52

Vrchnú časť riešim tak, že sa zadáva výraz, teda napr. 45,54 * 0,12. Ten sa potom rozdelí na jednotlivé časti, teda čísla 45.54 a 0.12 a operácia *. Následne sa vypíše výsledok.
Ale skúšal som tie tlačítka cez style a nejde mi to. Robím v prostredí Andoid Studio.

Odpovědět
12.10.2018 13:52
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):26.10.2018 9:31

Ahoj, ak bude mať niekto problém so spustením virtual device ako ja. Pri inštalácii C:\Users\PC\Ap­pData\Local\An­droid\Sdk\extras\in­tel\Hardware_Ac­celerated_Exe­cution_Manager\in­telhaxm-android.exe
mi to vypísalo hlášku (príloha).
Riešením bolo upraviť nastavenie v BIOS-e.
https://www.intel.com/…roducts.html

Odpovědět
26.10.2018 9:31
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):26.10.2018 11:49

Ešte jedna poznámka.
Asi vám AVD manager ponúkne virtuálnu mašinu Nexus 5, nepoužite ju.. Odporúčam Nexus 4 API 23, pretože na testovanie stačí a zaberá podstatne menej pamäti.

Odpovědět
26.10.2018 11:49
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Libor Šimo (libcosenior):26.10.2018 17:36

No nádhera.
Preinštaľoval som android studio a zase mi virtual device nefunguje. Nech robím, čo robím.
Ale nevzdávam to, skúšam ďalej.

Odpovědět
26.10.2018 17:36
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):26.10.2018 20:46

A už to zase funguje ako má. Takže sa zdá, že je všetko, ako má byť. No SUPER. :-)

Odpovědět
26.10.2018 20:46
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):26.10.2018 20:47

Môj záver.
Ak mi náhodou niekto napíše, aby som mu poradil, nemám šancu, lebo sám neviem, ako sa mi to podarilo. :-`

Odpovědět
26.10.2018 20:47
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):28.10.2018 11:20

Tak mením názor.
Najlepšie skúsenosti mám s testovaním na mojom mobile, teda na konkrétnom zariadení, :-)

Odpovědět
28.10.2018 11:20
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Vojtech Palec
Redaktor
Avatar
Vojtech Palec:9.12.2019 17:59

Ahoj, chtěl bych se zeptat, zda je nutné umět k tomuto tutorialu xml? Díky:)

 
Odpovědět
9.12.2019 17:59
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.

Zobrazeno 10 zpráv z 61. Zobrazit vše