最近的项目里碰到一个六边形的进度条控件，至于为什么说是神奇的，呵呵，因为以前真的没碰到过这种进度条，有木有，github上三方也找不到，有木有，一脸懵逼感觉不会写，有木有，就用一个圆不好嘛- -。对于自定义控件这一块比较薄弱（onMeasure( ), onLayout( ), onDraw( )是什么? 可以吃么）的我来说。万万没想到。。。。。。。。。。。。竟然大致实现了- -。不得不佩服下自己的智商（呵呵。。。。）。
这里先给大家展示一下效果：
进度条效果图
怎么样？是不是有种动漫里面画魔法阵的感觉
首先先简单的说下思路，该思路没有语言限制，可同样用于IOS，WEB等其他语言的界面开发中，First，你要对三角函数有一定的了解，至于没有听过三角函数这个名字的朋友们可以省略以下内容，直接翻到博客底部点击最下方链接下载控件并在需要的时候直接应用到你们的项目中就好。简要的思路如下图所示（尝试了下电脑绘图，好麻烦- -，请各位读者原谅我拙劣的画工）
基本数据的计算
从上图中我们可以看到，将六边形的变成设为 L（这里可以通过控件的宽度来计算），然后我们可以根据这个变长分别算出六边形六个顶点的坐标，如图。具体的计算步骤已经写在上图。
转换成代码如下。这里的宽度可直接通过布局中的xml来设置。在onMeasure( )中实现
基本数据计算的代码展现
接下来就是画进度条了，我们这里将进度条默认为百分之百的，然后分为六个区间（六边形有六条边，对应区间：{[0,100/6),[100/6,100/6 *2),[100/6*2,100/6*3),[100/6*3,100/6*4),[100/6*4,100/6*5),[100/6*5,100]}，分别对相应的区间进行进度条的绘制。
我这里举一个栗子，区间为[100/6*2,100/6*3)其他区间的绘制同理，具体可以参考下图
进度条绘制的原理图
然后接下来如何通过Paint在点与点之间画线我这里就不多做介绍了。
具体的代码实现如下：
进度条绘制 代码 1
进度条绘制 代码 2
怎么样，看完本篇博客的你还有没有表示一脸懵逼，如果懵逼也不要紧。点击下方链接下载控件并在需要的时候直接应用到你们的项目中就好- -
网友评论