Cómo reutilizar diseños con

Aunque Android ofrece una variedad de widgets para proporcionar elementos interactivos pequeños y reutilizables, es posible que también debas reutilizar componentes más grandes que requieran un diseño especial. Para volver a usar diseños completos de manera eficiente, puedes usar las etiquetas <include/> y <merge/> para incorporar otro diseño dentro del diseño actual.

La reutilización de diseños es particularmente eficiente, ya que permite crear diseños complejos que se pueden volver a usar. Un ejemplo sería un panel de botones sí/no o una barra de progreso personalizada con texto descriptivo. También significa que cualquier elemento de la aplicación que sea común en varios diseños puede extraerse, administrarse por separado y luego incluirse en cada diseño. Entonces, si bien puedes crear componentes de IU individuales escribiendo una View personalizada, puedes hacerlo aún más fácilmente reutilizando un archivo de diseño.

Crea un diseño reutilizable

Si ya sabes cuál el diseño que volverás a usar, crea un archivo XML nuevo y define el diseño. Por ejemplo, a continuación, se incluye un diseño que define una barra de título que se incluirá en todas las actividades (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 View raíz debe ser exactamente como deseas que aparezca en cada diseño en el que agregarás este diseño.

Nota: El atributo tools:showIn del archivo XML anterior es un atributo especial que se quita durante la compilación y solo se usa en el momento del diseño en Android Studio; además, especifica un diseño que incluye este archivo, por lo que puedes obtener una vista previa de este archivo (y editarlo) como aparece mientras está incorporado en un diseño superior.

Usa la etiqueta <include>

Dentro del diseño en el que deseas agregar el componente reutilizable, agrega la etiqueta <include/>. Por ejemplo, a continuación, hay un diseño que incluye la barra de título de arriba:

Este es el archivo de diseño:

    <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>
    

También puedes anular todos los parámetros de diseño (cualquiera de los atributos android:layout_*) de la vista raíz del diseño incluido. Para ello, especifícalos en la etiqueta <include/>. Por ejemplo:

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

Sin embargo, si quieres anular los atributos de diseño con la etiqueta <include>, debes anular android:layout_height y android:layout_width para que se apliquen otros atributos de diseño.

Usa la etiqueta <merge>

La etiqueta <merge /> ayuda a quitar los grupos de vistas redundantes en la jerarquía de vistas cuando se incluye un diseño dentro de otro. Por ejemplo, si el diseño principal es un LinearLayout vertical en el que se pueden reutilizar dos vistas consecutivas en varios diseños, el diseño reutilizable en el que colocas las dos vistas requiere su propia vista raíz. Sin embargo, usar otro LinearLayout como el elemento raíz para el diseño reutilizable generaría un LinearLayout vertical dentro de un LinearLayout vertical. El LinearLayout anidado no tiene otro propósito real que el de ralentizar el rendimiento de la IU.

Para evitar incluir un grupo de vistas tan redundante, puedes utilizar el elemento <merge> como la vista raíz para el diseño reutilizable. Por ejemplo:

    <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>
    

Cuando incluyes este diseño en otro diseño (usando la etiqueta <include/>), el sistema ignora el elemento <merge> y coloca los dos botones directamente en el diseño, en lugar de la etiqueta <include/>.

Para obtener más información relacionada con este tema, consulta Recursos de diseño.