先上效果图:
先通过测量获取view的宽高,然后将宽分为12份,11份为11个条形柱,剩余一份在分为10份作为条形柱之间的间距
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);
offset = width / 12 / 10;
danceWidth = width / 12;
}
传入一个int代表这是第几个条形柱
条形柱是由每个小节拼接起来的,每次随机获取条形柱的高度,然后除以每节的高度和间距来知道要绘制多少节,每一节根据比例来设置不同的颜色达到渐变效果。每次都记录顶点的位置,如果超出则重汇,如果没有则每次都下降一节的高度,达到缓慢落下的效果
private void drawItem(int k){
int start=k*(danceWidth+offset);
double r= Math.random();
int nodeoffset=danceWidth/4;
int nodeheight=danceWidth/2;
int nodewidth=danceWidth;
int topheight=nodeoffset;
int max=height/(nodeheight+nodeoffset);
int count=(int)(height*r)/(nodeheight+nodeoffset);
for (int i = 0; i < count;i++ ) {
float percent=(float)i/max;
if(percent<0.1){
paint.setColor(Color.parseColor(colors[0]));
}else if(percent<0.2){
paint.setColor(Color.parseColor(colors[1]));
}else if(percent<0.3){
paint.setColor(Color.parseColor(colors[2]));
}else if(percent<0.4){
paint.setColor(Color.parseColor(colors[3]));
}else if(percent<0.5){
paint.setColor(Color.parseColor(colors[4]));
}else if(percent<0.6){
paint.setColor(Color.parseColor(colors[5]));
}else if(percent<0.7){
paint.setColor(Color.parseColor(colors[6]));
}else if(percent<0.8){
paint.setColor(Color.parseColor(colors[7]));
}else if(percent<0.9){
paint.setColor(Color.parseColor(colors[8]));
}else{
paint.setColor(Color.parseColor(colors[9]));
}
canvas.drawRect(start,height-(nodeheight+nodeoffset)*i-nodeheight,start+nodewidth,height-(nodeheight+nodeoffset)*i,paint);
}
//当前高度超过最大值,则重新绘制顶部
if(count>=tops[k]){
tops[k]=count;
}else{//没有超过,则往下降一格
tops[k]--;
}
paint.setColor(Color.WHITE);
canvas.drawRect(start,height-(nodeheight+nodeoffset)*tops[k]-topheight,start+nodewidth,height-(nodeheight+nodeoffset)*tops[k],paint);
}
最后循环绘制11次
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint=new Paint();
this.canvas=canvas;
paint.setColor(Color.BLUE);
drawRect();
postInvalidateDelayed(300);//刷新时间
}
private void drawRect(){
for (int i = 0; i <= 10;i++ ) {
drawItem(i);
}
}
最后贴上整个类的代码,喜欢的给我点个赞吧!
![微笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)
完整代码:
public class MusicDanceView extends View {
int width, height, offset, danceWidth;
Paint paint;Canvas canvas;
public MusicDanceView(Context context) {
super(context);
}
public MusicDanceView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);
offset = width / 12 / 10;
danceWidth = width / 12;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint=new Paint();
this.canvas=canvas;
paint.setColor(Color.BLUE);
drawRect();
postInvalidateDelayed(300);//刷新时间
}
private void drawRect(){
for (int i = 0; i <= 10;i++ ) {
drawItem(i);
}
}
int []tops=new int[11];
String[]colors={"#03FC6C","#02FD27","#1BFE01","#80FD02","#C5FE01","#FCE903","#FDA502","#FD6602","#FD3A02","#FF1300"};
private void drawItem(int k){
int start=k*(danceWidth+offset);
double r= Math.random();
int nodeoffset=danceWidth/4;
int nodeheight=danceWidth/2;
int nodewidth=danceWidth;
int topheight=nodeoffset;
int max=height/(nodeheight+nodeoffset);
int count=(int)(height*r)/(nodeheight+nodeoffset);
for (int i = 0; i < count;i++ ) {
float percent=(float)i/max;
if(percent<0.1){
paint.setColor(Color.parseColor(colors[0]));
}else if(percent<0.2){
paint.setColor(Color.parseColor(colors[1]));
}else if(percent<0.3){
paint.setColor(Color.parseColor(colors[2]));
}else if(percent<0.4){
paint.setColor(Color.parseColor(colors[3]));
}else if(percent<0.5){
paint.setColor(Color.parseColor(colors[4]));
}else if(percent<0.6){
paint.setColor(Color.parseColor(colors[5]));
}else if(percent<0.7){
paint.setColor(Color.parseColor(colors[6]));
}else if(percent<0.8){
paint.setColor(Color.parseColor(colors[7]));
}else if(percent<0.9){
paint.setColor(Color.parseColor(colors[8]));
}else{
paint.setColor(Color.parseColor(colors[9]));
}
canvas.drawRect(start,height-(nodeheight+nodeoffset)*i-nodeheight,start+nodewidth,height-(nodeheight+nodeoffset)*i,paint);
}
//当前高度超过最大值,则重新绘制顶部
if(count>=tops[k]){
tops[k]=count;
}else{//没有超过,则往下降一格
tops[k]--;
}
paint.setColor(Color.WHITE);
canvas.drawRect(start,height-(nodeheight+nodeoffset)*tops[k]-topheight,start+nodewidth,height-(nodeheight+nodeoffset)*tops[k],paint);
}
}