9. diel - Android programovanie - ConstraintLayout - Vytvorenie obmedzení

V dnešnej lekcii sa zoznámime s kontajnerom ConstraintLayout, ktorý je v Android Studiu používaný ako východiskový layout na rozloženie komponentov na aktivite. ConstraintLayout disponuje slušnou kôpkou funkcií, ktoré z neho robia mocného pomocníka pri návrhu našich aktivít. My si popíšeme hlavne tie základné.

Aby nechýbala praktická ukážka, ukážeme si všetko na vzhľade projektu SimpleCalc, kde sme vytvárali veľmi jednoduchú kalkulačku. Vzhľad kalkulačky vyzeral takto:

ConstraintLayout

ConstraintLayout umožňuje vytvárať zložité rozvrhnutia grafického používateľského rozhrania. Tento layout je veľmi podobný RelativeLayout v tom, že všetky komponenty sú rozložené podľa vzťahov medzi sebou a/alebo nadradeným objektom, často tak, že ich k sebe prichytíme. Tieto vzťahy definujeme pomocou tzv. obmedzení (constraints), viď ďalej.

Vytvorme teraz znova požadovaný vzhľad kalkulačky zo základných komponentov. Ide skutočne o veľmi jednoduchý dizajn bez žiadnych zložitých prvkov. Ukážeme si pri tom ďalšie možnosti pozíciovania komponentov našej kalkulačky v kontajneri ConstraintLayout.

V Android Studiu otvoríme súbor activity_main.xml a okno s náhľadom prepneme na zobrazenie Blueprint, ktoré je pre túto prácu najvhodnejšie:

Režim náhľadu Blueprint je na zostavovanie layoutu vhodnejší preto, že sú v ňom dobre znázornené všetky vytvorené väzby a závislosti medzi jednotlivými objektmi.

Pridanie komponentu do layoutu

Teraz postupne pretiahneme z okna Palette do okna rozvrhnutia nasledujúce komponenty:

• EditText (políčko na zadávanie textu),
• Spinner (rozbaľovacie menu),
• TextView (text) a
• Button (tlačidlo).

Komponenty zostanú tam, kde ich necháme, aj keď nemajú definované žiadne obmedzenia. Je to tak iba preto, aby bola práca v editore jednoduchšia.

Pokiaľ ale aplikáciu takto, bez nutných obmedzení spustíme, bude výsledkom, že sa všetky vložené komponenty vykreslia v ľavom hornom rohu!

Hoci chýbajúce obmedzenia nespôsobia chybu kompilácie, editor rozloženia nás na problém upozorní a chýbajúce obmedzenia vypíše ako chybu na paneli nástrojov:

Tu sme upozornení na chýbajúce horizontálne aj vertikálne obmedzenia všetkých vložených komponentov. Poďme sa teda na obmedzenie pozrieť.

Obmedzenia

Obmedzením rozumejme najmä prichytenie komponentu k nejakej inej z nejakej jej strany. Ďalšie možnosti si vysvetlíme ďalej. Každé obmedzenie predstavuje spojenie alebo zarovnanie s iným komponentom, nadradeným layoutom alebo neviditeľným vodítkom.

Obmedzeniami (constraints) definujeme pozíciu komponentu. Každý vložený komponent musí mať aspoň jedno horizontálne a jedno vertikálne obmedzenie, ktorými definujeme polohu komponentu v danej osi. Jednoducho komponent k niečomu pripneme.

Vytvorenie obmedzení (constraints)

Obmedzenie môžeme nastaviť tromi spôsobmi:

1. Pridaním potrebného kódu v XML,
2. v Preview myšou,
3. v atribútoch vybrané komponenty.

Všetky tri spôsoby si ukážeme na nastavení obmedzenia prvého zadávacieho políčka našej kalkulačky.

1. Nastavenie obmedzenia v XML

Tento spôsob je najmenej pohodlný. Nasledujúci kód pridá políčku horizontálne obmedzenie tak, že ho prichytí k pravej aj ľavej strane nadradeného objektu (ktorým je ConstraintLayout). Tým, že layout s tlačidlami obmedzíme na ľavú aj pravú stranu layoutu, ho horizontálne vycentrujeme. Vertikálne obmedzenie je potom vytvorené iba prichytením k hornej hrane layoutu:

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

2. Nastavenie obmedzenia v Preview myšou

To isté, čo sme nastavili vyššie, si skúsime nastaviť niekoľkými ťahmi myši v Preview. Ako je naznačené žltou farbou na nasledujúcom obrázku, postupne uchopíme každý príslušný kruhový úchyt na obmedzenie a pretiahneme myšou k okraju layoutu (alebo iné komponenty):

Výsledok bude vyzerať takto:

Možno ste si všimli, že práve editovaný EditText nie je úplne „prilepený“ k okrajom layoutu, ale je tu kúsok medzera. Je to preto, že nadradený layout má nastavený atribút padding.

3. Nastavenie obmedzenia v atribútoch komponentu

Tretím spôsobom nastavenia obmedzenia prvého políčka kalkulačky je označenie príslušného komponentu (v okne Preview alebo v okne Component Tree). Potom v okne Attributes, v ponuke Layout klikneme na tlačidlo + tej strany komponenty, ktoré chceme obmedzenie nastaviť:

Po kliknutí na + je automaticky vytvorené obmedzenie a je nastavený margin (medzera), ktorého veľkosť zodpovedá aktuálnej pozícii komponentu, v ktorej sa nachádzala pred pridaním obmedzenia. Tento margin môžeme samozrejme zmeniť.

V prípade prvého políčka kalkulačky klikneme na ľavé a pravé + a oba postranné marginy nastavíme na 0. Tým je políčko horizontálne vycentrované. Aby bolo políčko roztiahnuté na celú šírku displeja, musíme navyše nastaviť v okne Attributes jeho atribút layout_width na hodnotu 0dp (match constraint). Vertikálne obmedzenie políčka vytvoríme kliknutím na hornú +. Opäť strážime, aby margin bol na hodnote 0, pretože chceme mať prvé políčko "prilepené" úplne hore.

Na nasledujúcom obrázku je spomínané nastavenie parametra layout_width naznačené:

Odstránenie obmedzení

Pojmeme tému komplexne, aby sme s ConstraintLayout vedeli sami pracovať. Nové obmedzenia si teraz môžeme skúsiť zas odstrániť.

Krátko si opäť popíšeme všetky tri možnosti:

1. Úpravou kódu v XML,
2. v Preview myšou,
3. v atribútoch vybrané komponenty.

1. Odstránenie obmedzení v XML

Priamo v XML kóde obmedzení odstránime jednoducho tým, že zmažeme príslušné atribúty. Stačí teda odstrániť (alebo zakomentovať) riadky kódu, ktorý sme predtým pridali.

2. Odstránenie obmedzení v Preview

Tu obmedzenie odstránime označením príslušného obmedzenia a stlačením tlačidla Del na klávesnici. Môžeme tiež nabehnúť myšou na príslušné obmedzenie pri stlačenom klávese Ctrl (čo spôsobí sčervenanie tohto obmedzenia), následným kliknutím na toto obmedzenie ho odstránime:

3. Odstránenie obmedzení v atribútoch komponentu

Myšou nabehneme na miesto podľa nasledujúceho obrázku a po zobrazení krížika klikneme:

Možno ste si všimli, že niekedy je v Preview obmedzení znázornené čiarou a niekedy "pružinkou", spájajúcou dané objekty. Pružinka znázorňuje "protichodné sily", kedy je komponent napr. "priťahovaný" k dvom protiľahlým stenám a tým je centrovaný.

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