【Kotlin/Android Studio】ViewPager2の使い方!スライドで画面遷移

この記事からわかること
- Android Studio/KotlinでViewPager2の使い方
- スライド(スワイプ)で画面を遷移させる方法
- コードでページを遷移するには?
- TabLayoutとの併用方法
- リスナーを追加してイベントを検知する
- RTLのサポート
- スライドを縦にする方法
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Flamingo
- Android:13
- Kotlin:1.8.20
画面をスライドさせてフラグメントを移動する方法
Androidアプリで画面をスライド(スワイプ)させることで滑らかに別の画面に遷移する機能を実装するにはViewPager2
を使用します。以前はViewPager
でしたが、改良されて今ではViewPager2
が活用されています。

実装方法
流れ
- レイアウトファイルにViewPager2を追加
- FragmentStateAdapterを定義
- アダプターの紐付け
レイアウトファイルにViewPager2を追加
レイアウトファイルにViewPager2
を設置します。この領域がスライドで画面が遷移していく領域になります。
FragmentStateAdapterを定義
続いてFragmentStateAdapter
に準拠したAdapterクラスを用意します。中にはgetItemCount
メソッドとcreateFragment
メソッドをオーバーライドします。createFragment
メソッドの中ではposition
でスライドで遷移した際の番号を受け取れるので番号に応じた遷移先のフラグメントを指定します。
アダプターの紐付け
最後にviewPager2
にアダプターを紐付けすれば完成です。これでスライドするとフラグメントが滑らかに切り替わる実装が完了しました。

コードでページを遷移する
スワイプだけでなくKotlinのコードからページを遷移させるにはsetCurrentItem
メソッドに遷移させたいページのインデックスを渡します。2つ目の引数smoothScroll
には遷移時に滑らかにスクロールさせるかどうかを真偽値で指定します。
スワイプでのページングを不可にする
ViewPager2
で意図的にスワイプしてもページングをさせないようにするにはisUserInputEnabled
プロパティにfalse
を渡すだけです。
TabLayoutと併用する
TabLayout
と併用することでページのタブを表示することが可能になります。

activity_main.xml
MainActivity.kt
リスナーを追加する
ページがスワイプされたことや遷移したことを検知するためにはregisterOnPageChangeCallback
メソッドでViewPager2.OnPageChangeCallback
を拡張したオブジェクトを生成し、その中からそれぞれのイベントを検知することが可能です。
実際に1回だけ横にスワイプしてみると以下のように「ページが選択」は1回しか呼ばれないようですが、他のログは複数回出力されたので使い方には注意が必要かもしれません。
RTLのサポート
RTL(右から左)をサポートしたい場合はViewPager2
に
スライドを縦にする
スライドを縦にしたい場合はViewPager2
に

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。