Lug 072011
 

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. android relativelayoutTralasciamo la riga di intestazione dell’xml e troviamo subito la dichiarazione del relativelayout che si chiude a fine listato. Non c’è nulla di nuovo rispetto a quanto visto sinora, come piccola aggiunta troviamo l’elemento “padding” che permette di descrivere un margine perimetrale, in questo caso di 10 pixel, da usare come “cornice”, nel quale non verranno disegnati altri elementi grafici. Nulla di nuovo per la riga successiva che è un textview. Poi arriva un nuovo elemento, l’EditText che serve appunto ad inserire un elemento che permette l’inserimento di un testo da parte dell’utente tramite tastiera, reale o virtuale che sia. Vi faccio notare il valore di background impostato a @android:drawable/editbox_background. Questa impostazione dice ad android di usare lo standard di sistema impostato anzichè quello della singola applicazione. La cosa più importante è invece l’ultimo parametro, ossia layout_below=”@id/label”. Questa dice di posizionare l’EditText al di sotto (below) dell’elemento ” @id/label che corrisponde al TextView inserito prima. Facile vero? Poi viene un’altro elemento, Button, che corrisponde ad un pulsante cliccabile dall’utente. Vediamo l’introduzione di ayout_marginLeft=”10px” che indica “lascia un margine (margin) vuoto di 10pixel a sinistra (left) e allinea il pulsante al di sotto dell’EditText precedent (below) e allineando i rispettivi margini di destra (layout_alignParentRight). Infatti se osservate la figura, il primo pulsante con la scritta OK si trova al di sotto dell’EditText e allineato su margine destro rispetto a quest’ultimo.Il pulsante successivo, quello con la scritta Cancel, si troverà alla sinistra di OK (layout_toLeftOf) e con margini superiori allineati (layout_alignTop). Una lista più completa delle varie possibilità di allineamento e posizionamento la trovate sulla guida ufficiale a questa pagina. Vi invito a studiare da voi la restante parte del listato in quanto non ci sono novità di rilievo, solo l’allineamento a destra (right) invece che a sinistra per cui nulla di impegnativo.

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.

android tablelayout

Esempio di tablelayout

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.


  2 Responses to “Sviluppare applicazioni android: parte 4 – ancora con i Layout”

  1.  

    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.