No ha pasado mucho tiempo desde el 7 de febrero de 2019, Google lanzó la versión alfa de Android ViewPager2 . Puede encontrar más información sobre esta versión aquí . Ahora veamos de qué se trata ViewPager2.
Nuevas características
- Diseño de soporte de derecha a izquierda,
- Soporte de orientación vertical,
PageChangeListener mejorado.
¿Qué ha cambiado?
ViewPager2 se lanzó para Android X, por lo que si desea usarlo, su proyecto debe usar Android X. Veamos cómo podemos usar este nuevo ViewPager2.
Agregar dependencia
Agregue la siguiente dependencia al archivo build.gradle nivel de aplicación:
dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01" }
Después de eso, sincronice su proyecto.
Personalización
Agregue el widget ViewPager2 a su Actividad o fragmento:
<androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent"/>
Creemos un diseño para la página que se mostrará en ViewPager2:
item_page.xml
<?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:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/tvTitle" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_centerInParent="true" tools:text= "item" android:textSize="32sp" android:layout_height="wrap_content" /> </RelativeLayout>
A continuación, necesitamos crear un adaptador para ViewPager2. Este es el más interesante. Para esto podemos usar RecyclerView.Adapter . ¿No es genial?
ViewPagerAdapter.kt
class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH = PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)) override fun getItemCount(): Int = colors.size override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run { tvTitle.text = "item $position" container.setBackgroundResource(colors[position]) } } class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView)
Este es el mismo adaptador que usamos para un RecyclerView normal, y funciona igual de bien con ViewPager2.
Último paso, instale el adaptador para ViewPager2:
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager2.adapter = ViewPagerAdapter() } }
Eso es todo! Obtenemos el mismo resultado que cuando utilizamos el ViewPager anterior con el Adaptador de paginación:
Desplazamiento vertical
Anteriormente, tenía que usar bibliotecas de terceros para implementar el desplazamiento vertical, porque Hasta el momento, Google no ha brindado esa oportunidad fuera de la caja. Este nuevo ViewPager2 ahora tiene soporte para desplazamiento vertical. Simplemente cambie la orientación en ViewPager2 y se habilitará el desplazamiento vertical. Muy facil!
viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL
Aquí está el resultado:
Usando FragmentStateAdapter
También puede usar fragmentos como páginas, como en el antiguo ViewPager. Hay un FragmentStateAdapter para esto. Veamos cómo podemos usarlo.
En primer lugar, necesitamos crear un fragmento:
class PagerFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.item_page, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { container.setBackgroundResource(it.getInt("color")) tvTitle.text = "Item ${it.getInt("position")}" } } }
Ahora crearemos un adaptador para ViewPager2. Pasaremos el FragmentManager a su constructor, que gestionará los fragmentos:
class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun getItem(position: Int): Fragment = PagerFragment().apply { arguments = bundleOf( "color" to colors[position], "position" to position ) } override fun getItemCount(): Int = colors.size }
Ahora instale este nuevo adaptador en ViewPager2, y ya está:
viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager)
OnPageChangeCallback mejorado
En el antiguo ViewPager, la interfaz OnPageChangeListner fue diseñada para recibir eventos de cambio de página / desplazamiento. Y fue muy inconveniente, porque necesitábamos anular los tres métodos ( onPageScrollStateChanged , onPageScrolled , onPageSelected ), incluso si no quisiéramos.
oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) {
Ahora tenemos OnPageChangeCallback , una clase abstracta con métodos no abstractos. Lo que literalmente significa que no necesitamos redefinir todos estos métodos, simplemente podemos redefinir los que necesitamos o queremos usar. Entonces, por ejemplo, podemos rastrear los eventos de cambio de página:
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position)
Atencion
Dado que ViewPager2 está en la versión alfa, hay algunas funciones del antiguo ViewPager que aún no se han implementado o que no funcionan correctamente en esta versión.
Problemas conocidos según la documentación:
- ClipToPadding,
- Sin integración con TabLayout,
- No hay control fuera de la pantalla,
- No se puede establecer el ancho de la página (100% por defecto)
Más información sobre problemas conocidos está aquí . Espero que todo esto se arregle en las próximas actualizaciones. Espero una versión estable de este nuevo ViewPager2. Hasta entonces, ¡buen código para todos!