10. diel - Android programovanie - ConstraintLayout - Druhy obmedzení

V dnešnom Kotline tutoriále programovania pre Android si ukážeme základné druhy obmedzení ConstraintLayout vrátane praktických ukážok použitia.

Obmedzenie k nadradenému objektu

Toto obmedzenie môže byť ako horizontálne, tak vertikálne. My sme ho už použili a poznáme ho. Jednoducho ním komponent pripneme k jednej strane nadradeného objektu:

Tiež vieme, že nastavením tohto obmedzenia z oboch strán, komponent vycentrujeme.

Vzájomné obmedzenia medzi komponentmi

Komponent B je na obrázku nižšie obmedzený tak, aby bol vždy vpravo od komponentu A. Komponent C je obmedzený pod komponent A. Znázornené obmedzenia však neriešia zarovnanie, takže B sa môže stále pohybovať nahor alebo nadol a komponent C sa môže pohybovať do strán:

Tento druh obmedzenia používame v prípadoch, keď potrebujeme komponentom určiť ich vzájomnú horizontálnu alebo vertikálnu pozíciu. Akokoľvek zmeníme pozíciu komponentu A vertikálne, bude komponent C túto zmenu pozície kopírovať tak, aby vždy bola pod komponentom A vo vzdialenosti 32dp. Ak komponent A posunieme horizontálne, pozícia komponentu C sa nezmení. Podobne bude horizontálnu zmenu pozície komponentu A kopírovať komponent B. Tá vždy bude vpravo od komponentu A vo vzdialenosť 32dp. Vertikálny posun komponentu A pozíciu komponentu B nijako neovplyvní.

Obmedzenie jedného komponentu na druhý vytvoríme podobne, ako v predchádzajúcom odseku pri obmedzení k nadradenému objektu, s tým rozdielom, že obmedzovaný komponent nepripneme k nadradenému objektu, ale k hrane toho komponentu, na ktorý obmedzenie vytvárame.

Zarovnanie okrajov komponentov

Na obrázku je ľavá strana komponentu B zarovnaná s ľavou stranou komponentu A:

Efekt zarovnania docielime týmito krokmi:

• Kliknutím myši označíme jeden z dvoch zarovnávaných objektov – tým budú na všetkých jeho hranách zobrazené záchytné body. Vždy označíme ten komponent, ktorý sa má prispôsobiť:

• Myšou uchopíme záchytný bod tej strany komponentu, ktorý chceme zarovnať a pohybom myši z neho "vytiahneme" spojovaciu linku:

• Vytiahnutú spojovaciu linku dovedieme k záchytnému bodu druhého z dvoch zarovnávaných komponentov. Po prepojení oboch záchytných bodov dôjde k posunutiu toho objektu, z ktorého bola vodiaca linka vytiahnutá:

Zarovnanie komponentov na stred

Pokiaľ chceme komponenty vzájomne zarovnať na stred, bude postup rovnaký ako v predchádzajúcom príklade. Rozdiel bude v tom, že popísané zarovnanie aplikujeme aj na protiľahlej strane zarovnávaných komponentov:

Zarovnanie pomocou layout_margin

Zarovnanie je možné upraviť bežným nastavením parametra layout_margin. Pri práci s layoutom ConstraintLayout máme v okne Attributes k dispozícii pomocné podokno Constraint Widget, kde, okrem iného, môžeme margin ľahko nastaviť alebo zvoliť jednu z pripravených hodnôt. Na nasledujúcom obrázku je komponent B posunutý o 24dp. Posun je definovaný parametrom layout_margin_left pomocou spomínaného okna Constraint Widget:

Zarovnanie viacerých komponentov

Existuje aj ďalšia možnosť nastavenia zarovnania komponentov, ktoré nám uľahčia prácu so zarovnaním skupiny komponentov o počte väčšom ako dve. Všetky dotknuté komponenty vyberieme (označíme) a potom klikneme na položku Align na paneli nástrojov a vyberieme typ zarovnania:

Zarovnanie podľa základnej línie textu (Baseline)

Komponenty môžeme zarovnať podľa textu na nich. Klikneme pravým tlačidlom myši na komponent A av rozbalenom menu zvolíme možnosť Show Baseline:

Potom klikneme na zobrazenú základnú líniu textu komponentu A a pretiahneme čiaru na líniu komponentu B:

Toto obmedzenie (zarovnanie) používame napríklad pri komponentoch ako TextView, EditText alebo Button pre horizontálne zarovnanie ich textu do jedného riadka bez ohľadu na celkovú výšku zarovnaných komponentov. Napríklad takto:

Aj tu máme možnosť všetky zarovnávané komponenty označiť a pod voľbou Align v paneli nástrojov zvoliť možnosť Baselines.

Obmedzenie na vodítko (Guideline)

Do layoutu môžeme pridať pomocné zvislé alebo vodorovné vodítko, ku ktorému komponentu obmedzíme. Toto vodítko nebude pre užívateľov aplikácie viditeľné, slúži iba nám, pri vytváraní návrhu layoutu. Vodítko môžeme umiestniť do rozvrhnutia na základe jednotiek dp alebo percent % vzhľadom na okraj rozvrhnutia.

Pre vytvorenie vodiacej linky klikneme na príslušnú položku na paneli nástrojov (viď nasledujúci obrázok) a vyberieme jeden z dvoch druhov vodítok (zvislé alebo vodorovné):

Vodiacu linku môžeme rôzne presúvať a kliknutím na kružnicu na jej okraji prepíname režim merania vzdialenosti od okraja v dp alebo v %:

Na predchádzajúcom obrázku je vidieť komponent A, ktorý má horizontálne obmedzenie nastavené na vodítko a navyše má parameter layout_margin_left nastavený na hodnotu 24dp. Použité vodítko je od ľavého okraja vo vzdialenosti zodpovedajúcej 33% celkovej šírky dostupného priestoru. Kedykoľvek vodítku zmeníme jeho pozíciu, bude ho nasledovať aj komponent A.

Praktická ukážka vodítka

Použitie vodítka si ukážeme v praxi. A to tak, že prerobíme vzhľad našej kalkulačky:

Ak vzhľad z obrázku porovnáte s pôvodným vzhľadom kalkulačky, všimnete si štyri TextView navyše a rozdelenie okna aplikácie do dvoch rôzne širokých stĺpcov. Vľavo sú popisky komponentov a vpravo sú komponenty používané používateľom. Jediný komponent, ktorý nerešpektuje rozdelenie do stĺpcov, je tlačidlo =.

Chýbajúce komponenty si skúste do layoutu doplniť sami. Ak by ste si nevedeli rady, postupujte podobne, ako v lekcii ConstraintLayout - Vytvorenie obmedzení.

Taký vzhľad ľahko dosiahneme práve s pomocou vertikálneho vodítka, ktorého vzdialenosť od ľavého okraja zodpovedá 40 % celkovej šírky. Všetky komponenty, okrem tlačidla, majú príslušné horizontálne obmedzenia nastavené na vodítko. Vodítko nie je ničím iným, než pomocnou záchytnou hranicou, na ktorú je možné obmedzovať ostatné komponenty.

Komponenty v ľavom stĺpci majú navyše nastavený parameter layout_margin_right, preto sú od vodidla odsadené smerom do ľava. Posúvaním pozície vodítka môžeme meniť pomer šírok oboch stĺpcov, pričom túto zmenu budú kopírovať všetky tie komponenty, ktoré majú na dané vodítko nejaké obmedzenia – ktoré sú k tomuto vodítku akokoľvek „pripútané“.

V budúcej lekcii, Android programovanie - ConstraintLayout - Pokročilé obmedzenia , si ukážeme ďalšie druhy obmedzení ConstraintLayout vrátane praktických ukážok použitia.