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

## 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
        }
    }
}
```

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/143395/e75b4d46-a6da-03d9-af9e-9d083e652058.gif" width="320px">

コードは[github](https://github.com/sasakitomohiro/viewpager2-sample)にあげています。

## まとめ

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