透過 ViewPage 我們可以實現左右滑動的頁面

設置 layout

<?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.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

設置 ViewPage itemviewlayout

<?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="409dp"
    android:layout_height="346dp"
    android:orientation="vertical">

    <View
        android:id="@+id/divider2"
        android:layout_width="407dp"
        android:layout_height="1dp"
        android:layout_marginTop="3dp"
        android:layout_marginEnd="1dp"
        android:background="?android:attr/listDivider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:mipmap/sym_def_app_icon" />

</androidx.constraintlayout.widget.ConstraintLayout>

設置 ViewPage Adapter

1. isViewFromObject(): 判斷instantiateItem()函數所返回來的Key（Key 為初始化這個頁面時的view） 與 這一個頁面view 是否是對應的。
2. instantiateItem(): 當我們要去顯示特定位置的頁面時,會調用這個 方法去 加載這個頁面的 View
3. destroyItem():調用這個 方法去移除舊有頁面的 view 不然 view 會累積越來越多就不好了。

class My_ViewPage_Adapter(val context: Context?, val list: List<Int>): PagerAdapter(){

    override fun isViewFromObject(view: View, `object`: Any): Boolean {

        return view == `object`

    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {

        val view = LayoutInflater.from(context).inflate(R.layout.viewpager_item, container, false)

       when(position){

           0 -> view.imageView.setImageResource(R.drawable.picture)

           1 -> view.imageView.setImageResource(R.drawable.picture_two)

           2 -> view.imageView.setImageResource(R.drawable.picture_three)

           3 -> view.imageView.setImageResource(R.drawable.picture_four)

           4 -> view.imageView.setImageResource(R.drawable.picture_five)



       }


        container.addView(view)
        return view

    }

    override fun getCount(): Int {

        return 5
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }


}

設置 ViewPage

  viewpager.adapter = My_ViewPage_Adapter(this,list)

設置 PageChangeListener

onPageScrollStateChanged : 調用這方法來得知 目前使用者的滑動狀態

onPageScrolled : 調用這方法來得知 系統是如何計算當前所在頁面(position)，以及如何計算偏移百分比(positionOffset)

圖片來源：https://www.jianshu.com/p/1fd8e9eb7153

onPageScrolled : 調用這方法來得知 目前我們要顯示的頁面位置

       viewpager.addOnPageChangeListener(object: ViewPager.OnPageChangeListener{

            override fun onPageScrollStateChanged(state: Int) {

            }

            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {


            }

            override fun onPageSelected(position: Int) {

                Toast.makeText(this@MainActivity,"page"+"${position+1}",Toast.LENGTH_SHORT).show()