Android
Kotlin
ViewPager
@sobaya

ViewPager2を触ってみた

AndroidKotlinViewPager

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だとビルドエラー



Edit request
2