免费开源的iOS开发学习平台

UIDatePicker详解:3-UIDatePicker应用之倒计时器

UIDatePicker可以用来作为倒计时控件,只需要将UIDatePicker的datePickerMode设置为”UIDatePickerModeCountDownTimer”, 即可以让该控件作为倒计时器使用。此篇文章我们实现一个简单的计时器效果。

1、添加相关属性及变量

datePicker是我们的主要控件,remainingTime用来记录计时开始后的剩余时间,showTimeLabel用来显示剩余时间,timer是计时器,starFlag为记录按钮状态的标志。

@interface ViewController ()
@property(nonatomic,strong)UIDatePicker *datePicker;
@property(nonatomic,assign)NSInteger remainingTime;
@property(nonatomic,strong)UIButton *starButton;
@property(nonatomic,strong)UILabel *showTimeLabel;
@property(nonatomic,strong)NSTimer *timer;
@end
BOOL starFlag = YES;

2、初始化所需控件

  • 初始化UIDatePicker,设置为计时器模式。
- (UIDatePicker *)datePicker {
    if (_datePicker == nil) {
        _datePicker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0, 50, [UIScreen mainScreen].bounds.size.width, 200)];
        _datePicker.datePickerMode = UIDatePickerModeCountDownTimer;
    }
    return _datePicker;
}
  • 初始化UILabel,此label用来展示计时开始后的时间。
- (UILabel *)showTimeLabel {
    if (_showTimeLabel == nil) {
        _showTimeLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 200, 30)];
        _showTimeLabel.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, 350);
        _showTimeLabel.textAlignment = NSTextAlignmentCenter;
        _showTimeLabel.backgroundColor = [UIColor yellowColor];
    }
    return _showTimeLabel;
}
  • 初始化UIButton ,此按钮为计时开始按钮。
- (UIButton *)starButton {
    if (_starButton == nil) {
        _starButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 60, 60)];
        _starButton.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, 280);
        [_starButton setTitle:@"开始" forState:UIControlStateNormal];
        [_starButton addTarget:self action:@selector(clickStarButton) forControlEvents:UIControlEventTouchUpInside];
        _starButton.backgroundColor = [UIColor redColor];
        _starButton.layer.masksToBounds = YES;
        _starButton.layer.cornerRadius = 30;
    }
    return _starButton;
}

3、实现相关功能

  • 点击“开始”按钮之后,计时器开始计时,datePicker从屏幕上移除,按钮显示“重置”,按钮背景变为蓝色,显示剩余时间的showTimeLabel添加到主屏幕上,starFlag变为NO。再次点击按钮执行stateChange方法。
- (void)clickStarButton {
    if (starFlag == YES) {
        self.remainingTime = self.datePicker.countDownDuration;
        self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(starButtonStateTimer) userInfo:nil repeats:YES];
        [self.datePicker removeFromSuperview];
        [self.view addSubview:self.showTimeLabel];
        [self.starButton setTitle:@"重置" forState:UIControlStateNormal];
        self.starButton.backgroundColor = [UIColor blueColor];
        starFlag = NO;
    }else {
        [self stateChange];
    }
}
  • stateChange是在按钮由“重置”变为“开始”时执行的方法,执行时datePicker再次添加到屏幕上,showTimeLabel从屏幕上移除,starFlag变为YES。
- (void)stateChange {
    [self.starButton setTitle:@"开始" forState:UIControlStateNormal];
    [self.view addSubview:self.datePicker];
    [self.showTimeLabel removeFromSuperview];
    self.starButton.backgroundColor = [UIColor redColor];
    starFlag = YES;
}
  • 该方法主要实现开始计时的功能,remainingTime每隔一秒减少1。
- (void)starButtonStateTimer {
    if (self.remainingTime > 0) {
        self.showTimeLabel.text = [NSString stringWithFormat:@"%ld",self.remainingTime];
        self.remainingTime = self.remainingTime - 1;
    }else {
        [self stateChange];
    }
}