Riutilizza i layout con <include>

Prova la funzionalità Scrivi

Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come utilizzare i layout in Compose.

Layout basati su slot →

Sebbene Android offra una serie di widget per fornire elementi interattivi, riutilizzabili e di piccole dimensioni, potrebbe essere necessario riutilizzare anche componenti più grandi che richiedono un layout speciale. Per riutilizzare in modo efficiente i layout completi, utilizza i tag <include> e <merge> per incorporare un layout in un altro.

In questo modo puoi creare layout complessi, ad esempio un riquadro con pulsanti di risposta sì o no o una barra di avanzamento personalizzata con testo descrittivo. Ciò significa che puoi estrarre gli elementi della tua applicazione comuni a più layout, gestirli separatamente e includerli in ogni layout. Puoi creare singoli componenti dell'interfaccia utente scrivendo un file View personalizzato, ma puoi farlo più facilmente riutilizzando un file di layout.

Creare un layout riutilizzabile

Per iniziare, crea un nuovo file XML e definisci il layout che vuoi riutilizzare. Ad esempio, ecco un layout che definisce una barra del titolo da includere in ogni attività (titlebar.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg"
    tools:showIn="@layout/activity_main" >

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

L'elemento View principale deve corrispondere esattamente a come vuoi che venga visualizzato in ogni layout in cui prevedi di aggiungerlo.

Nota: l'attributo tools:showIn nel file XML precedente è un attributo speciale che viene utilizzato solo in fase di progettazione in Android Studio e viene rimosso durante la compilazione. Specifica un layout che include questo file, in modo da poter visualizzare l'anteprima e modificare questo file così come appare quando è incorporato in un layout principale.

Utilizzare il tag <include>

All'interno del layout in cui vuoi aggiungere il componente riutilizzabile, aggiungi il tag <include>. Ad esempio, di seguito è riportato un layout che include la barra del titolo dell'esempio precedente:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
    ...
</LinearLayout>

Puoi anche sostituire tutti i parametri di layout, ovvero qualsiasi attributo android:layout_*, della vista principale del layout incluso specificandoli nel tag <include>. Ciò è mostrato nell'esempio seguente:

<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>

Tuttavia, se vuoi sostituire gli attributi di layout utilizzando il tag <include>, deve essere sostituita anche la coppia android:layout_height e android:layout_width per applicare gli altri attributi di layout.

Utilizzare il tag <merge>

Il tag <merge> consente di eliminare i gruppi di visualizzazioni ridondanti nella gerarchia delle visualizzazioni quando includi un layout all'interno di un altro. Un caso d'uso di <merge> è quando implementi una visualizzazione personalizzata estendendo un ViewGroup.

Ad esempio, se il layout principale è un LinearLayout verticale in cui due visualizzazioni consecutive possono essere riutilizzate in più layout, il layout riutilizzabile in cui inserisci le due visualizzazioni richiede una propria visualizzazione principale. Tuttavia, l'utilizzo di un altro LinearLayout come elemento principale per il layout riutilizzabile genera un LinearLayout verticale all'interno di un LinearLayout verticale. L'elemento LinearLayout nidificato non ha uno scopo reale e rallenta le prestazioni dell'interfaccia utente.

In alternativa, puoi estendere un LinearLayout per creare una visualizzazione personalizzata e utilizzare un layout XML per descrivere le relative visualizzazioni secondarie. Il tag principale nel file XML è <merge>, anziché LinearLayout, come mostrato nell'esempio seguente:

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

Quando includi questo layout in un altro layout utilizzando il tag <include>, il sistema ignora l'elemento <merge> e posiziona i due pulsanti direttamente nel layout al posto del tag <include>.

Per ulteriori informazioni su <include>, consulta la sezione Risorsa layout.