Reutilizar diseños con include

[vc_row][vc_column][vc_column_text]

Reutilizar diseños con <include/>

Aunque Android proporciona una variedad de widgets que proporcionan pequeños y reutilizables elementos interactivos, en ocasiones se requiere reutilizar grandes componentes que requieren de un diseño especial. Para reutilizar diseños en forma eficiente, puede utilizar las etiquetas <include/> y <merge/> para agregar un layout dentro del actual.

Reutilizar layouts es particularmente poderoso desde que permite crear diseños complejos y reutilizarlos. Por ejemplo, un panel de botones yes/no, una barra de progreso personalizada con un texto. Esto también significa que cualquier elemento de su aplicación que sea común a múltiples pantallas se puede extraer, administrar en forma separada, y luego incluirla en cada diseño. Entonces mientras creas componentes individuales de interface de usuario escribiendo un View personalizado, lo puedes hacer más sencillo reutilizando archivos de layout.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Creación de un diseño reutilizable

Si conoces el diseño que quieres reutilizar, debes crear un nuevo archivo XML y definir el layout. Por ejemplo, a continuación un layout que define una barra de titulo a ser incluida en cada activity (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>

<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 raíz del View debe ser tal cual quiere que aparezca en los demás diseños.

Note: El atributo tools:showIn en el XML es un atributo especial que se elimina durante la compilación y se usa solo en tiempo de diseño en Android Studio; específica un diseño que incluya este archivo, por lo que puede pre-visualizar (y editar) este archivo mientras aparece incrustado en un diseño principal.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Uso de la etiqueta <include>

Dentro del diseño en el cual quieres incluir un componente reutilizable, agregar la etiqueta <include/>. Por ejemplo, a continuación un diseño que incluye el titulo de la barra:

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

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

<TextView android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

android:padding="10dp" />

...

</LinearLayout>

También se pueden sobre escribir los parámetros del diseño del include. Por ejemplo:

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

<include android:id="@+id/news_title"

android:layout_width="match_parent"

android:layout_height="match_parent"

layout="@layout/title"/>

Sin embargo, si desea sobre escribir los atributos de diseño con la etiqueta <include>, debe sobre escribir tanto android:layout_height como android:layout_width para que otros atributos de diseño surtan efecto.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Uso de la etiqueta <merge/>

La etiqueta <merge/> ayuda a eliminar grupos redundantes en su jerarquía cuando incluye un layout dentro de otro. Por ejemplo, si el layout principal es un LinearLayout vertical en el cual dos vistas pueden reutilizarse en múltiples diseños, entonce el diseño reutilizable en el que coloca las dos vistas requiere su propia vista de raíz. Sin embargo, el uso de otro LinearLayout como raíz para el diseño reutilizable daría como resultado un LinearLayout vertical dentro de un LineraLayout vertical. El LinearLayout anidado no tiene otra finalidad que ralentizar el rendimiento del la interface de usuario.

Para evitar incluir un grupo de vistas redundante, puede utilizar el elemento <merge> como 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>

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

Ahora, cuando incluye 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 />.

Esta página se encuentra basada en Re-using Layouts with <include/>[/vc_column_text][/vc_column][/vc_row]

Facebook

Twitter