• 2023/9/26
• 3分

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

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Android Studio：Flamingo
• Android：13
• Kotlin：1.8.20

画面をスライドさせてフラグメントを移動する方法

公式リファレンス：ViewPager2

Androidアプリで画面をスライド(スワイプ)させることで滑らかに別の画面に遷移する機能を実装するにはViewPager2を使用します。以前はViewPagerでしたが、改良されて今ではViewPager2が活用されています。

実装方法

流れ

1. レイアウトファイルにViewPager2を追加
2. FragmentStateAdapterを定義
3. アダプターの紐付け

レイアウトファイルにViewPager2を追加

レイアウトファイルにViewPager2を設置します。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

FragmentStateAdapterを定義

続いてMainActivityの中にFragmentStateAdapterに準拠したインナークラスを用意します。中にはgetItemCountメソッドとcreateFragmentメソッドをオーバーライドします。createFragmentメソッドの中ではpositionでスライドで遷移した際の番号を受け取れるので番号に応じた遷移先のフラグメントを指定します。

class MainActivity : AppCompatActivity() {
    // 省略〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

    private inner class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        // ページの枚数
        override fun getItemCount(): Int = 3
        // ページの遷移先
        override fun createFragment(position: Int): Fragment =
            when(position) {
                0 -> {
                    FirstFragment()
                }
                1 -> {
                    SecondFragment()
                }
                2 -> {
                    ThirdFragment()
                }
                else -> {
                    FirstFragment()
                }
            }
    }
}

アダプターの紐付け

最後にviewPager2にアダプターを紐付けすれば完成です。これでスライドするとフラグメントが滑らかに切り替わる実装が完了しました。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    var viewPager2: ViewPager2 = findViewById(R.id.pager)
    val pagerAdapter = ScreenSlidePagerAdapter(this)
    viewPager2.adapter = pagerAdapter
}

RTLのサポート

RTL(右から左)をサポートしたい場合はViewPager2にandroid:layoutDirection="rtl"を追加します。

<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layoutDirection="rtl"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />    

スライドを縦にする

スライドを縦にしたい場合はViewPager2にandroid:orientation="vertical"を追加します。

<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />    

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

ご覧いただきありがとうございました。