Android 自定义倒计时 View
2016年08月01日新的一周开始了,一篇自定义倒计时View开启了这周的篇章…
国际惯例,效果图如下;
带阴影带指引点的倒计时View,不要被这下过吓到,分析一下,难点其实就是那个白色小圆圈的位置,其他的都是我们之前自定义view中用到的知识,甚至还没有第一篇自定义button逻辑复杂,
看下我们自己实现的效果,和UI做个简单的对比———
简单的对比一下,是不是有几分相似,哈哈哈哈—下面我们就手把手来实现这个倒计时的View
超一麻袋,来个GIF看下动起来的效果
老规矩,分析需求,实现步骤也就那么回事,里面的坑我会用大字标出来
1. 自定义属性分析
从名字和效果图分析我至少需要三层的的颜色,加上文字的颜色,描边的颜色等, 看起来很多属性,其实这些都是方便我们配置的,不要嫌麻烦,
2. 获取自定义属性,
这都是要写吐的代码了,这里就不相信说了,直接粘贴出来,给大家复习下
3. 确定View的尺寸,
4.根据效果图,提供各个图层之间的比例
计算比例的时候尽量安装UI给px 尺寸进行计算,如果UI没标注,用Mac自带的图像打开用鼠标大概的测量一下,这样你最后写出的 view 不会因为不同的尺寸而不成比例,**
注意尽可能的用比例来做,不要用偏移量
5.最后一步,就是绘制
分析下我们这个view我们需要绘制的东西有三层,底层,进度层,文字层, 其中进度层还有一个烦人的小圆圈. Android的知识点涉及,绘制圆,绘制扇形,绘制阴影,Java基础知识 倒计时的实现,Android属性动画知识,还有就是
初中数学Sin和Cos的知识以及球圆上任一点的坐标和坐标系象限的知识
我们都是有精液的Android开发,以上的知识基本都能搞定,困扰的我的就是那个初中数学的知识,悄悄的告诉你们我也谷歌了这些公式,
ok,我们开始一点点绘制
- 绘制底层和阴影
- 绘制中间层 的进度和小圆点
,代码量略大,数学公式来了,高能预警
- 终于跳过了上面的计算,下面的就是剩下绘制文字的知识了so easy
我们先计算出来文字的宽度和高度然后计算出来文字的绘制坐标即可
到此我们的Android绘制API全部用完了,就用了一个绘制扇形和圆形的方法,
下面我们看下Java知识,倒计时的方法;
最后就是一个动画的实现,我们可以理解成进度条在CountDown时间内正好从0-360走完, 那么这个用属性动画就行了
到此,自定义倒计时View结束,由于微信对于代码支持不是很友好，所有全部的完整的代码我就不粘贴出来了，需要的同学，请点击最下方的阅读原文，去原作者博客复制查看。
最后源代码的链接如下,希望大家多多fork和star,github地址如下：
https://github.com/GuoFeilong/ATLoginButton_New