25. diel - Android programovanie - grafický návrh aplikácií

Úvod

Zdravím všetky u ďalšieho pokračovania tohto seriálu. Dnes nás čaká v poradí už 25. diel, ktorý vychádza so značným oneskorením.

V poslednej dobe sa mi vo všetkých rôznych schránkach množia otázky na tvorbu grafického rozhrania. Najčastejšie sa týkajú možnosti vytvoriť taký grafický návrh, ktorý vyzerá identicky na rôznych zariadeniach a rozloženie rôznych komponentov. Na tieto problémy sa teda zameriame.

Vymyslíme si rozloženie, na ktorom si ukážeme krok za krokom jeho tvorbu a to vrátane rozloženia, ktoré bude umožňovať nastaviť veľkosť komponentov tak, aby sa zobrazovali rovnako veľké na každom zariadení. Veľkosti nastavíme vzhľadom k veľkosti obrazovky - môžeme teda povedať, že sa bude jednať o akési percentuálnej nastavení.

Základné opakovanie

Ešte než sa pustíme do relatívneho rozloženia, zopakujeme si spôsoby vkladanie komponentov do grafického rozhrania našej aktivity.

Ako už zaznelo v tomto seriáli, grafická podoba aplikácie sa píše v xml. Android Studio nám ponúka ako možnosť textového návrhu, tak možnosť grafického návrhu. Či už budeme vytvárať akúkoľvek aplikáciu, odporúčam vlastný návrh aktivity vytvoriť v "grafickej" podobne a podľa potreby upraviť textovú.

Už pri vkladaní komponentov do našej aktivity sa nám nastaví základné parametre, ako je centrovanie či vzdialenosť od určitej strany alebo komponenty. V ľavej lište je veľa parametrov, ktoré môžeme nastaviť. Určite nie je potrebné sa tomuto ďalej venovať.

Layouty

Základná metóda, ako docieliť požadovaného vzhľadu, je práca s layouty a tabuľkou. Do nich vkladáme komponenty, ktoré sa nám hodia.

Vlastné zadanie ukážky

Dáme si teraz za úlohu vytvoriť aktivitu, ktorá bude vyzerať približne nasledovne:

1. bude rozdelená na 2 hlavné časti. Vrchná časť bude zaberať cca 30% celkovej výšky aktivity a tým pádom spodnej aktivita bude zaberať zvyšok, teda 70%
2. spodná časť bude vyplnená iba priestorom pre písanie, teda komponentom "edit text" (pozn. využijeme konkrétne komponentu Multiline Text),
3. oproti tomu vrchná časť v sebe bude obsahovať klasický edit text a tlačidlo

• obe zmienené komponenty budú na rovnakom riadku, čiže budú vedľa seba, najskôr edit text, potom tlačidlo.
• edit text bude zaberať 75% šírky riadku a tlačidlo bude teda zaberať 25% šírky riadku

Postup tvorby

1. Základom nášho návrhu bude tabuľka. Tabuľku jednoducho pretiahneme na pôvodnú RelativeLayout, priamo do komponentov tree. Celý návrh aktivity nám teda vyplní TableLayout. (Viď. Nasledujúci obrázok)

2. Rovnakým spôsobom pretiahneme TableRow a LinearLayout (vertical), tentoraz do TableLayoutu. V ďalšom kroku si nastavíme rozloženie podľa zadania, čiže vrchný riadok 30% výšky a spodná časť 70% výšky.

3. Aby sme pre seba "sprístupnili" možnosť nastaviť výšku v percentách, prepneme sa do textového režimu a do TableLayout pripíšeme: android:weightSum="100".

Nastavujeme hodnotu 100, avšak treba podotknúť, že je úplne jedno, aké číslo nastavíme. Môžeme zvoliť pokojne 1 alebo 3, jediné čo sa zmení je číslo pri použití. V praxi sa má jednať o "podiel" z weightSum, ak budeme chcieť 50%, tak zo 100 budeme neskôr používať 50, alebo ak nastavíme 1 na weightSum, musíme neskôr pre 50% použiť hodnotu 0,5.

4. Teraz weightSum použijeme. Buď v XML pripíšeme do vrchného TableRow: android:layout_weight="30" alebo sa prepneme späť do grafického návrhu a 5. riadok v "Properties" obsahuje "layout: weight" (viď. Nasledujúci obrázok)

5. Teraz nastavíme spodné layout úplne rovnako ako vrchný riadok - len zmeníme číslo z 30 na 70. Nezabudnite, že je potrebné nastaviť width a height na wrap_content, aby sa nám layout "nenatiahli" na celú obrazovku. Výsledok už vyzerá veľmi sľubne.

6. Do spodného layoutu vložíme Multiline Text a nastavíme width a height na fill_parent, ako už názov tejto úpravy napovedá, Multiline Text vyplní celého svojho "rodiča", LinearLayout (vertical)

7. Do vrchného riadku nahodíme (opäť preťahujte kľudne do komponentov tree) LinearLayout (Horizontal). Určite si všimneme, že sa nám nechce vložiť do celého riadku tabuľky. (Viď. Screen)

Toto sa deje preto, že nemáme takmer nič špecifikované o našej tabuľke - predovšetkým vlastnosti, počty stĺpcov, atď.

8. Na vyriešenie nášho problému stačí, aby sme pridali do parametrov TableLayout (textový návrh xml): android:stretchColumns="*"

Preklad do lidštiny by sme mohli chápať ako "roztiahni stĺpce na celý riadok". Možno teda miesto * vybrať špecifický stĺpec z tabuľky na roztiahnutie (ak by sme ich používali viac).

9. Do LinarLayout (horizontal), ktorý sa nachádza v TableRow, pridáme EditText a tlačidlo. Dôjde k nasledujúcej situácii:

Pozn. zafarbil som oba EditTexty na šedú farbu, aby ich bolo vidieť.

10. V zadaní máme, že EditText má zaberať 75% šírky riadku a tlačidlo 25%.

Použijeme weightSum úplne rovnakým spôsobom. Nastavíme ho na LinearLayout (horizontal). V LinearLayoutu (horizontal) sa komponenty skladajú vedľa seba. Preto môžeme použiť weightSum úplne rovnakým spôsobom. Ovšem určite si všimnete, že keď nastavíme 75 a 25, v reáli to tak ani z ďaleka nevyzerá:

11. Ak tento spôsob používame u komponentov, je nutné nastaviť buď width alebo height na 0dp, záleží či v% chceme nastaviť width alebo height. Tzn. 0dp je u parametra, ktorý bude "v percentách".

Pretože sa nám ešte nepáči, že komponenty sú namáčknuté hore, vycentrujeme je "vertikálne". To urobíme tak, že označíme obe komponenty a nastavíme gravity.

Je teraz na Vás, aby ste otestovali vlastný návrh, stačí zmeniť zariadenie, pre ktoré prebieha renderovanie. Ja napríklad zvolil tablet, ktorý som otočil do "portrétu". Vidíte, že pomery rozmerov sú zachované.

Záver

Týmto sme si teda prebrali základné možnosti návrhu, ktoré by mali odpovedať na základné otázky mnohých nováčikov.

Budem vďačný za akékoľvek pripomienky, návrhy, rady a nápady na ďalšie diely, či už by sa malo jednať o špecifické návody zamerané len na určitý problém, postupný vývoj zaujímavé aplikácie alebo úpravy či doplnenie starších článkov.