先上效果图:
先通过测量获取view的宽高,然后将宽分为12份,11份为11个条形柱,剩余一份在分为10份作为条形柱之间的间距
@Overrideprotected 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次
@Overrideprotected 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);}}
最后贴上整个类的代码,喜欢的给我点个赞吧!
完整代码:
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);}@Overrideprotected 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;}@Overrideprotected 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);}
}