10. diel - Android programovanie - ConstraintLayout - Druhy obmedzenia

V minulej lekcii, Android programovanie - ConstraintLayout - Vytvorenie obmedzenia , sme si predstavili ConstraintLayout a ukázali si ako vytvárať a odstraňovať obmedzenia rôznymi spôsobmi.

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

Obmedzenie k nadradenému objektu

Toto horizontálne / vertikálne obmedzenia už poznáme. Jednoducho ním komponent pripneme k jednej strane nadradeného objektu:

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

Vzájomná obmedzení medzi komponentmi

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

Zarovnanie okrajov komponentov

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

Ak chceme komponenty vzájomne zarovnať na stred, vytvoríme obmedzenia na oboch stranách:

Zarovnanie možno upraviť nastavením medzery. Na nasledujúcom obrázku je komponenta B posunutá o 24dp. Posun je definovaný parametrom margin:

Môžeme tiež vybrať všetky komponenty, ktoré chceme zarovnať, a potom kliknúť na položku Align na paneli nástrojov a vybrať typ zarovnanie:

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 a v rozbalenom menu zvolíme možnosť Show Baseline:

Potom klikneme na zobrazenú základnej línii texte komponenty A a pretiahneme čiaru na línii komponenty B:

Obmedzenia na vodítko (Guideline)

Do layoutu môžeme pridať pomocné zvislej alebo vodorovnej vodítko, ku ktorému komponent obmedzíme. Toto vodítko nebude pre používateľov aplikácie viditeľné, slúži len nám, pri vytváraní návrhu layoutu. Vodítko môžeme umiestniť do rozloženia na základe jednotiek dp alebo percent %, vzhľadom k okraju rozvrhnutie.

Pre vytvorenie vodiace linky klikneme na príslušnú položku (pozri nasledujúci obrázok) na paneli nástrojov a vyberieme jeden z dvoch druhov vodidiel (zvislej alebo vodorovnej):

Vodiace linku môžeme rôzne presúvať a kliknutím na kružnici na okraji tejto linky 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á ľavý margin 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 komponenta 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 štyroch TextView naviac a rozdelenie okna aplikácie do dvoch rôzne širokých stĺpcov. Vľavo sú popisky komponentov a vpravo sú komponenty používané užívateľom. Jediná komponenta, ktorá nerešpektuje rozdelenie do stĺpcov, je tlačidlo =.

Takého vzhľadu ľ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ž pomocnú záchytnú hranicou, na ktorú možno obmedzovať ostatné komponenty.

Komponenty v ľavom stĺpci majú navyše nastavený pravý margin, preto sú od vodítka odsadené smerom vľavo od vodítka. 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 toto vodítko nejaké obmedzenia - ktoré sú k tomuto vodítku akokoľvek "pripútané".

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