简单实现音频条形图,但是顶部新加了小矩形,不过没有实现小矩形自由下落的动画,如果谁那有实现了的demo,记得发我一份一起学习。
首先自定义View分为这么一下几步:
1.首要绘制出一排长短不一样的矩形图
2.通过延迟调用onDraw方法实现矩形图可以动起来
3.下面加入线性渐变的效果,让这个音频条看着更好看(以上这几步网上的例子很多,就不多说了,一会直接贴出代码)
4.下面说我在顶部加了一个小的矩形,这里我是通过矩形条上次和这次比较是变长还是变短进行的分别绘制,
1.由长变短我会在原来的位置从新画上小的矩形
2.由短变长我会在新的位置画上笑的矩形(不知道这么说能说明白不)
上面就是基本的步骤了,主要是最后一步,我本来想在网上找找参考一下,后来没找着,就自己试着写了写,如果不对的话希望指出,谢谢各位大神了啊。
下面把主要的代码写出来:
for (int i = 0; i < rectCount; i++) {
random = Math.random();
currentH = (float) (rectH * random)+offset;
//绘制矩形上面的小方块
lastHeight = (float) array.get(i);
float desY =lastHeight-currentH;
if (desY>0) {//上一个高度距离顶部远
canvas.drawRect((rectW+offset)*i,
currentH-offset,
(rectW+offset)*i+rectW,
currentH,paint1);
}else {//上一个高度距离顶部近
canvas.drawRect((rectW+offset)*i,
lastHeight-offset,
(rectW+offset)*i+rectW,
lastHeight,paint1);
}
//绘制下面的可变矩形
canvas.drawRect((rectW+offset)*i,
currentH,
(rectW+offset)*i+rectW,
rectH,paint);
array.put(i,currentH);
}
postInvalidateDelayed(500);
}
上面的注释也都写的差不多了,就不多说了。下面是写的线性渐变的代码,原来用这个写过一个相机水印的渐变的背景颜色,很好用省去找UI切图的麻烦。
int width = getWidth();
int height = getHeight();
int mRectW = (int) (width * 0.5 / rectCount);
LinearGradient linearGradient = new LinearGradient(0, 0, mRectW, height, Color.BLUE,
Color.RED, Shader.TileMode.CLAMP);
paint.setShader(linearGradient);
基本上就这些东西了,很简单的小例子,最后上个图,