整理了一个 android 上的波形图及柱状图绘制控件



---

[说明：以前画过波形图，最近又需要画，略不同，但还得重复写。在网上搜了一下，只找到一个复杂的框架，而我们往往只需要画简单的波形或柱状图。所以我整理提取了过去的代码，有了这个简洁的波形及柱状图控件。实现上很简单，关键在于，怎样简单，又可灵活定制来适用于通常的应用场景。比如在画图之外增加了进度条及触碰反馈功能，就可适用于录音及播音的场景]

SimpleWaveform 显示一串数据为波形图，或者条状图

SimpleWaveform 可以高度定制:

(1)可以显示原始的正负数据，也可以取绝对值来显示数据的幅度
(2)数据可以直接对应像素，也可以是满幅的百分比。控件会自动检测自己的宽度及高度像素
(3)可以选择显示：柱状条 /峰值轮廓 /x 轴
(4)可以选择怎样连接峰值来画出轮廓
(5)其 x 轴可以放在控件的顶部 /中间 /底部
(6)可以设定柱状条的宽度与间隔
(7)可以设定所有的笔，包括柱条 /轮廓 /x 轴 /背景，前两者是两支笔
(8)用两支笔来画前后两部分，这样就有不同的颜色来标识进度
(9)波形图可以从左边或右边开始
(10)如果你手指碰触视图，监听器可以返回碰触的柱条位置

常见用法

(1)当你录音时可以用 SimpleWaveform 来显示声波，请参考 advance demo1
(2)嵌入为 recycler view 的元素，通过左右滑动来显示很长的波形图，请参考 advance demo2

从 github 下载 demo apk

在 github 上查看 SimpleWaveform 源码

demo1: 显示正负数据

demo2: 柱状图

demo3: 显示振幅绝对值

demo4: 显示声波

advance demo1: 显示录音得到音频输入

advance demo2: 嵌入到横向的 recycler view 中显示很长时间的录音

控件用法:

(1)直接拷贝 SimpleWaveform.java 到项目. 目前我还不懂得怎么制作一个 gradle 模块.
(2)查看及拷贝 demo1~4 及 advance demo1~2 代码，位于文件 SimpleWaveformDemo.java 中. 使用非常的直观简单，并且有缺省设置，只要添加数据链表，然后可以省略后续设置并直接显示.

这里是例子 demo3 ，看一下注释即可:

private void demo3() {

    //restore default setting, you can omit all following setting and goto the final refresh() show
    simpleWaveform.init();

    LinkedList<Integer> ampList = new LinkedList<>();
    //generate random data
    for (int i = 0; i < 80; i++) {
        ampList.add(randomInt(-50, 50));
    }
    simpleWaveform.setDataList(ampList);//input data to show

    //define bar gap
    simpleWaveform.barGap = 30;

    //define x-axis direction
    simpleWaveform.modeDirection = SimpleWaveform.MODE_DIRECTION_LEFT_RIGHT;

    //define if draw opposite pole when show bars
    simpleWaveform.modeAmp = SimpleWaveform.MODE_AMP_ABSOLUTE;
    //define if the unit is px or percent of the view's height
    simpleWaveform.modeHeight = SimpleWaveform.MODE_HEIGHT_PERCENT;
    //define where is the x-axis in y-axis
    simpleWaveform.modeZero = SimpleWaveform.MODE_ZERO_CENTER;
    //if show bars?
    simpleWaveform.showBar = true;

    //define how to show peaks outline
    simpleWaveform.modePeak = SimpleWaveform.MODE_PEAK_PARALLEL;
    //if show peaks outline?
    simpleWaveform.showPeak = true;

    //show x-axis
    simpleWaveform.showXAxis = true;
    xAxisPencil.setStrokeWidth(1);
    xAxisPencil.setColor(0x88ffffff);//the first 0x88 is transparency, the next 0xffffff is color
    simpleWaveform.xAxisPencil = xAxisPencil;

    //define pencil to draw bar
    barPencilFirst.setStrokeWidth(15);
    barPencilFirst.setColor(0xff1dcf0f);
    simpleWaveform.barPencilFirst = barPencilFirst;
    barPencilSecond.setStrokeWidth(15);
    barPencilSecond.setColor(0xff1dcfcf);
    simpleWaveform.barPencilSecond = barPencilSecond;

    //define pencil to draw peaks outline
    peakPencilFirst.setStrokeWidth(5);
    peakPencilFirst.setColor(0xfffe2f3f);
    simpleWaveform.peakPencilFirst = peakPencilFirst;
    peakPencilSecond.setStrokeWidth(5);
    peakPencilSecond.setColor(0xfffeef3f);
    simpleWaveform.peakPencilSecond = peakPencilSecond;

    //the first part will be draw by PencilFirst
    simpleWaveform.firstPartNum = 20;//first 20 bars will be draw by first pencil

    //define how to clear screen
    simpleWaveform.clearScreenListener = new SimpleWaveform.ClearScreenListener() {
        @Override
        public void clearScreen(Canvas canvas) {
            canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
        }
    };
    // set touch listener
    simpleWaveform.progressTouch = new SimpleWaveform.ProgressTouch() {
        @Override
        public void progressTouch(int progress, MotionEvent event) {
            Log.d("", "you touch at: " + progress);
            simpleWaveform.firstPartNum = progress;//set touch position back to its progress
            simpleWaveform.refresh();
        }
    };
    //show...
    simpleWaveform.refresh();

    demo_introduce.setText("demo3: amplitude bar");
}

<maxproj.com.simplewaveform.SimpleWaveform
    android:id="@+id/simplewaveform"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_margin="10dp" />