ViewSwitcher en Android con ejemplo

Todas las aplicaciones de Android tendrán una función para cambiar diferentes vistas para explicar/promocionar su sitio o producto. La representación visual de un producto mostrando diferentes vistas impresionará fácilmente a los clientes. En este artículo, veamos cómo llevar el «ViewSwitcher» a Android. ViewSwitcher es una subclase de ViewAnimator y se usa para cambiar entre vistas que brindan diferentes vistas a los clientes. Es un elemento del widget de transición que nos ayuda a agregar transiciones en las vistas. Podemos usar eso para animar una vista en la pantalla. ViewSwitcher también cambia sin problemas e incluso entre dos vistas diferentes (es decir , TextView , ImageView, o cualquier diseño) y debido a esta característica, uno puede impresionar a los clientes mostrando TextView, Imageview alternativamente donde sea necesario. En nuestro ejemplo, veamos con ImageView en sí.

Nota importante: ViewSwitcher solo puede tener dos vistas secundarias y solo se muestra una a la vez. Si tiene más de dos vistas secundarias en ViewSwitcher, aparecerá el error java.lang.IllegalStateException de «No se pueden agregar más de 2 vistas a un ViewSwitcher».

Inicialización de ViewSwitcher

// We can initialize ViewSwitcher in the below way , where
// simpleViewSwitcher1
// is the id of ViewSwitcher in xml file. Usually xml file
// name will be
// activity_main but we can have meaningful name.
// let our xml file name be activity_viewswitcher
ViewSwitcher simpleViewSwitcher1 = (ViewSwitcher)findViewById(R.id.simpleViewSwitcher1);

 Veamos los métodos importantes de ViewSwitcher, su funcionalidad y su implementación de código.

Métodos importantes

Métodos generales y su descripción:

Métodos relacionados con la animación: 

Atributos de ViewSwitcher

Al ver los atributos junto con los métodos que ayudarán en el proyecto. 

Podemos establecer un color o un dibujable en el fondo de un fondo:  

<ViewSwitcher
android:id="@+id/simpleViewSwitcher1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp" 
android:background="#0F9D58">
<!-- set 20 dp padding from all the sides of ViewSwitcher
     set GFG specified color in the background of ViewSwitcher -->
 
<!-- Rest of view are here -- >
 
</ViewSwitcher>

Podemos configurar el fondo a través   de la clase ViewSwitcher Java:

// set any color that you want
simpleViewSwitcher1.setBackgroundColor(Color.<Your favorite color>);

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 Java 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">
 
    <!-- ViewSwitcher with two views one is ImageView and other
         is LinearLayout in which we have a ImageView and a TextView -->
    <ViewSwitcher
        android:id="@+id/simpleViewSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0F9D58"
        android:padding="20dp">
 
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/bir" />
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/bird" />
 
        </LinearLayout>
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
 
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/bird" />
 
        </LinearLayout>
 
    </ViewSwitcher>
 
 
    <Button
        android:id="@+id/buttonNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="#005"
        android:text="NEXT"
        android:textColor="#fff"
        android:textStyle="bold" />
 
    <Button
        android:id="@+id/buttonPrevious"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="#005"
        android:text="PREVIOUS"
        android:textColor="#fff"
        android:textStyle="bold" />
 
</LinearLayout>

Paso 3: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del  archivo MainActivity.java . 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.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewSwitcher;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    private ViewSwitcher simpleViewSwitcher;
    Button btnNext, btnPrev;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // get The references of Button and ViewSwitcher
        btnNext = (Button) findViewById(R.id.buttonNext);
        btnPrev = (Button) findViewById(R.id.buttonPrevious);
 
        // get the reference of ViewSwitcher
        simpleViewSwitcher = (ViewSwitcher) findViewById(R.id.simpleViewSwitcher);
         
        // Declare in and out animations and load them using AnimationUtils class
        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
 
        // set the animation type to ViewSwitcher
        simpleViewSwitcher.setInAnimation(in);
        simpleViewSwitcher.setOutAnimation(out);
         
        // ClickListener for NEXT button
        // When clicked on Button ViewSwitcher will switch between views
        // The current view will go out and next view will come in with specified animation
        btnNext.setOnClickListener(new View.OnClickListener() {
 
            public void onClick(View v) {
                // show the next view of ViewSwitcher
                simpleViewSwitcher.showNext();
            }
        });
 
        btnPrev.setOnClickListener(new View.OnClickListener() {
 
            public void onClick(View v) {
                // show the previous view of ViewSwitcher
                simpleViewSwitcher.showPrevious();
            }
        });
    }
}

Producción

Al ejecutar el código de Android en el estudio de Android, podemos obtener el resultado como se muestra en el video adjunto. Esta es una función útil que se utiliza en muchas aplicaciones de Android.