[iOS] 圆形进度条及计时功能

完整代码可以看:Github。 其实没什么难度,下面记录几个要点

放个预览图


画圆

用的贝塞尔曲线UIBezierPath来画,这个类支持画很多种形状,可以单独去尝试。

UIBezierPath *progress = [UIBezierPath bezierPath];
[progress addArcWithCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2)
                      radius:RADIUS
                  startAngle:startAngle
                    endAngle:endAngle
                   clockwise:YES];
progress.lineWidth = PROGRESS_WIDTH;
[[UIColor redColor] set];
[progress stroke];

参数分别为圆心点、半径、绘制起始角度、绘制结束角度、顺时针方向。如果画一个整圆,角度设为0,2pi即可。这里0度对应3点钟方向,我希望绘制从12点方向开始,设置起始角度为-0.5pi即可。结束角度就根据经过的时间和总的时间的比例进行角度计算。有了以上参数也可以算出在当前角度下的圆周上点的坐标,即可以画出那个圆点。


定时器

这里为了绘制看起来更连贯,我选择0.05秒刷新一次界面,而没有参考系统定时器的1秒刷新一次,这样看起来会更舒服。但在显示数字上会遇到1秒的误差,所以我在格式化字符串的时候对剩余时间做了向上去整ceil()的操作,具体差别可以通过改代码来尝试。

m_timer = [NSTimer scheduledTimerWithTimeInterval:TIMER_INTERVAL target:self selector:@selector(setProgress) userInfo:nil repeats:YES];

UIPickerView循环显示

我一直以为iOS的滚轮是支持内容循环显示的,然而并没有看到相关接口,所以有点迷茫。查过资料后发现原来是用了一个技巧,即循环设置非常多的滚轮内容,然后默认选择居中的item,比如设置10000个项,内容是:0,1,2, …, 97, 98, 99, 0, 1, 2, …, 97, 98, 99, …,然后默认显示第5000个条目,这样用户划起来就好像是循环的。因为总的内容很多,用户不会划很多次,所以用户一般不会遇到划到头的情况。于是,我在系统计时器里试了一下,的确是这样的,当我往一个方向划动非常多次后,滚轮还是会到头的。所以这是可行的方法。

//这里可以直接用MAX_ROWS / 2,但下面的计算适合各种情况:取中间位置,取整,再取余根据余数校正起始位置为要显示内容的第一项(即选中居中的 0 的位置)
- (void)init {
[m_pickerView selectRow:(((NSInteger)((MAX_ROWS / 2) / [m_arrayData count])) * [m_arrayData count]) + (selectedRow % [m_arrayData count]) inComponent:0 animated:NO];
}

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return MAX_ROWS;
}

固定“分钟”单位

系统定时器在选择数字的时候,右边会有一个固定的单位。我依然没有在UIPickerView中找到设置固定单位的接口。如果在-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)componet方法里加上单位,则效果是每一项都会有这个单位。为了解决这个问题,我先尝试了第一种方法,即返回两列滑轮,第二列只有一行:“分钟”,这样显示效果没问题,但第二列是可以拖动的,即有边界弹性效果,而且系统也没有提供关闭弹性效果的接口(btw:UIScrollView里有)。因为这个效果和系统定时器的不一样,所以弃用,不过代码里依然遗留。第二个方案就是直接贴一个Label到适当的位置。简单粗暴,就是位置坐标需要调整到完美显示。不过把它封装成一套控件,往后就可以随意使用了。

参考资料因为chrome没设置同步历史记录,所以这台电脑上没有,改天抽空补上 完整代码可以看:Github 自定义AlertView用的是开源的项目:Github Written with StackEdit.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

29540
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.1K20
来自专栏儿童编程

《动物魔法学校》儿童学编程Scratch之“外观”部分

导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

19140
来自专栏儿童编程

天干地支五行八卦的对应关系

19290
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18030
来自专栏儿童编程

儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

22170
来自专栏儿童编程

一张图理清《梅花易数》梗概

学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

31840
来自专栏儿童编程

什么样的人生才是有意义的人生——没有标准的标准答案

【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

1.8K50
来自专栏儿童编程

声音功能让儿童编程更有创造性

导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

13740
来自专栏儿童编程

我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

15010

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励