android UI——绘制动态柱状图

android项目中有时候我们会用到柱状图来表示一个数据。这个我们可以通过自定义view来自己画一个。

先看效果图：（承认很丑，不过看实现方式就行了）



截图工具坏了，本来三个柱状图的长短不是一致的。而且在真机上运行只有一边，gif重复的播放了。

也就是一个柱状图拿到数据后会有一个根据数据大小变化的动画。

接下来看代码：

/**
* 绘制动态柱状图
*/
public class AnimView extends View {
private int width = 60, height = 60;//默认视图高度
protected Paint paint;//画笔
//三个柱状图的坐标
private int aStartX, bStartX, cStartX;
private int aStartY, bStartY, cStartY;
private int aEndX, bEndX, cEndX;
private int aEndY, bEndY, cEndY;

private int aHeight = 1000, bHeight = 1800, cHeight = 500;//三个柱状图的高度，模拟数据

public AnimView(Context context) {
super(context);
initView();
}

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

private void initView() {
paint = new Paint();
//默认颜色
paint.setColor(Color.RED);
paint.setStrokeWidth(150);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY) {
//MeasureSpec.EXACTLY表示该view设置的确切的数值
width = widthSize;
height = heightSize;
}
//三个柱状图的位置分布
aEndX = aStartX = width / 3 - 180;
bEndX = bStartX = width / 3 * 2 - 180;
cEndX = cStartX = width - 180;
aStartY = bStartY = cStartY = height;
aEndY = bEndY = cEndY = height;
setMeasuredDimension(width, height);
}

@Override
protected void onDraw(Canvas canvas) {
//super.onDraw(canvas);
//第一个柱状图
paint.setColor(Color.RED);
paint.setStrokeWidth(50);
if (aStartY >= aHeight) {
aStartY -= 10;
postInvalidateDelayed(10);//如果没有达到数据要求的高度则一直重绘
}
//垂直的横线
canvas.drawLine(aStartX, aStartY, aEndX, aEndY, paint);

//第二个柱状图
paint.setColor(Color.BLUE);
paint.setStrokeWidth(150);
if (bStartY >= bHeight) {
bStartY -= 10;
postInvalidateDelayed(10);
}
canvas.drawLine(bStartX, bStartY, bEndX, bEndY, paint);
//第三个柱状图
paint.setColor(Color.YELLOW);
paint.setStrokeWidth(300);
if (cStartY >= cHeight) {
cStartY -= 10;
//垂直的横线
postInvalidateDelayed(10);
}
canvas.drawLine(cStartX, cStartY, cEndX, cEndY, paint);
}
}

我们还可以在柱状图的顶上加上数据的显示，或者把柱状图的画笔颜色变成具有立体感的渐变器 等等。

这其中主要用到了不听的重绘view，然后改变其坐标的起始位置来达到一个类似动画的效果。

其中的算法可以自己去捉摸。

如果我们在统计一些数据的时候用到自定义的柱状图加上动态的显示数据，效果还是很好的，能够自己画出来比使用三方工具库对app在内存上的占用要小很多。