Dopo la precedente puntata sul linearlayout in cui abbiamo affrontato in modo molto approfondito come creare un layout complesso con LinearLayout, ora proseguiamo il nostro studio con gli altri tipi di layout.
RelativeLayout
Cominciamo perciò a vedere il RelativeLayout che abbiamo già incontrato in precedentaza anche se non lo abbiamo ancora approfondito. Vi faccio notare che anche se l’argomento è quello dei layout, stiamo affrontando anche altri elementi dell’interfaccia. Ad esempio nella prima puntata abbiamo parlato anche dei TextView, ora aggiungeremo i Button e gli EditText. Ora vediamo l’esempio della guida ufficiale, da me arricchito per dare qualche spunto in più. La schermata che vogliamo ottenere è quella qui a lato, e il listato corrispondente è:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10px" >
<TextView android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Scrivi qui"/>
<EditText android:id="@+id/entry" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/label" />
<Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10px" android:text="OK" />
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Cancel" />
<TextView android:id="@+id/label2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Secondo edittext" android:layout_below="@+id/ok" />
<EditText android:id="@+id/entry2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/label2" android:text="..il secondo test" />
<Button android:id="@+id/cancel2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry2" android:layout_alignParentLeft="true" android:text="Cancel 2" />
<Button android:id="@+id/ok2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/cancel2" android:layout_alignTop="@id/cancel2" android:text="OK 2" />
</RelativeLayout>
Ora andiamo ad analizzare il listato. La prima cosa che dovrebbe balzarci all’occhio, è che a gran parte degli elementi è stato attribuito un “id”, ossia un’etichetta identificativa. A cosa serve? Ricordate che nella precedente abbiamo detto che nel relativelayout possiamo disporre i diversi elementi dello schermo in relazione ad altri? Bene, sarà proprio questa etichetta a definire le relazioni con gli altri oggetti. Ognuno ha perciò un proprio “nome” e gli altri possono indicare tale nome per indicare una posizione relativa rispetto ad essi.
TableLayout
Questo layout permette di suddividere l’area a disposizione in righe e colonne.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="0,1">
<TableRow>
<TextView android:text="stringa 1" android:padding="3dip" />
<TextView android:text="stringa 2" android:gravity="right" android:padding="3dip" />
</TableRow>
<TableRow>
<TextView android:text="stringa 3" android:padding="3dip" />
<TextView android:text="stringa 4" android:gravity="right" android:padding="3dip" />
</TableRow>
</TableLayout>
Come vedete l’utilizzo è molto semplice. Viene definito il TableLayout al cui interno sono annidate le TableRow (righe) che a loro volta organizzano il contenuto in colonne.
Rispetto a quanto già sappiamo, troviamo l’attributo stretchColumns del TableLayout che permette di specificare quali colonne sottoporre a stretch, ossia allungare per distribuire il loro contenuto su tutta l’area di schermo disponibile anzichè occupare lo stretto necessario per visualizzare il solo contenuto. Le colonne vanno specificate separandole con una virgola avendo presente che la prima è la colonna numero zero. Per applicare questo parametro a tutte le colonne è possibile specificare l’asterisco * al posto dei numeri delle colonne. Null’altro di nuovo se si esclude l’uso dell’unità di misura pid anzichè px nel padding. Mentre px rappresenta i pixel, pid indica “Density Independent Pixel unit”, un’unità di misura che tiene conto della densità di pixel del monitor a disposizione. Vista la variabilità di monitor per dimensioni, risoluzione e densità di pixel, è impensabile che si possa ottenere un effetto identico in tutti i monitors a disposizione, però l’utilizzo di dip al posto di px è sicuramente preferibile in quanto comunque effettua un aggiustamento in base al monitor disponibile permettendo una più precisa rappresentazione della nostra applicazione.
Ottima l’esposizione e la capacità divulgativa. Un sito da non perdere e da suggerire; un appunto, anche grave, ci sarebbe: scritte bianche su sfondo nero, saranno suggestive ma poco funzionali ed stremamente stancanti. Sul layout sei un maestro, praticalo anche qui…. 😉 . Complimenti
Ti ringrazio per il commento, molto simpatico. Concordo sul fatto che le scritte bianche su sfondo nero sono molto stancanti e poco leggibili. Le avevo scelte perchè il layout “scuro” mi piaceva molto, ma efettivamente è poco funzionale ed avevo già pensato di modificarlo. Provvedo appena ho un attimo. Grazie non solo per i complimentim ma anche per la critica, l’ho molto apprezzata perchè costruttiva.