I layout Android: tutto ciò che devi sapere

Ciao a tutti e benvenuti a questa lezione sui layout con Android Studio. In questo post, vi mostrerò come creare interfacce utente accattivanti e responsive usando i diversi tipi di layout disponibili in Android. Vedremo esempi pratici per ogni layout e impareremo come utilizzarli insieme per ottenere il massimo risultato.

Cos’è un layout?

Un layout è un contenitore che organizza i componenti grafici (widget) di una schermata, come pulsanti, testi, immagini, ecc. Un layout può contenere altri layout, creando una gerarchia di contenitori. Il layout determina la posizione, la dimensione e l’aspetto dei widget sulla schermata, in base a diversi criteri, come la dimensione dello schermo, l’orientamento del dispositivo, la lingua dell’utente, ecc.

Quali sono i tipi di layout in Android?

In Android, ci sono diversi tipi di layout che si possono usare per creare interfacce utente. Ogni layout ha le sue caratteristiche e il suo scopo. Vediamoli uno per uno:

  • LinearLayout: è il layout più semplice e comune. Consiste in una fila o una colonna di widget, allineati orizzontalmente o verticalmente. Si può impostare la dimensione e il peso di ogni widget, per distribuire lo spazio disponibile.
esempio di LinearLayout
<LinearLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cliccami!" />

</LinearLayout>

n questo esempio, il LinearLayout contiene un solo elemento figlio, ovvero il pulsante. Tuttavia, puoi aggiungere quanti elementi figli desideri, a seconda delle tue esigenze.

Il LinearLayout supporta anche l’attributo android:layout_weight, che consente di assegnare un peso a ciascun elemento figlio. Questo attributo assegna un valore di “importanza” a una vista in termini di quanto spazio occupa sullo schermo. Un valore di peso maggiore consente all’elemento figlio di espandersi e occupare lo spazio rimanente nel layout. Le viste figlie possono specificare un valore di peso, e lo spazio rimanente nel gruppo di visualizzazione viene assegnato alle viste figlie proporzionalmente, in base al loro peso dichiarato. Il peso predefinito è zero.

  • FrameLayout: è un layout che sovrappone i widget uno sull’altro. Il primo widget aggiunto al layout è il più in basso, mentre l’ultimo è il più in alto. Si può usare questo layout per creare effetti di overlay o di trasparenza.
<FrameLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Aggiungi qui i tuoi elementi figli -->

</FrameLayout>

  • TableLayout:

Il TableLayout è un tipo di layout in Android che consente di disporre gli elementi figli in righe e colonne. Puoi utilizzare il TableLayout per creare tabelle o griglie di elementi, come ad esempio una tabella di orari o una griglia di immagini.

Esempio di TableLayout

Per creare un TableLayout in Android, puoi utilizzare il codice seguente:

<TableLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>
        <TextView
            android:text="Riga 1, Colonna 1" />
        <TextView
            android:text="Riga 1, Colonna 2" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="Riga 2, Colonna 1" />
        <TextView
            android:text="Riga 2, Colonna 2" />
    </TableRow>

</TableLayout>

In questo esempio, il TableLayout contiene due righe e due colonne, ciascuna delle quali contiene un TextView. Tuttavia, puoi aggiungere qualsiasi elemento figlio desideri, a seconda delle tue esigenze.

Per utilizzare al meglio il TableLayout puoi utilizzare TableRow :

TableRow è un tipo di vista in Android che consente di definire una riga all’interno di un TableLayout. Ogni TableRow può contenere una o più viste figlie, come ad esempio TextViewImageViewButton, ecc.

Per creare un TableRow in Android, puoi utilizzare il codice seguente:

<TableLayout xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>
        <TextView
            android:text="Riga 1, Colonna 1" />
        <TextView
            android:text="Riga 1, Colonna 2" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="Riga 2, Colonna 1" />
        <TextView
            android:text="Riga 2, Colonna 2" />
    </TableRow>

</TableLayout>

  • ConstraintLayout: è il layout più recente e avanzato in Android. Consente di creare interfacce utente complesse e responsive con poche righe di codice. Si basa sul concetto di vincoli (constraints), che sono delle relazioni tra i widget e il contenitore padre o tra i widget stessi. Si possono creare vincoli orizzontali e verticali, vincoli circolari, vincoli a catena, vincoli a barriera, ecc. Si può usare questo layout con l’editor grafico di Android Studio, che facilita la creazione e la modifica dei vincoli. Puoi anche usare il codice:
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 2"
        app:layout_constraintTop_toBottomOf="@id/textView1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintTop_toBottomOf="@id/textView2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintTop_toBottomOf="@id/textView2"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

n questo esempio, abbiamo creato un layout con due TextView e due Button. Le viste sono posizionate utilizzando le relazioni di vincolo (constraint) tra le viste. Ad esempio, il secondo TextView è posizionato sotto il primo TextView utilizzando la relazione app:layout_constraintTop_toBottomOf="@id/textView1". In questo modo, il secondo TextView è sempre posizionato sotto il primo TextView, indipendentemente dalle dimensioni delle viste.

Come utilizzare i layout insieme?

Una delle caratteristiche più potenti dei layout in Android è la possibilità di annidarli gli uni dentro gli altri, creando una gerarchia di contenitori. Questo consente di combinare le funzionalità dei diversi tipi di layout per ottenere interfacce utente personalizzate e adattabili.

Per esempio, si può usare un LinearLayout come contenitore principale della schermata, e poi inserire al suo interno altri layout, come RelativeLayout, FrameLayout o GridLayout, per organizzare i widget in modo più sofisticato.

Oppure, si può usare un ConstraintLayout come contenitore principale della schermata, e poi inserire al suo interno altri ConstraintLayout o altri tipi di layout, per creare gruppi di widget con vincoli specifici.

L’importante è tenere conto delle prestazioni dell’applicazione e cercare di minimizzare il numero di livelli di annidamento dei layout. Infatti, più livelli ci sono, più tempo ci vuole per misurare e disegnare i widget sulla schermata.

Spero che questa lezione vi sia stata utile e vi abbia dato una panoramica sui layout con Android Studio. Vi invito a sperimentare con i diversi tipi di layout e a creare le vostre interfacce utente originali e funzionali. Alla prossima!

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »