Android中如何在ViewPager2元素之间插入独立View？

不需要把分隔View作为ViewPager2的子项插入，有两种更合理的实现方式，推荐使用基于ItemDecoration的方案：

方案一：自定义RecyclerView.ItemDecoration（推荐） #

ViewPager2底层基于RecyclerView实现，因此可以通过自定义ItemDecoration来添加分隔View，完全不需要修改原有Adapter的数据源和结构。

实现步骤： #

1. 编写自定义ItemDecoration类，通过预留空间+绘制的方式添加分隔View：

   class PagerDividerDecoration(private val dividerView: View) : RecyclerView.ItemDecoration() {
       override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
           super.getItemOffsets(outRect, view, parent, state)
           // 为每个页面右侧预留分隔View的宽度
           outRect.right = dividerView.measuredWidth
       }
   
       override fun onDrawOver(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
           super.onDrawOver(canvas, parent, state)
           val childCount = parent.childCount
           for (i in 0 until childCount) {
               val child = parent.getChildAt(i)
               // 计算分隔View的绘制位置：当前页面右侧
               val left = child.right
               val top = child.top
               dividerView.layout(left, top, left + dividerView.measuredWidth, top + dividerView.measuredHeight)
               dividerView.draw(canvas)
           }
       }
   }
   

2. 初始化分隔View并添加到ViewPager2：

   // 加载分隔View的布局（比如仅含图片的布局）
   val dividerView = LayoutInflater.from(context).inflate(R.layout.layout_pager_divider, viewPager2, false)
   // 先测量View尺寸，避免宽高为0
   dividerView.measure(
       View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
       View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
   )
   // 添加Decoration到ViewPager2
   viewPager2.addItemDecoration(PagerDividerDecoration(dividerView))
   

3. 首尾分隔View处理：如果需要在第一个页面左侧和最后一个页面右侧也显示分隔View，可以在onDrawOver中额外判断位置，绘制首尾的分隔元素。

方案二：自定义PageTransformer #

如果分隔View是简单的图片或图形，可以通过PageTransformer在页面滑动时绘制分隔元素，适合静态装饰场景：

实现示例： #

class DividerPageTransformer(private val dividerDrawable: Drawable) : ViewPager2.PageTransformer {
    private val dividerWidth = dividerDrawable.intrinsicWidth

    override fun transformPage(page: View, position: Float) {
        // 绘制当前页面右侧的分隔
        if (position < 0) {
            dividerDrawable.setBounds(page.right, page.top, page.right + dividerWidth, page.bottom)
            dividerDrawable.draw(page.canvas)
        }
        // 绘制前一个页面左侧的分隔（可选）
        if (position > 0) {
            dividerDrawable.setBounds(page.left - dividerWidth, page.top, page.left, page.bottom)
            dividerDrawable.draw(page.canvas)
        }
    }
}

设置到ViewPager2：

val dividerDrawable = ContextCompat.getDrawable(context, R.drawable.ic_pager_divider)!!
viewPager2.setPageTransformer(DividerPageTransformer(dividerDrawable))

方案对比 #

• 方案一支持复杂的分隔View（比如带点击交互的），完全独立于原Adapter，是更符合需求的方案；
• 方案二更适合简单静态的分隔元素，实现成本低，但灵活性有限。

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