ViewStub en Android con ejemplo

En Android, ViewStub es una vista invisible de tamaño cero y muy flexible que podemos inflar perezosamente los recursos de diseño en tiempo de ejecución. Es una vista tonta y liviana y tiene dimensión cero. Depende del requerimiento, siempre que lo necesitemos podemos inflar en tiempo de ejecución. Este es un ejemplo clásico para manejar cuando hay que manejar vistas complicadas. Cuando ViewStub se infla, se reemplaza a sí mismo en su vista principal con el recurso de diseño inflado. Su visibilidad existirá en la jerarquía de vistas solo cuando se invoque setVisibility(int) o inflate( ) . La vista inflada se agrega al padre de ViewStub usando el parámetro de diseño. Siempre que haya detalles de elementos, mensajes de deshacer o indicadores de progreso , podemos pensar en ViewStub.Reduce el uso de memoria y acelera el renderizado al cargar las vistas solo cuando se necesitan. Uno puede pensar que se parece a la etiqueta de inclusión, pero no lo es. La etiqueta de inclusión incluye contenido en el archivo XML que está presente en la carpeta de diseño. Por lo tanto, podemos tener XML de encabezado, pie de página, barra izquierda y derecha por separado, pero aún así se incluyen en el XML principal mediante el uso de etiquetas de inclusión. Por otro lado, ViewStub no está incluido, pero se carga directamente cuando se establece como setVisibility(int) (para la opción true) o se invoca inflate().

Métodos importantes

Primero, obtengamos la referencia de ViewStub

ViewStub en XML: 

<ViewStub
    android:id="@+id/viewStubToLearn"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="100dp"
    android:inflatedId="@+id/inflatedviewsub"
    android:layout="@layout/custom_viewstub"
 />

// viewStubToLearn is the id of ViewStub defined in xml
ViewStub simpleViewStub = ((ViewStub) findViewById(R.id.viewStubToLearn));

Atributos de ViewStub

Ejemplo

qué artículo. 

Implementación paso a paso

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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#fff"
    >
 
    <!-- To show the ViewStub -->
    <Button
        android:id="@+id/showButtonForViewStub"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:background="#0f0"
        android:text="Show ViewStub"
        android:textColor="#fff"
        android:textSize="16sp"
        android:textStyle="bold|italic" />
 
    <!-- To hide the ViewStub -->
    <Button
        android:id="@+id/hideButtonForViewStub"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="#f00"
        android:text="Hide ViewStub"
        android:textColor="#fff"
        android:textSize="16sp"
        android:textStyle="bold|italic" />
 
    <!-- ViewStub, its layout is specified
         under layout->custom_viewstub -->
    <ViewStub
        android:id="@+id/viewStubToLearn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:inflatedId="@+id/inflatedviewsub"
        android:layout="@layout/custom_viewstub" />
     
</LinearLayout>

Paso 3: Agrega una imagen a la carpeta dibujable

Vaya a la aplicación > res > carpeta dibujable, y debemos proporcionar las imágenes requeridas. Para diferentes resoluciones, si hay una necesidad de imágenes más grandes o más pequeñas, estará en la carpeta res para diferentes dibujables. Aquí, esta imagen se especifica en ImageView en custom_viewstub.xml . Entonces puede descargar esta imagen y pegarla en la carpeta dibujable.

Paso 4: Cree un nuevo archivo XML de diseño

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > XML > Archivo XML de diseño y nombre el archivo como custom_viewstub . A continuación se muestra el código para el  archivo custom_viewstub.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:src="@drawable/cryptocurrency" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="CRYPTOCURRENCY"
        android:textColor="@color/colorAccent" />
 
</LinearLayout>

Paso 5: 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.app.Activity
import android.os.Bundle
import android.view.View
import android.view.ViewStub
import android.widget.Button
 
class MainActivity : Activity() {
 
    var simpleViewStub: ViewStub? = null
    var showButton: Button? = null
    var hideButton: Button? = null
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // get the reference of ViewStub
        simpleViewStub = findViewById<View>(R.id.viewStubToLearn) as ViewStub
 
        // inflate the layout
        simpleViewStub!!.inflate()
 
        // get the reference of show button
        showButton = findViewById<View>(R.id.showButtonForViewStub) as Button
 
        // get the reference of hide button
        hideButton = findViewById<View>(R.id.hideButtonForViewStub) as Button
 
        // perform click event on show button
        showButton!!.setOnClickListener {
            // set VISIBLE visibility of ViewStub
            simpleViewStub!!.visibility = View.VISIBLE
        }
 
        // perform click event on hide button
        hideButton!!.setOnClickListener {
            // set GONE visibility of ViewStub
            simpleViewStub!!.visibility = View.GONE
        }
    }
}

Ejecutar el proyecto en un emulador

Al ejecutar el proyecto, podemos ver un tipo de salida similar al adjunto en el video. Por lo tanto, ViewStub es una característica agradable en Android y, cuando lo necesitemos, podemos invocar lo que proporciona una enorme reducción del uso de la memoria, pero al mismo tiempo podemos activarlo al inflarlo.