Riutilizza i layout con <include>

Prova la funzionalità Scrivi

Jetpack Compose è il toolkit per l'interfaccia utente consigliato per Android. Scopri come utilizzare i layout in Compose.

Layout basati su slot →

Sebbene Android offra una varietà di widget per fornire piccoli elementi interattivi riutilizzabili, potrebbe anche essere necessario riutilizzare 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. Anche se puoi creare singoli componenti dell'interfaccia utente scrivendo un personalizzato View, 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>

La radice View deve essere esattamente 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 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 in 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 posizioni le due viste richiede una propria vista 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. LinearLayout nidificato non ha alcun scopo reale e rallenta il rendimento 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.