这是一个神奇的进度条

      最近的项目里碰到一个六边形的进度条控件,至于为什么说是神奇的,呵呵,因为以前真的没碰到过这种进度条,有木有,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

怎么样,看完本篇博客的你还有没有表示一脸懵逼,如果懵逼也不要紧。点击下方链接下载控件并在需要的时候直接应用到你们的项目中就好- -

一个神奇的进度条 - 下载频道  - CSDN.NET

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,870评论 25 708
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,871评论 22 665
  • 【Android 自定义View】 [TOC] 自定义View基础 接触到一个类,你不太了解他,如果贸然翻阅源码只...
    Rtia阅读 3,973评论 1 14
  • (目录君在下面哦~) 1.等了一会,老板把点的东西都端了上来,摆了慢慢一桌子,吃了很长时间。期间苏莹说了她的故事:...
    浮华小哥阅读 1,493评论 0 5
  • 0327 杨:打卡,《极盗者》第二遍。等这个电影的清晰版等了快四个月。电影的主要内容是人与自然的关系,与自然融为一...
    鹿_NICE阅读 203评论 0 0