C# týden Slevový týden - Březen
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!

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.pro­jektu -> 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

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

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

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
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
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
Predchádzajúci článok
Android programovanie - Životný cyklus a nový projekt
Všetky články v sekcii
Programovanie Android aplikácií v Jave
Miniatúra
Nasledujúci článok
Android programovanie - Implementácia Java kódu kalkulačky
Aktivity (1)

 

 

Komentáre

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

Príloha

Odpovedať
12.10.2018 13:06
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Lukáš Bura
Člen
Avatar
Odpovedá 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 :)

 
Odpovedať
12.10.2018 13:45
Avatar
Odpovedá 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.

Odpovedať
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

Odpovedať
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.

Odpovedať
26.10.2018 11:49
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
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.

Odpovedať
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. :-)

Odpovedať
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. :-`

Odpovedať
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í, :-)

Odpovedať
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:)

 
Odpovedať
9.12.2019 17:59
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!