Riutilizza i layout con <include>

Prova Compose

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

Layout basati sugli slot →

Sebbene Android offra una varietà di widget per fornire elementi interattivi piccoli, riutilizzabili, potresti anche dover riutilizzare componenti più grandi che richiedono un layout speciale. Per riutilizzare in modo efficiente layout completi, utilizza i tag <include> e <merge> per incorporare un layout all'interno di un altro.

In questo modo puoi creare layout complessi, ad esempio un pannello con pulsanti Sì o No o una barra di avanzamento personalizzata con testo descrittivo. Ciò significa che puoi estrarre qualsiasi elemento della tua applicazione comune a più layout, gestirli separatamente e includerli in ogni layout. Sebbene tu possa creare singoli componenti UI scrivendo un View personalizzato, puoi farlo più facilmente riutilizzando un file di layout.

Creare un layout riutilizzabile

Inizia creando un nuovo file XML e definendo il layout che vuoi poter 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>

La radice View deve corrispondere esattamente a come vuoi che venga visualizzata in ogni layout in cui prevedi di aggiungerla.

Nota:l'attributo tools:showIn nel file XML precedente è un attributo speciale 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, ecco 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 eseguire l'override di tutti i parametri di layout, ovvero di tutti gli attributi android:layout_*, della visualizzazione principale del layout incluso specificandoli nel tag <include>. Ciò è mostrato nel seguente esempio:

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

Tuttavia, se vuoi eseguire l'override degli attributi di layout utilizzando il tag <include>, esegui l'override anche di android:layout_height e android:layout_width per fare in modo che gli altri attributi di layout abbiano effetto.

Utilizzare il tag <merge>

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

Ad esempio, se il layout principale è un LinearLayout verticale in cui due viste consecutive possono essere riutilizzate in più layout, il layout riutilizzabile in cui posizioni le due viste richiede una propria vista radice. Tuttavia, l'utilizzo di un altro LinearLayout come radice per il layout riutilizzabile comporta un LinearLayout verticale all'interno di un LinearLayout verticale. Il LinearLayout nidificato non ha uno scopo reale e rallenta le prestazioni della UI.

In alternativa, puoi estendere un LinearLayout per creare una visualizzazione personalizzata e utilizzare un XML di layout per descrivere le relative visualizzazioni secondarie. Il tag principale del 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 saperne di più su <include>, consulta Risorsa di layout.