转载请注明出处:https://www.jianshu.com/p/0915c5497d22
Update: Xcode 8.2.1 Swift 3
在开始之前,我们先来了解一个概念 属性观测器(Property Observers):
属性观察器监控和响应属性值的变化,每次属性被设置值的时候都会调用属性观察器,甚至新的值和现在的值相同的时候也不例外。
可以为属性添加如下的一个或全部观察器:
- willSet在新的值被设置之前调用
- didSet在新的值被设置之后立即调用
摘录来自: 极客学院. “The Swift Programming Language 中文版”。 iBooks.
接下来开始我们的教程,先展示一下最终效果:
首先声明一个发送按钮:
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
方法,当isCounting
的newValue
为true
时,我们通过调用Timer
的类方法
scheduledTimerWithTimeInterval:target:selector:userInfo:repeats:
创建并启动刚才声明的countdownTimer
实例,这个实例每一秒钟调用一次updateTime:
方法:
func updateTime(timer: Timer) {
// 计时开始时,逐秒减少remainingSeconds的值
remainingSeconds -= 1
}
当isCounting
的newValue
为false
时,我们停止countdownTimer
并将countdownTimer
设置为nil
。
此外我们还设置了倒计时的时间(这里为了演示时间设置为5秒)和发送按钮在不同isCounting
状态下的样式(这里调整了背景色)和是否可点击。
最后实现sendButtonClick:
方法,这个方法在点击sendButton
时调用:
func sendButtonClick(sender: UIButton) {
// 启动倒计时
isCounting = true
}
完成!
Github地址:
https://github.com/GuiminChu/JianshuExample/tree/master/SMSSendButtonExample