1.布局

 <androidx.viewpager.widget.ViewPager
     android:id="@+id/viewPager"
     android:layout_width="409dp"
     android:layout_height="729dp"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent">

</androidx.viewpager.widget.ViewPager>

<androidx.constraintlayout.widget.Guideline
     android:id="@+id/guideline"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     app:layout_constraintGuide_percent="0.9" />

<LinearLayout
     android:id="@+id/guide"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="@+id/guideline" />

2.把圖片放進string.xml

<array name="guideImages">
     <item>@drawable/bg1</item>
     <item>@drawable/bg2</item>
     <item>@drawable/bg3</item>
</array>

3.自定義選擇圖片&未選擇圖片

no_select.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#DCDCDC"/>
</shape>

yes_select.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#61BEB4"/>
    <corners android:radius="20dp"/>
</shape>

4.自定義PageAdapter

import android.view.View
import android.view.ViewGroup
import androidx.viewpager.widget.PagerAdapter

class MyViewPageAdapter(private val view: ArrayList<View>) : PagerAdapter() {


    override fun destroyItem(container: ViewGroup, position: Int, arg2: Any) {
        container.removeView(view[position])
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        container.addView(view[position])
        return view[position]
    }

    override fun isViewFromObject(arg0: View, arg1: Any) = arg0 == arg1

    override fun getCount() = view.size
}

5.實作

import android.annotation.SuppressLint
import android.content.res.TypedArray
import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.view.WindowManager
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager.widget.ViewPager
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity(), ViewPager.OnPageChangeListener {

    lateinit var pictures: TypedArray //取得圖片
    lateinit var views: ArrayList<View> //存放圖片
    lateinit var mAdapter : MyViewPageAdapter
    lateinit var points: ArrayList<ImageView> //指示器圖片
    val GUIDE_COUNT = 3

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

        //全螢幕
        window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)
        pictures = resources.obtainTypedArray(R.array.guideImages)

        initView()
        initData()

    }

    private fun initView() {
        views = arrayListOf()
        points = arrayListOf()
        mAdapter = MyViewPageAdapter(views)
    }

    private fun initData() {
        val mParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)

        //添加圖片
        for (i in 0 until GUIDE_COUNT) {
            val imageView = ImageView(this)
            imageView.layoutParams = mParams
            imageView.scaleType = ImageView.ScaleType.CENTER_CROP
            imageView.setImageDrawable(pictures.getDrawable(i))
            views.add(imageView)
        }

        viewPager.adapter = mAdapter
        viewPager.addOnPageChangeListener(this)
        initPoints()

    }

    private fun initPoints() {
        for (i in 0 until GUIDE_COUNT) {
            val point = ImageView(this)
            point.setPadding(10,10,10,10)
            point.scaleType = ImageView.ScaleType.FIT_XY

            if (i == 0) {
                point.setImageResource(R.drawable.yes_select)
                point.layoutParams = ViewGroup.LayoutParams(96,36)
            } else {
                point.setImageResource(R.drawable.no_select)
                point.layoutParams = ViewGroup.LayoutParams(36,36)
            }

            guide.addView(point)
            points.add(point)
        }
    }


    override fun onPageScrollStateChanged(state: Int) {
    }

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

    override fun onPageSelected(position: Int) {

        for (i in 0 until points.size) {
            val params = points[position].layoutParams
            params.width = 96
            params.height = 36
            points[position].layoutParams = params
            points[position].setImageResource(R.drawable.yes_select)

            if (position != i) {
                val params1 = points[i].layoutParams
                params1.width = 36
                params1.height = 36
                points[i].layoutParams = params1
                points[i].setImageResource(R.drawable.no_select)

            }
        }
    }
}

6.效果展示