Slevový týden - Květen Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
30 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 7 - Android programování - ConstraintLayout

V minulé lekci, Android programování - První aplikace, návrh kalkulačky, jsme se věnovali návrhu jednoduché kalkulačky.

V dnešní lekci se seznámíme s kontejnerem ConstraintLayout, který je v Android Studiu používán od verze 3.0 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 layoutů. My si popíšeme hlavně ty základní, abychom se hned ze začátku nezasypali přílišnou teorií.

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. Tyto vztahy definujeme pomocí tzv. omezení (constraints), viz dále.

Přidání komponenty do layoutu

Když přetáhneme komponentu z okna Palette do okna rozvržení, zůstane tam, kde ji necháme, i když nemá 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í označuje chybějící omezení jako chybu na panelu nástrojů:

Jsme zde upozorněni na chybějící horizontální i vertikální omezení layoutu s tlačítky kalkulačky.

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.

Chceme-li definovat pozici uživatelské komponenty (pohledu) v ConstraintLayout, např. pozici tlačítka na naší aktivitě, musíme vkládané komponentě přidat 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.

Každé omezení představuje spojení nebo zarovnání s jinou komponentou, nadřazeným layoutem nebo neviditelným vodítkem.

Vytvoření omezení (constraints)

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

  • Přidáním potřebného kódu v XML
  • V Preview myší
  • V Atributech vybrané komponenty

Přidáním potřebného kódu v XML

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

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

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):

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

K nastavování omezení (constraints) se hodí přepnout Preview do režimu Blueprint (na obrázku naznačeno červenou barvou).

V Atributech vybrané komponenty

Třetím způsobem uvedeného nastavení omezení layoutu s tlačítky kalkulačky je označení příslušné komponenty (v okně Preview nebo v okně Component Tree) a v okně Attributes kliknutím na tlačítko + té strany komponenty, které chceme omezení nastavit:

Po kliknutí na + je automaticky vytvořeno omezení a je nastaven nějaký defaultní margin (mezera), který můžeme změnit.

V případě layoutu s tlačítky kalkulačky klikneme na levé a pravé + a oba postranní marginy nastavíme na 0 - tím je layout horizontálně vycentrován. Vertikální omezení layoutu s tlačítky vytvoříme kliknutím na spodní +. Opět ohlídáme, aby automaticky nastavený margin byl na hodnotě 0, protože chceme mít layout s tlačítky "položený" úplně dole. Na následujícím obrázku je již vytvořeno "spojení" layoutu s tlačítky s levou stranou nadřazeného layoutu a margin je nastaven na hodnotu 0.

Odstranění omezení

Omezení můžeme samozřejmě komponentě zas odstranit. Kromě toho, že můžeme přímo v XML kódu odstranit příslušné atributy, máme tyto další možnosti odstranění omezení:

  • V Preview
  • V Atributech vybrané komponenty

V Preview

Zde to provedeme označením příslušného omezení a stisknutím tlačítka Delete na klávesnici nebo najetím myši na příslušné omezení při stisknuté klávese Ctrl (což způsobí zčervenání tohoto omezení) a kliknutím na toto omezení:

V Atributech vybrané 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.

Druhy omezení

Nyní si stručně a pomocí obrázků ukážeme některé základní druhy omezení.

Omezení k nadřazenému objektu

Již známe horizontální/ver­tikální omezení k jedné straně nadřazeného objektu, kterým komponentu jednoduše připneme:

Také víme, že nastavením omezení z obou stran ji vycentrujeme.

Vzájemná omezení mezi komponentami

Komponenta B je na obrázku níže omezena tak, aby byla vždy vpravo od komponenty A. Komponenta C je omezena pod komponentu A. Znázorněná omezení však neřeší zarovnání, takže B se může stále pohybovat nahoru nebo dolů:

Zarovnání okrajů komponent

Na obrázku je levá strana komponenty B zarovnána s levou stranou komponenty A:

Pokud chceme komponenty vzájemně zarovnat na střed, vytvoříme omezení na obou stranách. Zarovnání lze upravit "popotažením" komponenty, což uděláme nastavením mezery. Na následujícím obrázku je komponenta B posunuta o 24dp. Posun je definován parametrem margin:

Můžeme také vybrat všechny komponenty, které chceme zarovnat, a poté kliknout na položku Align na panelu nástrojů a vybrat typ zarovnání:

Zarovnání podle základní linie textu (Baseline)

Komponenty můžeme zarovnat podle textu na nich. Klikneme pravým tlačítkem myši na komponentu B a v rozbaleném menu zvolíme možnost Show Baseline. Poté klikneme na zobrazenou základní linii textu komponenty B a přetáhneme čáru na linii komponenty A:

Omezení na vodítko

Můžeme přidat svislé nebo vodorovné vodítko, ke kterému komponentu omezíme. Toto vodítko nebude pro uživatele aplikace viditelné. Vodítko můžeme umístit do rozvržení na základě jednotek dp nebo procent %, vzhledem k okraji rozvržení.

Pro vytvoření vodící linky klikneme na příslušnou položku (viz následující obrázek) na panelu nástrojů a vybereme jeden ze dvou druhů vodítek:

Vodící linku můžeme různě přesouvat a kliknutím na kružnici na okraji této linky přepínáme režim měření vzdálenosti od levého okraje (dp nebo %):

Omezení na bariéru

Podobně jako vodítko je bariéra neviditelná čára, na kterou můžeme komponenty omezit. Bariéra nemá pevně definovanou pozici. Pozice bariéry se pohybuje na základě pozice komponent v ní obsažených. To se hodí v případě, že chceme omezit komponentu na sadu jiných komponent, nikoli na jednu konkrétní komponentu.

Následující dva obrázky zobrazují komponentu C, která je omezena na pravou stranu bariéry. Bariéra má parametr barrierDirection nastaven na end. Tuto pozici bariéry určuje pravá strana komponenty A nebo komponenty B. Bariéra se tedy pohybuje v závislosti na tom, zda je vzdálenější pravá strana komponenty A nebo komponenty B:

Pro vytvoření bariéry klikneme na příslušnou položku (viz následující obrázek) na panelu nástrojů a vybereme jeden ze dvou typů bariéry:

Dále v okně Component Tree vybereme ty komponenty, které chceme do účinků bariéry zahrnout a přetáhneme je do této bariéry (v Component Tree). Přetažené komponenty nebudou fyzicky přesunuty, pouze se na ně v bariéře vytvoří jakési odkazy. Po tomto kroku můžeme na vytvořenou bariéru vytvářet omezení jiných komponent.

Příště, v lekci Android programování - Implementace Java kódu kalkulačky, se podíváme na implementaci Java kódu kalkulačky.


 

 

Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!