SAMSUNG_06202 M SAMSUNG_06202 M SAMSUNG_06202 M Advertisement

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

0

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 

Luboslav Lacko

Všetky autorove články
Android vývoja android aplikácie Android Studio

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať