IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Základy vývoje Android aplikací v Javě Základy vývoje Android aplikací v Javě

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

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:

Základy vývoje Android aplikací v Javě

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:

Základy vývoje Android aplikací v Javě
  • 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:
Základy vývoje Android aplikací v Javě
  • 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ě
Přeskočit článek
(nedoporučujeme)
Android programování - Implementace Java kódu kalkulačky
Článek pro vás napsal Jiří Frank
Avatar
Uživatelské hodnocení:
59 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