android学习笔记-模仿音乐音频频率

看书的时候，看到了一个模仿音乐音频条的例子，就敲了一下，效果还可以。先看下效果

1. 实现思路

自定义一个视图，然后在onDraw()方法中绘制几个长方形的条，让长方形的长条随机变化，然后重复绘制，就有了这样的效果。

2. 自定义View

public class MusicLinearClip extends View {private int mWidth;private int mHeight;private int mCurrentHeight;private int mRectWidth;private int mRectCount = 6;private Paint mPaint;//线性渐变private LinearGradient linearGradient;private int offset = 8;//条形之间的间隔//如果view想要应用wrapContent，就必须重写onMeasure方法public MusicLinearClip(Context context, AttributeSet attrs) {    super(context, attrs);    // TODO Auto-generated constructor stub    mPaint = new Paint();}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {    // TODO Auto-generated method stub    super.onSizeChanged(w, h, oldw, oldh);    //mWidth这里面等于屏幕的宽度，控件的宽度为充满整个布局    mWidth = getWidth();    mHeight = getHeight();    System.out.println("width="+mWidth+",height="+mHeight);    //每个长方条的宽度    mRectWidth = (int) (mWidth*0.6/mRectCount);    //他这个参数的意思是：既然是渐变的线，那么这个线是有宽度的，所以会有开始和结束的坐标    linearGradient = new LinearGradient(            0,            0,            mRectWidth,            mHeight,            Color.BLUE,            Color.YELLOW,            Shader.TileMode.CLAMP            );    mPaint.setShader(linearGradient);}@Overrideprotected void onDraw(Canvas canvas) {    // TODO Auto-generated method stub    super.onDraw(canvas);    for (int i = 0; i < mRectCount; i++) {        mCurrentHeight = (int)( Math.random()*mHeight);        float left = (float) (mRectWidth*i+mWidth*0.2+offset);        float top = mCurrentHeight;        float right = (float) (mRectWidth*(i+1)+mWidth*0.2);        float bottom = mHeight;        //这里犯错的原因是我把他参数的意思给理解错了,left,top指得是左上角的横纵坐标，bottom,right指得是右下角的横纵坐标        //他的坐标系箭头是向下的,当right的值小于left的值，bottom的值小于top的值时，这时候将不会绘制任何图形        canvas.drawRect(left, top, right, bottom, mPaint);    }    postInvalidateDelayed(300);}

}

• 上面代码中 有一个canvas.drawRect(left, top, right, bottom, mPaint);

3. 那么这些音频条该如何绘制呢

这样的方法，其中：left，top是左上角的横纵坐标，right,bottom是右下角的横纵坐标，这样就能唯一确定一个长方形。

• float left = (float) (mRectWidth*i+mWidth*0.2+offset);
• float top = mCurrentHeight;
• float right = (float) (mRectWidth*(i+1)+mWidth*0.2);
• float bottom = mHeight;

我们把bottom 的高度设置为屏幕的高度，这样绘制出来的图形他就会到达屏幕的最下角了。

4. 让绘制出来长方条之间有间隔，有俩种方式可以实现

第一种：left=(mRectWidth*i+mWidth*0.2+offset);

right= (float) (mRectWidth*(i+1)+mWidth*0.2);

offset为设置的间隔

如果不加offset的话，上面的公式是没有间距的，当加了offset,虽然长条的宽度变短了，但是变短的距离刚好为我们想要设置的间距。

第二种方法需要判断是不是绘制第一次，如果是第一次就不加间隔，其他的话，left需要加间隔。

Demo下载：链接