实现在同一个页面左右滑动展示不同的图片

我们先了解一下这个功能：可以在一个页面上显示不同的图片，同时左右滑动可以实现查看，当松开手指的时候还会根据两张图片哪一张靠中就会自动将这张图片居中。接下来上代码。

首先这个功能依赖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跳转）左右滑动切换查看图片的效果。