[Android]自定义绘制一个简易的音频条形图，附上对MP3音频波形数据的采集与展现

  在项目中需要到数据统计的地方，往往都需要到一些图的展示，比如曲线图、折线图、饼状图、圆形图、条形图等等。在本文中我们来实现一个简易的条形图的绘制。

  首先，我们创建一个BarGraphView类，让这个类继承自View，一般重写View都必须重写View的一参构造方法和二参构造方法，如下：

public class BarGraphView extends View {public BarGraphView(Context context) {        super(context);    }    public BarGraphView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);    }}

  其次，绘制的过程在于onDraw方法的回调，我们重写这个方法，来绘制条形图：

 @Override    protected void onDraw(Canvas canvas) {        Log.i("bar","onDraw");        super.onDraw(canvas);        Random random = new Random();        rectWidth = canvas.getWidth()/barCount;        for (int i = 0;i<barCount;i++){            //生成0-99的随机数，作为高度的百分比，得出一个随机高度            int currentHeight = (random.nextInt(10))*canvas.getHeight()/100;            Log.i("bar","currentHeight:"+currentHeight);            canvas.drawRect(rectWidth*i+offset,currentHeight,rectWidth*(i+1),getHeight(),mPaint);        }      postInvalidateDelayed(speed);    }

  上文代码中，我们先通过canvas.getWidth()/barCount;计算出每个条形的宽度，而高度则是随机取出总高度的百分比。
最后调用canvas.drawRect(rectWidth*i+offset,currentHeight,rectWidth*(i+1),getHeight(),mPaint);

  Canvas代表一个画板，他可以画出很图案，比如条形图其实就是一个个矩形组成的，那么我们利用drawRect可以画出一个矩形来作为一个条形。

  在drawRect方法中五个参数分别代表着：left、top，right、bottom，画笔。

  其实也就是左上顶点坐标（left，top）和一个右下顶点的坐标来确定一个矩形（right，bottom）
我们用rectWidth*i+offset,来定义矩形的left，用随机数来定义矩形的top，用计算出的宽度来定义矩形的right，用总体高度来定义矩形的bottm。

  而第五个参数Paint，代表着一个画笔，有画板了，也知道要画什么，但也得有个笔来画才能展现出来是吧，所以我们增加一个init方法来定义一个Paint变量，让构造方法调用这个init方法：

    private void init(){        mPaint = new Paint();        mPaint.setColor(getResources().getColor(R.color.colorAccent));        mPaint.setStyle(Paint.Style.FILL);    }

  这里为了简单，我们只是把画笔定义为默认的colorAccent颜色。

  在onDraw方法的最后调用postInvalidateDelayed(speed);来刷新，模拟一个条形图动态变化的效果，调用postInvalidateDelayed时View会再回调onDraw方法。

  然后，我们提供几个设置的方法：

    public void setBarCount(int barCount) {        this.barCount = barCount;    }    public void setOffset(int offset) {        this.offset = offset;    }    public void setSpeed(int speed) {        this.speed = speed;    }

  好了，一个简易的条形图就已经初具规模了。通常我们为了更为直观的看到一个效果，会把条形图的条形设置成一个颜色渐变的效果，怎么做呢？

  可以重写View的onSizeChanged方法，在该方法中，我们利用LinearGradient这个颜色渐变的类来装入画笔：

@Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        LinearGradient linearGradient = new LinearGradient(0,0,rectWidth,getHeight(),Color.RED,Color.GREEN, Shader.TileMode.CLAMP);        mPaint.setShader(linearGradient);    }

  代码很简单，我们只是创建一个LinearGradient对象，对象的前面四个参数代表着两个坐标，也就是从（x1，y1）到（x2，y2）的渐变过程，我们让起点坐标都定位0，然后让终点坐标设置为条形图的最高点。第五个参数表示起始颜色，第六个颜色表示终止颜色，我们分别用红和绿，来表示一个绿到红的渐变过程。最后一个参数Shader.TileMode.CLAMP表示如果着色器超出原始边界范围，会复制边缘颜色。最后我们把创建出来的LinearGradient对象装入画笔，就实现一个条形图的渐变效果了。

  到这里，我们就已经完成了一个简易条形图的制作了，另外一个不得不说的点是，由于我们是继承自View,默认View的warp_content模式是填充父布局，也就是跟match_content一样的效果了，那么我们可以来设置一个值，使得如果定义属性为warp_content的话，则有一个默认的值。

  我们重写onMeasure方法，而其实onMeasure方法中，默认就是调用setMeasuredDimension方法，所以我们可以直接把自定义好的宽高值传递给setMeasuredDimension。

  我们定义一个宽度的测量：

  private int measureWidth(int widthMeasureSpec){        int width;        int spacMode = MeasureSpec.getMode(widthMeasureSpec);        int size = MeasureSpec.getSize(widthMeasureSpec);        if(spacMode==MeasureSpec.EXACTLY){            width = size;        }else {            width = 300;            if(spacMode==MeasureSpec.AT_MOST){                width = Math.min(width,size);            }        }        Log.i("bar","width:"+width);        return width;    }

  在Android中，采用了一个int数值来代表一个测量值，用高二位来代表测量的模式，其余位数代表测量的数值。利用MeasureSpec的getMode和getSize方法我们很容易得到这两个数值。

  当我们定义宽或高是match_content或者给定了一个确切的数值的话，则模式就是MeasureSpec.EXACTLY，否则就是MeasureSpec.AT_MOST。其实还有个MeasureSpec.UNSPECIFIED，表示空间不受限制，一般View里面不用到这个属性。如果我们设置为warp_content的话则模式就是MeasureSpec.AT_MOST，我们进行判断，取出一个最小值作为默认包裹的大小。
  另外再定义一个高度的测量，写法几乎一致：

private int measureHeight(int heightMeasureSpec){        int height;        int spacMode = MeasureSpec.getMode(heightMeasureSpec);        int size = MeasureSpec.getSize(heightMeasureSpec);        if(spacMode==MeasureSpec.EXACTLY){            height = size;        }else {            height = 300;            if(spacMode==MeasureSpec.AT_MOST){                height = Math.min(height,size);            }        }        Log.i("bar","height:"+height);        return height;    }

  最后我们在onMeasure方法中，这样子写：

  @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));    }

好了，我们来测试一下，创建一个Activity：

public class BarGraphActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_bar_graph);        BarGraphView view = (BarGraphView) findViewById(R.id.bargraph);        view.setOffset(10);        view.setSpeed(300);//设置间隔刷新速度        view.setBarCount(20);//设置条形图的数量        ｝  ｝

  在布局里面定义：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_margin="15dp"    tools:context="com.example.qyz.BarGraphActivity"><com.example.qyz.BarGraphView    android:id="@+id/bargraph"    android:layout_width="match_parent"    android:layout_height="wrap_content" /></LinearLayout>

  然后运行，截图如下：

  这样子我们的一个简易条形图就制作完毕了。
  最后贴出BarGraphView的代码：

public class BarGraphView extends View {    private  int barCount =30;//条形的数量    private int rectWidth = 15;//条形的宽度    private int offset = 10;    private int speed = 300;    Paint mPaint;    public BarGraphView(Context context) {        super(context);        init();    }    public BarGraphView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init();    }    private void init(){        mPaint = new Paint();        mPaint.setColor(getResources().getColor(R.color.colorAccent));        mPaint.setStyle(Paint.Style.FILL);    }    public void setBarCount(int barCount) {        this.barCount = barCount;    }    public void setOffset(int offset) {        this.offset = offset;    }    public void setSpeed(int speed) {        this.speed = speed;    }    @Override    protected void onDraw(Canvas canvas) {        Log.i("bar","onDraw");        super.onDraw(canvas);        Random random = new Random();        rectWidth = canvas.getWidth()/barCount;        for (int i = 0;i<barCount;i++){            //生成0-99的随机数，作为高度的百分比，得出一个随机高度            int currentHeight = (random.nextInt(100))*canvas.getHeight()/100;            Log.i("bar","currentHeight:"+currentHeight);            canvas.drawRect(rectWidth*i+offset,currentHeight,rectWidth*(i+1),getHeight(),mPaint);        }      postInvalidateDelayed(speed);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));    }    private int measureWidth(int widthMeasureSpec){        int width;        int spacMode = MeasureSpec.getMode(widthMeasureSpec);        int size = MeasureSpec.getSize(widthMeasureSpec);        if(spacMode==MeasureSpec.EXACTLY){            width = size;        }else {            width = 300;            if(spacMode==MeasureSpec.AT_MOST){                width = Math.min(width,size);            }        }        Log.i("bar","width:"+width);        return width;    }    private int measureHeight(int heightMeasureSpec){        int height;        int spacMode = MeasureSpec.getMode(heightMeasureSpec);        int size = MeasureSpec.getSize(heightMeasureSpec);        if(spacMode==MeasureSpec.EXACTLY){            height = size;        }else {            height = 300;            if(spacMode==MeasureSpec.AT_MOST){                height = Math.min(height,size);            }        }        Log.i("bar","height:"+height);        return height;    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        LinearGradient linearGradient = new LinearGradient(0,0,rectWidth,getHeight(),Color.RED,Color.GREEN, Shader.TileMode.CLAMP);        mPaint.setShader(linearGradient);    }}

  为了一个真实效果，我们来接入实际MP3的波形音频，让条形图显示MP3的波形数值，

  怎么得到mp3的波形数值呢？可以利用Visualizer类来进行采集，这部分代码我直接贴出来，在相关代码处已经做了注释：

public class BarGraphActivity extends AppCompatActivity {    // 定义播放声音的MediaPlayer    private MediaPlayer mPlayer;    Visualizer mVisualizer;    WaveView waveView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_bar_graph);         waveView = (WaveView) findViewById(R.id.bargraph);        waveView.setOffset(10);        mPlayer = MediaPlayer.create(this, R.raw.demo);        setupVisualizer();        // 开发播放音乐        mPlayer.start();    }    /**     * 初始化频谱     */    private void setupVisualizer()    {        // 以MediaPlayer的AudioSessionId创建Visualizer        // 显示该MediaPlayer播放的MP3音频数据        mVisualizer = new Visualizer(mPlayer.getAudioSessionId());        //设置数据采样值，一般为2的指数倍，如64,128,256,512,1024。        mVisualizer.setCaptureSize(Visualizer.getCaptureSizeRange()[0]);        /**         * listener，监听采样过程         *rate， 采样的周期，即隔多久采样一次         *iswave，波形信号         *isfft，是FFT信号         */        mVisualizer.setDataCaptureListener(                new Visualizer.OnDataCaptureListener()                {                    //采集快速傅里叶变换有关的数据                    @Override                    public void onFftDataCapture(Visualizer visualizer,                                                 byte[] fft, int samplingRate){                    }                    //采集波形数据                    @Override                    public void onWaveFormDataCapture(Visualizer visualizer,                                                      byte[] waveform, int samplingRate)                    {                        waveView.update(waveform);                        Log.i("bar","onWaveFormDataCapture length:"+waveform.length);                    }                }, Visualizer.getMaxCaptureRate() / 5, true, false);        //必须设置为true后，采集工作才会开始        mVisualizer.setEnabled(true);    }}

  因为我们在上文的数值都是写死成随机的，我们复制BarGraphView重命名为：WaveView，把onDraw方法的代码改为如下：

    @Override    protected void onDraw(Canvas canvas) {        Log.i("bar","onDraw");        super.onDraw(canvas);        if(data==null)return;        rectWidth = canvas.getWidth()*3/data.length;        for (int i = 0,j=0;j<data.length;i++,j+=3){            int currentHeight = (int) (getHeight()*((data[i]+128)/256.0));            canvas.drawRect(rectWidth*i+offset,currentHeight,rectWidth*(i+1),getHeight(),mPaint);        }    }

  由于数据比较多，我们把采集到的byte数组数据，128个采集值每3个显示一个出来。

  最后，还要申请一下权限：