ViewPager2をGroupieと組み合わせて使ってみる #Android

ViewPagerとViewPager2の違い

ViewPager	ViewPager2
FragmentStatePagerAdapter	FragmentStateAdapter
PagerAdapter	RecyclerView.Adapter
addPageChangeListener	registerOnPageChangeCallback

実装

ViewPager2は他の記事でもかなり取り上げられてるので今回は必要最低限の部分をDataBindingとGroupieと組み合わせて実装してみます。

build.gradleに以下を追記します。

build.gradle

android {
    ...
    buildTypes {
        ...
        dataBinding.enabled = true
    }
}
...
dependencies {
    ...
    implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'
    implementation 'com.xwray:groupie:2.3.0'
    implementation 'com.xwray:groupie-kotlin-android-extensions:2.3.0'
    implementation 'com.xwray:groupie-databinding:2.3.0'
}

レイアウトにViewPager2を追加します。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity">

        <androidx.viewpager2.widget.ViewPager2
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:id="@+id/view_pager2"
                android:orientation="horizontal"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

次にViewPagerで表示させたいLayoutを作成します。

item_view_pager2.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
        xmlns:android="http://schemas.android.com/apk/res/android" 
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/text"
                tools:text="viewpager"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:textAlignment="center"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

レイアウトができたらコードを書いていきます。

ViewPager2Item.kt

class ViewPager2Item(val text: String) : BindableItem<ItemViewPager2Binding>() {
    override fun getLayout(): Int = R.layout.item_view_pager2

    override fun bind(viewBinding: ItemViewPager2Binding, position: Int) {
        viewBinding.text.text = text
    }
}

MainActivity.kt

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        val groupAdapter = GroupAdapter<ViewHolder>()
        val list = arrayListOf(
            ViewPager2Item("Pager1"),
            ViewPager2Item("pager2"),
            ViewPager2Item("Pager3")
        )
        groupAdapter.update(list)
        binding.viewPager2.apply {
            adapter = groupAdapter
        }
    }
}

できたら実行してみましょう！

コードはgithubにあげています。

まとめ

RecyclerView的なノリでやってみましたが、正直こんな感じで良いのかわかりません。
もっとこうした方が良いなどの意見があればいただけるとありがたいです！