自定义圆形柱状图

效果图

第一张为非会员gif制作的效果图会有些模糊，第二张为在模拟器显示的原图

第一张
第二张

思路

拿到一个自定义view UI是，先要分析怎么一步一步画出来，在进行代码编写

比如这个圆形柱状图，从下面几步开始

1. 应该画5根距离相同的灰色坐标线，
2. 画柱状图三块文字部分
3. 画柱状图灰色部分
4. 柱状图蓝色部分
5. 画柱状图黄色圆圈和黄线部分
6. 把柱状图数据赋值和画柱状图功能分离出来，不在自定义类里，做到项目需要使用时无需看内部代码，直接看外部调用显示即可。

主要知识点

圆形柱状图有由 顶部半圆+方形+底部半圆组成

边界值注意点

当蓝色长度值小于底部圆半径时，不画蓝色方形，只画底部半圆

颜色渐变效果

startx,starty, 开始渐变的xy轴坐标，结束颜色渐变的XY轴坐标。

 backGradient = new LinearGradient(startx,starty,  stopx, stopy,
                    new int[]{cylinderColorBlueStart, cylinderColorBlueMiddle, cylinderColorBlueMiddleEnd}, null, Shader.TileMode.CLAMP);
    bluePaint.setShader(backGradient);

画圆是根据方形的四个坐标进行绘画的

方形四个坐标相对原点坐标位置

image.png

圆起始点0度位置为3点钟位置，画到多少度，

负数为逆时针方向开始画起，正数为顺时针开始画起，

如下图画的为水平半圆，则画的起始坐标为矩形高度的1/2开始，若画的为垂直半圆，其实坐标为矩形宽度的1/2

image.png

github地址