I Layout: TableLayout, FrameLayout e RelativeLayout – Guida Sviluppo App Android

Il TableLayout è un layout molto particolare che permette di organizzare i contenuti come se stessimo lavorando con una tabella. Un esempio di applicazione che potrebbe sfruttare questo tipo di layout può essere offerto da una galleria d’immagini dove si potrebbe pensare di mostrae all’utente una serie di miniature organizzate in maniera ordinata utilizzando un TableLayout e poi ingrandire l’immagine cliccata dall’utente.

I contenuti all’interno di un TableLayout vengono organizzati grazie ad un oggetto TableRow che identifica una riga della tabella. All’interno di questo oggetto dovremo inserire tutti gli elementi che vogliamo mostrare in quella specifica riga.

Mostriamo adesso un esempio chiarificatore andando a creare un TableLayout con quattro righe e quattro colonne. Il codice Java per crearlo è il seguente (anche in questo caso per comodità importiamo andorid.widget.*):

TableLayout tableLayout = new TableLayout(this); 
tableLayout.setGravity(Gravity.TOP); 

int count=0;
for (int i = 0; i < 4; i++) {
  TableRow tableRow = new TableRow(this); 
  tableRow.setGravity(Gravity.CENTER);
  for (int j = 0; j < 4; j++) { 
    count++;
    TextView testoCella = new TextView(this); 
    testoCella.setText("cella "+ count); 
    testoCella.setPadding(10, 10, 10, 10);
    tableRow.addView(testoCella);
  }
  tableLayout.addView(tableRow);
} 
        
setContentView(tableLayout);

Andiamo adesso a fare un’analisi rigorosa del codice. Come prima cosa viene creato un oggetto di tipo TableLayout che viene posizionato nella parte alta dello schermo. La costruzione del layout vera e propria viene eseguita per mezzo di due for annidati. Nel primo for dichiariamo un oggetto di tipo tableRow e settiamo la proprietà gravity per centrare il contenuto all’interno dell’oggetto. Ad ogni iterazione del secondo for andiamo a riempire la tabeRow con una TextView (utilizziamo la variabile count incrementata ad ogni iterazione), poi applichiamo un padding di 10 pixel dai quattro bordi della cella ed infine associamo la TextView alla TableRow creata nel for primario. Al termine del primo for aggiungiamo la TableRow (contenente tutte e quattro le nostre TextView create col ciclo annidiato) al TableLayout. Infine, con il solito comando setContentView, andiamo ad associare il TableLayout creato alla finestra della nostra activity

Il risultato finale è mostrato nello screenshot seguente:

Oltre ai due Layout visti precedentemente ne esistono altri due di più semplice utilizzo: FrameLayout e RelativeLayout. Il primo è un layout elementare infatti può contenere un solo elemento e lo estende per tutta la grandezza disponibile partendo dal punto in alto a sinistra dello schermo. Il secondo invece posiziona l’elemento nella finestra con le sue dimensioni originali e dunque senza effettuare alcun ridimensionamento.

Ovviamente, in una finestra è possibile utilizzare contemporaneamente più tipi di layout, ricordandoci però di inglobarli poi in un unico layout che verrà passato come argomento al metodo setContentView. Un esempio di quanto detto è mostrato nel codice seguente:

LinearLayout linearLayout1 = new LinearLayout(this);
//Codice relativo all'inserimento di elementi per questo layout
TableLayout tableLayout = new TableLayout(this);
//Codice relativo all'inserimento di elementi per questo layout

LinearLayout linearLayoutPrimario = new LinearLayout(this);
linearLayoutPrimario.setOrientation(LinearLayout.VERTICAL);
linearLayoutPrimario.addView(linearLayout1);
linearLayoutPrimario.addView(tableLayout);

setContentView(linearLayoutPrimario);