4. diel - Android programovanie - Prvá aplikácia, návrh kalkulačky

V minulej lekcii, Android programovanie - Životný cyklus a nový projekt , sme sa dozvedeli čo je to API, ako vytvoriť projekt a základné informácie o životnom cykle aktivity.

V dnešnom tutoriále si vytvoríme jednoduchú kalkulačku. Programátorská nepôjde o nič zložité, riešenie som koncipoval tak, aby nám stačilo niekoľko metód v jednej triede. Zložitejšie aplikácie nás čakajú až v nasledujúcich lekciách.

Úvod

Teraz sa konečne pustíme do tvorby našej prvej aplikácie. Čo by sme boli za programátorov, keby našej prvej aplikácií nebola kalkulačka? Na tejto našej prvej Android aplikácii sa naučíme ako pracovať s XML.

Požiadavky

Vytvoríme kalkulačku, ktorá:

Bude operovať maximálne s 9 miestami. (Tzn. Vrátane desatinné bodky, popr. Mínusu)
bude vedieť aspoň 4 základné operácie (+, -, *, /)
dokáže zobraziť čísla, s ktorými počítame

Analýza a návrh aplikácie

V tomto bode je potrebné vytvoriť podklady pre programovanie, to znamená, že si spíšeme čo a ako budeme ako programátori robiť.

Pre aplikáciu, akou je kalkulačka, bohato stačí jedna trieda, do ktorej pridáme jednotlivé metódy. Metódy budeme teda pridávať do triedy, ktorá je vygenerovaná Android Štúdiom (Pri nastavení Android je to v štruktúre projektu súbor app -> java -> jmeno.naseho.projektu -> jmenoAktivity.java)

ZapisCislo ()

Hlavné metóda nastavená na tlačidlách 0 až 9, bude pripisovať číslo na obrazovku. Konkrétne číslo načíta zo svojej vlastnosti text metódou getText(). Tu musíme ošetriť, aby sa nám nestalo, že dostaneme na obrazovku reťazec čísel dlhšia ako 9 znakov. K tomu nám poslúži niekoľko podmienok a jedna inštančný premenná.

Diagram pripisovanie čísel v Android aplikácii - Programovanie Android aplikácií v Jave

ZapisCarku ()

Metóda pre zápis desatinnej čiarky. Tu musíme ošetriť, aby sme nedostali na obrazovku dve čiarky. Pre zistenie, či sa už bodka v reťazci vyskytuje, možno použiť metódu indexOf().

VymazVse ()

Ďalšia dôležitá metóda bude pre vymazanie a vynulovanie všetkých premenných vrátane obrazovky.

VymazJeden ()

Zodpovedá za odstránenie iba posledného čísla na obrazovke metódou substring(). Parametrom bude 0, čiže začiatok reťazca a dĺžka reťazca -1.

Zápory ()

Táto metóda prepíše znamienko zapísaného čísla. Ak je na obrazovke zápor, prepíše číslo na kladnú hodnotu. Ak je na obrazovke kladné číslo, prepíše ho na záporné. To docielime tak, že vložíme pred reťazec čísel mínus. Ak sa mínus už v reťazci vyskytuje, odstránime ho metódou substring().

Odmocni ()

Navyše pridáme metódu pre odmocnění čísla, sqrt().

Sčítame (), odčítajte (), vynásobte (), vydeľte ()

Ďalej musíme vytvoriť štyri metódy pre operácie +, -, *, /. Metóda z obrazovky načíta prvé číslo, s ktorým bude kalkulačka počítať. Potom do inštančný premennej uloží informáciu o tom, akú operáciu sme zvolili. Ďalší dôležitý krok je zobrazenie uloženého čísla a zvolenej operácie do TextView v hornej časti obrazovky, aby sme zvýšili prehľadnosť.

Výpočtu ()

Posledný metóda v aplikácii načíta z obrazovky druhé číslo, s ktorým bude počítať. Ak sú splnené všetky potrebné požiadavky, ako uloženie prvého čísla a nepřesáhnutí deviatich znakov, môžeme počítať podľa toho, akú sme zvolili operáciu. Použijeme konštrukciu switch. Ďalej musíme ošetriť, aby sme na obrazovku nedostali číslo, ktoré bude dlhšia ako deväť znakov. K tomu použijeme podmienky a DecimalFormat.

Ďalšie úpravy

Ďalej je potrebné zabezpečiť to, aby sa aplikácia zobrazovala bez tzv. App baru, kvôli úspore miesta a zakázať zmeny orientácie obrazovky.

Xml - návrh

Teraz sa zoznámime so základnými komponentmi. Ak sme v súbore activity_JMENOAPLIKACE.xml (zložka layout), máme na výber dve záložky: Design a Text. Odporúčam pri začiatkoch používať hlavne Design.

Layouts

Layouty si môžeme predstaviť ako "kontajnery" pre komponenty. Pred každým layoutom je miniatúra, ktorá napovie, ako sa komponenty "skladajú" do daného layoutu. Bez problémov ich môžeme kombinovať.

RelativeLayout je predvolená a máme ho "nasadený" už v Hello world aplikácii. Umožní nám umiestňovať komponenty tam, kam chceme.

Pri návrhu je najlepší uzatvárať rôzne komponenty do layoutov, ktoré skladáme na pôvodnú RelativeLayout.

Návrh UI kalkulačky

V Android Štúdiu funguje systém drag and drop. V Component Tree na pravej časti obrazovky vidíme hierarchiu použitých komponentov. Na ľavej časti obrazovky vidíme všetky komponenty, ktoré môžeme použiť.

Vytvorme teda teraz požadovaný vzhľad aplikácie kalkulačka za pomocou layoutov a základných komponentov TextView a tlačidiel.

Komentáre

Komentáre sa tu zapisujú nasledovne:

<!-- komentář -->

Nesmie byť vnútri tagu.

Tlačidla

Ak chceme dizajn na čo najlepšej úrovni, môžeme použiť systém oddelených XML návrhov pre jednotlivé komponenty. V našom prípade tlačidlá a pozadia. Pre návrh tlačidiel nám môže pomôcť http://angrytools.com/android/button/, vrelo tento online nástroj odporúčam. Podľa zadaných hodnôt vytvorí ako kód pre tlačidlo, tak XML kód pre shape, čiže pozadia a tvar tlačidla.

Príklad kódu tlačidla (súbor 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" />

Poďme si popísať jeho jednotlivé časti.

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

Vidíme nastavenie výšky a šírky danej komponenty. Jednotka DP čiže density-independent pixel je jednotka, ktorá zodpovedá matematickému vzťahu 1DP = 160px / dpi. Veľkosť sa teda v istej miere prispôsobuje fyzickej veľkosti displeja daného zariadenia.

android:text="Del"

Text zobrazený na tlačidle.

android:id="@+id/tlacSmazJeden"

ID tlačidla.

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

Vonkajšie ohraničenie.

android:textColor="#FFFFFF"

Farba textu.

android:textSize="30sp"

Veľkosť textu, ako jednotka je použitý sp. Ide o podobnú jednotku akou je DP. Táto jednotka je určená pre nastavenie veľkosti textov.

android:onClick="vymazJeden"

Meno metódy, ktorá sa volá po kliknutí na tlačidlo.

android:background="@drawable/buttonshape"

Odkaz na pozadí.

android:shadowColor="#A8A8A8"

Farba tieňa (odrazu).

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

Pozícia tieňa

android:shadowRadius="10"

Stupeň "rozmazanie" tieňa.

/>

Ako si môžeme všimnúť, pozadia tlačidla nás odkazuje na súbor buttonshape. Ten však nemáme vytvorený.

Vytvoríme ho pravým klikom na zložku drawable/, New -> Drawable resources file. Bude sa volať buttonshape.xml a vložíme do neho nasledujúci kód, ktorý definuje tvar a pozadia tlačidlá:

<?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>

Farby môžete vkladať do súboru colours.xml v priečinku values/ rovnakým spôsobom ako textové reťazce do súboru strings.xml.

Pozadia aplikácie

Pre zmenu pozadia pridáme do zložky drawable/ súbor prechodne_pozadi.xml. Tu nadefinujeme vzhľad pozadia. Na stránkach http://developer.android.com/...esource.html nájdeme hŕbu príkladov, ukážok a syntaxou. Ak niekomu robí problém zápis farieb, tak odporúčam stránku: http://www.color-hex.com/

Pre pozadie som 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 pri práci s XML súbory nám zobrazuje náhľad aplikácie.

Výsledný návrh

Z obrázku vyplýva, že sme zvolili rozvrhnutie aplikácie na dva Usporiadania. Do prvého sme vložili dva riadky tabuľky. V jednom sú tri malé TextView pre zobrazenie čísla 1, operácie a čísla 2. V druhom riadku je iba jeden TextView a to hlavná obrazovka.

Druhý Layout obsahuje 6 riadkov tabuľky. V každom z nich je vyskladané niekoľko tlačidiel. Akonáhle budeme spokojní s návrhom UI, bude vhodné pomenovať všetky použité komponenty podľa ich charakteru.

Nabudúce, v lekcii Android programovanie - Implementácia Java kódu kalkulačky , sa pozrieme na implementáciu Java kódu aplikácie.

Článok pre vás napísal Jiří Frank

Užívateľské hodnotenie:

1 hlasov

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

Najčastejšie vyhľadávané

4. diel - Android programovanie - Prvá aplikácia, návrh kalkulačky

Úvod

Požiadavky

Analýza a návrh aplikácie

ZapisCislo ()

ZapisCarku ()

VymazVse ()

VymazJeden ()

Zápory ()

Odmocni ()

Sčítame (), odčítajte (), vynásobte (), vydeľte ()

Výpočtu ()

Ďalšie úpravy

Xml - návrh

Layouts

Návrh UI kalkulačky

Komentáre

Tlačidla

Pozadia aplikácie

Výsledný návrh