Android录音机波形可视化优化：实现Google同款流畅波形效果

问题根源 #

原代码的问题很明确：每次绘制时所有波形线条都从viewWidth位置向左排列，新数据加入后，所有线条直接整体左移4dp，这种离散的跳步移动就是画面抖动的原因。Google录音机的平滑效果靠的是亚像素级的连续偏移过渡，让波形线条慢慢移动，而非突然跳位。

优化方案 #

1. 新增滚动偏移变量 #

加一个float scrollOffset成员变量，用来记录波形的平滑偏移量。每次新增数据时，只累加偏移量，等偏移量超过单条线的宽度（4dp）时，再移除最旧的数据并重置偏移，这样就不会让所有线条突然跳移。

2. 基于偏移量重写绘制逻辑 #

绘制每条线的X位置时带上scrollOffset，实现亚像素级的连续移动，替代原来的跳步式移位。

3. 限制绘制数量 #

只绘制能显示在画布内的线条，避免无效绘制拖慢性能。

优化后的代码 #

// 新增成员变量
private float scrollOffset = 0f;
private final float LINE_WIDTH = AndroidUtils.dpToPx(4);

private void drawRecordingWaveform(@NonNull Canvas canvas) {
    if (recordingData.isEmpty()) {
        return;
    }

    int halfHeight = getMeasuredHeight() / 2;
    int canvasWidth = getWidth();
    // 计算画布能容纳的最大线条数
    int maxVisibleLines = (int) Math.ceil(canvasWidth / LINE_WIDTH) + 1;
    int drawCount = Math.min(recordingData.size(), maxVisibleLines);

    for (int i = 0; i < drawCount; i++) {
        // 结合偏移量计算线条X坐标，实现平滑滚动
        float lineX = canvasWidth - (i * LINE_WIDTH + scrollOffset);
        if (lineX < 0) {
            continue; // 超出左边界的线条不绘制
        }
        float amplitude = recordingData.get(recordingData.size() - 1 - i);
        float topY = halfHeight - amplitude - 1;
        float bottomY = halfHeight + amplitude + 1;
        canvas.drawLine(lineX, topY, lineX, bottomY, waveformPaint);
    }
}

// 在添加新录音数据的方法里更新偏移量
public void addRecordingData(float amplitude) {
    recordingData.add(amplitude);
    scrollOffset += LINE_WIDTH;
    // 偏移量超过单条线宽度时，移除最旧数据并修正偏移
    if (scrollOffset >= LINE_WIDTH) {
        scrollOffset -= LINE_WIDTH;
        if (recordingData.size() > maxVisibleLines) {
            recordingData.remove(0);
        }
    }
    invalidate(); // 触发重绘
}

关键优化点说明 #

• 亚像素平滑偏移：通过scrollOffset累积偏移，每次重绘时线条位置连续变化，彻底解决跳抖问题。
• 裁剪无效绘制：只画画布内的线条，减少不必要的渲染操作，提升流畅度。
• 自动裁剪旧数据：数据量超过可见范围时自动移除最旧的，避免内存占用过高。

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