4. díl - Android programování - První aplikace, návrh kalkulačky

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

V minulém díle jsme se dozvěděli co je to API, jak vytvořit projekt a základní informace o životním cyklu activity.

V tomto díle 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 dílech.

Ú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.

1 Požadavky:

Vytvořit kalkulačku, která:

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

2 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­.projektu->jmenoActivity­.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 to, 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

ZapisCarku()

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 case. Dále musíme ošetřit to, 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. status baru, kvůli úspoře místa a zakázat změny orientace obrazovky.

3 XML - návrh

Nyní se seznámíme se základními komponentami. Pokud jsme v activity_JMENO­APLIKACE.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.

3.1 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 (jméno_naší_ac­tivity.xml):

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

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 následující kód, který definuje tvar a pozadí tlačítka.

<?xml version="1.0" encoding="utf-8"?>
specifikuje verzi a kódování
<shape 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:centerX="30%"
        android:centerColor="#7995A8"
        android:startColor="#E8E8E8"
        android:endColor="#000000"
        android:type="linear"
        />
    <padding
        android:left="4dp"
        android:top="0dp"
        android:right="4dp"
        android:bottom="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>

Pozn.: 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_poza­di.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:startColor="#4c4c4c"
        android:endColor="#000000"
        android:centerColor="#262626"
        android:centerX="40%"
        android:angle="45"
        />

    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="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 jsem zvolil rozvržení aplikace na dva Layouty. Do prvního jsem vložil dva řádky tabulky. V jednom jsou tři malé textView pro zobrazení čísla1 operace a čísla2. 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ě se podíváme na implementaci Java kódu aplikace.


 

  Aktivity (1)

Článek pro vás napsal Jiří Hlavík
Avatar
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

Jak se ti líbí článek?
Celkem (9 hlasů) :
4.222224.222224.222224.22222 4.22222


 



 

 

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

Avatar
vajkuba1234
Člen
Avatar
vajkuba1234:

+1 za ta "kurvítka". :-D :-D

Odpovědět 29. ledna 10:23
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
prochy132
Člen
Avatar
prochy132:

ahoj nechybí ti v příkladu buttonshape.xml

<shape xmlns:android="http://s­chemas.android­.com/apk/res/an­droid"
android:shape="rec­tangle">

protože v pozadi.xml to máš a v buttonshape.xml ne a bez toho mi to hází errory.
Tj. chyba je v tom vzorovém příkladu, nebo jsem to špatně pochopil a mám to pročíst znova ? :-)

 
Odpovědět 20. února 17:11
Avatar
Michal Vlasák:

Ahoj, moc se mi ten návod nelíbí. Jsem v androidu a Android Studiu opravdu začátečník a chybí mi tu například, jakě mají rozměry ty layouty a table row a taky vysvětlení toho, co znamenají ty vykřičníky u table row a layout. Píše mi to tu This table row layout is useless...

Jsem opravdu začátečník a přijde mi, že se tady už počítá s tím, že uživatel s Android Studiem umí.

 
Odpovědět  +2 28. března 15:11
Avatar
Odpovídá na Michal Vlasák
Josef Kuchař (Pepa489):

Tohle totiš vyžaduje alespoň základní znalosti "desktopové" javy ;)

Odpovědět  +3 28. března 15:17
2x piš, jednou debuguj
Avatar
Odpovídá na Josef Kuchař (Pepa489)
Michal Vlasák:

A je tu někde tady návod na desktopovou javu?

 
Odpovědět 28. března 15:21
Avatar
filiptartott
Člen
Avatar
filiptartott:

Čo znamená "root element"? Vyskočí to v okienku keď zadávam New Drawable Resource File. Iba tak pre info

 
Odpovědět 27. dubna 15:17
Avatar
Jiří Hlavík
Redaktor
Avatar
Odpovídá na filiptartott
Jiří Hlavík:

Ahoj, odmluv, že odpovídám tak pozdě.. ale třeba se to bude ještě někomu hodit.. Doufám že teď nebudu mystifikovat..:
Root element může být ViewGroup nebo čistý View, může být jen jeden a musí obsahovat atribut XMLNS:ANDROID
Využití? Možná kvůli hierarchii view? Nevím co víc k tomu napsat, budu rád jestli se najde někdo více znalý a doplní/upraví informace.

 
Odpovědět 18. srpna 19:05
Avatar
Erik Báča
Člen
Avatar
Erik Báča:

Ahoj, potřeboval bych poradit, nejde mi poskládat tlačítka atd. jako máš ty, dělá mi to tohle (obrázky v příloze)

Odpovědět 22. října 12:21
Když mi dáš mínus, napiš proč!
Avatar
Erik Báča
Člen
Avatar
Erik Báča:

taky mi android studio pořád píše tohle:

Odpovědět 22. října 12:23
Když mi dáš mínus, napiš proč!
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 28. Zobrazit vše