Riutilizza i layout con <include>

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

Questo ti consente di creare layout complessi, ad esempio un riquadro con pulsanti sì o no oppure una barra di avanzamento personalizzata con testo descrittivo. Ciò significa che puoi estrarre tutti gli elementi dell'applicazione comuni a più layout, gestirli separatamente e includerli in ogni layout. Sebbene sia possibile creare singoli componenti dell'interfaccia utente scrivendo un View personalizzato, è possibile 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 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>

Il View principale deve essere esattamente come vuoi che venga visualizzato in ogni layout a cui prevedi di aggiungere questo layout.

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 sostituire tutti i parametri di layout (qualsiasi attributo android:layout_*) della vista principale del layout incluso specificandoli nel tag <include>. Questo è quanto 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 eseguire l'override degli attributi di layout utilizzando il tag <include>, esegui anche l'override di android:layout_height e android:layout_width per rendere effettivi 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> 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 la propria vista principale. Tuttavia, l'utilizzo di un altro LinearLayout come radice per il layout riutilizzabile genera un LinearLayout verticale all'interno di un LinearLayout verticale. La proprietà LinearLayout nidificata non ha uno scopo reale e rallenta le prestazioni della UI.

Puoi invece estendere LinearLayout per creare una visualizzazione personalizzata e utilizzare un XML di layout per descriverne le 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 maggiori informazioni su <include>, consulta Risorsa layout.