Android动态显示百分比的圆形

一、简介。

    继续Android自定义控件之旅。这次要实现的一个组合的圆,即两部分扇形加起来就是一个圆。效果如下:
Paste_Image.png

Paste_Image.png

所谓的动态是指在开始的时候它可以不断地显示它的内容,先显示一部分到全部显示完,圆的显示添加了动画的效果,而不是一个静态的圆形。

二、思路和主要的代码。

1、计算蓝色扇形和绿色扇形的角度。

根据传进来的数值计算所占的比例,然后确定它们的角度,这部分比较简单就跳过。

2、根据扇形的角度来画文本。

我就分别取它们的一半角度的来计算里面文本的位置。

Paste_Image.png

Paste_Image.png

Paste_Image.png

这部分是画已使用流量的文本的代码。根据它角度的大小来确定(x,y)坐标,比较繁琐。

Paste_Image.png

圆心为坐标系的原点。上面要画的就是“已使用流量、250.0M”这部分。用同样的方法画其余的文本。

3、设置画圆形的属性动画。开始值是0,结束值是360,在onAnimationUpdate回调方法里可以获取到当前的值,然后重新绘制。

Paste_Image.png

4、把扇形画出来。当当前的角度达到扇形的角度的时候就改变画笔的颜色,这样两部分扇形就画出来了。

Paste_Image.png

Paste_Image.png

5、封装并对外提供接口。

1、提供一个builder

Paste_Image.png

2、提供设置控件属性的方法。

Paste_Image.png

3、用动画来显示控件。

Paste_Image.png

4、外部的调用。传的参数就是这个控件类。

Paste_Image.png

三、总结。

(1)我觉得这个控件的难点在于如何让扇形动起来,其实就是不断地画当前的角度的扇形,当它达到当前扇形的角度时就变换画笔的颜色,然后继续画另外一个扇形。
(2)让小的扇形突出。我是通过在要画绿色部分的扇形时候,根据它所占的角度计算它的圆心坐标,然后把之前的圆心坐标移动一下,这样当绿色扇形部分角度比蓝色部分角度小的时候,因为它的圆心比之前的要远了一点,而半径又一样,那么 绿色部分就突出了。

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,194评论 4 61
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,711评论 0 17
  • 我是去年初才开始玩这个游戏的,本来一开始我是拒绝的,但几个好朋友硬是拉着我玩,美其名曰:朋友一起开黑,这游戏才好玩...
    27b3b51cc2a0阅读 4,743评论 5 1
  • 回来西安一年了,从最初的慌忙失措到现在的稳步前进,原本以为自己的工作生活都已经开始往着平静却又不乏激情的步调前行,...
    那片绿阅读 1,150评论 0 1
  • 屋子很多,房子很大,等待拆迁,房子潮湿不堪,这样真的很好吗?我崇尚活在当下!过好今天。这样住的地方实在是难受,...
    一手王阅读 3,165评论 0 0