美文网首页学习中的SwiftSwift开发实战swift
[iOS] 短信验证码倒计时Button的实现 (Swift)

[iOS] 短信验证码倒计时Button的实现 (Swift)

作者: 老初 | 来源:发表于2016-01-23 11:14 被阅读5744次

    ** 转载请注明出处:http://www.jianshu.com/p/024dd2d6e6e6#**

    Update: Xcode 8.2.1 Swift 3

    在开始之前,我们先来了解一个概念 属性观测器(Property Observers)

    属性观察器监控和响应属性值的变化,每次属性被设置值的时候都会调用属性观察器,甚至新的值和现在的值相同的时候也不例外。

    可以为属性添加如下的一个或全部观察器:

    • willSet在新的值被设置之前调用
    • didSet在新的值被设置之后立即调用

    摘录来自: 极客学院. “The Swift Programming Language 中文版”。 iBooks.

    接下来开始我们的教程,先展示一下最终效果:

    SMSScreenshot.gif

    首先声明一个发送按钮:

    var sendButton: UIButton!
    

    viewDidLoad方法中给发送按钮添加属性:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        sendButton = UIButton()
        sendButton.frame = CGRect(x: 40, y: 100, width: view.bounds.width - 80, height: 40)
        sendButton.backgroundColor = UIColor.red
        sendButton.setTitleColor(UIColor.white, for: .normal)
        sendButton.setTitle("获取验证码", for: .normal)
        sendButton.addTarget(self, action: #selector(ViewController.sendButtonClick(_:)), for: .touchUpInside)
            
        self.view.addSubview(sendButton)
    }
    

    接下来声明一个变量remainingSeconds代表当前倒计时剩余的秒数:

    var remainingSeconds = 0
    

    我们给remainingSeconds添加一个willSet方法,这个方法会在remainingSeconds的值将要变化的时候调用,并把值传递给参数newValue:

    var remainingSeconds: Int = 0 {
        willSet {
            sendButton.setTitle("验证码已发送(\(newValue)秒后重新获取)", forState: .normal)
                
            if newValue <= 0 {
                sendButton.setTitle("重新获取验证码", forState: .normal)
                isCounting = false
            }
        }
    }
    

    remainingSeconds变化时更新sendButton的显示文本。

    倒计时的功能我们用Timer实现,先声明一个Timer实例:

    var countdownTimer: Timer?
    

    然后我们声明一个变量来开启和关闭倒计时:

    var isCounting = false {
        willSet {
            if newValue {
                countdownTimer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(ViewController.updateTime(_:)), userInfo: nil, repeats: true)
                
                remainingSeconds = 10
                sendButton.backgroundColor = UIColor.gray
            } else {
                countdownTimer?.invalidate()
                countdownTimer = nil
                    
                sendButton.backgroundColor = UIColor.red
            }
                
            sendButton.enabled = !newValue
        }
    }
    

    同样,我们给isCounting添加一个willSet方法,当isCountingnewValuetrue时,我们通过调用Timer的类方法
    scheduledTimerWithTimeInterval:target:selector:userInfo:repeats:创建并启动刚才声明的countdownTimer实例,这个实例每一秒钟调用一次updateTime:方法:

    func updateTime(timer: Timer) {
         // 计时开始时,逐秒减少remainingSeconds的值
        remainingSeconds -= 1
    }
    

    isCountingnewValuefalse时,我们停止countdownTimer并将countdownTimer设置为nil

    此外我们还设置了倒计时的时间(这里为了演示时间设置为5秒)和发送按钮在不同isCounting状态下的样式(这里调整了背景色)和是否可点击。

    最后实现sendButtonClick:方法,这个方法在点击sendButton时调用:

     func sendButtonClick(sender: UIButton) {
        // 启动倒计时
        isCounting = true
    }
    

    完成!

    Github地址:
    https://github.com/GuiminChu/JianshuExample/tree/master/SMSSendButtonExample

    相关文章

      网友评论

      • Self_Time:Timer会不会没有DispatchSourceTime精度高
      • 瓶子君:谢谢啦!
      • 刀神:楼主 pop再进来 怎么让它还在读秒啊
      • 6316e0455b9f:感谢楼主分享
      • 沐玉清风:群主,设置remainingSeconds属性的时候,willSet和didSet有区别没,是不是didSet更好呢?
        老初:@沐玉清风 willSet 是传入新的属性值,didSet 是传入旧的属性值
      • 容错池:感谢楼主,谢谢 :+1:
      • 歌的神:感谢楼主,谢谢 :+1:
      • 玻璃瓶外的水:群主,你的countdownTimer = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: "updateTime", userInfo: nil, repeats: true)
        这个代码中updateTime应该改为updateTime:
        同时也感谢你的这个代码给我带来的帮助,谢谢
        1e42ed00ff39:@玻璃瓶外的水 还是没用啊
      • 8bdaeafb72b7:我根据你的来的, 为什么我的没倒计时一面的时候按钮都会闪一下
        罗同学_:@backup 可以的 :clap:
        backup:我遇到过,我在Storyboard把button的type改为custom就可以
        老初:@joeymeng 用代码添加 UIButton 不会闪,用 Storyboard 就会闪,目前我也不清楚什么原因 :sweat:

      本文标题:[iOS] 短信验证码倒计时Button的实现 (Swift)

      本文链接:https://www.haomeiwen.com/subject/iakrkttx.html