Swift 4：如何在UIButton的setTitle中添加倒计时，结束后切换背景色

嘿，我来帮你搞定这个倒计时按钮的需求！咱们可以通过Timer来驱动倒计时更新，同时在倒计时结束时切换按钮的背景色。下面是完整的实现代码和思路：

步骤1：定义核心属性 #

首先在你的视图控制器里，我们需要定义按钮、剩余倒计时秒数和计时器这几个关键元素：

class YourViewController: UIViewController {
    // 倒计时按钮（替换你原来的变量名，更语义化）
    let sendSMSAgainButton: UIButton = {
        let button = UIButton(type: .system)
        button.backgroundColor = .black
        button.layer.cornerRadius = 7
        button.setTitleColor(.white, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        button.isUserInteractionEnabled = false // 倒计时期间先禁用点击
        return button
    }()
    
    // 剩余倒计时秒数（初始设为你需要的36秒）
    private var remainingSeconds: Int = 36
    // 倒计时计时器
    private var countdownTimer: Timer?

步骤2：布局按钮并启动倒计时 #

在viewDidLoad里把按钮添加到视图，设置布局，然后初始化标题并启动倒计时：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 添加按钮到视图并设置AutoLayout（你可以根据自己的布局需求调整约束）
    view.addSubview(sendSMSAgainButton)
    sendSMSAgainButton.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        sendSMSAgainButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        sendSMSAgainButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        sendSMSAgainButton.widthAnchor.constraint(equalToConstant: 220),
        sendSMSAgainButton.heightAnchor.constraint(equalToConstant: 44)
    ])
    
    // 初始化按钮标题，启动倒计时
    updateButtonTitle()
    startCountdown()
}

步骤3：实现倒计时核心逻辑 #

这部分是关键，我们用Timer每秒更新一次剩余时间，同时更新按钮标题；当倒计时归0时，停止计时器，切换按钮背景色并恢复交互：

private func startCountdown() {
    // 先销毁之前的计时器，防止重复创建导致的问题
    countdownTimer?.invalidate()
    
    // 创建每秒触发一次的计时器
    countdownTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { [weak self] timer in
        guard let self = self else {
            timer.invalidate()
            return
        }
        
        // 剩余时间减1，更新按钮标题
        self.remainingSeconds -= 1
        self.updateButtonTitle()
        
        // 倒计时结束的处理
        if self.remainingSeconds <= 0 {
            timer.invalidate()
            self.countdownTimer = nil
            
            // 切换背景色（这里用系统蓝色举例，你可以换成自己需要的颜色）
            self.sendSMSAgainButton.backgroundColor = .systemBlue
            // 修改按钮标题为可点击状态的文本
            self.sendSMSAgainButton.setTitle("SEND SMS AGAIN", for: .normal)
            // 恢复按钮交互
            self.sendSMSAgainButton.isUserInteractionEnabled = true
        }
    }
}

// 更新按钮标题的工具方法
private func updateButtonTitle() {
    sendSMSAgainButton.setTitle("SEND SMS AGAIN IN \(remainingSeconds)", for: .normal)
}

步骤4：内存管理（重要！） #

为了避免内存泄漏，记得在视图消失时销毁计时器：

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    countdownTimer?.invalidate()
    countdownTimer = nil
}

关键细节说明 #

• 倒计时期间禁用按钮交互：防止用户在倒计时未结束时重复点击，符合业务逻辑
• 使用[weak self]：避免计时器强引用视图控制器，导致内存泄漏
• 自定义颜色：你可以把倒计时结束后的.systemBlue换成任何你需要的颜色，比如.green或者自定义RGB颜色

内容的提问来源于stack exchange，提问作者Box House