Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Discount week - April - 30

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:

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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.


 

Predchádzajúci článok
Android programovanie - ConstraintLayout - Vytvorenie obmedzenia
Všetky články v sekcii
Základy vývoja Android aplikácií v Jave
Článok pre vás napísal Pavel
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje programování v Javě, hlavně pro Android. Mezi jeho další zájmy patří Arduino, Minecraft.
Aktivity (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!