iOS 仿Keep中的中场休息界面搭建与部分界面功能分析

我喝着酒,听着歌,抒写着我的情与爱。

今天难得周末,趁着休息又对喜爱的Keep研究了一些。本打算把它的运动视频播放功能也写了的,但奈何还是有些难度,今天写到现在也只是有了些方法但还在努力,就只分享下写完的仿Keep中场休息界面吧。效果图:

此界面倒还算简单,不过在写之前,正如标题所说的,我想先分析前其余界面的搭建。

首先是首页,我们可以看到首页的课程表应是个tableView,其高度会随着选择的内容改变而改变。我们可以在内容改变的时候,如添加新的训练时改变tableView的行数,而后在生成cell的时候重定义自身的高度,

也就是在原有的高度上加上新生成的cell高度。但注意要在刷新tableView之前先重置一下tableView的高度,而且组头的高度一定要小于tableView的高度。否则,会出现tableView高度异常或不调用代理方法如cell的创建等问题。

发现页面则可以通过tableView与collectionView的组合完成,甚至你可以使用scrollView嵌套tableView与collectionView搭建,这都可以看自身喜好。

而关于课程表的训练页面,我之前有写过,通过动态获取的日期生成页面,不同的页面展示不同的内容,并判断当前显示页是否是今日,每一页是几号星期几,在非今日的页面上添加一个按钮可跳转到今日页面。

接下来,言归正传说说今日的主题吧。

通过效果图可以看到中间有一个倒计时功能,倒计时的周五有两个代表进度的圆圈。首先说下倒计时,我是通过两个整型的全局变量来生成,一个代表总共有多少时间,一个代表当前还剩多少时间。通过NSTimer来让代表当前时间的数每一秒减一来完成,如果觉得NSTimer不够保证时间的稳定性可以使用DisplayLink。

圆圈是通过贝塞尔路径绘制的,先绘制一条绿色路径,而后再绘制灰色的路径,通过重绘来达到每秒绘制一次,每次绘制的角度与当前所剩休息时间有关。

整体页面是一个View,倒计时只是个Label,而图片则是个按钮。我通过给View添加手势来响应点击事件的触发,而图片因为由按钮来生成,所以可以拦截点击事件响应不同的结果。所以整体页面才会有两个点击效果。

点击图片应跳转到此时图片对应的训练详情页面,而点击其余页面则跳过此次训练。

以上,就是此页面的实现方案,具体可参考DEMO

DEMO:https://github.com/DrunkenMouse/copyKeepOfRest

最后想说句:机会总是留给有准备的人,所以若准备的不好,机会来了也只能眼睁睁的看着它走。就好比当初keep缺人而我却还在努力准备,当我觉得可以了他们已经不缺人了。唉...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,372评论 4 61
  • 2017.02.22 可以练习,每当这个时候,脑袋就犯困,我这脑袋真是神奇呀,一说让你做事情,你就犯困,你可不要太...
    Carden阅读 1,490评论 0 1
  • 文/吴学新 姥爷是村子里唯一一个考上大学的人,在那个一穷二白的年代,姥爷凭着自己的努力走出了贫穷的家乡,去到了三门...
    Olivia主编君阅读 605评论 0 0
  • 黑暗中期待光线阅读 166评论 0 0
  • 我在隐藏一个秘密 一个不能说出来的秘密 它如此美好,却不能说出口 我痛苦地捧着它 可内心却又是欢喜的。 我时而皱眉...
    蓝色公主阅读 297评论 0 0

友情链接更多精彩内容