ViewPager与ViewPager2实现堆叠效果

先上图看效果，GIF稍微有点糊，凑合着看！上面是ViewPager2实现的，下面是ViewPager实现的~

出发点

最近公司想要实现这样一种效果，实现并不难，本着尝试新技术的想法，打算用ViewPager2实现这种效果。中间也或多或少遇见了小麻烦，发出来与大家一起讨论下~

需求实现

方式一、ViewPager实现：

代码如下：

        viewpager.offscreenPageLimit = 2
        val mScaleOffset = 200f
        val mTranslationOffset = 100f
        viewpager.setPageTransformer(
            true
        ) { page, position ->
            Log.e("MainActivity","$page:::$position")
            if (position <= 0F) {
                page.translationX = 0F
            } else {
                val pageWidth: Int = page.width
                val transX = -pageWidth * position + mTranslationOffset * position
                page.translationX = transX
                // 缩放比例
                val scale: Float = (pageWidth - mScaleOffset * position) / pageWidth.toFloat()
                page.scaleX = scale
                page.scaleY = scale
            }
        }

简单解释下代码，因为总共是3页，所以 offscreenPageLimit 设置成 2 ，另外两个是控制偏移和缩放的，在 position 小于 0 的时候要重置位移，不然不能滑动，大于 0 的时候需要控制偏移和缩放。

ViewPager 的 setPageTransformer 有一个布尔值参数，true 表示从后往前绘制，具体注释如下：

reverseDrawingOrder true  
if the supplied PageTransformer requires page views to be drawn from last to first instead of first to last.

这个参数如果是 false 那么就会从第一页开始绘制，后面绘制的在水平偏移后会盖住前面的绘制的，此时层级顺序是321，不符合我们需要的123效果。OK，ViewPager 实现就简单介绍到这里。

方式二、ViewPager2实现：

        viewPager2.offscreenPageLimit = 2
        val mScaleOffset = 200f
        val mTranslationOffset = 100f
        viewPager2.setPageTransformer { page, position ->
            if (position <= 0F) {
                page.translationX = 0F
            } else {
                val pageWidth: Int = page.width
                val transX = -pageWidth * position + mTranslationOffset * position
                page.translationX = transX
                // 缩放比例
                val scale: Float = (pageWidth - mScaleOffset * position) / pageWidth.toFloat()
                page.scaleX = scale
                page.scaleY = scale
                // 控制展示层级
                page.translationZ = -position
            }
        }

基本实现方式与 ViewPager 相同，唯一不同的是 page.translationZ = -position 这里，作为控制展示层级的顺序作用。但是我们在 ViewPager2 源码里可以看到这样两行注释：

说明 ViewPager2 暂时内部是不支持 reverseDrawingOrder 的，后面的版本可能会加进去也不一定，毕竟是 TODO ！所以层级的展示我们就要自己控制，就是上面那句代码~

总结

至此，ViewPager2 实现层叠效果已经实现，没有很难，主要是看到一些点可以拿出来跟大家分享一下，也希望大家能多多斧正，感谢~

Guys，Peace & Love