ios-Implementation Verification Code countdown function (1)

Source: Internet
Author: User

Verification Code Countdown button application is very common, the blog with you to write a Idcountdownbutton to achieve the verification code countdown effect. You may want to use the normal UIButton type button, just need to set its countdown time (if not set, the default is 60 seconds), you can easily implement click Countdownbutton Start Countdown, Countdown end can be re-clicked.

First, the realization effect

Second, the realization of ideas
1. Customize a Idcountdownbutton, rewrite begintrackingwithtouch:withevent: Intercept button's Click event, Decide whether to respond and pass the button's Click event based on whether the countdown is in progress (if the countdown is ongoing, clicking again does not start the countdown again)
2, is to use Nstimer timer, timing change Idcountdownbutton title
3, if the countdown is over, cancel the timer and reply to the countdown time (so that Idcountdownbutton have the ability to start the countdown again)
4, when the Idcountdownbutton destruction, the same cancellation timer
Third, the realization step
1. Add related properties
Public properties

?
1234 @interface IDCountDownButton : UIButton/** 验证码倒计时的时长 */@property (nonatomic, assign) NSInteger durationOfCountDown;@end

Private properties

?
12345678 @interface IDCountDownButton ()/** 保存倒计时按钮的非倒计时状态的title */@property (nonatomic, copy) NSString *originalTitle;/** 保存倒计时的时长 */@property (nonatomic, assign) NSInteger tempDurationOfCountDown;/** 定时器对象 */@property (nonatomic, strong) NSTimer *countDownTimer;@end

2. Rewrite setter
Setter for Title Property
1), private attribute originaltitle is used to stage the caption of the button before the start time, that is, the title of the button that is set by the user, usually "Get Verification code"
2), need to shield the timing process, the title update changes the value of Originaltitle

?
1234567 -( void   [super Settitle:title forstate:state];   //countdown in the process of changing title does not update Originaltitle   if (Self.tempdurationofcountdown = = Self.durationofcountdown) {    self.originaltitle = title;   } }

Setter for Durationofcountdown Property
1), set the value of the Tempdurationofcountdown
2), the role of Tempdurationofcountdown: Countdown; with Durationofcountdown to determine whether the current Idcountdownbutton have the ability to restart the countdown

?
1234 - (void)setDurationOfCountDown:(NSInteger)durationOfCountDown { _durationOfCountDown = durationOfCountDown; self.tempDurationOfCountDown = _durationOfCountDown;}

Initialization
1), set the countdown to the default length of 60 wonderful
2), set Idcountdownbutton default title for "Get Verification Code"

?
123456789101112131415161718 - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) {  // 设置默认的倒计时时长为60秒  self.durationOfCountDown = 60;  // 设置button的默认标题为“获取验证码”  [self setTitle:@"获取验证码" forState:UIControlStateNormal]; } return self;}- (instancetype)initWithCoder:(NSCoder *)aDecoder { if (self = [super initWithCoder:aDecoder]) {  // 设置默认的倒计时时长为60秒  self.durationOfCountDown = 60;  // 设置button的默认标题为“获取验证码”  [self setTitle:@"获取验证码" forState:UIControlStateNormal]; } return self;}

Intercept Idcountdownbutton Click events to determine whether to start the countdown
1), if Tempdurationofcountdown equals Durationofcountdown, indicates that the countdown is not started, responds to and transmits the Idcountdownbutton click event; otherwise, it does not respond and is not delivered.

?
123456789 - (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { // 若正在倒计时,不响应点击事件 if (self.tempDurationOfCountDown != self.durationOfCountDown) {  return NO; } // 若未开始倒计时,响应并传递点击事件,开始倒计时 [self startCountDown]; return [super beginTrackingWithTouch:touch withEvent:event];}

Countdown
1), create timer, start countdown

?
123456 - (void)startCountDown { // 创建定时器 self.countDownTimer = [NSTimer timerWithTimeInterval:1 target:self selector:@selector(updateIDCountDownButtonTitle) userInfo:nil repeats:YES]; // 将定时器添加到当前的RunLoop中(自动开启定时器) [[NSRunLoop currentRunLoop] addTimer:self.countDownTimer forMode:NSRunLoopCommonModes];}

2), update the title of Idcountdownbutton to Countdown to the remaining time

?
123456789101112 - (void)updateIDCountDownButtonTitle { if (self.tempDurationOfCountDown == 0) {  // 设置IDCountDownButton的title为开始倒计时前的title  [self setTitle:self.originalTitle forState:UIControlStateNormal];  // 恢复IDCountDownButton开始倒计时的能力  self.tempDurationOfCountDown = self.durationOfCountDown;  [self.countDownTimer invalidate]; } else {  // 设置IDCountDownButton的title为当前倒计时剩余的时间  [self setTitle:[NSString stringWithFormat:@"%zd秒", self.tempDurationOfCountDown--] forState:UIControlStateNormal]; }}

3), remove timer

?
123 - (void)dealloc { [self.countDownTimer invalidate];}

Using the example
1), add Vertificationcodeidcountdownbutton property

?
1234 @interface ViewController ()/** 验证码倒计时的button */@property (nonatomic, strong) IDCountDownButton *vertificationCodeIDCountDownButton;@end

2), create Vertificationcodeidcountdownbutton and make relevant settings

?
12345678910111213141516 - (void)viewDidLoad { [super viewDidLoad]; // 创建vertificationCodeIDCountDownButton self.vertificationCodeIDCountDownButton = [[IDCountDownButton alloc] initWithFrame:CGRectMake(160, 204, 120, 44)]; // 添加点击事件 [self.vertificationCodeIDCountDownButton addTarget:self action:@selector(vertificationCodeIDCountDownButtonClick:) forControlEvents:UIControlEventTouchUpInside]; // 设置标题相关属性 [self.vertificationCodeIDCountDownButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [self.vertificationCodeIDCountDownButton setTitle:@"获取验证码" forState:UIControlStateNormal]; // 设置背景图片 [self.vertificationCodeIDCountDownButton setBackgroundImage:[UIImage imageNamed:@"redButton"] forState:UIControlStateNormal]; // 设置倒计时时长 self.vertificationCodeIDCountDownButton.durationOfCountDown = 10; // 将vertificationCodeIDCountDownButton添加的控制器的view中 [self.view addSubview:self.vertificationCodeIDCountDownButton];}

3), to implement the action triggered by the Click event

?
123 - (void)vertificationCodeIDCountDownButtonClick:(UIButton *)button { // TODO:调用服务器接口,获取验证码}

Iv. about AppIcon
The following rules apply when adding AppIcon
1), name, start with icon (capital letter), keep up with @2x/@3x,

2), size, must be set according to the requirements of the size,

3), the figure shown in the 60pt corresponding image size is
2x:120px X 120px
3x:180px X 180px

The above is the whole content of this article, I hope that everyone's study has helped.

ios-Implementation Verification Code countdown function (1)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.