Reutiliza diseños con <include>

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

Esto te permite crear diseños complejos, como un panel de botones de sí o no, o un progreso personalizado. barra con texto descriptivo. Y significa que puedes extraer cualquier elemento de tu aplicación que son comunes en varios diseños, administrarlos por separado e incluirlos en cada diseño. Mientras que puedes crear componentes de IU individuales escribiendo View, lo puedes hacer más fácilmente si reutilizar un archivo de diseño.

Crea un diseño reutilizable

Para comenzar, crea un archivo en formato XML nuevo y define el diseño que quieras volver a usar. Para ejemplo, aquí hay un diseño que define una barra de título para incluir en cada actividad (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>

El View raíz debe ser exactamente como deseas que aparezca en cada en el que planeas agregar este diseño.

Usa la etiqueta <include>

Dentro del diseño en el que deseas agregar el componente reutilizable, agrega el elemento <include>. Por ejemplo, aquí hay un diseño que incluye la barra de título de en el ejemplo anterior:

<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, cualquier android:layout_*. atributos) de la vista raíz del diseño incluido si los especificas en la Etiqueta <include>. Esto se muestra en el siguiente ejemplo:

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

Sin embargo, si deseas anular los atributos de diseño con la etiqueta <include>, haz lo siguiente: también puedes anular android:layout_height y android:layout_width para que la se aplican 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. Un caso de uso de <merge> es cuando implementar una vista personalizada extendiendo un ViewGroup.

Por ejemplo, si el diseño principal es vertical LinearLayout, en el que dos se pueden reutilizar las vistas consecutivas en varios diseños y, luego, el diseño reutilizable en el que se colocan dos vistas requiere su propia vista raíz. Sin embargo, si usas otro LinearLayout como raíz Para el diseño reutilizable, se genera un LinearLayout vertical dentro de un LinearLayout El elemento LinearLayout anidado no tiene un propósito real y ralentiza el rendimiento de la IU.

En su lugar, puedes extender un LinearLayout para crear una vista personalizada y usar un diseño XML para describir sus vistas secundarias. La etiqueta superior del XML es <merge>, en lugar de LinearLayout, como se muestra en el siguiente 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 incluyas este diseño en otro, usando <include> etiqueta: 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 sobre <include>, consulta Recurso de diseño.