倒计时(时、分、秒)面板

最新推荐文章于 2021-01-12 07:18:52 发布

iOS的美丽岁月

最新推荐文章于 2021-01-12 07:18:52 发布

阅读量792

点赞数

分类专栏： ios控件文章标签：倒计时时间戳时分秒倒计时

本文链接：https://blog.csdn.net/zhoushuangjian511/article/details/77979882

版权

本文介绍了如何在iOS应用中实现一个倒计时面板，包括计算UILabel宽度、设置边框和圆角、使用定时器进行动态更新、处理滑动时定时器暂停的问题，以及时间戳和时间单位的转换。通过这个过程，开发者可以学习到iOS UI设计及时间处理的相关技巧。

摘要由CSDN通过智能技术生成

场景

最近公司App的UI 页面更新，出现了一个项目倒计时面板。该倒计时是用于计时项目到开放还剩余多少时间。效果如下：

分析上图

上图粉红色我标记的地方是倒计时的面板样式，我们把该样式看成10块元素组成。这10块元素如下：“距离项目上线还有:”、“0”、“9”、“小时”、“3”、“0”、“分”、“1”、“1”、“秒”。至于为什么要把时、分、秒的十位和个位分开，你看面板样式你就应该理解了。

使用到的的知识点

- 计算动态计算UILable 的宽度。

- 给UILable描边和切角。

- 定时器的使用（开始&暂停）。

- 定时器在默认的RunLoop中，当页面有滑动定时器不计时。

- 时间的进制转化。

- 求余数的知识。

- 时间戳的转换知识。

倒计时面板类

1、初始化10个元素。

-(instancetype)initWithFrame:(CGRect)frame{
    if (self == [super initWithFrame:frame]) {
        //  初始化
        lable1 = [UILabel new];
        lable1.textAlignment = NSTextAlignmentCenter ;
        lable1.textColor = [UIColor colorWithDisplayP3Red:113/255.0 green:113/255.0 blue:113/255.0 alpha:1.0];
        [self addSubview:lable1];
        hoursTenLable = [UILabel new];
        hoursTenLable.textAlignment = NSTextAlignmentCenter ;
        hoursTenLable.font = [UIFont systemFontOfSize:15];
        [self addSubview:hoursTenLable];
        hoursBitsLable = [UILabel new];
        hoursBitsLable.textAlignment = NSTextAlignmentCenter ;
        hoursBitsLable.font = [UIFont systemFontOfSize:15];
        [self addSubview:hoursBitsLable];
        lable2 = [UILabel new];
        lable2.textAlignment = NSTextAlignmentCenter ;
        lable2.textColor = [UIColor colorWithDisplayP3Red:113/255.0 green:113/255.0 blue:113/255.0 alpha:1.0];
        [self addSubview:lable2];
        minutesTenLable = [UILabel new];
        minutesTenLable.textAlignment = NSTextAlignme