自定义水平多颜色的百分比视图HorizontalPercenta

最近的项目很多地方需要现实一些数据占比，需求是水平显示各个数据的占比和对应的数据，需求图大概是这样：

1

可以看到当百分比文字显示不下的时候，不显示百分比文字，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;

写到这里就完了，如果有什么想法可以私信我，最后