Erabiltzailearen interfaze grafikoa - Layout-ak eta Widget-ak

Erabiltzailearen interfazea edo GUI-a XML lengoaian definitzen den App-aren elementu grafikoa da. Aurretik aipatu bezala, azpimarratzekoa da eclipsek bi aukera eskeintzen dituela GUI-ak diseinatzeko (Ikus I. Ilustrazioa):

• Zuzenean xml kodea idatziz.
• Ikuspegi eta ingurune grafiko batean elementu ezberdinak gehituz, kenduz eta euren propietateak editatuz.

I. Ilustrazioa: GUI-ak diseinatzeko lehioa

GUI-ak, pantailak edota Layout-ak xml kodean idazteak abantaila nabarmen bat du: App-aren logika (.java fitxategiak) eta erabiltzailearekin elkarreragingo duten elementu grafikoak bereiztea. Egunen batean App-aren itxura aldatzea erabakitzen bada soilik alderdi grafikoa, hau da, xml kodean definiturikoa aldatuko da, java edota App-aren logika definitzen duten fitxategiak ukitu gabe.

Orokorrean Android-en SDK-ak bi elementu nagusi eskeintzen ditu GUI-ak sortzeko:

• Widget-ak edo objektu grafikoak: Interfaze grafikoaren oinarrizko elementuak dira: testuak, irudiak, botoiak,...
• Layout-ak: Widget-en edukiontziak dira. Elementu ez-bisualak dira eta widget-en taldekatzea, kokatzea e.a. kontrolatzeko erabiltzen dira.

Jarraian bi elementu hauen ezaugarri nagusien azterketa arin bat burutuko da.

Widget-ak edo objektu grafikoak

• Oinarrizko kontrolak: Gehien erabiltzen diren widget-ak dira eta II. Ilustrazioan ikus daitekeen moduan eclipse-k paleta batean eskeintzen ditu programatzaileak paletetik interfazera elementuak modu errezean arrastratzeko. Hauek dira erabilienak:

II. Ilustrazioa: eclipseko paleta

• Control Button: Testu bat biltzen duen botoia.
• Control ToggleButton: 2 egoera ezberdinetan egon daitekeen botoia, aktibaturik edo desaktibaturik.
• Control ImageButton: Irudi bat biltzen duen botoia.
• Control ImageView: Irudi bat erakusteko elementua.
• Control TextView: Testu bat erakusteko elementua.
• Control EditText: Erabiltzaileak testua idazteko kaxa.
• Control CheckBox: Aukera ezberdinen artean bat markatzeko elementua.
•  Control RadioButton: Aukera ezberdinen artean aukeraketa anitza markatzeko elementua.
• Lista finkoak edo Listview: lista edo zerrenda lerrakorra.
• GridView: datuak sare bidimensional batean erakusteko elementua.

• Menuak 
• Menu nagusia: normalean gailu mugikorrek behealdean izaten duten menu botoiari emandakoan azaltzen den menua.
• Azpimenua: menu nagusi baten arruko azpimenua da.
• Laster-menua: Normalean pantailan pultsazio luze bat egiterakoan agertzen diren menuak dira.

• Widget-ak: Hasierako pantailan informazio eguneratua (eguraldia,...) eskeintzen duten aplikazioei ere deitzen zaie Widget.

Layout-ak

• FrameLayout: elementu guztiak pantailaren ezkerralde goialdean kokatzen ditu bata bestearen aurrean. Ez da oso aukera erabilia. Honako adibidean FrameLayout baten barnean EditText kontrol bat sartu da. Layout-ak pantaila osoa okupatuko du width eta height (zabalera eta altuera) parametroei match parent balorea ematen baitzaie, eta honek bere gurasoaren, hau da, bere goiko edukiontziak uzten dion espazio guztia hartuko duela adierazten du. Era berean EditText elementuak ere pantaila osoa okupatuko du.

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <EditText         android:id="@+id/TxtIzena"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="text" /> 
</FrameLayout>



• LinearLayout: elementuak horizontalki edota bertikalki ezartzen ditu. Kasu honetan mota honetako edukiontziaren arnean EditText bat eta Button bat sartu dira modu bertikalean. Kasu honetan Button elementuari width parametroan wrap content balorea ezarri zaio eta ondorioz bere zabalera bere edukiaren (botoiaren testuak normalean) tamainuak, luzerak definituko du.



<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <EditText         android:id="@+id/TxtIzena"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <Button         android:id="@+id/BtnOnartu"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" /> 
</LinearLayout>



• TableLayout eta GridLayout: elementuak lerro eta zutabeetan lerrokatzen dira. Jarraian erakusten den kodean 3 lerroko taula bat marrazten da; lehenengo bi lerroetan hiru TextView kokatzen dira eta azkenengo lerroan bi, bata bestearen bikoitza layout_span=2 parametroaren ondorioz (oharra: TextView-en testuak harcodeaturik daude eta baliteke pantaila behar bezala ez ikustea; string fitxategiak erabili!). GridLayout-aren ezberdintasuna zuzenean lerro eta zutabe kopurua definitzen direla da android:rowCount eta android:columnCount parametroen bitartez. Horri android:orientation erabiliz orientazioa definitzen badiogu ez dago zertan lerro eta zutabe bakoitza definitzen ibili beharrik.



<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <TableRow>
        <TextView              android:text="Gelaxka 1.1" />
        <TextView              android:text="Gelaxka 1.2" />
        <TextView              android:text="Gelaxka 1.3" />
    </TableRow>
 
    <TableRow>
        <TextView              android:text="Gelaxka 2.1" />
        <TextView              android:text="Gelaxka 2.2" />
        <TextView              android:text="Gelaxka 2.3" />
    </TableRow>
 
    <TableRow>
        <TextView              android:text="Gelaxka 3.1"
             android:layout_span="2" />
        <TextView              android:text="Gelaxka 3.2" />
    </TableRow>
</TableLayout>



• RelativeLayout: elementuen posizioa beste elementu baten arabera kokatzen du. Oso erabilia da aukera hau. Button elementua, EditText-aren azpian kokatu da layout_below-ri EditText-aren id pasa diogulako, eta gainera bere gurasoaren, hau da, RelativeLayout-aren eskubialdean lerrokatuko da layout_alignParentRight-i true balorea eman diogulako. Oso garrantzitsua da edukiontzi hauekin lan egiterakoan widget guztiei euren id-a definitzea android:id="@+id/id_izena" erabiliz.



<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <EditText android:id="@+id/TxtIzena"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:inputType="text" />
 
        <Button android:id="@+id/BtnOnartu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/TxtNombre"
            android:layout_alignParentRight="true" />
</RelativeLayout> 

RelativeLayout-etan komenigarria da honako parametro hauek ezagutzea GUI-a nahi bezala diseinatzeko:


• Beste kontrol edo widget batekiko posizioa definitzeko:

• android:layout_above.
• android:layout_below.
• android:layout_toLeftOf.
• android:layout_toRightOf.
• android:layout_alignLeft.
• android:layout_alignRight.
• android:layout_alignTop.
• android:layout_alignBottom.
• android:layout_alignBaseline.

• Layout gurasoarekiko posizio definitzeko:

• android:layout_alignParentLeft.
• android:layout_alignParentRight.
• android:layout_alignParentTop.
• android:layout_alignParentBottom.
• android:layout_centerHorizontal.
• android:layout_centerVertical.
• android:layout_centerInParent.
 

• Marginak definitzeko aukerak (beste layout motentzat ere balio dute):

• android:layout_margin.
• android:layout_marginBottom.
• android:layout_marginTop.
• android:layout_marginLeft.
• android:layout_marginRight.
 

• Zuriune eta padding aukerak (beste layout motentzat ere balio dute):

• android:padding.
• android:paddingBottom.
• android:paddingTop.
• android:paddingLeft.
• android:paddingRight.


• AbsoluteLayout: elementuen posizioa koordenatu absolutuen arabera ezartzen da.

• TabLayout: Gailu mugikorrek oso tamainu murritza dutenez zenbait kasutan interesgarria litzateke ikuspegia fitxa edo "pestaña"-etan banatzea.

Azpimarratzekoa da eclipsek GUI-aren kokatutako layout eta widget-en eskema bat eskeintzen digula outline izeneko lehioan (Ikus III. Ilustrazioa), normalean eskubialde goialdean kokatzen dena.

III. Ilustrazioa: eclipseko outline-a

- Itzuli aurkibidera -