Lekce 11 - Android programování - ConstraintLayout - Druhy omezení

V minulé lekci, Android programování - ConstraintLayout - Vytvoření omezení, jsme si představili ConstraintLayout a ukázali si, jak vytvářet a odstraňovat omezení různými způsoby.

V dnešním Kotlin tutoriálu programování pro Android si ukážeme základní druhy omezení ConstraintLayout včetně praktických ukázek použití.

Omezení k nadřazenému objektu

Toto omezení může být jak horizontální, tak vertikální. My jsme jej již použili a známe ho. Jednoduše jím komponentu připneme k jedné straně nadřazeného objektu:

Také víme, že nastavením tohoto omezení z obou stran komponentu vycentrujeme.

Vzájemná omezení mezi komponentami

Komponenta B je na obrázku níže omezena tak, aby byla vždy vpravo od komponenty A. Komponenta C je omezena pod komponentu A. Znázorněná omezení však neřeší zarovnání, takže B se může stále pohybovat nahoru nebo dolů a komponenta C se může pohybovat do stran:

Tento druh omezení používáme v případech, kdy potřebujeme komponentám určit jejich vzájemnou horizontální nebo vertikální pozici. Jakkoliv změníme pozici komponenty A vertikálně, bude komponenta C tuto změnu pozice kopírovat tak, aby vždy byla pod komponentou A ve vzdálenosti 32dp. Pokud komponentu A posuneme horizontálně, pozice komponenty C se nezmění. Podobně bude horizontální změnu pozice komponenty A kopírovat komponenta B. Ta vždy bude vpravo od komponenty A ve vzdálenost 32dp. Vertikální posun komponenty A pozici komponenty B nijak neovlivní.

Omezení jedné komponenty na druhou vytvoříme podobně, jako v předchozím odstavci u omezení k nadřazenému objektu, s tím rozdílem, že omezovanou komponentu nepřipneme k nadřazenému objektu, ale k hraně té komponenty, na kterou omezení vytváříme.

Zarovnání okrajů komponent

Na obrázku je levá strana komponenty B zarovnána s levou stranou komponenty A:

Efektu zarovnání docílíme těmito kroky:

• Kliknutím myši označíme jeden ze dvou zarovnávaných objektů - tím budou na všech jeho hranách zobrazeny záchytné body. Vždy označíme tu komponentu, která se má přizpůsobit:

• Myší uchopíme záchytný bod té strany komponenty, kterou chceme zarovnat a pohybem myši z něj "vytáhneme" spojovací linku:

• Vytaženou spojovací linku dovedeme k záchytnému bodu druhé ze dvou zarovnávaných komponent. Po propojení obou záchytných bodů dojde k posunutí toho objektu, ze kterého byla vodící linka vytažena:

Zarovnání komponent na střed

Pokud chceme komponenty vzájemně zarovnat na střed, bude postup stejný, jako v předchozím příkladu. Rozdíl bude v tom, že popsané zarovnání aplikujeme i na protilehlé straně zarovnávaných komponent:

Zarovnání pomocí layout_margin

Zarovnání lze upravit běžným nastavením parametru layout_margin. Při práci s layoutem ConstraintLayout máme v okně Attributes k dispozici pomocné podokno Constraint Widget, kde, mimo jiné, můžeme margin snadno nastavit a nebo zvolit jednu z připravených hodnot. Na následujícím obrázku je komponenta B posunuta o 24dp. Posun je definován parametrem layout_margin_left pomocí zmíněného okna Constraint Widget:

Zarovnání více komponent

Existuje i další možnost nastavení zarovnání komponent, které nám usnadní práci se zarovnáním skupiny komponent o počtu větším než dvě. Všechny dotčené komponenty vybereme (označíme) a poté klikneme na položku Align na panelu nástrojů a vybereme typ zarovnání:

Zarovnání podle základní linie textu (Baseline)

Komponenty můžeme zarovnat podle textu na nich. Klikneme pravým tlačítkem myši na komponentu A a v rozbaleném menu zvolíme možnost Show Baseline:

Poté klikneme na zobrazenou základní linii textu komponenty A a přetáhneme čáru na linii komponenty B:

Toto omezení (zarovnání) používáme například u komponent jako TextView, EditText nebo Button pro horizontální zarovnání jejich textu do jednoho řádku bez ohledu na celkovou výšku zarovnaných komponent. Například takto:

I zde máme možnost všechny zarovnávané komponenty označit a pod volbou Align v panelu nástrojů zvolit možnost Baselines.

Omezení na vodítko (Guideline)

Do layoutu můžeme přidat pomocné svislé nebo vodorovné vodítko, ke kterému komponentu omezíme. Toto vodítko nebude pro uživatele aplikace viditelné, slouží pouze nám, při vytváření návrhu layoutu. Vodítko můžeme umístit do rozvržení na základě jednotek dp nebo procent %, vzhledem k okraji rozvržení.

Pro vytvoření vodící linky klikneme na příslušnou položku na panelu nástrojů (viz následující obrázek) a vybereme jeden ze dvou druhů vodítek (svislé nebo vodorovné):

Vodící linku můžeme různě přesouvat a kliknutím na kružnici na jejím okraji přepínáme režim měření vzdálenosti od okraje v dp nebo v %:

Na předchozím obrázku je vidět komponenta A, která má horizontální omezení nastaveno na vodítko a navíc má parametr layout_margin_left nastaven na hodnotu 24dp. Použité vodítko je od levého okraje ve vzdálenosti odpovídající 33% celkové šířky dostupného prostoru. Kdykoliv vodítku změníme jeho pozici, bude ho následovat i komponenta A.

Praktická ukázka vodítka

Použití vodítka si ukážeme v praxi. A to tak, že předěláme vzhled naší kalkulačky:

Pokud vzhled z obrázku porovnáte s původním vzhledem kalkulačky, všimnete si čtyř TextView navíc a rozdělení okna aplikace do dvou různě širokých sloupců. Vlevo jsou popisky komponent a vpravo jsou komponenty používané uživatelem. Jediná komponenta, která nerespektuje rozdělení do sloupců, je tlačítko =.

Chybějící komponenty si zkuste do layoutu doplnit sami. Pokud byste si nevěděli rady, postupujte podobně, jako v lekci ConstraintLayout - Vytvoření omezení.

Takového vzhledu snadno dosáhneme právě s pomocí vertikálního vodítka, jehož vzdálenost od levého okraje odpovídá 40 % celkové šířky. Všechny komponenty, kromě tlačítka, mají příslušná horizontální omezení nastavena na vodítko. Vodítko není ničím jiným, než pomocnou záchytnou hranicí, na kterou lze omezovat ostatní komponenty.

Komponenty v levém sloupci mají navíc nastavený parametr layout_margin_right, proto jsou od vodítka odsazeny směrem doleva. Posouváním pozice vodítka můžeme měnit poměr šířek obou sloupců, přičemž tuto změnu budou kopírovat všechny ty komponenty, které mají na dané vodítko nějaké omezení - které jsou k tomuto vodítku jakkoliv "připoutané".

V následujícím kvízu, Kvíz - Životní cyklus aktivity a ConstraintLayout v Android, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.