自定义UIButton点击时仅图标高亮、标题不变色的问题求助

首先明确：完全可以实现文本和图标同步高亮，你之前的问题主要是因为用了backgroundImage来承载图标，再加上重写backgroundRect干扰了UIButton的原生状态切换逻辑，导致高亮状态的配置没生效。下面给你一套可靠的实现方案：

核心思路调整 #

放弃用backgroundImage放箭头图标，改用UIButton原生的imageView来承载图标——这是按钮图标设计的标准用法，能更好地适配不同状态的样式切换。同时用原生的状态配置来控制标题和图标的高亮效果，避免重写backgroundRect这类容易出问题的方法。

完整实现代码 #

class CustomHighlightButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupButtonStyles()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupButtonStyles()
    }
    
    private func setupButtonStyles() {
        // 1. 配置标题的常态/高亮态颜色
        setTitleColor(.white, for: .normal)
        setTitleColor(.gray, for: .highlighted)
        
        // 2. 准备箭头图标，设置为模板模式（方便用tintColor控制颜色）
        guard let rightIcon = UIImage(named: "disclosureIndicator")?.withRenderingMode(.alwaysTemplate) else { return }
        
        // 3. 设置图标的常态/高亮态（用tintColor统一控制，不用准备两张图）
        setImage(rightIcon, for: .normal)
        setTintColor(.white, for: .normal)
        setTintColor(.gray, for: .highlighted)
        
        // 4. 调整标题和图标的间距，确保图标在右侧
        let iconRightMargin: CGFloat = 20
        if let imageSize = rightIcon.size {
            titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: imageSize.width + iconRightMargin)
            imageEdgeInsets = UIEdgeInsets(top: 0, left: bounds.width - imageSize.width - iconRightMargin, bottom: 0, right: 0)
        }
    }
    
    // 可选：如果需要更精确的布局，重写layoutSubviews调整子视图位置
    override func layoutSubviews() {
        super.layoutSubviews()
        // 确保图标垂直居中，距离右侧20pt
        imageView?.frame = CGRect(
            x: bounds.width - (imageView?.bounds.width ?? 0) - 20,
            y: (bounds.height - (imageView?.bounds.height ?? 0))/2,
            width: imageView?.bounds.width ?? 0,
            height: imageView?.bounds.height ?? 0
        )
        // 标题左对齐，占满剩余空间
        titleLabel?.frame = CGRect(
            x: 0,
            y: (bounds.height - (titleLabel?.bounds.height ?? 0))/2,
            width: bounds.width - (imageView?.bounds.width ?? 0) - 20,
            height: titleLabel?.bounds.height ?? 0
        )
    }
}

关键细节解释 #

1. 为什么不用backgroundImage？
   backgroundImage是按钮的背景层，设计初衷是填充整个按钮区域，重写backgroundRect会破坏UIButton原生的状态切换逻辑——高亮态的背景图无法正确对应到你自定义的区域，导致图标颜色不变化。而imageView是按钮的专属图标容器，原生支持不同状态的样式切换。

2. 模板模式图标的作用
   把图标设置为alwaysTemplate后，图标会忽略自身颜色，完全继承按钮的tintColor。这样你只需要配置不同状态的tintColor，就能轻松实现图标颜色的切换，不用额外准备灰色版本的箭头图。

3. 替代backgroundRect的布局方式
   用layoutSubviews调整子视图位置是UIView布局的标准做法，比重写backgroundRect更可靠，能确保每次按钮尺寸变化时，图标和标题的位置都保持正确。

你之前尝试无效的原因 #

• 用setImage但没生效：大概率是没把图标设为模板模式，或者没配置highlighted状态的tintColor/图片；
• 重写backgroundRect：干扰了按钮的状态触发区域和背景图的状态切换，导致高亮逻辑失效。

内容的提问来源于stack exchange，提问作者Toni Sučić