UIButton点击时文本出现蓝色底色问题求助

问题描述 #

我希望实现点击「Current Location」按钮时，按钮切换为紫色十六进制色背景搭配白色文字，再次点击则切换回白色背景搭配紫色文字。但目前遇到问题：首次点击时文本后方出现蓝色底色，尝试将tint设置为clear会导致文字消失。

问题截图 #

现有代码 #

lazy var currentLocationButton: UIButton = {
    let button = UIButton(type: .system)
    button.setTitle("Current Location", for: .normal)
    button.setTitleColor(UIColor.darkPurpleTint, for: .normal)
    button.backgroundColor = .white
    button.layer.borderWidth = 2
    button.layer.borderColor = UIColor.darkPurpleTint.cgColor
    button.setDimensions(height: 30, width: 30)
    button.layer.cornerRadius = 30 / 2
    button.addTarget(self, action: #selector(currentLocationTapped(_:)), for: .touchUpInside)
    return button
}()

@objc func currentLocationTapped(_ sender: UIButton) {
        
    if sender.isSelected {
       sender.backgroundColor = .darkPurpleTint
       sender.setTitleColor(.white, for: .normal)
       sender.isSelected.toggle()
    } else {
       sender.backgroundColor = .white
       sender.setTitleColor(UIColor.darkPurpleTint, for: .normal)
       sender.isSelected.toggle()
    }
        
}

解决方法 #

1. 替换按钮类型 #

系统类型（.system）的UIButton默认带有高亮/点击时的蓝色tint效果，这就是你看到的蓝色底色来源。将按钮类型改为.custom，即可完全自定义样式，消除默认蓝色效果：

let button = UIButton(type: .custom)

2. 修正点击逻辑 #

原逻辑中isSelected的判断与样式设置完全颠倒，导致首次点击后状态混乱。可以直接利用按钮的isSelected状态来绑定样式，两种实现方式：

方式一：提前设置各状态样式（推荐）

提前为.normal和.selected状态分别设置文字颜色和背景色，点击时只需切换isSelected即可：

lazy var currentLocationButton: UIButton = {
    let button = UIButton(type: .custom)
    button.setTitle("Current Location", for: .normal)
    
    // 正常状态样式
    button.setTitleColor(UIColor.darkPurpleTint, for: .normal)
    button.backgroundColor = .white
    
    // 选中状态样式
    button.setTitleColor(.white, for: .selected)
    button.setBackgroundColor(UIColor.darkPurpleTint, for: .selected)
    
    button.layer.borderWidth = 2
    button.layer.borderColor = UIColor.darkPurpleTint.cgColor
    button.setDimensions(height: 30, width: 30)
    button.layer.cornerRadius = 30 / 2
    button.addTarget(self, action: #selector(currentLocationTapped(_:)), for: .touchUpInside)
    return button
}()

@objc func currentLocationTapped(_ sender: UIButton) {
    sender.isSelected.toggle()
}

注：setBackgroundColor(_:for:)是UIButton的扩展方法，如果没有实现，可添加以下扩展：

extension UIButton {
    func setBackgroundColor(_ color: UIColor?, for state: UIControl.State) {
        UIGraphicsBeginImageContext(CGSize(width: 1, height: 1))
        color?.setFill()
        UIRectFill(CGRect(x: 0, y: 0, width: 1, height: 1))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        setBackgroundImage(image, for: state)
    }
}

方式二：点击时动态切换样式

如果不想提前设置状态样式，也可以在点击方法中根据isSelected状态直接修改属性：

@objc func currentLocationTapped(_ sender: UIButton) {
    sender.isSelected.toggle()
    sender.backgroundColor = sender.isSelected ? UIColor.darkPurpleTint : .white
    sender.setTitleColor(sender.isSelected ? .white : UIColor.darkPurpleTint, for: .normal)
}

3. 可选：添加高亮状态反馈 #

如果需要点击时的视觉反馈，可单独设置.highlighted状态的样式，避免系统默认效果：

button.setTitleColor(.lightGray, for: .highlighted)
button.setBackgroundColor(UIColor.darkPurpleTint.withAlphaComponent(0.8), for: .highlighted)

内容的提问来源于stack exchange，提问作者Zachary Smouse