如何让RecyclerView实现ListView式的平滑滚动条效果

这个问题我之前做列表优化的时候也踩过坑，确实RecyclerView默认的滚动条在列表项高度参差不齐的时候，滑块尺寸跳变的视觉体验远不如ListView的平滑过渡。要解决这个问题，核心就是给滚动条的滑块尺寸变化加上动画插值，让它逐步过渡到目标值，而不是瞬间跳转。

下面是我实测有效的实现方案：

1. 自定义带动画的滚动条Drawable #

我们需要继承系统的ScrollbarDrawable，重写它的绘制逻辑，加入ValueAnimator来实现滑块高度的平滑过渡：

public class AnimatedScrollbarDrawable extends ScrollbarDrawable {
    private float mCurrentThumbHeight;
    private float mTargetThumbHeight;
    private ValueAnimator mAnimator;
    private static final int ANIMATION_DURATION = 150; // 和ListView动画时长对齐

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        // 初始化时同步目标高度和当前高度
        mTargetThumbHeight = calculateTargetThumbHeight();
        mCurrentThumbHeight = mTargetThumbHeight;
    }

    private float calculateTargetThumbHeight() {
        Rect bounds = getBounds();
        int visibleHeight = bounds.height();
        int totalContentHeight = getVerticalScrollRange();
        
        if (totalContentHeight <= 0 || visibleHeight >= totalContentHeight) {
            return visibleHeight; // 内容未超出可见区域，滚动条占满高度
        }
        // 滚动条滑块高度的核心计算公式：(可见高度²) / 总内容高度
        return (float) (visibleHeight * visibleHeight) / totalContentHeight;
    }

    private void startSmoothAnimation() {
        if (mAnimator != null && mAnimator.isRunning()) {
            mAnimator.cancel();
        }
        // 从当前高度动画到目标高度
        mAnimator = ValueAnimator.ofFloat(mCurrentThumbHeight, mTargetThumbHeight);
        mAnimator.setDuration(ANIMATION_DURATION);
        mAnimator.addUpdateListener(animation -> {
            mCurrentThumbHeight = (float) animation.getAnimatedValue();
            invalidateSelf(); // 触发重绘
        });
        mAnimator.start();
    }

    @Override
    public void setVerticalScrollRange(int range) {
        super.setVerticalScrollRange(range);
        mTargetThumbHeight = calculateTargetThumbHeight();
        startSmoothAnimation();
    }

    @Override
    public void setVerticalScrollOffset(int offset) {
        super.setVerticalScrollOffset(offset);
        invalidateSelf(); // 滚动时重绘滑块位置
    }

    @Override
    protected void onDrawVertical(Canvas canvas, Paint paint) {
        Rect bounds = getBounds();
        int scrollOffset = getVerticalScrollOffset();
        int totalRange = getVerticalScrollRange();
        
        if (totalRange <= 0 || bounds.height() >= totalRange) {
            return;
        }

        // 计算滑块的上下位置，使用过渡中的当前高度
        int thumbTop = scrollOffset * bounds.height() / totalRange;
        int thumbBottom = thumbTop + (int) mCurrentThumbHeight;
        
        // 绘制滑块（和系统默认绘制逻辑一致，只是高度用了过渡值）
        canvas.drawRect(
            bounds.right - getVerticalScrollbarSize(),
            thumbTop,
            bounds.right,
            thumbBottom,
            paint
        );
    }
}

2. 给RecyclerView设置自定义滚动条 #

在你的Activity/Fragment中，找到RecyclerView实例，替换它的默认滚动条Drawable：

RecyclerView recyclerView = findViewById(R.id.your_recycler_view);
AnimatedScrollbarDrawable animatedScrollbar = new AnimatedScrollbarDrawable();

// 启用垂直滚动条并设置自定义滑块
recyclerView.setVerticalScrollBarEnabled(true);
recyclerView.setVerticalScrollbarThumbDrawable(animatedScrollbar);

3. 处理内容变化时的滚动条更新 #

当RecyclerView的内容高度发生变化（比如Adapter数据更新、列表项动态改变高度），需要主动触发滚动条的目标高度计算：

// 监听RecyclerView布局变化，比如列表项高度改变后布局重排
recyclerView.addOnLayoutChangeListener((v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) -> {
    animatedScrollbar.setVerticalScrollRange(recyclerView.computeVerticalScrollRange());
});

// 或者在Adapter数据更新后调用
yourAdapter.notifyDataSetChanged();
animatedScrollbar.setVerticalScrollRange(recyclerView.computeVerticalScrollRange());

额外注意事项 #

• 如果需要支持水平滚动条，可以参照垂直滚动条的逻辑，重写onDrawHorizontal、setHorizontalScrollRange等方法。
• 动画时长ANIMATION_DURATION可以根据需求调整，150ms是和ListView默认过渡速度接近的值，体验比较自然。
• 确保你的RecyclerView没有设置android:scrollbarStyle为outsideInset之类的特殊样式，避免影响绘制位置。

这样处理后，RecyclerView的滚动条就会像ListView一样，在滑块尺寸需要变化时平滑过渡，不会再出现突兀的跳变了。

内容的提问来源于stack exchange，提问作者Franck W.