ViewPager与ViewPager2实现堆叠效果

最新推荐文章于 2026-04-03 02:24:04 发布

原创

最新推荐文章于 2026-04-03 02:24:04 发布 · 3.5k 阅读

标签

#android #经验分享

收录于

本文探讨了如何使用ViewPager2和ViewPager实现层叠页面效果，详细解析了代码实现，并指出了ViewPager2中reverseDrawingOrder参数的缺失，通过控制translationZ来达到预期的层级效果。同时分享了实现过程中遇到的问题和解决方案。

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

出发点

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

需求实现

方式一、ViewPager实现：

代码如下：

        viewpager.offscreenPageLimit = 2
        val mScaleOffset = 200f
        val mTranslationOffset = 100f
        viewpager.setPageTransformer(
            true
        ) { page, position ->
            if (position <= 0F) {
                page.translationX = 0F
            } else {
                val pageWidth: Int = page.width
                val transX = -pageWidth * position + mTranslationOffset * position
                page.translationX = transX
                // 缩放比例
                val sc