Slevový týden - Březen C# týden
Využij náš slevový týden a získej až 30 % bodů navíc zdarma! Zároveň také probíhá C# týden se slevou na e-learning až 80 %
Hledáme fulltime programátora do ITnetwork týmu -100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!

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

V minulé lekci, Android programování - Životní cyklus a nový projekt, jsme se dozvěděli co je to API, jak vytvořit projekt a základní informace o životním cyklu aktivity.

V dnešním tutoriálu si vytvoříme jednoduchou kalkulačku. Programátorsky nepůjde o nic složitého, řešení jsem koncipoval tak, aby nám stačilo několik metod v jedné třídě. Složitější aplikace nás čekají až v následujících lekcích.

Úvod

Nyní se konečně pustíme do tvorby naší první aplikace. Co bychom byli za programátory, kdyby naší první aplikací nebyla kalkulačka? Na této naší první Android aplikaci se naučíme jak pracovat s XML.

Požadavky

Vytvoříme kalkulačku, která:

  • Bude operovat maximálně s 9 místy. (tzn. včetně desetinné tečky, popř. mínusu)
  • bude umět alespoň 4 základní operace (+, -, *, /)
  • dokáže zobrazit čísla, se kterými počítáme

Analýza a návrh aplikace

V tomto bodě je třeba vytvořit podklady pro programování, to znamená, že si sepíšeme co a jak budeme jako programátoři dělat.

Pro aplikaci, jakou je kalkulačka, bohatě stačí jedna třída, do které přidáme jednotlivé metody. Metody budeme tedy přidávat do třídy, která je vygenerovaná Android Studiem (Při nastavení Android je to ve struktuře projektu soubor app -> java -> jmeno.naseho.pro­jektu -> jmenoAktivity.java)

zapisCislo()

Hlavní metoda nastavena na tlačítkách 0 až 9, bude připisovat číslo na obrazovku. Konkrétní číslo načte ze své vlastnosti text metodou getText(). Zde musíme ošetřit, aby se nám nestalo, že dostaneme na obrazovku řetězec čísel delší než 9 znaků. K tomu nám poslouží několik podmínek a jedna instanční proměnná.

Diagram připisování čísel v Android aplikaci

zapisCarku()

Metoda pro zápis desetinné čárky. Zde musíme ošetřit, abychom nedostali na obrazovku dvě čárky. Pro zjištění, zda se už tečka v řetězci vyskytuje, lze použít metodu indexOf().

vymazVse()

Další důležitá metoda bude pro vymazání a vynulování všech proměnných včetně obrazovky.

vymazJeden()

Zodpovídá za odstranění pouze posledního čísla na obrazovce metodou substring(). Parametrem bude 0, neboli začátek řetězce a délka řetězce -1.

zapor()

Tato metoda přepíše znaménko zapsaného čísla. Pokud je na obrazovce zápor, přepíše číslo na kladnou hodnotu. Pokud je na obrazovce kladné číslo, přepíše ho na záporné. Toho docílíme tak, že vložíme před řetězec čísel mínus. Pokud se mínus už v řetězci vyskytuje, odstraníme ho metodou substring().

odmocni()

Navíc přidáme metodu pro odmocnění čísla, sqrt().

secti(), odecti(), vynasob(), vydel()

Dále musíme vytvořit čtyři metody pro operace +, -, *, /. Metoda z obrazovky načte první číslo, se kterým bude kalkulačka počítat. Poté do instanční proměnné uloží informaci o tom, jakou operaci jsme zvolili. Další důležitý krok je zobrazení uloženého čísla a zvolené operace do TextView v horní části obrazovky, abychom zvýšili přehlednost.

vypocti()

Poslední metoda v aplikaci načte z obrazovky druhé číslo, se kterým bude počítat. Pokud jsou splněny všechny nezbytné požadavky, jako uložení prvního čísla a nepřesáhnutí devíti znaků, můžeme počítat podle toho, jakou jsme zvolili operaci. Použijeme konstrukci switch. Dále musíme ošetřit, abychom na obrazovku nedostali číslo, které bude delší než devět znaků. K tomu použijeme podmínky a DecimalFormat.

Další úpravy

Dále je třeba zajistit to, aby se aplikace zobrazovala bez tzv. app baru, kvůli úspoře místa a zakázat změny orientace obrazovky.

XML - návrh

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

Nyní se seznámíme se základními komponentami. Pokud jsme v souboru activity_JMENOAPLIKACE.xml (složka layout), máme na výběr dvě záložky: Design a Text. Doporučuji při začátcích používat hlavně Design.

Layouts

Layouty si můžeme představit jako "kontejnery" pro komponenty. Před každým layoutem je miniatura, která napoví, jak se komponenty "skládají" do daného layoutu. Bez problémů je můžeme kombinovat.

RelativeLayout je výchozí a máme ho "nasazený" již v Hello world aplikaci. Umožní nám umisťovat komponenty tam, kam chceme.

Při návrhu je nejlepší uzavírat různé komponenty do layoutů, které skládáme na původní RelativeLayout.

Návrh UI kalkulačky

V Android Studiu funguje systém drag and drop. V Component Tree na pravé části obrazovky vidíme hierarchii použitých komponent. Na levé části obrazovky vidíme všechny komponenty, které můžeme použít.

Vytvořme tedy nyní požadovaný vzhled aplikace kalkulačka za pomocí layoutů a základních komponent TextView a tlačítek.

Komentáře

Komentáře se zde zapisují následovně:

<!-- komentář -->

Nesmí být uvnitř tagu.

Tlačítka

Pokud chceme design na co nejlepší úrovni, můžeme použít systém oddělených XML návrhů pro jednotlivé komponenty. V našem případě tlačítka a pozadí. Pro návrh tlačítek nám může pomoci http://angrytools.com/android/button/, vřele tento online nástroj doporučuji. Podle zadaných hodnot vytvoří jak kód pro tlačítko, tak XML kód pro shape, neboli pozadí a tvar tlačítka.

Příklad kódu tlačítka (soubor jméno_naší_aktivity.xml):

<Button
    android:id="@+id/tlacSmazJeden"
    android:layout_width="60dp"
    android:layout_height="55dp"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="4dp"
    android:background="@drawable/buttonshape"
    android:onClick="vymazJeden"
    android:shadowColor="#ffffffff"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowRadius="10"
    android:text="Del"
    android:textColor="#FFFFFF"
    android:textSize="30sp" />

Pojďme si popsat jeho jednotlivé části.

<Button
   android:layout_width="65dp"
   android:layout_height="60dp"

Vidíme nastavení výšky a šířky dané komponenty. Jednotka DP neboli density-independent pixel je jednotka, která odpovídá matematickému vztahu 1dp=160px/dpi. Velikost se tedy v jisté míře přizpůsobuje fyzické velikosti displeje daného zařízení.

android:text="Del"

Text zobrazený na tlačítku.

android:id="@+id/tlacSmazJeden"

ID tlačítka.

android:layout_marginRight="4dp"
android:layout_marginLeft="4dp"

Vnější ohraničení.

android:textColor="#FFFFFF"

Barva textu.

android:textSize="30sp"

Velikost textu, jako jednotka je použit sp. Jedná se o obdobnou jednotku jakou je DP. Tato jednotka je určená pro nastavení velikosti textů.

android:onClick="vymazJeden"

Jméno metody, která se volá po kliknutí na tlačítko.

android:background="@drawable/buttonshape"

Odkaz na pozadí.

android:shadowColor="#A8A8A8"

Barva stínu (odrazu).

android:shadowDx="18"
android:shadowDy="-12"

Pozice stínu

android:shadowRadius="10"

Stupeň "rozmazání" stínu.

/>

Jak si můžeme všimnout, pozadí tlačítka nás odkazuje na soubor buttonshape. Ten ovšem nemáme vytvořen.

Vytvoříme ho pravým klikem na složku drawable/, New -> Drawable resources file. Bude se jmenovat buttonshape.xml a vložíme do něj následující kód, který definuje tvar a pozadí tlačítka:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- rectangle je defaultní tvar -->
    <!-- zaoblení tlačítka -->
    <corners android:radius="20dp" />
    <!-- android:angle - úhel v jakém přechází barvy
    android:centerX - v procentech udává polohu prostředí barvy
    android:centerColor - barva ve středu tlačítka
    android:startColor - barva na levé straně tlačítka
    android:endColor - barva na pravé straně tlačítka
    android:type - metoda přechodu barev -->
    <gradient
        android:angle="45"
        android:centerColor="#7995A8"
        android:centerX="30%"
        android:endColor="#000000"
        android:startColor="#E8E8E8"
        android:type="linear" />
    <padding
        android:bottom="0dp"
        android:left="4dp"
        android:right="4dp"
        android:top="0dp" />
    <size
        android:width="160dp"
        android:height="60dp" />
    <!-- nastavení ohraničení, width je tloušťka a color barva -->
    <stroke
        android:width="3dp"
        android:color="#878787" />
</shape>

Barvy můžete vkládat do souboru colours.xml ve složce values/ stejným způsobem jako textové řetězce do souboru strings.xml.

Pozadí aplikace

Pro změnu pozadí přidáme do složky drawable/ soubor prechodne_pozadi.xml. Zde nadefinujeme vzhled pozadí. Na stránkách http://developer.android.com/…esource.html najdeme spousty příkladů, ukázek a syntaxí. Pokud někomu dělá problém zápis barev, tak doporučuji stránku: http://www.color-hex.com/

Pro pozadí jsem použil kód:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="45"
        android:centerColor="#262626"
        android:centerX="40%"
        android:endColor="#000000"
        android:startColor="#4c4c4c" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

</shape>

Výhodou Android Studio je, že při práci s XML soubory nám zobrazuje náhled aplikace.

Výsledný návrh

Výsledný návrh kalkulačky v Android Studio

Z obrázku vyplývá, že jsme zvolili rozvržení aplikace na dva Layouty. Do prvního jsme vložili dva řádky tabulky. V jednom jsou tři malé TextView pro zobrazení čísla 1, operace a čísla 2. Ve druhém řádku je pouze jeden TextView a to hlavní obrazovka.

Druhý Layout obsahuje 6 řádků tabulky. V každém z nich je vyskládáno několik tlačítek. Jakmile budeme spokojeni s návrhem UI, bude vhodné pojmenovat všechny použité komponenty podle jejich charakteru.

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


 

 

Článek pro vás napsal Jiří Frank
Avatar
Jak se ti líbí článek?
15 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
Předchozí článek
Android programování - Životní cyklus a nový projekt
Všechny články v sekci
Základy vývoje Android aplikací v Javě
Miniatura
Následující článek
Android programování - Implementace Java kódu kalkulačky
Aktivity (5)

 

 

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