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, 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 sí o no o una barra de progreso personalizada con texto descriptivo. Y significa que puedes extraer cualquier elemento de tu aplicación que sea común en varios diseños, administrarlos por separado e incluirlos en cada diseño. Si bien puedes crear componentes de IU individuales si escribes un elemento View personalizado, puedes hacerlo aún más fácilmente reutilizando 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. Por ejemplo, a continuación, se incluye un diseño que define una barra de título que se 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 elemento View raíz debe ser exactamente como deseas que aparezca en cada diseño en el que agregarás este diseño.
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 del 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 atributo android:layout_*) de la vista raíz del diseño incluido. Para ello, especifícalos 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 quieres anular los atributos de diseño con la etiqueta <include>, anula también android:layout_height y android:layout_width para que se apliquen los 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 extiendes un ViewGroup para implementar una vista personalizada.
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 raíz para el diseño reutilizable da como resultado un LinearLayout vertical dentro de un LinearLayout vertical. El LinearLayout anidado no tiene otro 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 en el archivo 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 incluyes este diseño en otro diseño (con 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 sobre <include>, consulta Recurso de diseño.