Lekce 10 - Android programování - ConstraintLayout - Vytvoření omezení

V minulé lekci, Android Programování - Neobjevujte kolo, použijte Gradle, jsme si ukázali práci s balíčkovacím nástrojem Gradle a naprogramovali jednoduchý graf.

V dnešní lekci se seznámíme s kontejnerem ConstraintLayout, který je v Android Studiu používán jako výchozí layout k rozložení komponent na aktivitě. ConstraintLayout disponuje slušnou hromádkou funkcí, které z něj dělají mocného pomocníka při návrhu našich aktivit. My si popíšeme hlavně ty základní.

Aby nechyběla praktická ukázka, ukážeme si vše na vzhledu projektu SimpleCalc, kde jsme vytvářeli velice jednoduchou kalkulačku. Vzhled kalkulačky vypadal takto:

ConstraintLayout

ConstraintLayout umožňuje vytvářet složitá rozvržení grafického uživatelského rozhraní. Tento layout je hodně podobný RelativeLayout v tom, že všechny komponenty jsou rozloženy podle vztahů mezi sebou a/nebo nadřazeným objektem, často tak, že je k sobě přichytíme. Tyto vztahy definujeme pomocí tzv. omezení (constraints), viz dále.

Vytvořme nyní znovu požadovaný vzhled kalkulačky ze základních komponent. Jde skutečně o velice jednoduchý design bez žádných složitých prvků. Ukážeme si při tom další možnosti pozicování komponent naší kalkulačky v kontejneru ConstraintLayout.

V Android Studiu otevřeme soubor activity_main.xml a okno s náhledem přepneme na zobrazení Blueprint, které je pro tuto práci nejvhodnější:

Režim náhledu Blueprint je k sestavování layoutu vhodnější proto, že jsou v něm dobře znázorněny všechny vytvořené vazby a závislosti mezi jednotlivými objekty.

Přidání komponenty do layoutu

Nyní postupně přetáhneme z okna Palette do okna rozvržení následující komponenty:

• EditText (políčko pro zadávání textu),
• Spinner (rozbalovací menu),
• TextView (text) a
• Button (tlačítko).

Komponenty zůstanou tam, kde je necháme, i když nemají definována žádná omezení. Je tomu tak pouze proto, aby byla práce v editoru snadnější.

Pokud ale aplikaci takto bez nutných omezení spustíme, bude výsledkem, že se všechny vložené komponenty vykreslí v levém horním rohu!

Ačkoli chybějící omezení nezpůsobí chybu kompilace, editor rozložení nás na problém upozorní a chybějící omezení vypíše jako chybu na panelu nástrojů:

Zde jsme upozorněni na chybějící horizontální i vertikální omezení všech vložených komponent. Pojďme se tedy na omezení podívat.

Omezení

Omezením rozumějme zejména přichycení komponenty k nějaké jiné z nějaké její strany. Další možnosti si vysvětlíme dále. Každé omezení představuje spojení nebo zarovnání s jinou komponentou, nadřazeným layoutem nebo neviditelným vodítkem.

Omezeními (constraints) definujeme pozici komponenty. Každá vložená komponenta musí mít alespoň jedno horizontální a jedno vertikální omezení, kterými definujeme polohu komponenty v dané ose. Jednoduše komponentu k něčemu připneme.

Vytvoření omezení (constraints)

Omezení můžeme nastavit třemi způsoby:

1. Přidáním potřebného kódu v XML,
2. v Preview myší,
3. v atributech vybrané komponenty.

Všechny tři způsoby si ukážeme na nastavení omezení prvního zadávacího políčka naší kalkulačky.

1. Nastavení omezení v XML

Tento způsob je nejméně pohodlný. Následující kód přidá políčku horizontální omezení tak, že jej přichytí k pravé i levé straně nadřazeného objektu (kterým je ConstraintLayout). Tím, že layout s tlačítky omezíme na levou i pravou stranu layoutu, jej horizontálně vycentrujeme. Vertikální omezení je pak vytvořeno pouze přichycením k horní hraně layoutu:

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

2. Nastavení omezení v Preview myší

To samé, co jsme nastavili výše, si zkusíme nastavit několika tahy myši v Preview. Jak je naznačeno žlutou barvou na následujícím obrázku, postupně uchopíme každý příslušný kruhový úchyt pro omezení a přetáhneme myší k okraji layoutu (nebo jiné komponenty):

Výsledek bude vypadat takto:

Možná jste si všimli, že právě editovaný EditText není úplně "přilepen" k okrajům layoutu, ale je zde kousek mezera. Je to proto, že nadřazený layout má nastaven atribut padding.

3. Nastavení omezení v atributech komponenty

Třetím způsobem nastavení omezení prvního políčka kalkulačky je označení příslušné komponenty (v okně Preview nebo v okně Component Tree). Pak v okně Attributes, v nabídce Layout klikneme na tlačítko + té strany komponenty, které chceme omezení nastavit:

Po kliknutí na + je automaticky vytvořeno omezení a je nastaven margin (mezera), jehož velikost odpovídá aktuální pozici komponenty, ve které se nacházela před přidáním omezení. Tento margin můžeme samozřejmě změnit.

V případě prvního políčka kalkulačky klikneme na levé a pravé + a oba postranní marginy nastavíme na 0. Tím je políčko horizontálně vycentrováno. Aby bylo políčko roztažené na celou šířku displeje, musíme navíc nastavit v okně Attributes jeho atribut layout_width na hodnotu 0dp (match constraint). Vertikální omezení políčka vytvoříme kliknutím na horní +. Opět ohlídáme, aby margin byl na hodnotě 0, protože chceme mít první políčko "přilepené" úplně nahoře.

Na následujícím obrázku je zmíněné nastavení parametru layout_width naznačeno:

Odstranění omezení

Pojměme téma komplexně, abychom s ConstraintLayout uměli sami pracovat. Nová omezení si teď můžeme zkusit zas odstranit.

Krátce si opět popíšeme všechny tři možnosti:

1. Úpravou kódu v XML,
2. v Preview myší,
3. v atributech vybrané komponenty.

1. Odstranění omezení v XML

Přímo v XML kódu omezení odstraníme jednoduše tím, že smažeme příslušné atributy. Stačí tedy odstranit (nebo zakomentovat) řádky kódu, který jsme předtím přidali.

2. Odstranění omezení v Preview

Zde omezení odstraníme označením příslušného omezení a stisknutím tlačítka Del na klávesnici. Můžeme také najet myší na příslušné omezení při stisknuté klávese Ctrl (což způsobí zčervenání tohoto omezení), následným kliknutím na toto omezení jej odstraníme:

3. Odstranění omezení v atributech komponenty

Myší najedeme na místo dle následujícího obrázku a po zobrazení křížku klikneme:

Možná jste si všimli, že někdy je v Preview omezení znázorněno čárou a někdy "pružinkou", spojující dané objekty. Pružinka znázorňuje "protichůdné síly", kdy je komponenta např. "přitahována" ke dvěma protilehlým stěnám a tím je centrována.

V příští lekci, Android programování - ConstraintLayout - Druhy omezení, si ukážeme druhy omezení ConstraintLayout včetně praktických ukázek použití.