Android自定义控件之动态柱状图

设计思路:

1.画柱状图 2.画竖线 3.画顶部横线 4.画文字

1.画柱状图

画柱状图的方法很简单，就是使用canvas.drawRect(float left, float top, float right, float bottom, Paint paint)，其实这里我遇到了一个问题，一开始我想只画一条柱状图，然后需要几个柱状图就在xml文件中声明几个，后来我发现，这样实现起来的动画非常之卡顿（上面gif录出来看上去很卡，其实很流畅）。后来我就换了一种思路，就是声明一个数组，，在Activity传入我们需要画的柱状图的总个数和每个柱状图的目标值大小，然后在onDraw方法里分别计算每个柱状图的当前进度，然后分别画出来，这样动画效果就非常流畅了。

/*** 画柱状图*/for(int i = 0 ; i<totalBarNum ; i++){if (currentBarProgress[i]<(respTarget.get(i)/max)*stopX) {currentBarProgress[i]+=10;postInvalidateDelayed(10);}canvas.drawText(respName.get(i),startX,startY+deltaY+i*(deltaY+barWidth)+3*barWidth/4, mTextPaint);canvas.drawRect(startX+7*barWidth/5, startY+deltaY+i*(deltaY+barWidth), currentBarProgress[i], startY+deltaY+i*(deltaY+barWidth)+barWidth, mBarPaint);}2.画竖线和文字

有了上面画柱状图的思路，画竖线就非常容易想了，和画柱状图是一个思路，也是Activity中传入需要画几条竖线，然后在onDraw方法里分别去计算他们的当前进度值，然后再分别去画

文字大小应该随着柱形图宽度来自动适应，所以我进行了一些计算，看上去很复杂，其实就是为了自适应文字的大小

/*** 画竖线*/for(int i=0 ; i<verticalLineNum ; i++){if (currentVerticalLineProgress< measuredHeight) {currentVerticalLineProgress+=3;postInvalidateDelayed(10);}canvas.drawLine((startX+7*barWidth/5)+(i+1)*deltaX, startY, (startX+7*barWidth/5)+(i+1)*deltaX, currentVerticalLineProgress, mLinePaint);//画文字canvas.drawText(numPerUnit*(i+1)+unit, (startX+7*barWidth/5)+(i+1)*deltaX-barWidth, startY-barWidth/5, mTextPaint);}3.画顶部横线

顶部横线我是从右向左画的，正好与柱状图形成一个对比

/*** 画最上面的横线*/if (currentHorizentalLineProgress>startX+7*barWidth/5) {currentHorizentalLineProgress-=10;postInvalidateDelayed(10);}canvas.drawLine(stopX, startY, currentHorizentalLineProgress, startY, mLinePaint);}使用方法

1.设置柱状图的最大值

mBarGraph.setMax(40);

2.设置柱状图单位

mBarGraph.setUnit(“亿元”);

3.设置柱状图宽度

mBarGraph.setBarWidth(50);

4.设置竖线条数

mBarGraph.setVerticalLineNum(4);

5.设置柱状图总个数

mBarGraph.setTotalBarNum(7);

6.设置每个柱状图的目标值

private ArrayList<Float> respectTarget; … respectTarget = new ArrayList<Float>(); respectTarget.add(35.0f);respectTarget.add(20.0f);respectTarget.add(18.0f);respectTarget.add(15.0f);respectTarget.add(10.0f);respectTarget.add(8.0f);respectTarget.add(5.0f); mBarGraph.setRespectTargetNum(respectTarget);

7.设置每个柱状图的名字

private ArrayList<String> respName;…respName = new ArrayList<String>(); respName.add(“滴滴”);respName.add(“小米”);respName.add(“京东”);respName.add(“美团”);respName.add(“魅族”);respName.add(“酷派”);respName.add(“携程”);mBarGraph.setRespectName(respName);完整代码

大家可以上我的GitHub上下载完整代码

年轻是胜利的一半。