最近的项目很多地方需要现实一些数据占比,需求是水平显示各个数据的占比和对应的数据,需求图大概是这样:
可以看到当百分比文字显示不下的时候,不显示百分比文字,view的左右4个角是圆弧的形状,当只有2个颜色的时候,后面的颜色不显示百分比,百分比文字保留2位小数。那这个该怎么做呢,先是想到用progressBar做,但是progressBar只能显示2段颜色,用多个progressbar就可以了,但是我们有很多段颜色怎么办呢,接下来
首先,我们要确定需要传入的参数有哪些,有颜色、占比数据,我们定义2个方法来接收传入的数据:
颜色的数组
计算出每个数据的总和maxValue
然后常规操作,创建一个类集成View,new 几个画笔,开始干
然后就是要开始绘制了:
我们要获取到布局的总宽度,后面要计算每一段颜色所占的比例
float viewWidth = this.getWidth();//获取view的宽度
计算得到每一段所占的百分比
percent = barList.get(i).getMoney() / maxValue;
第一段和最后一段的部分角是圆角,所以要用mPath.addRoundRect(RectF rect, float[] radii, Direction dir)方法,float[] radii,将哪几个地方是圆角写进去,在for循环中,当是第一段和最后一段时,设置对应的角为5dp的弧度
上onDraw的代码:
这时,就能绘制出需求图中的样子了,
没有动画效果怎么行呢,我们给他加一个动画,gif图效果不太好,可以自己试试
添加动画,通过mAnimatorPercent来控制,将onDraw中的
percentViewPaintRect.right = lastRight + percentWidth;改为:
percentViewPaintRect.right = lastRight + percentWidth*mAnimatorPercent;
写到这里就完了,如果有什么想法可以私信我,最后