Android自定义控件 倒计时

码个蛋第273次推文

倒数5个数~

作者:容华谢后

博客:https://www.jianshu.com/u/34ece31cd6eb

文章目录

写在前面

实现

初始化一些数据

定义控件的大小

绘制刻度盘

绘制刻度盘

绘制定时进度条

绘制时间

滑动事件

写在最后

GitHub传送门(https://link.jianshu.com/?t=https://github.com/alidili/Demos/tree/master/CountdownDemo)

写在前面

本篇文章实现了一个简单的倒计时控件,主要运用了画布的操作,滑动角度计算等知识点,非常适合自定义控件的初学者进行学习,看下效果图:

1

实现

初始化一些数据

定义控件的大小

绘制刻度盘

首先绘制一个圆,然后把坐标原点移动到控件中心,原点移动到控件中心后向上为负值,接着绘制小时刻度,一共有12个刻度,time的单位为分钟,要注意如果刻度被定时进度条覆盖就不再绘制,绘制分钟刻度同理,代码中已经写了很全的注释,不再多说,看下效果:

绘制定时进度条

如果定时时间大于0则开始绘制定时进度条,重点说下绘制进度,在这里并没有使用绘制圆弧的方法,依然是通过旋转画布的方式绘制的,设置一个15分钟的进度,看下效果:

绘制时间

在控件中心绘制一段文本,重点在于如何获取文本的宽高,宽度直接测量就可以了,高度比较特殊,因为绘制的是数字,所以使用Math.abs(timePaint.ascent() + timePaint.descent());这种方式来获取文本高度,先挖个坑,下一篇文章详细讲一下文本的绘制,看下效果:

滑动事件

通过计算滑过的角度增量来设置当前的定时时间,看下如何来计算当前触摸点的角度:

前方高能,请减速慢行!

首先了解下弧度与角度的计算公式:

完整圆的弧度为2π,角度为360度,所以180度等于π弧度

弧度 = 角度 / 180 * π

角度 = 弧度 / π * 180

然后以第一象限的点为例,计算一下触摸点的角度:

看图理解:

根据滑过的角度计算当前的定时时间:

最后提供设置倒计时,和监听倒计时状态的方法:

大功告成,再看下效果:

2

写在最后

源码已经上传到GitHub上了,欢迎Fork,觉得还不错就Start一下吧!

GitHub传送门(https://link.jianshu.com/?t=https://github.com/alidili/Demos/tree/master/CountdownDemo)

点我下载本文Demo的Apk(https://link.jianshu.com/?t=https://github.com/alidili/Demos/raw/master/CountdownDemo/CountdownDemo.apk)

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180129A02BKZ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券