9. diel - Android programovanie - ConstraintLayout - Vytvorenie obmedzenia

V predchádzajúcom kvíze, Kvíz - Úvod do Java Android základov, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnej lekcii sa zoznámime s kontajnerom ConstraintLayout, ktorý je v Android Štúdiu používaný ako predvolený layout k rozloženiu komponentov na aktivite. ConstraintLayout disponuje slušnú 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 projekte SimpleCalc, kde sme vytvárali veľmi jednoduchú kalkulačku. Vzhľad kalkulačky vyzeral takto:

ConstraintLayout

ConstraintLayout umožňuje vytvárať zložitá rozvrhnutie 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 je k sebe prichytíme. Tieto vzťahy definujeme pomocou tzv. Obmedzenia (constraints), viď ďalej.

Vytvorme teraz znovu 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 pozicovanie komponentov našej kalkulačky v kontajneri ConstraintLayout.

V Android Štúdiu 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:

Pridanie komponenty do layoutu

Teraz postupne pretiahneme z okna Palette do okna rozloženia nasledujúce komponenty:

• EditText (políčko pre 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 tomu tak len preto, aby bola práca v editore ľahšie.

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

Hoci chýbajúce obmedzenie nespôsobí chybu kompilácie, editor rozloženie označuje chýbajúce obmedzenia ako chybu na paneli nástrojov:

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

Obmedzenia

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

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

Vytvorenie obmedzenia (constraints)

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

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

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

1. Nastavenie obmedzení v XML

Tento spôsob je najmenej pohodlný. Nasledujúci kód pridá políčku horizontálne obmedzenia tak, že ho prichytia k pravej aj ľavej strane nadradeného objektu (ktorým je ConstraintLayout). Tým, že layout s tlačidlami obmedzíme na ľavú i 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 obmedzení v Preview myší

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 pre 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 obmedzení v atribútov komponenty

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

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

V prípade prvého políčka kalkulačky klikneme na ľavej a pravej + a obaja 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 obmedzenia políčka vytvoríme kliknutím na hornej +. Opäť postrážime, aby margin bol na hodnote 0, pretože chceme mať prvé políčko "prilepené" úplne hore.

Odstránenie obmedzení

Pojmú téma komplexne, aby sme s ConstraintLayout vedeli sami pracovať. Nové obmedzenia si teraz môžeme skúsiť zas odstrániť. Okrem toho, že samozrejme môžeme priamo v XML kóde odstrániť príslušné atribúty, máme tieto ďalšie možnosti odstránenia obmedzenia:

1. V Preview
2. V atribútom vybrané komponenty
3. Odstránenie obmedzenia v Preview

Tu obmedzenie odstránime označením príslušného obmedzenia a stlačením tlačidla Del na klávesnici alebo nabehnutím myši na príslušné obmedzenia pri stlačené klávese Ctrl (čo spôsobí sčervenanie tohto obmedzenia) a kliknutím na toto obmedzenie:

2. Odstránenie obmedzenia v atribút komponenty

Myšou prejdeme 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 obmedzenia znázornené čiarou a niekedy "pružinkou", spájajúcej 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 obmedzenia , si ukážeme druhy obmedzení ConstraintLayout vrátane praktických ukážok použitia.