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. También significa que puedes extraer cualquier elemento de tu aplicación que sea común en varios diseños, administrarlos por separado y, luego, incluirlos en cada diseño. Si bien puedes crear componentes de IU individuales escribiendo un elemento View personalizado, puedes hacerlo más fácilmente reutilizando un archivo de diseño.
Crea un diseño reutilizable
Comienza por crear un archivo XML nuevo y definir el diseño que quieres poder reutilizar. 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>
El elemento View raíz debe ser exactamente como deseas que aparezca en cada diseño 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 la etiqueta <include>. Por ejemplo, a continuación, se incluye 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 (cualquiera de los atributos 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>, también debes anular android:layout_height y android:layout_width para que otros atributos de diseño surtan efecto.
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 implementas una vista personalizada extendiendo un ViewGroup.
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.
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 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.