ViewPager的切换动画

ViewPager的简单使用

首先，ViewPager是一个页面切换组件，经常搭配Fragment使用，也可以用来承载View，目前有ViewPager和ViewPager2，本次使用ViewPager2，先简单实现一个切换图片的ViewPager吧

第一步，创建一个空的Activity，并布局中添加ViewPager

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    tools:context=".TestViewPagerActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/testViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

创建ViewPagerAdapter与并设置

class TestViewPagerActivity : AppCompatActivity() {
    
    

    private lateinit var viewPager: ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_pager)
        viewPager = findViewById(R.id.testViewPager)
        viewPager.adapter = ViewPagerAdapter(this)
    }


    class ViewPagerAdapter(val context: Context) : RecyclerView.Adapter<ViewPagerHolder>() {
    
    

        private val mDataList: MutableList<String> by lazy {
    
    
            mutableListOf<String>().apply {
    
    
                add("https://img0.baidu.com/it/u=1697148622,3160789974&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=938")
                add("https://img1.baidu.com/it/u=407852637,3650486136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
                add("https://img0.baidu.com/it/u=981218435,2998857702&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675")
                add("https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500")
                add("https://img1.baidu.com/it/u=407852637,3650486136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
            }
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewPagerHolder {
    
    
            return ViewPagerHolder(LayoutInflater.from(context).inflate(R.layout.view_pager_item_layout, parent, false))
        }

        override fun onBindViewHolder(holder: ViewPagerHolder, position: Int) {
    
    
            val options = RequestOptions.bitmapTransform(RoundedCorners(DensityUtil.dip2px(context, 16)))
            Glide.with(context).load(mDataList[position]).apply(options).into(holder.image)
        }

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

    }

    class ViewPagerHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    
    
        val image: ImageView = itemView.findViewById(R.id.image)
    }
}

ViewPager2内部使用的RecyclerView作为容器，因此创建Adapter与ViewHolder只需要参考RecyclerView即可。效果如下：

在这里插入图片描述

添加动画

我们可以看到上述的切换效果很平淡无奇，那么要给ViewPager添加动画就需要使用到一个方法
在这里插入图片描述
该方法通过设置了一个PageTransformer，那么PageTransformer是什么呢，他其实是一个接口

其中注释中Page参数的翻译如下：页面相对于当前页导航器的正中间位置的位置。0是前面和中间。1是向右整一页的位置，-2是向左两页的位置。最小/最大观测值取决于我们保留多少页，这取决于offscreenPageLimit。

因此我们实现该接口，重写该方法，并通过position的值对page设置属性即可，例如我们要实现如下效果，一张图片滑出屏幕时，缩放为原来的80%，透明度变为原来的50%，实现如下：

class ScaleAndAlphaTransformer : ViewPager2.PageTransformer {
    
    
    override fun transformPage(page: View, position: Float) {
    
    
        val minScale = 0.8f
        val minAlpha = 0.5f
        
        // 我们只操作可见页面（当前page与其前一个或者后一个页面），因此对position过滤，
        var pos = position
        if (pos < -1) {
    
    
            pos = -1f
        }
        if (pos > 1) {
    
    
            pos = 1f
        }

        val tempScale = if (pos < 0) 1 + pos else 1 - pos
        val scaleValue = minScale + tempScale * (1 - minScale)
        page.scaleX = scaleValue
        page.scaleY = scaleValue

        val alphaValue = minAlpha + tempScale * (1 - minAlpha)
        page.alpha = alphaValue
    }
}

示意图拆解

viewPager.setPageTransformer(ScaleAndAlphaTransformer())

效果如下：
在这里插入图片描述
其它效果可根据position的值进行设置，只要理解postion的值的变化即可。