ViewPager2实现页面预览功能后如何为首尾页面设置单独内边距

问题根源 #

你当前的实现为ViewPager2设置了全局固定左右padding，滑到首尾页时，对应方向没有相邻的预览页面，全局padding就会直接展示为额外的空白区域。

最优解决方案：自定义PageTransformer + 动态ItemDecoration #

该方案不会出现滑动跳变问题，视觉效果更顺滑，直接替换你原有的实现逻辑即可：

1. 首先实现自定义的页面转换器，统一控制所有页面的横向偏移，保证预览露出宽度一致：

class PeekPageTransformer(
    private val peekWidthPx: Int, // 左右两侧预览页面的露出宽度
    private val pageMarginPx: Int // 两个页面之间的间距
) : ViewPager2.PageTransformer {
    override fun transformPage(page: View, position: Float) {
        val offset = peekWidthPx + pageMarginPx
        page.translationX = -offset * position
        // 如不需要缩放效果可删除以下两行
        val scale = 1 - (0.1f * abs(position))
        page.scaleY = scale
    }
}

2. 修改你原有的setViewPager方法，删除全局固定padding配置，新增动态边距控制逻辑：

private fun setViewPager() {
    inventoryVp?.apply {
        clipToPadding = false   
        clipChildren = false    
        offscreenPageLimit = 2  

        val peekWidth = Utility.dpToPx(25)
        val pageMargin = Utility.dpToPx(6)

        // 给子RecyclerView设置动态边距
        (getChildAt(0) as RecyclerView).apply {
            addItemDecoration(object : RecyclerView.ItemDecoration() {
                override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
                    val position = parent.getChildAdapterPosition(view)
                    val itemCount = state.itemCount
                    when(position) {
                        // 首页面仅设置右边距，避免左侧空白
                        0 -> outRect.right = pageMargin
                        // 尾页面仅设置左边距，避免右侧空白
                        itemCount - 1 -> outRect.left = pageMargin
                        // 中间页左右都设置边距
                        else -> {
                            outRect.left = pageMargin
                            outRect.right = pageMargin
                        }
                    }
                }
            })
            (layoutManager as LinearLayoutManager).isItemPrefetchEnabled = false
        }
        // 绑定自定义转换器
        setPageTransformer(PeekPageTransformer(peekWidth, pageMargin))
    }
}

轻量替代方案（适合简单场景） #

如果对滑动流畅度要求不高，也可以通过监听页面切换动态修改padding快速解决，缺点是滑动切换到首尾页时会有轻微的padding跳变感：

private fun setViewPager() {
    // 保留你原有的基础配置
    inventoryVp?.apply {
        clipToPadding = false   
        clipChildren = false    
        offscreenPageLimit = 2  
    }

    val paddingPx = Utility.dpToPx(25)
    val pageMarginPx = Utility.dpToPx(6)
    inventoryVp?.setPageTransformer(MarginPageTransformer(pageMarginPx))

    // 新增页面切换监听，动态修改padding
    inventoryVp?.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
        override fun onPageSelected(position: Int) {
            super.onPageSelected(position)
            val itemCount = inventoryVp.adapter?.itemCount ?: return
            val leftPadding = if (position == 0) 0 else paddingPx
            val rightPadding = if (position == itemCount - 1) 0 else paddingPx
            inventoryVp.setPadding(leftPadding, 0, rightPadding, 0)
        }
    })
    // 初始化时设置首页面的padding
    inventoryVp?.setPadding(0, 0, paddingPx, 0)
}

内容的提问来源于stack exchange，提问作者Parag Rane