Image Switcher en Kotlin

Android ImageSwitcher es un widget de interfaz de usuario que proporciona un efecto de animación de transición suave a las imágenes mientras cambia entre ellas para mostrarlas en la vista. 

ImageSwitcher es una subclase de View Switcher que se utiliza para animar una imagen y mostrar la siguiente.
En general, usamos ImageSwitcher de dos maneras, manualmente en el diseño XML y mediante programación en el archivo Kotlin.

Deberíamos definir un componente XML para usar ImageSwitcher en nuestra aplicación de Android. 

<ImageSwitcher android:id="@+id/imgSw"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</ImageSwitcher>

Primero creamos un nuevo proyecto siguiendo los siguientes pasos: 

1. Haga clic en Archivo , luego en Nuevo => Nuevo proyecto .
2. Después de eso, incluya el soporte de Kotlin y haga clic en siguiente.
3. Seleccione el SDK mínimo según su conveniencia y haga clic en el botón siguiente .
4. Luego seleccione la actividad vacía => siguiente => finalizar .

Diferentes atributos del widget ImageSwitcher

Modificar archivo activity_main.xml

En este archivo, usamos el diseño de restricciones con ImageSwitcher y Buttons.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:id="@+id/constraint_layout">
  
   <ImageSwitcher
       android:id="@+id/imgSw"
       android:layout_width="match_parent"
       android:layout_height="250dp"
       android:layout_marginStart="8dp"
       android:layout_marginTop="8dp"
       android:layout_marginEnd="8dp"
       android:layout_marginBottom="36dp"
       app:layout_constraintBottom_toTopOf="@+id/prev"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
  
   <Button
       android:id="@+id/prev"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginStart="36dp"
       android:layout_marginTop="36dp"
       android:text="@string/prev"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/imgSw" />
  
   <Button
       android:id="@+id/next"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="36dp"
       android:layout_marginEnd="36dp"
       android:text="@string/next"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="1.0"
       app:layout_constraintStart_toEndOf="@+id/prev"
       app:layout_constraintTop_toBottomOf="@+id/imgSw" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Actualizar el archivo strings.xml

Aquí, actualizamos el nombre de la aplicación usando la etiqueta de string. 

<resources>
   <string name="app_name">ImageSwitcherInKotlin</string>
   <string name="next">Next</string>
   <string name="prev">Prev</string>
</resources>

Diferentes métodos del widget ImageSwitcher

Acceda a ImageSwitcher en el archivo MainActivity.kt

Primero, declaramos una array de flores que contiene el recurso de las imágenes utilizadas para ImageView. 

private val flowers = intArrayOf(R.drawable.flower1,
       R.drawable.flower2, R.drawable.flower4)

luego, accedemos a ImageSwitcher desde el diseño XML y configuramos ImageView para mostrar la imagen. 

val imgSwitcher = findViewById<ImageSwitcher>(R.id.imgSw)
imgSwitcher?.setFactory({
           val imgView = ImageView(applicationContext)
           imgView.scaleType = ImageView.ScaleType.FIT_CENTER
           imgView.setPadding(8, 8, 8, 8)
           imgView
           })

Además, utilizaremos uno de los métodos anteriores para ImageSwitcher. 

imgSwitcher?.setImageResource(flowers[index])

package com.geeksforgeeks.myfirstkotlinapp
  
import androidx.appcompat.app.AppCompatActivity
  
import android.os.Bundle
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageSwitcher
import android.widget.ImageView
  
class MainActivity : AppCompatActivity() {
  
   private val flowers = intArrayOf(R.drawable.flower1,
       R.drawable.flower2, R.drawable.flower4)
   private var index = 0
  
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
  
       // access the ImageSwitcher
       val imgSwitcher = findViewById<ImageSwitcher>(R.id.imgSw)
  
       imgSwitcher?.setFactory({
           val imgView = ImageView(applicationContext)
           imgView.scaleType = ImageView.ScaleType.FIT_CENTER
           imgView.setPadding(8, 8, 8, 8)
           imgView
           })
  
        // set the method and pass array as a parameter
        imgSwitcher?.setImageResource(flowers[index])
  
        val imgIn = AnimationUtils.loadAnimation(
           this, android.R.anim.slide_in_left)
        imgSwitcher?.inAnimation = imgIn
  
        val imgOut = AnimationUtils.loadAnimation(
           this, android.R.anim.slide_out_right)
        imgSwitcher?.outAnimation = imgOut
  
        // previous button functionality
        val prev = findViewById<Button>(R.id.prev)
        prev.setOnClickListener {
           index = if (index - 1 >= 0) index - 1 else 2
           imgSwitcher?.setImageResource(flowers[index])
         }
        // next button functionality
        val next = findViewById<Button>(R.id.next)
        next.setOnClickListener {
           index = if (index + 1 < flowers.size) index +1 else 0
           imgSwitcher?.setImageResource(flowers[index])
       }
   }
}

Archivo AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.geeksforgeeks.myfirstkotlinapp">
  
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
  
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
  
</manifest>

Ejecutar como emulador:

Haga clic en el botón Siguiente y luego obtendremos la otra imagen animada en la Vista.