#41 AndroidのViewPager2の使い方

2020 / 8 / 7

ViewPager2を使うと、左右スワイプでビューやフラグメントを切り替えるUIが作れます。

今回はこのViewPager2の使い方を紹介します。公式ドキュメントはこちらです。

ライブラリの追加

app/build.gradleに次の項目を追加します。バージョンはここで確認しましょう。

dependencies {
  ...
  implementation "androidx.viewpager2:viewpager2:1.0.0"
}

ページとなるフラグメントの作成

通常のフラグメントと同じ作り方でOKです。ルート要素に背景色を設定しておくとよいでしょう。

class FirstPageFragment: Fragment(R.layout.first_page_fragment)
class SecondPageFragment: Fragment(R.layout.second_page_fragment)

親となるフラグメントにViewPager2を貼る

公式ドキュメントはアクティビティに貼っていましたが、今回はフラグメントに貼ってみます。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

アダプターを作る

子となるページがフラグメントの場合はFragmentStateAdapterを継承したクラスを作ります。とても似たクラスにFragmentStatePagerAdapterというものがありますが、これは ViewPager2ではなくViewPager用のアダプターなので間違えないようにしましょう。

class MyPagerAdapter(fragment: Fragment): FragmentStateAdapter(fragment) {
  override fun getItemCount() = 20

  override fun createFragment(position: Int) = when (position % 2) {
    0 -> FirstPageFragment()
    1 -> SecondPageFragment()
    else -> FirstPageFragment()
  }
}

実装すべきメソッドは2つです。getItemCount()はページがいくつあるかを返し、 createFragment()でページの位置に対応するフラグメントを作ります。

アダプターをセットする

RecyclerViewなどと同様に、アダプターをViewPager2にセットします。

class MainFragment: Fragment(R.layout.main_fragment) {
  private var _binding: MainFragmentBinding? = null
  private val binding: MainFragmentBinding get() = _binding!!

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    this._binding = MainFragmentBinding.bind(view)

    // アダプターをセット
    this.binding.viewPager.adapter = MyPagerAdapter(this)
  }

  override fun onDestroyView() {
    super.onDestroyView()
    this._binding = null
  }
}

これで完成です。

まとめ

ViewPager2の基本的な使い方を紹介しました。以前のViewPagerと使い方の雰囲気はほぼ同じなので、これからスワイプによるページ切り替えを実装する場合はこのViewPager2を使うようにしましょう。