Naučte sa vyvíjať aplikácie pre Android za 14 dní – usporiadanie prvkov používateľského rozhrania

Ako na to

21.3.2020

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>

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

Naučte sa vyvíjať aplikácie pre Android za 14 dní – usporiadanie prvkov používateľského rozhrania

Constraint Layout

LinearLayout

RelativeLayout

Grid Layout

Vnorenie kontejnerov

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať

Raspberry Pi Pico – pripojenie OLED displeja a výpis textov

Audio a HiFi – pokročilé testovanie a nastavovanie gramofónu pomocou meracej LP

Ako pridať lacnejšiu smart žiarovku z Lidla do systému Philips Hue