Prvky používateľského rozhrania nemajú v mobilných aplikáciách pevné, ale flexibilné rozmiestnenie, takže pri zmene veľkosti okna aplikácie, prípadne pri zmene orientácie „na výšku“ verzus „na šírku“ sa vedieť flexibilne zmeniť svoje usporiadanie. Po príklad nemusíte chodiť ďaleko, stačí spustiť aplikáciu elektronickej pošty a následne zmeniť orientáciu smartfónu.
Každý prvok v používateľskom rozhraní Android aplikácie je podtriedou triedy View, presnejšie android.view.View a zaberá v používateľskom rozhraní zodpovedajúcu obdĺžnikovú plochu. Prvok je taktiež zodpovedný za to, čo je v tomto obdĺžniku zobrazené a taktiež je zodpovedný za to aby adekvátne reagoval na udalosti, ku ktorým dochádza v rámci tejto časti obrazovky, napríklad na dotykové udalosti. Obrazovka používateľského rozhrania sa skladá z hierarchie prvkov View . Na najvyššej úrovni hierarchie je koreňový element a podriadené, alebo v tomto prípade je lepší výraz vnorené prvky sú umiestnené na nižších vetvách hierarchického stromu.
Na definovanie rozmiestnenie prvkov používateľského rozhrania slúžia takzvané vizuálne kontejnery, v originálnej terminológii Layouts. Sú odvodené od triedy ViewGroup. Implicitne je po vytvorení aplikácie s hlavnou aktivitou typu Empty, či Basic použitý kontejner Constraint Layout. Budeme uvádzať kompletný XML kód návrhového rozhrania, takže si môžete všetky príklady jednoducho vyskúšať v Android Studiu. Vytvorte si projekt, ktorý bude mať hlavnú aktivitu typu Empty Activity.
Constraint Layout
Prvky používateľského rozhrania majú určenú pozíciu vzhľadom k okrajom okna používateľského rozhrania, alebo voči iným prvkom. Najlepšie to pochopíte na ukážke. Po vytvorení projektu typu Empty Activity bude používateľské rozhranie tvoriť len statický text Hello World!. Pridajte niekam na plochu ďalší prvok TextView a zmeňte textový reťazec napríklad na „Môj text“. Následne v pravom okne Constraint Widget kliknete na ľavú a hornú ikonku „+“, čím definujete vzdialenosť od ľavého a horného okraja displeja.

Následne sa ikonou v pravom hornom rohu prepnite do módu kde sa zobrazí XML kód aj návrhové zobrazenie

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="98dp"
android:layout_marginTop="152dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Poloha vami pridaného prvku je daná kódom ktorý definuje vzdialenosť prvku od ľavého a horného okraja zobrazovaného okna
android:layout_marginStart="98dp"
android:layout_marginTop="152dp"
Tomuto kontejneru sa budeme podrobnejšie venovať neskôr. Ak použijete kontextové menu na plochu aplikáciie Convert View, môžete zmeniť hlavný vizuálny kontejner za iný typ. Zmeňte typ kontejnera na Linear Layout a všimnite si ako sa preusporiadali prvky. Vymažte obidva prvky Text View a vložte tak kód z ďalšej state
LinearLayout
Umožňuje usporiadať vnorené prvky (views) horizontálne do jedného riadku, alebo vertikálne do stĺpca. Kľúčové parametre pre LinearLayout sú
- orientation – smer usporiadania vnorených prvkov
- layout_gravity - takzvané ťažisko vizuálneho kontejnera, ktoré definuje centrálny bod zarovnania vnorených view.
- Layout_weight - priorita vnoreného view v rámci layoutu. Čím vyššia hodnota, tým vyššia priorita. Ak máte v rámci layoutu tri prvky, pričom dva z nich majú nastavený parameter weight na 0 a tretí na hodnotu 1 tak dva prvky s nižšou prioritou zaberú priestor daný ich obsahom a tretí prvok s vyššou prioritou vyplní zvyšok plochu layoutu.
V nasledujúcom ilustračnom príklade je používateľské rozhranie využívajúce LinearLayout s vertikálnou orientáciou pozostávajúce z troch tlačidiel. Prvé a tretie nemá nastavený parameter weight, čo v praxi znamená, že je implicitne nastavený na hodnotu 0. Stredné tlačidlo má nastavený parameter weight na hodnotu 1, takže má vyššiu prioritu a zaberie na výšku zvyšnú plochu. Parameter gravity je nastavený striedavo na hodnoty „left“ a „right“
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Button1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Button2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Button3" />
</LinearLayout>

RelativeLayout
Tento kontejner umožňuje definovanie vzájomných pozičných vzťahov nielen medzi jednotlivými vizuálnymi prvkami používateľského rozhrania, ale aj voči rodičovskému layoutu. Aby bolo možné definovať vzájomné väzby, každý prvok musí mať jednoznačný identifikátor – atribút id.
Príklady možnosti definovania polohy:
- layout_above – voči prvku so zadaným ID
- layout_alignLeft – voči prvku so zadaným ID
- layout_alignParentLeft – true/false
- layout_centerHorizontal – true/false
- layout_toLeftOf - voči prvku so zadaným ID
Prvky sú implicitne umiestňované do ľavého horného rohu
V ilustračnom príklade ukážeme najskôr určenie polohy views voči rodičovskému layoutu.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@color/green"
android:text="layout_centerInParent" />
<TextView
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:background="@color/red"
android:text="layout_centerHorizontal" />
<TextView
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@color/orange"
android:text="alignParentBottom + centerHorizontal" />
</RelativeLayout>
Do súboru colors.xml v zložke res/values je potrebné doplniť definície farieb
<resources>
<color name="red">#ffff0000</color>
<color name="green">#ff00ff00</color>
<color name="blue">#ff0000ff</color>
<color name="gray">#ff808080</color>
<color name="black">#ff000000</color>
<color name="white">#ffffffff</color>
<color name="magenta">#ffff00ff</color>
<color name="orange">#ffffa500</color>
<color name="transparent">#00000000</color>
</resources>

Pomocou atribútov
- android:layout_alignLeft
- android:layout_alignTop
- android:layout_alignRight
- android:layout_alignBottom
- android:layout_toLeftOf
- android:layout_above
- android:layout_toRightOf
- android:layout_below
môžete definovať pozície prvkov voči iným prvkom. V nasledujúcom príklade sme jeden prvok ukotvili voči rodičovskému view a druhé dva prvky sú ukotvení relatívne voči tomuto prvku
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/zakladny"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@color/orange"
android:text="Zakladny"
<TextView
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_below="@id/zakladny"
android:background="@color/red"
android:text="below" />
<TextView
android:layout_width="90dp"
android:layout_height="150dp"
android:layout_alignBottom="@id/zakladny"
android:layout_toEndOf="@id/zakladny"
android:background="@color/green"
android:text="toEndOf\nalignBottom" />
</RelativeLayout>

Relatívne layouty sú veľmi flexibilné, ale iba v prípade ak definujete medzi prvkami len minimálny počet väzieb. V opačnom prípade sa stáva návrh neprehľadný a vzniknú takzvané kruhové väzby a rozpory, napríklad medzi definovaním rozmerov prvkov a okrajov, vzhľadom k rozmeru rodičovského layoutu, ktorý zaberá celú šírku obrazovky. Ak sa trebárs súčet šírky prvku a jeho ľavého a pravého okraja nerovná šírke rodičovského kontejnera nastane problém.
Grid Layout
Ako vyplýva z názvu, Grid je matica prvkov, pričom vývojár má plnú kontrolu nad tým, ako sa tieto prvky zobrazia. Pozícia prvku sa definuje pomocou atribútov layout_width a layout_height. Bunkám je možné nastavovať parametre android:layout_columnSpan a android:layout_rowSpan, ktoré definujú cez koľko buniek tabuľky má byť prvok roztiahnutý vo vodorovnao, alebo zvislom smere.
V príklade je použitý GridLayout na rozmiestnenie prvkov jednoduchej aktivity – formulára na zadanie mana a hesla. Aj v tomto kóde je text je vložený priamo a nie prostredníctvom resourcov ako v reálnych aplikáciách
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnOrderPreserved="false"
android:columnCount="4"
tools:context=".MainActivity">
<TextView
android:text="Registrácia"
android:textSize="32sp"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"/>
<TextView
android:text="Prihláste sa na odber našich noviniek:"
android:textSize="16dip"
android:layout_columnSpan="4"
android:layout_gravity="start"/>
<TextView
android:text="Email:"
android:layout_gravity="end"/>
<EditText
android:ems="10"/>
<TextView
android:text="Heslo:"
android:layout_column="0"
android:layout_gravity="end"/>
<EditText
android:ems="8"/>
<Space
android:layout_row="4"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill"/>
<Button
android:text="Pokračuj"
android:layout_row="5"
android:layout_column="3"/>
</GridLayout>

Vnorenie kontejnerov
V ďalšom príklade je kombinácia dvoch vnorených objektov LinearLayout, ktoré sú zapuzdrené v kontejneri rovnakého typu. Úlohou vonkajšieho kontejnera je usporiadať prvky vertikálne. Vnorený kontejner LinearLayout udržiava tri tlačidlá vo vodorovnej polohe. Ďalší vnorený kontejner udržiava dva textové polia vertikálne.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:text="B1"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<Button
android:text="B2"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<Button
android:text="B3"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="Text 1" android:textSize="15pt"
android:background="@color/red"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="Text 2" android:textSize="15pt"
android:background="@color/green"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

Prehľad dielov seriálu
1 deň – Prvá aplikácia
2 deň – Možnosti emulátorov
3 deň - Zorientujte sa v projekte aplikácie
4 deň – Princípy dizajnu a škálovania
Zobrazit Galériu