實現在同一個頁面左右滑動展示不同的圖片

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

首先這個功能依賴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跳轉）左右滑動切換查看圖片的效果。