一个比较牛逼好用的圆形progress进度

        因公司需要些一个加载的progress。然后美工妹子给出的图片是这个样子，开始我是拒绝的。但是男人怎么能说不行。然后就默默的撸代码了。

一、需求说明：

         先说下这个图片的需求：

        1.首先最外面一层是有很多小圆点的，当进度没有跑过来的时候是灰的，当进度来的时候是白色的。

        2.方向是逆时针的。

        3.在最上面还有两个缺口，进度走到这里来的时候也是要将缺口流出来。

        4.在progress的最前面会有一个发亮的标记，标记当前进度的位置。

        5.中间显示“%”或者“S”。

        效果图：

        由于手机录屏的做成gif图的时候老是出问题。为了节约时间直接截了部分图。但是实际上是动态的。大家应该能想象吧。

        做开发第一点肯定是要明确需求，不然你做的不是人家想要的不是白做了吗？现在看来需求是捋明白了，现在就是想如何实现这个事情了。

二、如何实现。

        通过对需求的分析。我们可以将问题分解：

        注意：每一个分解步骤都是一个方法。

        1.我们先确定一些数据。例如测量出圆心的坐标。等我们需要测量的单位，这里可以不用急着做。做到需要测量的时候我们就再测量就可以了。我们可以放在measureData();方法里面

     

       2.我们从最简单的入手，画最中间的字。这个就比较简单了啦。这里我就直接截图了。源代码可以加微信群然后我会在里面分享给大家。

        这个里面主要做的2件事情就是画数字和后面的%或者S由于后面的字符要比前面的小这个里面还有讲后面文字缩小的，mTextSize／2就是。然后设置他们之间的距离。其实就是思路梳理清楚了很简单，就是api的调用不要想的怎么样怎么样。确定步骤了就一步步的画。       

 3.在内切圆上面画最外面那一圈小圆，这个的肯定要先确定圆心，最外层小圆的半径（这个可以让调用这个类的人设置），还有就是最大圆的半径。确定好了就可以画了。上图。

        

        这里的画if判断是说如果最外层是20个点的话，如果进度是50%，那么肯定前面10个要设置成不同的颜色。后面10个是灰色。这个是动态的。如果我们在外面开启一个线程的话小圆点会一流跑。然后犹豫需求是逆时针的，所以是 360-360f／mcopy。

        

    4.画内部的progress的背景。就是progress灰色的底部。我们调用的api是

canvas.drawArc(RectF,StartAngle,SweepAngle,false,Paint);第一个参数是画的区域，第二个参数是开始的角度，第三个参数是扫过多少度，第四个参数如果味false是只画一段弧，如果味true的画会在弧的两端和圆心链接起来。第五个参数我不想讲。如果有不知道的可以来我房里我单独告诉你。

        我们得用到这个方法。应为从图上可以看出圆上面有两个间隙不能直接是用drawCircle();好了说了这么多还是上代码吧。

    

        大家可能有点疑惑offset偏移量仔细看图发现没有progress起点在最上面，而且和间隙不是分开的。大家也可以不设置这个偏移量，修改startAngle。我这里stargAngle是-90，offset是5，然后就是gaps这个就是间隙的距离外部可以传过来。

        5.好了最大的最难的问题来了如何画这个白色的进度，而且还有一段一段的，而且还是动态可以跑动的。其实思路清晰了也没有那么复杂了。就是分段做不同的处理。还是上代码吧，代码里面都有分段的处理。

代码里面就是一段一段的情况如何出来。只要将这个理清楚了基本上就不是什么问题了。只有最有一个画progress上面的小圆点了。

         5.画圆点。

基本上没有什么问题吧。

这些就写完了所有的画图。然后需要自定义属性的就可以自定义属性。不自定义属性的就直接new出来设置相应需要设置的值就可以了。

-----------------------------------------------------------------------------------------

一个自定义控件就是这么写完的。没有大家想的那么复杂，大家不要怕，其实什么都是这样的。api不都已经给好了吗。我们写什么都是肯定能写出来的。只是说我们的可扩充性的问题。这个的画我自己也是晕乎乎的，这个就要靠多写了。

然后说说

    1.假设需要100%的回掉是不是，就可以加一个接口也是很简单的事不事。

    2.我们又假设要加点击时间处理是不是，有什么复杂的吗。我之前写的自定义事件处理就这么加啊。

        写onTouchEvent然后手指不都会有坐标可以调么。你画的图不也都有位置么。这样一处理判断就可以了。

        嗯好了还是那句话有什么不懂的留言。然后大家可以关注公众号加群。大家相互帮助相互交流。谢谢大家了。这个里面我会分享源代码的。还有更多的其他的自定义控件哦。图表的。会一直给大家推送原创文章的希望大家转载。再次谢谢大家了。