Naučte sa vyvíjať aplikácie pre Android za 14 dní – obsluha udalostí

Ako na to

23.3.2020

Pripomenieme, že každý prvok používateľského rozhrania je zodpovedný za to, čo sa na ploche, ktorú vo vizuálnom zobrazení zaberá a taktiež je zodpovedný za to aby adekvátne reagoval na udalosti, ku ktorým dochádza v rámci tejto časti obrazovky. Nakoľko dominantnou metódou ovládania sú dotyky a gestá, takže väčšinou to budú dotykové udalosti. Android podporuje aj ovládanie pomocou myši, ale interpretácia kliknutia kurzorom ľavým, prípadne pravým tlačidlom myši je ekvivalentná ťuknutiu, či dlhšiemu pridržaniu

Námetom príkladu je jednoduchá aplikácia, ktorá bude simulovať poslanie textovej správy. Odoslaná správa sa zobrazí pomocou toastovej notifikácie. Začneme rozmiestnením prvkov a interakciou medzi dvomi najpoužívanejšími prvkami - dotykovým tlačidlom, pomocou ktorého používateľ dá aplikácii impulz a prvkom pre zadanie, prípadne výpis textu. Po zatlačení tlačidla aplikácia vykoná naprogramované úkony.

Vytvorte projekt, ktorý bude mať hlavnú aktivitu typu Empty Activity. Aby sme neriešili veľa vecí naraz, zmeňte layout zapuzdrujúci prvky používateľského rozhrania hlavnej aktivity z Constraint Layout na Linear Layout. LinearLayout je koreňový prvok, preto zaplní celú plochu obrazovky.

Používateľské rozhranie jednoduchej aplikácie bude pozostávať z dvoch prvkov. Prvok <EditText> bude slúžiť na zadanie textu a tlačidlo, teda prvok <Button> na vyvolanie akcie, v tomto prípade na vypísanie oznamu, v reálnej aplikácii by sa ním odoslala správa

XML kód návrhu s napevno zadanými textovými reťazcami

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<EditText

android:id="@+id/etVstup"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:hint="Text správy">

<requestFocus />

</EditText>

<Button

android:id="@+id/btVypis"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Pošli" />

</LinearLayout>

Parameter android : hint obsahuje textový reťazec, ktorý sa zobrazí, keď textové pole je prázdne. Môžete síce použiť priamo textové reťazce, no takéto zjednodušenie by vám neskôr pravdepodobne prinieslo viac problémov, než úžitku. Oveľa systematickejšie je použiť referenciu na hodnotu reťazca v resources, v súbore res/values/strings.xml.

<resources>

<string name="app_name">Obsluha udalosti</string>

<string name="text_vypisu">Text správy</string>

<string name="text_tlacidlaOK">Pošli</string>

</resources>

XML kód návrhu bude

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<EditText

android:id="@+id/etVstup"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:hint="@string/text_vypisu"

android:inputType="text"

android:autofillHints="">

<requestFocus />

</EditText>

<Button

android:id="@+id/btVypis"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/text_tlacidlaOK" />

</LinearLayout>

Parameter android:id je jedinečný identifikátor prvku vytvorený v množine identifikátorov. Na tento identifikátor sa môže odkazovať váš aplikačný kód, napríklad na zmenu niektorého parametra, či načítanie hodnoty a podobne. Znak @ udáva, že sa jedná o referenciu. Za referenciou je typ prostriedku (resource), v tomto prípade id a za lomítkom je meno identifikátora. Pri prvom definovaní ID prostriedku je potrebné pred typ prostriedku dať znamienko plus ( + ). To je signálom pre SDK a kompilátor, aby vytvorili nový prostriedok. Ďalšie odkazy na ID znamienko plus už nepotrebujú.

Parametre v atribútoch android : layout_width a android : layout_height udávajú šírku a výšku prvku. Hodnota "wrap_content" udáva, že rozmer by mal byť taký aby sa prvok zmestil do rodičovského pohľadu. Ak by ste použili hodnotu parametra "match_parent", prvok EditText prvok by vyplnil celý rodičovský prvok LinearLayout, v tomto prípade teda celú obrazovku aplikácie.

Po prepnutí sa do duálneho zobrazenia Split vidíte vizuálnu reprezentáciu prvkov používateľského rozhrania, ktoré ste pridali do aplikácie.

V tejto fáze, skôr než sa dostaneme k podrobnostiam ohľadne vzájomného rozmiestnenia prvkov by bolo zaujímavé aplikáciu otestovať. Zatiaľ sme nedefinovali akciu po zatlačení tlačidla, ale to nevadí, budeme skúmať zobrazenie prvkov počas pásania dlhšieho textu do prvku EditText. Spustite aplikáciu v simulátore. Všimnite si, čo sa deje z tlačidlom počas postupného zväčšovania prvku ExitText.

Správanie prvku je možné ovplyvniť pomocou parametra android:layout_weight. Hodnota parametra udáva množstvo priestoru ktorý prvok zaberá. Rozdelenie priestoru je v relatívnom pomere.

Ak napríklad máte dva prvky a prvému zadáte váhu 2 a druhému váhu 1, prvky si rozdelia priestor v danom smere tak, že prvý z nich zaberie 2/3 a druhý vyplní zvyšok, čiže 1/3.

Predvolená hodnota parametra layout_weight je 0 , takže ak pre susedný prvok zadáte nejakú hodnotu väčšiu než 0, zaberie tento prvok zvyšok priestoru. V našom príklade ponechajte prvku Button implicitnú hodnotu 0 a pre prvok EditText zmente hodnotu parametra layout_weight na hodnotu 1. Teraz môžete znovu vyskúšať správanie sa prvkov počas zadávania dlhšej správy. Ak pre prvok zadáte parameter layout_weight, mali by ste zmeniť šírku prvku na nulu (0DP). Systém potom vypočíta relevantnú šírku, aby prvok definovaným spôsobom vyplnil zostávajúci priestor

Upravte definíciu prvku EditText a povoľte zobrazenie na viac riadkov

<EditText

android:id="@+id/etVstup"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:layout_weight="1"

android:autofillHints=""

android:hint="@string/text_vypisu"

android:inputType="none|textMultiLine">

<requestFocus />

</EditText>

Kvôli grafickej úroave trochu predbehneme. Vpravo je finálne spustenie aplikácie, všimnite si výpis na mieste medzerníku klávesnice

Kompletný XML kód návrhu aktivity bude

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<EditText

android:id="@+id/etVstup"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:layout_weight="1"

android:autofillHints=""

android:hint="@string/text_vypisu"

android:inputType="none|textMultiLine">

<requestFocus />

</EditText>

<Button

android:id="@+id/btVypis"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/text_tlacidlaOK" />

</LinearLayout>

Obsluha udalosti

Na ploche hlavnej aktivity aplikácie (MainActivity) je pole na zadanie textu a tlačidlo, pomocou ktorého na podnet používateľa aktivita vykoná požadovanú činnosť. Do elementu XML kódu definície tlačidla sme pridali riadok

android:onClick="PosliSpravu"

definujúci čo sa stane po aktivovaní tlačidla. Nakoľko Android je neodmysliteľne spojený so zariadeniami s dotykovým displejom, aktivovanie sa fyzicky vo väčšine prípadov vykoná ťuknutím na tlačidlo, u niektorých špecifických zariadení ťuknutím elektronickým perom, alebo na tabletoch aj myšou

<Button

android:id="@+id/btVypis"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="PosliSpravu"

android:text="@string/text_tlacidlaOK" />

Hodnota atribútu android:onClick definuje metódu v aktuálnej aktivite, presnejšie jej Java kód ktorú systém zavolá po ťuknutí na tlačidlo. V našom prípade sa bude jednať o metódu "onClick". Zatiaľ túto metódu nemáme vytvorenú. Takže ju musíte vytvoriť v súbore MainActivity.Java

Potrebujeme zobraziť nie pevne definovaný text, ale textový reťazec zadaný používateľom v prvku EditText. Tento prvok typu View nájdeme pomocou metódy findViewById(R.id.etVstup).

Vyraz v zátvorke je takzvaný identifikátor. Identifikátory v androide sú statickými vlastnosťami bázovej triedy R. Táto trieda je generovaná automaticky na základe obsahu zložky res. Pomocou triedy R je možné odkazovať aj na iné XML súbory. Napríklad R.layout.vystup_dialog odkazuje na súbor vystup_dialog.xml v zložke /res/layout. Metódy na obsluhu udalostí musia byť typu public void.

Telo metódy na obsluhu udalosti pridajte do súboru MainActivity.Java.

public void onClick(View view)

{

EditText input = (EditText) findViewById(R.id.etVstup);

String string = input.getText().toString();

Toast.makeText(this, string, Toast.LENGTH_LONG).show();

}

Na výpis použijeme prvok Toast. Pomenovanie je celkom príznačné. Rámik s textom oznamu vyskočí podobne ako toast z hriankovača a po krátkej dobe sa prestane zobrazovať. Čas zobrazenia sa definuje parametrom LENGTH_SHORT, alebo LENGTH_LONG.

Odporúčame nastaviť Android Studio aby (samozrejme ak sa dá) doplňovalo chýbajúce importy. Pomocou postupu File -> Settings -> Editor -> General -> Auto Import -> Java zobrazíte dialóg v ktorom označíte aktívne voľby

Insert imports on paste
Add unambigious imports on the fly

Po spustení v emulátore sa vami zadaný text zobrazí ako toastová notifikácia. Obrázok aplikácie je vyššie vedľa obrázku správy na dva riadky. Toastová notifikácia zobrazuje text v dolnej časti, približne v mieste medzerníka klávesnice

Prehľad dielov seriálu

1 deň – Prvá aplikácia

2 deň – Možnosti emulátorov

3 deň - Zorientujte sa v projekte aplikácie

4 deň – Princípy dizajnu a škálovania

5 deň – Uporiadanie prvkov používateľského rozhrania

4 komentáre

Chybička se vloudila reakcia na: Naučte sa vyvíjať aplikácie pre Android za 14 dní – obsluha udalostí

30.3.2020 20:03

Dobrý deň,

ďakujem za seriu článkov, su naozaj prínosné... :)

Jedno zo zjednodušení ale v tomto príklade spôsobí error aplikácie.

android:onClick="PosliSpravu"

je vadný... ak je to preto aby sa nad tým človek zamyslel, potom cool! Ale celkom som sa nad tým natrápil, kým som to upravil tak, že mi to už funguje... PosliSpravu sa neodkazuje na žiadny dalšiu metodu v mainActivity.java takze vyhodí kolaps aplikácie. Po zámene PosliSpravu na onClick to už funguje... ale tuto práve zmena za rodný jazyk vyústila v nefunkčnost.

Ak teda chcete ušetriť starosti dalším používatelom, ušetrí im to kapku času... :)

Code style reakcia na: Naučte sa vyvíjať aplikácie pre Android za 14 dní – obsluha udalostí

23.3.2020 13:03

Prosim, neucte ludi pisat nazvy funkcii a IDcka v nasom rodnom jazyku :/ Vzdy by mali byt anglicky. Rovnako ako nazov projektu. IDcka pre Views su napisane v CamelCase a strings su s podtrzitkami. Toto by tiez chcelo drzat jednotne pre vsetky druhy identifikatorov a mien - ci uz je to View, string, drawable,... a uprednosnil by som teda pdotrzitkovu formu, napr. et_input. Inak palec hore za predpony v IDckach pre View (et_, tv_, btn_, ...) ;) Otvaracia zatvorka funkcie na separatnom riadku tiez nie je uplne Java/Kotlin style, ale tu asi kazdemu podla chuti.

Naučte sa vyvíjať aplikácie pre Android za 14 dní – obsluha udalostí

Obsluha udalosti

4 komentáre

Chybička se vloudila reakcia na: Naučte sa vyvíjať aplikácie pre Android za 14 dní – obsluha udalostí

Code style reakcia na: Naučte sa vyvíjať aplikácie pre Android za 14 dní – obsluha udalostí

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať

Slovenské aplikácie v aplikačnom obchode Huawei AppGallery

Výmena batérie v notebooku

Ako jednoducho zakryť tvár a ŠPZ na fotkách: Pomôže vám anonymizácia