我們先了解一下這個功能：可以在一個頁面上顯示不同的圖片，同時左右滑動可以實現檢視，當鬆開手指的時候還會根據兩張圖片哪一張靠中就會自動將這張圖片居中。接下來上程式碼。

首先這個功能依賴viewpage2這個庫，可以在gradle裡面加上implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha04'。

實質上這個庫繼承了recyclerview這個佈局，所以就可以大致瞭解到，recyclerview一般是上下放置不同的資訊文字或者圖片，上下滑動即可檢視，而viewpage2既然繼承了這種佈局方式，所以adapter這些東西還是要有的。

mainactivity的佈局如下：

<LinearLayout
android:layout_marginTop="82dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="500dp"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingStart="40dp"
android:paddingEnd="40dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="確定"
android:layout_gravity="center"/>
</LinearLayout>
既然剛剛說了我們要使用adapter，接下來要建立一個myadapter的class類，用來自定義自己的這個介面卡

//自定義BgImg類

class BgImg(val Img:Int){}

//自定義Page2Adapter
class Page2Adapter(var ImgList: List<BgImg>) : RecyclerView.Adapter<Page2Adapter.ViewHolder>() {
　　inner class ViewHolder( view: View) : RecyclerView.ViewHolder(view) {
　　　　val Img=view.Img
　　}
　　override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
　　　　val view = LayoutInflater.from(parent.context).inflate(R.layout.page2_layout, parent, false)
　　　　val holder=ViewHolder(view)
　　　　return holder
　　}

　　override fun onBindViewHolder(holder: ViewHolder, position: Int) {
　　　　val BgImgList=ImgList[position]
　　　　holder.Img.setImageResource(BgImgList.Img)
　　}

　　override fun getItemCount(): Int {
　　　　return ImgList.size
　　}
}

接下來建立一個page2_layout的佈局檔案，用來展示viewpage2每一個item的形式，這裡很簡單就是一張圖片而已

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/page2_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/Img"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

然後建立一個ScaleInTransformer的類，這個自定義類就是為了實現我們左右滑動時候，相鄰的幾張圖片變大變小

class ScaleInTransformer (minScale: Float = 0.85f) : ViewPager2.PageTransformer {
　　val DEFAULT_CENTER = 0.5f
　　private val mMinScale = minScale
　　override fun transformPage(view: View, position: Float) {
　　　　val pageWidth = view.width
　　　　val pageHeight = view.height
　　　　view.pivotY = pageHeight / 2.toFloat()
　　　　view.pivotX = pageWidth / 2.toFloat()
　　　　if (position < -1) { // [-Infinity,-1)
　　　　　　// This page is way off-screen to the left.
　　　　　　view.scaleX = mMinScale
　　　　　　view.scaleY = mMinScale
　　　　　　view.pivotX = pageWidth.toFloat()
　　　　} else if (position <= 1) { // [-1,1]
　　　　　　// Modify the default slide transition to shrink the page as well
　　　　　　if (position < 0) //1-2:1[0,-1] ;2-1:1[-1,0]{
　　　　　　　　val scaleFactor = (1 + position) * (1 - mMinScale) + mMinScale
　　　　　　　　view.scaleX = scaleFactor
　　　　　　　　view.scaleY = scaleFactor
　　　　　　　　view.pivotX = pageWidth * (DEFAULT_CENTER + DEFAULT_CENTER * -position)
　　　　　　} else //1-2:2[1,0] ;2-1:2[0,1]{
　　　　　　　　val scaleFactor = (1 - position) * (1 - mMinScale) + mMinScale
　　　　　　　　view.scaleX = scaleFactor
　　　　　　　　view.scaleY = scaleFactor
　　　　　　　　view.pivotX = pageWidth * ((1 - position) * DEFAULT_CENTER)
　　　　　　}
　　　　} else { // (1,+Infinity]
　　　　　　view.pivotX = 0f
　　　　　　view.scaleX = mMinScale
　　　　　　view.scaleY = mMinScale
　　　　}
　　}
}
到這就快結束了，剩下的就是在MainActivity重寫onCreate函式即可

class MainActivity : AppCompatActivity() {
    val ImgList=ArrayList<BgImg>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
//設定viewpage2裡面圖片切換資料
        val compositePageTransformer = CompositePageTransformer();
        compositePageTransformer.addTransformer(MarginPageTransformer(40))
        compositePageTransformer.addTransformer(ScaleInTransformer())
        viewPager.setPageTransformer(compositePageTransformer)
        viewPager.offscreenPageLimit = 1
//繫結adapter
        val BgImgAdapter=Page2Adapter(ImgList)
        initImg()
        viewPager.adapter=BgImgAdapter
    }
//自定義向viewpage2這個控制元件新增圖片
    fun initImg(){
        ImgList.add(BgImg(R.drawable.bg_1h))
        ImgList.add(BgImg(R.drawable.icon))
        ImgList.add(BgImg(R.drawable.bg_2h))
    }
}
以上就是viewpage2實現在同一個頁面（不用intent跳轉）左右滑動切換檢視圖片的效果。