El Android ViewPager se ha convertido en un concepto muy interesante entre las aplicaciones de Android. Permite a los usuarios cambiar sin problemas entre fragmentos que tienen una interfaz de usuario común y es la mejor manera de hacer que su aplicación sea extraordinaria entre los demás. Los ViewPagers proporcionan continuidad visual. Básicamente, realizan un seguimiento de qué página está visible y luego le piden a PageAdapter que muestre la siguiente página en la jerarquía. No solo esto, ¡incluso te permite crear todo tipo de increíbles efectos de diapositivas y animaciones!
¿Qué vamos a construir en este artículo?
En este artículo, vamos a implementar una animación de cubo en escala usando ViewPager. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.
Hay 3 componentes básicos para la implementación completa de ViewPager:
- Una actividad que contiene ViewPager y la interfaz de usuario principal.
- Un conjunto de Fragmentos que se ven como páginas separadas en ViewPager.
- FragmentPageAdapter o FragmentStatePageAdapter devuelve el fragmento correcto que debe mostrarse a continuación.
Por ejemplo, consulte el artículo: ViewPager usando fragmentos en Android con un ejemplo .
Implementación paso a paso
Aquí, crearemos un control deslizante de imagen usando ViewPager y luego aplicaremos la animación de cubo en escala.
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: Diseño de la interfaz de usuario
A continuación se muestra el código para el archivo activity_main.xml . Hemos agregado solo un ViewPager para mostrar las imágenes. A continuación se muestra el código completo del archivo activity_main.xml .
XML
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!-- viewpager to show images --> <androidx.viewpager.widget.ViewPager android:id="@+id/viewPagerMain" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Ahora, cree un nuevo archivo de recursos de diseño item.xml dentro de la aplicación > res > carpeta de diseño. A continuación se muestra el código del archivo item.xml .
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"> <!-- image viewer to view the images --> <ImageView android:id="@+id/imageViewMain" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" android:contentDescription="image" /> </LinearLayout>
Paso 3: trabajar con los archivos ViewPagerAdapter.kt y MainActivity.kt
Primero, cree una clase ViewPagerAdapter , un adaptador para ViewPager. A continuación se muestra el código completo de la clase ViewPagerAdapter.kt . Se agregan comentarios dentro del código para comprender cada línea del código.
Kotlin
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.LinearLayout
import androidx.viewpager.widget.PagerAdapter
import java.util.*
internal class ViewPagerAdapter(private val context: Context, private val images: IntArray) : PagerAdapter() {
// Layout Inflater
var mLayoutInflater: LayoutInflater
override fun getCount(): Int {
// return the number of images
return images.size
}
init {
mLayoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
}
override fun isViewFromObject(view: View, `object`: Any): Boolean {
return view === `object` as LinearLayout
}
override fun instantiateItem(container: ViewGroup, position: Int): Any {
// inflating the item.xml
val itemView: View = mLayoutInflater.inflate(R.layout.item, container, false)
// referencing the image view from the item.xml file
val imageView: ImageView = itemView.findViewById(R.id.imageViewMain)
// setting the image in the imageView
imageView.setImageResource(images[position])
// Adding the View
Objects.requireNonNull(container).addView(itemView)
return itemView
}
override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
container.removeView(`object` as LinearLayout)
}
}
A continuación se muestra el código completo del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender cada línea del código.
Kotlin
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager.widget.ViewPager
class MainActivity : AppCompatActivity() {
// creating object of ViewPager
lateinit var mViewPager: ViewPager
// images array
private var images = intArrayOf(R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4)
// Creating Object of ViewPagerAdapter
private lateinit var mViewPagerAdapter: ViewPagerAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Initializing the ViewPager Object
mViewPager = findViewById(R.id.viewPagerMain)
mViewPager.setPageTransformer(true, CubeInScalingAnimation())
// Initializing the ViewPagerAdapter
mViewPagerAdapter = ViewPagerAdapter(this@MainActivity, images)
// Adding the Adapter to the ViewPager
mViewPager.adapter = mViewPagerAdapter
}
}
Paso 4: Cree una nueva clase CubeInScalingAnimation.kt para aplicar la animación Cube-in-scaling. A continuación se muestra el código completo del archivo CubeInScalingAnimation.kt . Se agregan comentarios dentro del código para comprender cada línea del código.
Kotlin
import android.view.View
import androidx.viewpager.widget.ViewPager
import kotlin.math.abs
class CubeInScalingAnimation : ViewPager.PageTransformer {
override fun transformPage(page: View, position: Float) {
page.cameraDistance = 20000F
when {
position < -1 -> { //{-infinity,-1}
// page offset to left side
page.alpha = 0F
}
position <= 0 -> {
// transition from left
// side of page to current page
page.alpha = 1F
page.pivotX = page.width.toFloat()
page.rotationY = 90F * abs(position)
}
position <= 1 -> {
// transition form current
// page to right side
page.alpha = 1F
page.pivotX = 0F
page.rotationY = -90F * abs(position)
}
//{1,+infinity}
else -> { //Page offset to right side
page.alpha = 0F
}
}
when {
// transition between page1 and page2
abs(position) <= 0.5 -> {
page.scaleY = Math.max(0.4f, 1 - abs(position))
}
abs(position) <= 1 -> {
page.scaleY = Math.max(0.4f, abs(position))
}
}
}
}
Ahora, ejecuta la aplicación
Producción:
Código fuente: Haga clic aquí