Úvod do knihovny Anko pro Android (3/4) - eMan s.r.o.

Úvod do knihovny Anko pro Android (3/4)

Ve třetím díle mini série o knihovně Anko budeme vylepšovat naši demo aplikaci, aby vypadala o něco lépe po stránce designu. Také se ale naučíme, jaké další extension funkce Anko nabízí, například k nastavení layoutu pro portrait/landscape mód.

V prvním článku jsme si řekli něco o vytvoření UI, které jsme definovali jako samostatné komponenty (AnkoComponent). Taky jsme si ukázali, jak je lze používat uvnitř aktivit. V předchozím článku jsme přidali do naší demo aplikace trochu té logiky. Nyní se vrátíme trochu zpátky a zaměříme se na vylepšení UI.

Přehled dílů série:

1. Vytvoření projektu v Android Studio 3 a první UI
2. Tlačítka, toasty, dialogy, intenty, uživatelská rozhraní a práce na pozadí (background threads)
3. Vylepšujeme naše UI
4. Fragmenty

Jako první přidáme padding do root UI elementu (vertical layout) v SignInView komponentě:

 

SignInView.kt – bez paddingu

 

 

SignInView.kt – přidaný padding

 

Výše uvedené DSL by v XML vypadalo následovně:

 

Všimněte si, že v SignInView komponentě nastavuje stejnou velikost textu oběma komponentám (username a password), konkrétně textSize = 24f.

 

 

Anko obsahuje další užitečnou extension funkci: aplikování parametrů do view rekurzivně, tedy applyRecursively{}. Můžeme tak nastavit textSize parametr rekurzivně všem UI komponentám, například typu EditText:

 

 

V dalším kroku přidáme do SignInView komponentu pro skrolování a zarovnáme formulář na střed. Po dokončení těchto kroků bude UI vypadat následovně:

 

 

Nebudu popisovat každou změnu krok za krokem, ale rozebereme si ty nejdůležitější části. Zkopírujte si následující kód, použijte ho ve vaší demo aplikaci a vyzkoušejte aplikaci spustit.

 

 

Řádek 26: sem jsme přidali nový parametr gravity se zarovnáním na střed
Řádek 28: přidána scrollView komponenta s vnořenou verticalLayout obalující Sign in formulář
Řádek 32: zde se nově nachází naše původní verticalLayout, do které jsme přidali opět parametr gravity se zarovnáním na střed
Řádek 37: nastavení 300dp pro velikost formuláře

Poznámka: Asi vás zajímá, proč máme definici lparams na řádku 37 uvnitř verticalLayout komponenty a nemáme ji podle doporučení za ukončením layoutu. Důvodem je, že nastavení délky layout ve verzi 0.9 funguje pouze touto mnou uvedenou definicí. Navíc to bude fungovat pouze pokud přesuneme daný kód do funkce apply:

 

 

Vraťme se k původnímu kódu bez použití funkce apply. Na řádku 40 si můžete všimnout následujícího kódu:

 

 

Použití View#setBackground vyžaduje API >= 16. Anko obsahuje několik funkcí pro tyto účely a pro nastavení při různém natočení mobilního zařízení (portrait a landscape):

 

 

V našem případě, kdy nerozlišujeme natočení, můžeme použít také následující zápis:

 


Shrnutí 3. části

Tentokrát jsme se naučili, jak přidat další parametry do UI komponent (padding, gravity a další) a přidali jsme také scroll view komponentu. Taky jsme si vyzkoušeli, jak můžeme tyto parametry aplikovat rekurzivně (třeba textSize).

Na závěr jsme si ukázali, jak se v Anko knihovně dá zacházet s portrait/landscape módem a jak můžeme odlišit, pro jaké Android API se má daný kód použít.

V příštím článku se naučíme práci s fragmenty. To znamená, že si řekneme, co nám Anko poskytuje za vylepšení při psaní fragmentů.

Václav Souhrada
Kotlin & Android Developer at eMan, Czech Kotlin User Group Founder and Organizer

Sledujte nás

Kontakt

+420 222 202 222
info@eman.cz

Sídlo a hlavní kancelář:
U Pergamenky 1145/12
170 00 Praha 7

Pobočka Hradec Králové:
Šimkova 1224/2B
500 03 Hradec Králové

Pobočka Plzeň:
Teslova 1266/7
301 00 Plzeň

Pobočka Mladá Boleslav:
Palackého 267
293 01 Mladá Boleslav

Sdíleno