Android项目中在ViewPager2项间添加按钮分隔符的常见方法

下面是几种在ViewPager2的项之间添加按钮分隔符的常用方案，你可以根据需求选择：

1. 自定义 RecyclerView.ItemDecoration（推荐） #

ViewPager2本质是横向RecyclerView，通过自定义ItemDecoration可以在item间隙插入按钮，无需修改原有Adapter结构：

实现步骤： #

• 重写getItemOffsets方法，为每个非末尾的item右侧预留按钮宽度的空间；
• 在onDrawOver中创建按钮视图，根据item的位置动态计算按钮坐标并更新，同时绑定点击事件。

代码示例： #

class ButtonSeparatorDecoration(
    private val buttonWidth: Int,
    private val onButtonClick: () -> Unit
) : RecyclerView.ItemDecoration() {
    private lateinit var separatorButton: Button

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        super.getItemOffsets(outRect, view, parent, state)
        val position = parent.getChildAdapterPosition(view)
        // 最后一个item不需要预留空间
        if (position != parent.adapter?.itemCount?.minus(1)) {
            outRect.right = buttonWidth
        }
    }

    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(c, parent, state)
        // 初始化按钮
        if (!::separatorButton.isInitialized) {
            separatorButton = Button(parent.context).apply {
                text = "分隔按钮"
                setOnClickListener { onButtonClick() }
                layoutParams = ViewGroup.LayoutParams(buttonWidth, ViewGroup.LayoutParams.MATCH_PARENT)
                parent.addView(this)
            }
        }

        // 遍历可见item，计算按钮位置
        for (i in 0 until parent.childCount) {
            val child = parent.getChildAt(i)
            val position = parent.getChildAdapterPosition(child)
            if (position != parent.adapter?.itemCount?.minus(1)) {
                val buttonLeft = child.right
                val buttonTop = child.top
                separatorButton.layout(buttonLeft, buttonTop, buttonLeft + buttonWidth, child.bottom)
                break
            }
        }
    }
}

使用方式： #

val buttonWidth = resources.getDimensionPixelSize(R.dimen.separator_button_width)
viewPager2.addItemDecoration(ButtonSeparatorDecoration(buttonWidth) {
    // 处理按钮点击逻辑
})

2. 将按钮作为独立item加入Adapter #

把按钮作为单独的item类型，和原内容item交替排列，适合需要按钮随item一起滑动的场景：

实现步骤： #

• 定义密封类区分内容项和按钮项；
• 构建数据源时，在每个内容项后插入按钮项（最后一个内容项除外）；
• 在Adapter中根据item类型加载对应的布局并绑定事件。

代码示例： #

定义item类型：

sealed class PagerItem {
    data class ContentItem(val content: String) : PagerItem()
    object SeparatorButtonItem : PagerItem()
}

构建数据源：

val originalContent = listOf("页面1", "页面2", "页面3")
val pagerItems = mutableListOf<PagerItem>()
originalContent.forEachIndexed { index, content ->
    pagerItems.add(PagerItem.ContentItem(content))
    // 最后一个内容项后不添加按钮
    if (index != originalContent.size - 1) {
        pagerItems.add(PagerItem.SeparatorButtonItem)
    }
}

Adapter实现：

class PagerAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    private val items = mutableListOf<PagerItem>()
    companion object {
        private const val TYPE_CONTENT = 0
        private const val TYPE_BUTTON = 1
    }

    fun updateItems(newItems: List<PagerItem>) {
        items.clear()
        items.addAll(newItems)
        notifyDataSetChanged()
    }

    override fun getItemViewType(position: Int): Int {
        return when (items[position]) {
            is PagerItem.ContentItem -> TYPE_CONTENT
            is PagerItem.SeparatorButtonItem -> TYPE_BUTTON
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            TYPE_CONTENT -> {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.item_content, parent, false)
                ContentViewHolder(view)
            }
            TYPE_BUTTON -> {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.item_separator_button, parent, false)
                ButtonViewHolder(view)
            }
            else -> throw IllegalArgumentException("未知视图类型")
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (holder) {
            is ContentViewHolder -> {
                val item = items[position] as PagerItem.ContentItem
                holder.bind(item.content)
            }
            is ButtonViewHolder -> {
                holder.button.setOnClickListener {
                    // 处理按钮点击逻辑
                }
            }
        }
    }

    override fun getItemCount() = items.size

    class ContentViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bind(content: String) {
            // 绑定内容数据到视图
        }
    }

    class ButtonViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val button: Button = itemView.findViewById(R.id.separator_btn)
    }
}

3. 父容器叠加按钮+监听滚动调整位置 #

在ViewPager2的外层布局中添加按钮，通过监听ViewPager2的滚动事件动态调整按钮位置，使其始终处于两个item之间：

实现步骤： #

• 在布局中给ViewPager2和按钮设置父容器；
• 注册ViewPager2的滚动回调，根据滚动偏移量计算按钮的X坐标。

代码示例： #

布局文件：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android:id="@+id/separator_btn"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="分隔按钮"/>

</RelativeLayout>

滚动监听：

val separatorBtn = findViewById<Button>(R.id.separator_btn)
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels)
        val itemWidth = viewPager2.width
        // 计算按钮X坐标：当前item右侧 + 滚动偏移量
        val btnX = (position + positionOffset) * itemWidth
        separatorBtn.x = btnX
        // 只有当item数量大于1时显示按钮
        separatorBtn.visibility = if (viewPager2.adapter?.itemCount ?: 0 > 1) View.VISIBLE else View.GONE
    }
})

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