XCode中自定义UIButton在Interface Builder显示异常求助

我来帮你搞定这个问题！你遇到的情况很常见：代码里设置的按钮样式在模拟器跑起来正常，但在Interface Builder里却被你在IB里设置的颜色覆盖了，这是因为IB渲染@IBDesignable视图的时机和我们代码执行的顺序有差异。

问题根源 #

当你在IB中使用@IBDesignable类时，IB会先按照你在属性检查器里配置的属性（比如背景色、文字颜色）来初始化视图，之后才会执行我们自定义的初始化方法里的setup逻辑。而且awakeFromNib方法在IB实时渲染视图的时候并不会被调用，这就导致我们的样式设置被IB的默认配置覆盖了。

解决方案 #

只需要给你的DefaultButton类添加一个专门给IB用的方法，并且调整一下调用逻辑，就能让IB里的显示和模拟器保持一致：

修改后的完整代码：

import UIKit

@IBDesignable
class DefaultButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }
    
    // 这个方法是IB渲染@IBDesignable视图时会触发的关键方法
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setup()
    }
    
    func setup() {
        // 强制设置文字颜色为红色，覆盖IB的设置
        setTitleColor(.red, for: .normal)
        // 强制设置背景色为绿色，覆盖IB的设置
        backgroundColor = .green
        // 如果有其他样式（比如圆角、渐变）也统一放在这里
        // layer.cornerRadius = 50
        // 通知视图更新布局，确保样式生效
        setNeedsLayout()
    }
    
    // 移除awakeFromNib里的setup调用——init(coder:)已经在加载时调用过了，避免重复操作
    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

关键修改点说明 #

1. 添加prepareForInterfaceBuilder()：这个方法是苹果专门为IB设计的，当IB渲染@IBDesignable视图时会调用它。在这里调用setup，能确保我们的样式在IB渲染的最后一步生效，直接覆盖IB的默认配置。
2. 移除重复的setup调用：init(coder:)已经在视图从nib加载时执行了setup，awakeFromNib里再调用属于重复操作，去掉它避免不必要的重复设置。
3. 强制样式赋值：直接在setup里给颜色赋值，确保不管IB之前设置了什么，最终都会被我们的代码样式覆盖。

这样修改后，你再回到Interface Builder刷新一下视图，就能看到按钮显示红色文字、绿色背景的样式了，和模拟器里的效果完全一致！

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