Android 自定义View - 柱状波形图 wave view

前言

柱状波形图是一种常见的图形。一个个柱子按顺序排列，构成一个波形图。

柱子的高度由输入数据决定。如果输入的是音频的音量，则可得到一个声波图。

在一些音频软件中，我们也可以左右拖动声波，来改变音频的播放进度

本文举例的自定View，实现如下功能：

• 以柱状形式展示数据的大小
• 标明图形当前最中间的数据
• 可以横向拖动进度，进度就是让某个特定的数据居中展示
• 可以改变左右两边的柱子颜色
• 可以调整柱子的宽度
• 拖动完毕后监听当前进度

实现

首先创建类SoundWaveView继承自View

我们可以先记录给定的宽高，方便后面找到View的中间点

private int viewWid = 1000;     // px
private int viewHeight = 100;   // px

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
   
    super.onSizeChanged(w, h, oldw, oldh);
    viewWid = w;
    viewHeight = h;
    // ..
}

基本属性

例如柱子的颜色，宽度。可以设置个属性来记录，并开放出去可由外部来设置。

private float barWidDp = 1.5f;
private float barWidPx = 3f;
private float barGapPx = barWidPx / 2;
private int barCount = 1;       // 当前宽度能绘制多少个柱子

private final Paint paint = new Paint();
private int leftColor = Color.GREEN;
private int rightColor = Color.LTGRAY;
private int middleLineColor = Color.parseColor("#55000000");

设计监听器

拖动完毕后，可以将当前进度通知出去。也可以直接把触摸事件传出去。

public interface OnEvent {
   
    void onMoveEnd(); // 停止拖动了

    void onDragTouchEvent(MotionEvent event);
}

private OnEvent onEventListener;

private void tellOnMoveEnd() {
   
    if (onEventListener != null) {
   
        onEventListener.onMoveEnd();
    }
}

绘制图形

在onDraw方法中根据数据绘制图形

本例没有设计背景，直接绘制数据。

图形需求之一是要求某个数据能居中显示，我们用midIndex来标记这个数据的下标。

比较简单粗暴的实现方法，遍历整个数据列表，计算出每个数据的x坐标。超出范围的不绘制，范围内的逐一绘制。

@Override
protected void onDraw(Canvas canvas) {
   
    super.onDraw(canvas);
    if (dataList == null || dataList.isEmpty()) {
   
        // draw nothing
        drawMiddleLine(canvas);
        return;
    }
    float x0 = viewWid / 2.0f;

    if (midIndex > 0) {
   
        x0 = x0 - (barGapPx + barWidPx) * midIndex; // 可能是负数
    }
    for (int i = 0; i < dataList.size(); i++) {
   
        float d = dataList.get(i);
        float x = x0 + (barWidPx + barGapPx) * i;
        if (x < 0) {
   
            continue;
        }
        if (x > viewWid) {
   
            break;
        }
        if (i <= midIndex) {
   
            paint.setColor(leftColor);
        } else {
   
            paint.setColor(rightColor);
        }
        paint.setStrokeWidth(barWidPx);
        float bh = (d / showMaxData) * viewHeight;
        bh = Math.max(bh, 4); // 最小也要一点高度 (1)
        float bhGap = (viewHeight - bh) / 2f;
        canvas.drawLine(x, bhGap, x, viewHeight - bhGap, paint);
    }

    drawMiddleLine(canvas);
}

private void drawMiddleLine(Canvas canvas) {
   
    paint.setColor(middleLineColor);
    canvas.drawLine(viewWid / 2f, 0, viewWid / 2f, viewHeight, paint);
}

1. 如果数据太小，为了更美观，也要显示一点东西

左右拖动

本例给出的思路是在SoundWaveView中直接获取触摸事