Abbiamo imparato che un’activity è un’entità attraverso cui gli utenti interagiscono con un’applicazione. Tuttavia un’activity di per sé non si visualizza materialmente sullo schermo di un dispositivo, essa consente invece di visualizzare oggetti sullo schermo.
Un’activity è l’unità di base di un’applicazione Android e permette di visualizzare sullo schermo l’interfaccia utente ad essa relativa che può contenere elementi quali pulsanti, etichette, caselle di testo e così via. Tipicamente l’interfaccia utente, come abbiamo visto nelle lezioni precedenti, si definisce in un file XML posizionato nella cartella reslayout del nostro progetto. In fase di esecuzione poi questo file XML viene caricato all’interno dell’evento onCreate della classe correlata alla nostra activity. In fase di compilazione ogni elemento contenuto nel file XML viene compilato nella sua classe grafica Android (GUI).
Un’activity contiene viste (views) e gruppi di viste (ViewGroups). Una vista è un elemento grafico (widget) di un’interfaccia utente che appare su uno schermo. Esempi di viste sono i controlli button, label e textbox. Una vista deriva dalla classe base android.view.View.
Più viste possono essere raggruppate insieme tramite una ViewGroup, uno speciale tipo di vista che fornisce la struttura in base alla quale è possibile ordinare la visualizzazione e la sequenza delle viste. Una ViewGroup deriva dalla classe base android.view.ViewGroup.
I principali tipi di ViewGroup:
- LinearLayout
- AbsoluteLayout
- TableLayout
- RelativeLayout
LinearLayout
Il tipo LinearLayout dispone le viste in una singola colonna o in una singola riga. Il codice XML relativo a questo tipo di ViewGroup contenuto in un file activity_main.xml è simile al seguente
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>In questo codice l’elemento radice è LinearLayout ed esso contiene un elemento TextView al suo interno. L’elemento LinearLayout controlla l’ordine in cui le viste contenute in esso devono apparire.
Ogni View o ViewGroup ha un insieme di attributi, alcuni dei quali sono i seguenti:
layout_width – Specifica la larghezza della View o della ViewGroup
layout_height – Specifica l’altezza della View o della ViewGroup
layout_marginTop – Specifica lo spazio ulteriore a disposizione nella parte superiore della View o della ViewGroup
layout_marginBottom – Specifica lo spazio ulteriore a disposizione nella parte inferiore della View o della ViewGroup
layout_marginLeft – Specifica lo spazio ulteriore a disposizione nella parte sinistra della View o della ViewGroup
layout_marginRight – Specifica lo spazio ulteriore a disposizione nella parte destra della View o della ViewGroup
layout_gravity – Specifica come le viste figlie devono essere posizionate
layout_weight – Specifica quanto spazio ulteriore deve essere riservato alla vista
layout_x – Specifica la coordinata x della View o della ViewGroup
layout_y – Specifica la coordinata y della View o della ViewGroup
Chiaramente alcuni di questi attributi possono essere utilizzati soltanto in determinati Layout e non in altri.
Nel caso del nostro codice XML la larghezza dell’elemento TextView copre l’intera larghezza del proprio contenitore padre (in questo caso tutto lo schermo) perché il suo valore è impostato sulla costante fill_parent. L’altezza invece è impostata sulla costante wrap_content, il che significa che la sua altezza sarà variabile in base al suo contenuto (cioè il testo contenuto in essa).
Sempre nel nostro codice XML di esempio vi faccio notare la presenza dell’elemento orientation, impostato sul valore vertical. Questo indica l’orientazione verticale del layout dell’interfaccia utente.
Consideriamo adesso un layout un po’ più complesso, costituito da tre pulsanti (Button)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="left"
/>
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="center"
/>
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="right"
/>
</LinearLayout>In esso vi faccio notare l’utilizzo dell’elemento layout_gravity che determina il posizionamento dei tre pulsanti
Se a questo codice aggiungiamo anche l’elemento layout_weight con i seguenti valori
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="left"
android:layout_weight="3" />
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="center"
android:layout_weight="2" />
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="right"
android:layout_weight="1" />
</LinearLayout>Il risultato sarà il seguente
In pratica quindi layout_weight serve a specificare in proporzione la porzione di schermo assegnata ad ogni view.
AbsoluteLayout
Il tipo AbsoluteLayout consente di specificare l’esatta posizione degli elementi figli. Consideriamo il seguente codice XML
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<Button
android:layout_width="188dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="126px"
android:layout_y="200px" />
<Button
android:layout_width="113dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="12px"
android:layout_y="300px" />
</AbsoluteLayout>Questo codice si traduce graficamente nel seguente modo
In questo caso i due Button vengono posizionati in base a coordinate specifiche assegnate agli elementi layout_x e layout_y. Tuttavia questa pratica può creare problemi su schermi ad alta risoluzione, determinando sovrapposizioni tra le viste. Per tale motivo l’utilizzo di questa tipologia di layout è stato sconsigliato a partire dalla versione 1.5 di Android.
TableLayout
Il tipo TableLayout raggruppa viste in righe e colonne. In pratica si utilizza l’elemento TableRow per definire una riga di una tabella e ciascuna riga può contenere una o più viste. Ogni vista che viene inserita in una riga forma una cella e la larghezza di ogni colonna è determinata dalla larghezza della cella più larga di quella colonna.
Consideriamo il seguente esempio
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent" >
<TableRow>
<TextView
android:text="Nome:"
android:width ="120dp"
/>
<EditText
android:id="@+id/txtNome"
android:width="200dp" />
</TableRow>
<TableRow>
<TextView
android:text="Cognome:"
/>
<EditText
android:id="@+id/txtCognome"
android:password="true"
/>
</TableRow>
<TableRow>
<TextView />
<CheckBox android:id="@+id/chkStudente"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Studente"
/>
</TableRow>
<TableRow>
<Button
android:id="@+id/buttonIscriviti"
android:text="Iscriviti" />
</TableRow>
</TableLayout>Questo codice corrisponde al seguente layout
Nel precedente codice sono state definite due colonne e quattro righe. Vi faccio notare la definizione di una TextView vuota nella terza riga per far si che il checkbox Studente sia incolonnato a destra.
Potete notare inoltre che in alto e a sinistra del designer sono presenti rispettivamente due e quattro rettangoli verdi che corrispondono al numero di colonne e righe del layout.
RelativeLayout
Questo tipo consente di specificare come posizionare le viste figlie una rispetto all’altra. Consideriamo il seguente codice
<?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:id="@+id/RLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:ignore="TextFields,PxUsage" >
<TextView
android:id="@+id/lblMessaggio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Messaggio"
tools:ignore="HardcodedText" />
<EditText
android:id="@+id/txtMessaggio"
android:layout_width="fill_parent"
android:layout_height="170px"
android:layout_alignLeft="@+id/lblMessaggio"
android:layout_below="@+id/lblMessaggio"
android:layout_centerHorizontal="true"
android:textSize="18sp" />
<Button
android:id="@+id/btnInvia"
android:layout_width="125px"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/txtMessaggio"
android:layout_below="@+id/txtMessaggio"
android:text="Invia"
tools:ignore="HardcodedText" />
<Button
android:id="@+id/btnCancella"
android:layout_width="200px"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtMessaggio"
android:layout_below="@+id/txtMessaggio"
android:text="Cancella"
tools:ignore="HardcodedText" />
</RelativeLayout>Questo codice corrisponde al seguente layout
In questo tipo di layout per ogni vista possono essere valorizzati attributi che specificano la propria posizione rispetto alle altre viste. Questi attributi sono i seguenti:
- layout_alignParentTop
- layout_alignParentLeft
- layout_alignLeft
- layout_alignRight
- layout_below
- layout_CenterHorizontal
I valori dei primi due attributi possono essere true e false, mentre i valori degli altri sono gli ID delle viste a cui fanno riferimento.
