I layout in Android – Lezione 18 di Android

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:

  package it.ioprogrammo.xmllayoutdemo1;
  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);
    }
  }

Android layout

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 PrecedenteLezione Successiva

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *