Peu de temps s'est écoulé depuis le 7 février 2019, Google a publié la version alpha d'Android ViewPager2 . Vous trouverez plus d'informations sur cette version ici . Voyons maintenant en quoi consiste ViewPager2.
De nouvelles fonctionnalités
- Disposition du support de droite à gauche,
- Soutenir l'orientation verticale,
- Amélioration de
PageChangeListener .
Qu'est-ce qui a changé?
ViewPager2 est disponible pour Android X, donc si vous voulez l'utiliser, votre projet devrait utiliser Android X. Voyons comment nous pouvons utiliser ce nouveau ViewPager2.
Ajouter une dépendance
Ajoutez la dépendance suivante au fichier build.gradle niveau de l'application:
dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01" }
Après cela, synchronisez votre projet.
Personnalisation
Ajoutez le widget ViewPager2 à votre activité ou fragment:
<androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent"/>
Créons une mise en page pour la page qui sera affichée dans 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>
Ensuite, nous devons créer un adaptateur pour ViewPager2. C'est le plus intéressant. Pour cela, nous pouvons utiliser RecyclerView.Adapter . N'est-ce pas cool?
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)
Il s'agit du même adaptateur que nous utilisons pour un RecyclerView ordinaire, et il fonctionne aussi bien avec ViewPager2.
Dernière étape, installez l'adaptateur pour ViewPager2:
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager2.adapter = ViewPagerAdapter() } }
C'est tout! Nous obtenons le même résultat que lors de l'utilisation de l'ancien ViewPager avec le PagerAdapter:
Défilement vertical
Auparavant, vous deviez utiliser des bibliothèques tierces pour implémenter le défilement vertical, car jusqu'à présent, Google n'a pas fourni une telle opportunité hors de la boîte. Ce nouveau ViewPager2 prend désormais en charge le défilement vertical. Modifiez simplement l'orientation dans ViewPager2 et le défilement vertical sera activé. Très simple!
viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL
Voici le résultat:
Utilisation de FragmentStateAdapter
Vous pouvez également utiliser des fragments comme pages, comme dans l'ancien ViewPager. Il existe un FragmentStateAdapter pour cela. Voyons comment nous pouvons l'utiliser.
Tout d'abord, nous devons créer un fragment:
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")}" } } }
Nous allons maintenant créer un adaptateur pour ViewPager2. Nous passerons le FragmentManager à son constructeur, qui gérera les fragments:
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 }
Installez maintenant ce nouvel adaptateur dans ViewPager2 et vous avez terminé:
viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager)
Amélioration de OnPageChangeCallback
Dans l'ancien ViewPager, l'interface OnPageChangeListner était conçue pour recevoir des événements de changement de page / défilement. Et c'était très gênant, car nous devions remplacer les trois méthodes ( onPageScrollStateChanged , onPageScrolled , onPageSelected ), même si nous ne le voulions pas.
oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) {
Nous avons maintenant OnPageChangeCallback , une classe abstraite avec des méthodes non abstraites. Ce qui signifie littéralement que nous n'avons pas besoin de redéfinir toutes ces méthodes, nous pouvons simplement redéfinir celles dont nous avons besoin ou que nous voulons utiliser. Ainsi, par exemple, nous pouvons suivre les événements de changement de page:
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position)
Attention!
Étant donné que ViewPager2 est dans la version alpha, certaines fonctions de l'ancien ViewPager n'ont pas encore été implémentées ou ne fonctionnent pas correctement dans cette version.
Problèmes connus selon la documentation:
- ClipToPadding,
- Pas d'intégration avec TabLayout,
- Il n'y a aucun contrôle en dehors de l'écran,
- Impossible de définir la largeur de la page (100% par défaut)
Vous trouverez plus d'informations sur les problèmes connus ici . J'espère que tout cela sera corrigé dans les prochaines mises à jour. J'attends avec impatience une version stable de ce nouveau ViewPager2. D'ici là, bon code à tous!