〈kotlin〉スワイプビューを作る② ViewPagerからViewPager2

Android studioでkotlinを使ってAndroidアプリ作成。

画面上部にタブを3つ用意して、
タブを押すかスワイプすることで画面遷移ができるように実装したい。

前回の記事でViewPager2のコードをまとめたが、
最初知らずにViewPagerを使用して作ってしまい、
ViewPagerからViewPager2の書き換えを行なったので変更点もまとめてみる。

参考https://developer.android.com/training/animation/vp2-migration?hl=ja

レイアウトファイルの記述

「ViewPager」から「ViewPager2」に変更する。
TabLayoutと一緒に使っている場合ときは、
ViewPagerでは子要素としてTabLayoutを宣言していたが、
ViewPager2では同じレベルでViewPager2の前にTabLayoutを宣言する。

//変更前
<androidx.viewpager.widget.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager">
  
   <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout" />

</androidx.viewpager.widget.ViewPager>

//変更後
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"/>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager" />

</LinearLayout>

アダプタークラス

アダプタークラスを変更、それに伴いオーバーライドが必要なメソッドが変わる。

ViewPager ViewPager2
アダプタークラス FragmentPagerAdapter
FragmentStatePagerAdapter
FragmentStateAdapter
コンストラクタ パラメータ FragmentManager FragmentActivity
オーバーライドするメソッド getCount()
getItem()
getItemCount()
createFragment()
// 変更前
class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
    override fun getCount(): Int = NUM_PAGES

    override fun getItem(position: Int): Fragment = ScreenSlidePageFragment()
}

//変更後 
class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
    override fun getItemCount(): Int = NUM_PAGES

    override fun createFragment(position: Int): Fragment = ScreenSlidePageFragment()
}

TabLayoutとつなぐ

TabLayoutオブジェクトをViewPagerオブジェクトにつなぐために、
ViewPagerではsetupWithViewPagerを使用していたが、
ViewPager2ではTabLayoutMediatorを使用する。

//変更前
class CollectionDemoFragment : Fragment() {
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val tabLayout = view.findViewById(R.id.tab_layout)
        tabLayout.setupWithViewPager(viewPager)
    }
    ...
}

//変更後
class CollectionDemoFragment : Fragment() {
        ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val tabLayout = view.findViewById(R.id.tab_layout)
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = "OBJECT ${(position + 1)}"
        }.attach()
    }
    ...
}