ViewPager與ViewPager2實現堆疊效果

先上圖看效果，GIF稍微有點糊，湊合著看！上面是ViewPager2實現的，下面是ViewPager實現的~

image

出發點

最近公司想要實現這樣一種效果，實現并不難，本著嘗試新技術的想法，打算用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 ->
            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
                // 控制展示層級
                page.translationZ = -position
            }
        }

基本實現方式與 ViewPager 相同，唯一不同的是 page.translationZ = -position 這里，作為控制展示層級的順序作用。但是我們在 ViewPager2 源碼里可以看到這樣兩行注釋：

image

說明 ViewPager2 暫時內部是不支持 reverseDrawingOrder 的，后面的版本可能會加進去也不一定，畢竟是 TODO ！所以層級的展示我們就要自己控制，就是上面那句代碼~

總結

至此，ViewPager2 實現層疊效果已經實現，沒有很難，主要是看到一些點可以拿出來跟大家分享一下，也希望大家能多多斧正，感謝~

Guys，Peace & Love