ViewFlipper en Android con Kotlin

View Flipper es un componente de interfaz de usuario en Android que se usa para voltear la vista dentro de la pantalla en la aplicación de Android. La clase View Flipper es una extensión de la clase ViewAnimator. Con la ayuda de esto, simplemente podemos cambiar las vistas. En este artículo, veremos cómo podemos usar ViewFlipper en aplicaciones de Android usando Kotlin. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Nota : Consulte este artículo para realizar la misma operación en Java: ¿ Cómo agregar ViewFlipper en Android en Java?

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

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: agregar imágenes a la carpeta dibujable

Vaya a app > res > drawable y agregue imágenes en esa carpeta. Puede consultar este artículo ¿Cómo agregar una imagen a una carpeta dibujable en Android Studio?

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">
 
    <!--on below line we are creating our view flipper-->
    <ViewFlipper
        android:id="@+id/idViewFlipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idLLBtn"
        android:inAnimation="@android:anim/slide_out_right"
        android:outAnimation="@android:anim/slide_in_left">
 
        <!--on below line we are creating an imageview-->
        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:padding="10dp"
            android:src="@drawable/android" />
 
        <!--on below line we are creating a simple text view-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:padding="10dp"
            android:text="Welcome to Android App Development Course"
            android:textAlignment="center"
            android:textColor="@color/purple_200"
            android:textSize="18sp"
            android:textStyle="bold" />
 
        <!--on below line we are creating a simple button-->
        <Button
            android:id="@+id/idBtnViewCourse"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:padding="4dp"
            android:text="View Course"
            android:textAllCaps="false" />
 
    </ViewFlipper>
 
    <!--on below line we are simply creating a
        new linear layout for displaying our two buttons-->
    <LinearLayout
        android:id="@+id/idLLBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:padding="4dp"
        android:weightSum="4">
 
        <!--creating a button for going to previous screen-->
        <Button
            android:id="@+id/idBtnPrev"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="Previous"
            android:textAllCaps="false" />
 
        <!--adding view to add space between two buttons-->
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="2" />
 
        <!--creating a button to move next screen-->
        <Button
            android:id="@+id/idBtnNext"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="Next"
            android:textAllCaps="false" />
 
    </LinearLayout>
 
</RelativeLayout>

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.

package com.gtappdevelopers.kotlingfgproject
 
import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.widget.Button
import android.widget.ViewFlipper
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
    // on below line we are creating variables
    // for view flipper and our buttons
    lateinit var viewFlipper: ViewFlipper
    lateinit var prevBtn: Button
    lateinit var nextBtn: Button
    lateinit var visitCourseBtn: Button
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // initializing variables of view flipper
        // and button with their ids.
        viewFlipper = findViewById(R.id.idViewFlipper)
        prevBtn = findViewById(R.id.idBtnPrev)
        nextBtn = findViewById(R.id.idBtnNext)
        visitCourseBtn = findViewById(R.id.idBtnViewCourse)
 
        // on below line adding on click listener
        // for our visit course button.
        visitCourseBtn.setOnClickListener {
            // on below line we are creating intent
            // for opening a new course in chrome tab.
            val openCourse = Intent(android.content.Intent.ACTION_VIEW)
            // on below line we are setting the
            // url which we have to open.
            openCourse.data = Uri.parse("https://www.geeksforgeeks.org/android-tutorial/")
            // on below line we are calling start
            // activity to start a new activity.
            startActivity(openCourse)
        }
        // adding on click listener
        // for our previous button.
        prevBtn.setOnClickListener {
            // on below line we are simply calling
            // view flipper to show previous screen.
            viewFlipper.showPrevious()
        }
 
        // adding on click listener
        // for our next button.
        nextBtn.setOnClickListener {
            // on below line we are simply calling
            // view flipper to show next screen.
            viewFlipper.showNext()
        }
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: