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

Lekce 10 - Android programování - ConstraintLayout - Druhy omezení

V minulé lekci, Android programování - ConstraintLayout - Vytvoření omezení, jsme si představili ConstraintLayout a ukázali si jak vytvářet a odstraňovat omezení různými způsoby.

V dnešním Java tutoriálu programování pro Android si ukážeme základní druhy omezení ConstraintLayout včetně praktických ukázek použití.

Omezení k nadřazenému objektu

Toto horizontální/ver­tikální omezení již známe. Jednoduše jím komponentu připneme k jedné straně nadřazeného objektu:

Také víme, že nastavením tohoto 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ů a komponenta C se může pohybovat do stran:

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:

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

Zarovnání lze upravit 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 A a v rozbaleném menu zvolíme možnost Show Baseline:

Poté klikneme na zobrazenou základní linii textu komponenty A a přetáhneme čáru na linii komponenty B:

Omezení na vodítko (Guideline)

Do layoutu můžeme přidat pomocné svislé nebo vodorovné vodítko, ke kterému komponentu omezíme. Toto vodítko nebude pro uživatele aplikace viditelné, slouží pouze nám, při vytváření návrhu layoutu. 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 (svislé nebo vodorovné):

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 okraje v dp nebo v %:

Na předchozím obrázku je vidět komponenta A, která má horizontální omezení nastaveno na vodítko a navíc má levý margin 24dp. Použité vodítko je od levého okraje ve vzdálenosti odpovídající 33% celkové šířky dostupného prostoru. Kdykoliv vodítku změníme jeho pozici, bude ho následovat i komponenta A.

Praktická ukázka vodítka

Použití vodítka si ukážeme v praxi. A to tak, že předěláme vzhled naší kalkulačky:

Pokud vzhled z obrázku porovnáte s původním vzhledem kalkulačky, všimnete si čtyř TextView navíc a rozdělení okna aplikace do dvou různě širokých sloupců. Vlevo jsou popisky komponent a vpravo jsou komponenty používané uživatelem. Jediná komponenta, která nerespektuje rozdělení do sloupců, je tlačítko =.

Takového vzhledu snadno dosáhneme právě s pomocí vertikálního vodítka, jehož vzdálenost od levého okraje odpovídá 40 % celkové šířky. Všechny komponenty, kromě tlačítka, mají příslušná horizontální omezení nastavena na vodítko. Vodítko není ničím jiným, než pomocnou záchytnou hranicí, na kterou lze omezovat ostatní komponenty.

Komponenty v levém sloupci mají navíc nastavený pravý margin, proto jsou od vodítka odsazeny směrem vlevo od vodítka. Posouváním pozice vodítka můžeme měnit poměr šířek obou sloupců, přičemž tuto změnu budou kopírovat všechny ty komponenty, které mají na toto vodítko nějaké omezení - které jsou k tomuto vodítku jakkoliv "připoutané".

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


 

Předchozí článek
Android programování - ConstraintLayout - Vytvoření omezení
Všechny články v sekci
Základy vývoje Android aplikací v Javě
Článek pro vás napsal lupa.lupa
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (1)

 

 

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í!