Incluir y combinar etiquetas en Android con ejemplo

Las aplicaciones de Android están creciendo y un aspecto importante es la reutilización . A veces, la complejidad del diseño de la aplicación será mayor y, durante ese tiempo, Android proporcionará funciones reutilizables muy eficientes mediante las etiquetas <include/> y <merge/> . Bajo las etiquetas <merge/>, podemos especificar una parte del diseño que tiene que venir en el diseño principal. Es similar al diseño principal que tiene Button , TextView , etc. Se puede especificar en un archivo XML de convención de nomenclatura de Android significativo. por ejemplo: custom_layout.xml.En el diseño principal, podemos reutilizar custom_layout usando la etiqueta <include/>. La principal ventaja es que muchas páginas de aplicaciones pueden necesitar contenido de diseño personalizado y, cuando sea necesario, se puede incluir fácilmente usando la etiqueta <include/>. Y también en caso de modificaciones, se trata de un cambio de un lugar y, por lo tanto, se evita/reduce la máxima repetición del trabajo. Generalmente se usa en la idea de personalización, reutilización del contenido de la aplicación mediante el uso de etiquetas <include/> y <merge/>.

Incluir etiqueta

Esto se utiliza para incluir los contenidos de contenido reutilizable. Esta es una muy buena idea de compartir el contenido de otro diseño en el diseño principal.

<!-- custom_layout is a separate layout xml file
     which can be shared, reused in many places-->
<include
  android:id="@+id/custom_layout"
  layout="@layout/custom_layout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />

Combinar etiqueta

La etiqueta <merge /> nos ayuda a eliminar grupos de vistas redundantes en nuestra jerarquía de vistas al incluir un diseño dentro de otro. Por lo tanto, en nuestro ejemplo, directamente tenemos elementos de Android como Button e ImageView , ya que se incluirán en la vista principal y tomarán el diseño especificado en el archivo principal, es decir , activity_main.xml (archivo de diseño principal) . 

<merge xmlns:android="http://schemas.android.com/apk/res/android">
 
    <Button
        android:id="@+id/ButtonToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="Button is under merge tag"
        android:textColor="#fff"
        android:textSize="18sp"
        android:textStyle="italic" />
 
    <ImageView
        android:id="@+id/imageViewToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/cryptocurrency" />
 
</merge>

Nota: Podemos encontrar que las etiquetas <include/> y <merge/> se parecen a ViewStub pero no lo son. 

• La etiqueta ViewStub es un poco diferente porque no se incluye directamente y se cargará solo cuando realmente la necesite, es decir, cuando establezca la visibilidad de ViewStub en «verdadero».
• Pero las etiquetas de inclusión y combinación se incluyen y cargan directamente al principio y son principalmente útiles para dividir diseños y reutilizarlos cuando sea necesario.

Atributos de incluir

Ejemplo

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el  archivo activity_main.xml .

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="100dp"
        android:text="Main Layout Text"
        android:textColor="@color/colorAccent"
        android:textSize="20sp" />
 
    <include
        android:id="@+id/custom_layout"
        layout="@layout/custom_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
     
</LinearLayout>

Paso 3: Cree un nuevo archivo de recursos de diseño

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > Archivo de recursos de diseño y nombre el archivo como custom_layout . A continuación se muestra el código para custom_layout.xml y el archivo debe estar presente con los contenidos combinados. 

<merge xmlns:android="http://schemas.android.com/apk/res/android">
 
    <Button
        android:id="@+id/ButtonToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="Button is under merge tag"
        android:textColor="#fff"
        android:textSize="18sp"
        android:textStyle="italic" />
 
    <ImageView
        android:id="@+id/imageViewToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/cryptocurrency" />
 
</merge>

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del  archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ImageView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
     
    var customButton: Button? = null
    var customImageView: ImageView? = null
     
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // As custom layout contents are included, we can refer them as normal way
        // Main advantage lies here only. even this custom_layout can be reusued in different xml
        // and in corresponding activity file, they can be referred and there may be a
        // different functionality can be carried out.
        // get the reference of custom Layout's Button
        customButton = findViewById<View>(R.id.ButtonToInclude) as Button
 
        // get the reference of custom Layout's ImageView
        customImageView = findViewById<View>(R.id.imageViewToInclude) as ImageView
 
        // We have clicked on Custom layout button, though it is in separate xml
        // because of include tag, it is getting focus here and we can do
        // activities as we like
        customButton!!.setOnClickListener {
            Toast.makeText(applicationContext, "We have clicked on Custom layout button", Toast.LENGTH_LONG).show()
        }
    }
}

Ejecutar el código en el emulador

Podemos obtener la salida como se adjunta en el video. Aplique las etiquetas <include/> y <merge/> donde sea necesario y disfrute de la función de reutilización de las aplicaciones de Android.