Lekce 31 - Android programování - Grafický návrh aplikací

V předchozí lekci, Práce s bitmapou v Android a publikace na Google Play, jsme se naučili pracovat s pixely a bitmapou.

Úvod

Zdravím všechny u dalšího pokračování tohoto seriálu. Dnes nás čeká v pořadí již 25. díl, který vychází se značným opožděním.

V poslední době se mi ve všech různých schránkách množí dotazy na tvorbu grafického rozhraní. Nejčastěji se týkají možnosti vytvořit takový grafický návrh, který vypadá identicky na různých zařízeních a rozložení různých komponent. Na tyto problémy se tedy zaměříme.

Vymyslíme si rozložení, na kterém si ukážeme krok za krokem jeho tvorbu a to včetně rozložení, které bude umožňovat nastavit velikost komponent tak, aby se zobrazovaly stejně velké na každém zařízení. Velikosti nastavíme vzhledem k velikosti obrazovky - můžeme tedy říct, že se bude jednat o jakési procentuální nastavení.

Základní opakování

Ještě než se pustíme do relativního rozložení, zopakujeme si způsoby vkládání komponent do grafického rozhraní naší aktivity.

Jak již zaznělo v tomto seriálu, grafická podoba aplikace se píše v xml. Android Studio nám nabízí jak možnost textového návrhu, tak možnost grafického návrhu. Ať již budeme vytvářet jakoukoliv aplikaci, doporučuji vlastní návrh aktivity vytvořit v "grafické" podobně a podle potřeby upravit textovou.

Již při vkládání komponent do naší aktivity se nám nastaví základní parametry, jako je centrování či vzdálenost od určité strany nebo komponenty. V levé liště je mnoho parametrů, které můžeme nastavit. Určitě není třeba se tomuto dále věnovat.

Layouty

Základní metoda, jak docílit požadovaného vzhledu, je práce s layouty a tabulkou. Do nich vkládáme komponenty, které se nám hodí.

Vlastní zadání ukázky

Dáme si teď za úkol vytvořit aktivitu, která bude vypadat přibližně následovně:

1. bude rozdělena na 2 hlavní části. Vrchní část bude zabírat cca 30% celkové výšky aktivity a tím pádem spodní aktivita bude zabírat zbytek, tedy 70%
2. spodní část bude vyplněna pouze prostorem pro psaní, tedy komponentou "edit text" (pozn. využijeme konkrétně komponentu Multiline Text),
3. oproti tomu vrchní část v sobě bude obsahovat klasický edit text a tlačítko

• obě zmíněné komponenty budou na stejném řádku, čili budou vedle sebe, nejdříve edit text, poté tlačítko.
• edit text bude zabírat 75% šířky řádku a tlačítko bude tedy zabírat 25% šířky řádku

Postup tvorby

1. Základem našeho návrhu bude tabulka. Tabulku jednoduše přetáhneme na původní RelativeLayout, přímo do komponent tree. Celý návrh aktivity nám tedy vyplní TableLayout. (viz. následující obrázek)

2. Stejným způsobem přetáhneme TableRow a LinearLayout (vertical), tentokrát do TableLayoutu. V dalším kroku si nastavíme rozložení podle zadání, čili vrchní řádek 30% výšky a spodní část 70% výšky.

3. Abychom pro sebe "zpřístupnili" možnost nastavit výšku v procentech, přepneme se do textového režimu a do TableLayout připíšeme: android:weightSum="100".

Nastavujeme hodnotu 100, ovšem nutno podotknout, že je úplně jedno, jaké číslo nastavíme. Můžeme zvolit klidně 1 nebo 3, jediné co se změní je číslo při použití. V praxi se má jednat o "podíl" z weightSum, pokud budeme chtít 50%, tak ze 100 budeme později používat 50, nebo pokud nastavíme 1 na weightSum, musíme později pro 50% použít hodnotu 0,5.

4. Nyní weightSum použijeme. Buď v XML připíšeme do vrchního TableRow: android:layout_weight="30" nebo se přepneme zpět do grafického návrhu a 5. řádek v "Properties" obsahuje "layout:weight" (viz. následující obrázek)

5. Teď nastavíme spodní layout úplně stejněm jako vrchní řádek - jen změníme číslo z 30 na 70. Nezapomeňte, že je třeba nastavit width a height na wrap_content, aby se nám layout "nenatáhl" na celou obrazovku. Výsledek již vypadá velice slibně.

6. Do spodního layoutu vložíme Multiline Text a nastavíme width a height na fill_parent, jak již název této úpravy napovídá, Multiline Text vyplní celého svého "rodiče", LinearLayout (vertical)

7. Do vrchního řádku nahodíme (opět přetahujte klidně do komponent tree) LinearLayout (Horizontal). Určitě si všimneme, že se nám nechce vložit do celého řádku tabulky. (viz. screen)

Tohle se děje proto, že nemáme takřka nic specifikované o naší tabulce - především vlastnosti, počty sloupců, atd.

8. K vyřešení našeho problému stačí, abychom přidali do parametrů TableLayout (textový návrh xml): android:stretchColumns="*"

Překlad do lidštiny bychom mohli chápat jako "roztáhni sloupce na celý řádek". Lze tedy místo * vybrat specifický sloupec z tabulky k roztažení (pokud bychom jich používali více).

9. Do LinarLayout(ho­rizontal), který se nachází v TableRow, přidáme EditText a tlačítko. Dojde k následující situaci:

Pozn. obarvil jsem oba EditTexty na šedou barvu, aby je bylo vidět.

10. V zadání máme, že EditText má zabírat 75% šířky řádku a tlačítko 25%.

Použijeme weightSum úplně stejným způsobem. Nastavíme jej na LinearLayout (horizontal). V LinearLayoutu (horizontal) se komponenty skládají vedle sebe. Proto můžeme použít weightSum úplně stejným způsobem. Ovšem určitě si všimnete, že když nastavíme 75 a 25, v reálu to tak ani z daleka nevypadá:

11. Pokud tento způsob používáme u komponent, je nutné nastavit buď width nebo height na 0dp, záleží jestli v % chceme nastavit width nebo height. Tzn. 0dp je u parametru, který bude "v procentech".

Protože se nám ještě nelíbí, že komponenty jsou namáčknuté nahoře, vycentrujeme je "vertikálně". To uděláme tak, že označíme obě komponenty a nastavíme gravity.

Je teď na Vás, aby jste otestovali vlastní návrh, stačí změnit zařízení, pro které probíhá renderování. Já například zvolil tablet, který jsem otočil do "portrétu". Vidíte, že poměry rozměrů jsou zachovány.

Závěr

Tímto jsme si tedy probraly základní možnosti návrhu, které by měly odpovědět na základní dotazy mnoha nováčků.

Budu vděčný za jakékoliv připomínky, návrhy, rady a nápady na další díly, ať už by se mělo jednat o specifické návody zaměřené jen na určitý problém, postupný vývoj zajímavé aplikace nebo úpravy či doplnění starších článků.

V následujícím kvízu, Kvíz - Základy vývoje Android aplikací v Javě, si vyzkoušíme nabyté zkušenosti z kurzu.