如何在RecyclerView滚动时保持Sticky View和滚动位置？

2024-07-15 17:03:58

如何在RecyclerView滚动时实现Sticky View并保持滚动位置

在Android开发中，RecyclerView是展示列表数据的强大工具。为了提升用户体验，开发者常常需要实现Sticky View（吸顶效果）和动态更新数据等功能。本文将详细解析在RecyclerView中实现Sticky View的方法，并解决数据更新后滚动位置保持的问题，附带具体的代码示例。

直击痛点：RecyclerView的吸顶效果与滚动位置

假设您正在开发一款电商App，其中一个页面需要展示商品分类列表。您使用RecyclerView来展示数据，并希望实现以下功能：

商品分类标题吸顶显示，方便用户快速切换类别。
点击分类标题后，动态更新该分类下的商品数据。

您可能会遇到这样的问题：使用 notifyItemRangeRemoved 更新商品数据后，RecyclerView会自动滚动到顶部，导致用户体验不佳。

解决方案：ItemDecoration与精准数据更新

1. ItemDecoration打造吸顶效果

我们可以利用 ItemDecoration 来实现Sticky View。ItemDecoration 允许开发者在RecyclerView的每个item之间添加自定义的装饰，从而实现各种视觉效果。

以下代码展示了如何创建一个自定义的 ItemDecoration 来实现分类标题的吸顶效果：

class StickyHeaderItemDecoration(private val adapter: RecyclerView.Adapter<RecyclerView.ViewHolder>) : RecyclerView.ItemDecoration() {

    override fun onDrawOver(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(canvas, parent, state)

        // 找到第一个可见的itemView
        val topChild = parent.findChildViewUnder(
            parent.paddingLeft.toFloat(),
            parent.paddingTop.toFloat()
        )

        // 如果第一个itemView为空或者不是分类标题，直接返回
        if (topChild == null || adapter.getItemViewType(parent.getChildAdapterPosition(topChild)) != TYPE_CATEGORY_HEADER) {
            return
        }

        // 获取吸顶的view
        val stickyView = topChild

        // 找到吸顶view的下一个view
        val nextView = parent.findChildViewUnder(
            parent.paddingLeft.toFloat(),
            (stickyView.bottom + 1).toFloat()
        )

        // 计算吸顶view的top值
        val top = Math.max(0, if (nextView != null && nextView.top < stickyView.bottom) nextView.top - stickyView.height else 0)

        // 保存画布状态
        canvas.save()
        // 平移画布
        canvas.translate(0f, top.toFloat())
        // 绘制吸顶view
        stickyView.draw(canvas)
        // 恢复画布状态
        canvas.restore()
    }

    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.getItemOffsets(outRect, view, parent, state)

        // 如果是第一个itemView且是分类标题，则设置itemView的top边距
        if (parent.getChildAdapterPosition(view) == 0 && adapter.getItemViewType(parent.getChildAdapterPosition(view)) == TYPE_CATEGORY_HEADER) {
            outRect.set(0, stickyHeaderHeight, 0, 0)
        }
    }

    // 获取分类标题itemView的高度
    private val stickyHeaderHeight: Int
        get() {
            // 返回 Type 3 itemView 的高度
            // ... 
        }
}

在你的RecyclerView中应用这个 ItemDecoration:

recyclerView.addItemDecoration(StickyHeaderItemDecoration(adapter))

2. 精准数据更新，锁定滚动位置

notifyItemRangeRemoved 会导致RecyclerView重新计算布局，从而引发自动滚动。为了避免这种情况，我们可以使用 RecyclerView.Adapter 提供的更精确的数据更新方法：

notifyItemInserted(position): 通知适配器在指定位置插入了一项数据。
notifyItemRemoved(position): 通知适配器移除了指定位置的一项数据。
notifyItemChanged(position): 通知适配器指定位置的数据发生了变化。
notifyItemRangeChanged(positionStart, itemCount): 通知适配器从指定位置开始的指定数量的数据发生了变化。

这些方法可以精准地通知RecyclerView哪些数据发生了变化，从而避免不必要的重新布局和滚动。

以下代码演示了如何在更新商品数据时保持滚动位置：

// 获取当前滚动位置
val scrollPosition = recyclerView.computeVerticalScrollOffset()

// 更新商品数据
// ...

// 使用精准的数据更新方法，例如：
adapter.notifyItemRangeChanged(startPosition, itemCount)

// 恢复滚动位置
recyclerView.scrollBy(0, scrollPosition)