Android
Kotlin
ViewPager

ViewPager2を触ってみた

ViewPager2が気になったので最小構成で触ってみました。

※Droidkaigiに行けないストレスをぶつけてみた


Gradleの設定


(app)build.gradle

dependencies {

implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01"
}


layout.xml


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"
tools:context=".MainActivity">

<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:orientation="vertical" />
</androidx.constraintlayout.widget.ConstraintLayout>



  • orientationで縦/横スクロールが変更できます。


ロジック


MainActivity.kt

class MainActivity : AppCompatActivity() {

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

viewpager2.adapter = SampleAdapter(listItems())
viewpager2.registerOnPageChangeCallback(object: ViewPager2.OnPageChangeCallback() {
override fun onPageScrollStateChanged(state: Int) {
super.onPageScrollStateChanged(state)
}
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels)
}
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
}
})
}

private fun listItems() = arrayListOf(
PagerItem("TEST0"),
PagerItem("TEST1"),
PagerItem("TEST2"),
PagerItem("TEST3"),
PagerItem("TEST4"),
PagerItem("TEST5")
)
}



  • AdapterはRecyclerView.Adapterです!!

  • AdapterはRecyclerView.Adapterです!!(大事な事なのでry

  • OnPageChangeCallbackを使って特定ページに移動した時の処理なども書けそうです。


動作イメージ画像




サンプルコード

文字だけ版

https://github.com/sobaya-0141/ViewPager2

画像版

https://github.com/sobaya-0141/ViewPager2/tree/image_sample


注意点など


  • constraintlayoutのバージョンが1.1.2だとクラッシュしたので、ダメかもです。

  • ViewPager2の幅や高さをwrap_contentsにするとビルドでこけます。(分かりやすくなった)


    • ViewPager2自体にwrap_contentsでは今まで通り非表示でした。

    • RecyclerView.Adapterで描画するLayoutの一番親がwrap_contentsだとビルドエラー