android实现音乐波动条形图

android实现音乐波动条形图

我们经常听音乐的时候都会有一些柱状图波动，今天我就在android里面来实现这个效果。先看效果图：

分析：

这里我将通过自定义view来实现这个效果，我们将重写View里面的两个重要的方法：onMeasure，onDraw。第一个方法是测量，第二个是绘制。因为我们的控件要适配屏幕，所以我们不能把大小写死了，所以要在

onMeasure里面动态设置大小。

Java

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

//拿到控件的宽高度,并动态计算柱子的宽度

height = View.MeasureSpec.getSize(heightMeasureSpec);

width = View.MeasureSpec.getSize(widthMeasureSpec);

// Log.i("dandy",""+height+"   "+width);

rect_w= (float) (width*0.9/6);//柱子的宽度，因为是6条柱子。*0.9是为了留有空隙，美观一点

random= (int) (height/5);//动态变换的高度比例

}

既然我们测量好了，就开始绘制吧，首先我们可以想象一下所以的条形图都是一样长的，想要他动起来，就得动态改变它的top值并且每隔一段时间刷新，这样就形成了波动效果。既然关键方法分析完了，那就直接上原代码。

public class MyView extends View  {
private float width;//控件宽度
private float height;//空间高度
private float rect_w;//柱状图的宽度
private int rect_t1,rect_t2,rect_t3,rect_t4,rect_t5;
private int random;//动态变换的高度比例
private boolean status=true;//控件的状态
private Handler handler=new Handler(){
public void handleMessage(android.os.Message msg) {
if(msg.what==0x1233){
MyView.this.invalidate();//重绘更新view
}
};
};

public MyView(Context context) {
super(context);
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}

/**这里是为了实现点击一下控件就停止
* 控制控件是否跳动  true为跳动，false为停止
* @param b
*/
public void change_Status(boolean b){
status=b;
}

/**这里是为了实现点击一下控件就停止
* 拿到控件的状态
* @return
*/
public boolean get_Status(){
// Log.i("smile","状态改变了吗？");
return status;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//拿到控件的宽高度,并动态计算柱子的宽度
height = View.MeasureSpec.getSize(heightMeasureSpec);
width = View.MeasureSpec.getSize(widthMeasureSpec);
// Log.i("dandy",""+height+"   "+width);
rect_w= (float) (width*0.9/6);
random= (int) (height/5);
}

@Override
protected void onDraw(Canvas canvas) {
if(status==true){
// 定义一个定时器 ，让画图每个0.5秒执行一次
new Timer().schedule(new TimerTask() {

@Override
public void run() {
rect_t1=new Random().nextInt(random);
rect_t2=new Random().nextInt(random);
rect_t3=new Random().nextInt(random);
rect_t4=new Random().nextInt(random);
rect_t5=new Random().nextInt(random);
// TODO Auto-generated method stub
handler.sendEmptyMessage(0x1233);
}
}, 300);
}
else get_Status();
super.onDraw(canvas);
Paint paint=new Paint();

paint.setColor(Color.YELLOW);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLACK);
canvas.drawLine((float) (width*0.1), (float) (height*0.9), (float) (width*0.9), (float) (height*0.9), paint);
//画柱状；动态图，就要改变柱状的top值
RectF r1=new RectF((float) (width*0.1),rect_t1*5,(float)( width*0.1+rect_w),(float) (height*0.9));
RectF r2=new RectF((float) (width*0.1+rect_w),rect_t2*5,(float)( width*0.1+rect_w*2),(float) (height*0.9));
RectF r3=new RectF((float) (width*0.1+rect_w*2),rect_t3*5,(float)( width*0.1+rect_w*3),(float) (height*0.9));
RectF r4=new RectF((float) (width*0.1+rect_w*3),rect_t4*5,(float)( width*0.1+rect_w*4),(float) (height*0.9));
RectF r5=new RectF((float) (width*0.1+rect_w*4),rect_t5*5,(float)( width*0.1+rect_w*5),(float) (height*0.9));
Paint paint1=new Paint();
paint1.setColor(Color.YELLOW);
paint1.setStyle(Paint.Style.FILL);
paint1.setAntiAlias(true);
canvas.drawRect(r1,paint1);
canvas.drawRect(r2,paint1);
canvas.drawRect(r3,paint1);
canvas.drawRect(r4,paint1);
canvas.drawRect(r5,paint1);
}
}

最后直接在布局文件里面用这个View就行了。