Costruire un’interfaccia grafica tramite layout in XML per Android
In Android, con il termine layout si identificano tutti le ViewGroup che determinano il posizionamento dei widget sullo schermo. Questo tipo di ViewGroup prende il nome di LayoutManager ed è possibile definire un layout dinamicamente tramite Java che tramite file XML, quest’ultimo è il metodo più utilizzato in quanto rende il codice più mantenibile con il pattern MVC. Negli anni descrivere un’interfaccia grafica nella programmazione web tramite un linguaggio a marcatori e non tramite un linguaggio di programmazione ha fornito ottimi risultati in quanto più facili da leggere, da scrivere e facilmente modificabili nel tempo. Come per le stringhe, anche i layout di un’applicazione devono essere riutilizzabili e devono essere collocati nella cartella res/layout reperibili tramite la classe R (ad es. R.layout.mylayout) da impostare nell’onCreate dell’activity che utilizzerà il layout:
import android.app.Activity;
import android.os.Bundle;
public class XMLLayoutDemo1Activity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
I quattro layout in Android: LinearLayout, RelativeLayout, GridLayout, FrameLayout e TableLayout
In Android esistono differenti tipi di layout messi a disposizione degli sviluppatori:
- LinearLayout: si tratta di uno dei layout più utilizzati in Android è il LinearLayout e viene utilizzato per posizionare i componenti all’interno di una schermata disponendoli orizzontalmente o verticalmente. Contenuto nel pacchetto android.widget.LinearLayout, se il layout scelto è di tipo orizzontale gli elementi saranno affiancati orizzontalmente, al contrario saranno incolonnati verticalmente.
Ecco un esempio di LinearLayout di tipo verticale:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Salva" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Annulla" />
</LinearLayout>Qualora lo spazio richiesto dai componenti risultasse maggiore alla dimensione dello schermo, il sistema tenterà di visualizzare tutti i componenti ridimensionandoli al di sotto delle loro dimensioni ideali. Se ciò non dovesse bastare alcuni componenti non saranno visualizzati.
- RelativeLayout: insieme al LinearLayout, è il tipo di layout più utilizzato in Android. Questo tipo di layout consente di posizionare gli elementi in modo relativo (in base agli altri componenti) senza definire posizioni fisse. In un RelativeLayout (android.widget.RelativeLayout) gli elementi vengono aggiunti nell’applicazione a partire dal punto in alto a sinistra dello schermo ed ogni componente sarà aggiunto nelle sue dimensioni ideali.
Ecco un esempio di RelativeLayout definito in XML:
<RelativeLayout
android:id="@+id/my_linearlayout"
android:layout_width="@dimen/width_size_container"
android:layout_height="@dimen/height_size_container"
android:orientation="vertical"><TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black" /></RelativeLayout>
- GridLayout: utilizza una griglia di celle di uguale dimensione in cui sarà inserito un componente. Il GridLayout è contenuto nel package android.widget.GridLayout.
Ecco un esempio di GridLayout:
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.commonsware.android.gridlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:orientation="horizontal"
app:columnCount="2"><Button
app:layout_columnSpan="2"
app:layout_rowSpan="2"
android:layout_gravity="fill_horizontal"
android:text="@string/my_string_1"/><Button
app:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="@string/my_string_2"/></android.support.v7.widget.GridLayout>
- FrameLayout: ogni widget che viene aggiunto alla schermata viene allineato in alto a sinistra e viene esteso per tutta la dimensione dello schermo. Di conseguenza, solo l’ultimo elemento aggiunto verrà visualizzato dall’utente. Questo layout è contenuto nel pacchetto android.widget.FrameLayout.
<FrameLayout
android:id="@+id/my_framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" /> - TableLayout: è costituito da una griglia di celle di dimensione variabile a differenza del GridLayout in cui la dimensione di ogni cella è fissa. Per poter utilizzare questo tipo di layout bisogna creare degli oggetti TableRow che rappresenta una riga della tabella.
Ecco un esempio di TableLayout con due TableRow per la login:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="top|center_horizontal"
android:shrinkColumns="0"
android:stretchColumns="1">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="fill_horizontal|center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="R.string.nome" />
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="fill_horizontal|center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="R.string.cognome" />
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</TableRow>
</TableLayout>
| Indice | Lezione Precedente – Lezione Successiva |
