自定义@IBDesignable按钮图片不显示，如何解决？

嘿，我之前在做IBDesignable自定义按钮的时候也踩过图片不显示的坑，结合你的情况，给你几个实用的排查和解决方法：

1. 解决IBDesignable预览时的图片加载路径问题 #

Interface Builder的预览环境和App运行时的bundle不一样，直接用UIImage(named: "")可能找不到Assets里的图。你需要在加载图片时指定当前自定义类的bundle：

let image = UIImage(named: "你的图片名", in: Bundle(for: BigButtonView.self), compatibleWith: nil)
self.setImage(image, for: .normal)

如果想在Storyboard的Attributes面板直接选图，建议加一个@IBInspectable属性来绑定：

@IBInspectable var buttonImage: UIImage? {
    didSet {
        // 如果是图标类图片，建议设置渲染模式避免被tintColor影响
        let displayImage = buttonImage?.withRenderingMode(.alwaysOriginal)
        setImage(displayImage, for: .normal)
        // 用背景图的话就换成下面这句
        // setBackgroundImage(displayImage, for: .normal)
    }
}

2. 检查渐变层是否遮挡了图片 #

看你的代码里有渐变颜色的属性，如果你是通过添加CAGradientLayer来实现渐变效果，很可能渐变层盖在了图片上面。解决方法是把渐变层插入到最底层：

override func layoutSubviews() {
    super.layoutSubviews()
    // 假设你已经创建了gradientLayer
    gradientLayer.frame = bounds
    // 确保渐变层在所有子layer的最下面
    if gradientLayer.superlayer == nil {
        layer.insertSublayer(gradientLayer, at: 0)
    }
}

3. 强制刷新IBDesignable缓存 #

有时候Xcode的IB缓存会导致预览不更新，试试这几个操作：

• 点击Storyboard右上角的「Refresh All Views」按钮（那个循环箭头图标）
• 清理项目缓存：Cmd + Shift + K，然后重新Build
• 关闭并重新打开Xcode，彻底清除IB的缓存

给你补全的完整示例代码 #

结合上面的要点，整理了一个能正常显示图片的BigButtonView版本：

import UIKit

@IBDesignable class BigButtonView: UIButton {
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    
    @IBInspectable var borderColor: UIColor = #colorLiteral(red: 0.8039215686, green: 0.9529411765, blue: 0.9647058824, alpha: 1) {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }
    
    @IBInspectable var gradientColorOne: UIColor = #colorLiteral(red: 0.2, green: 0.5, blue: 0.8, alpha: 1)
    @IBInspectable var gradientColorTwo: UIColor = #colorLiteral(red: 0.1, green: 0.3, blue: 0.6, alpha: 1)
    
    @IBInspectable var buttonImage: UIImage? {
        didSet {
            let displayImage = buttonImage?.withRenderingMode(.alwaysOriginal)
            setImage(displayImage, for: .normal)
        }
    }
    
    private lazy var gradientLayer: CAGradientLayer = {
        let layer = CAGradientLayer()
        layer.colors = [gradientColorOne.cgColor, gradientColorTwo.cgColor]
        layer.startPoint = CGPoint(x: 0, y: 0.5)
        layer.endPoint = CGPoint(x: 1, y: 0.5)
        return layer
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBaseStyle()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseStyle()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
        if gradientLayer.superlayer == nil {
            layer.insertSublayer(gradientLayer, at: 0)
        }
    }
    
    private func setupBaseStyle() {
        layer.cornerRadius = bounds.height / 2
        clipsToBounds = true
        tintColor = .white // 根据需要设置tintColor
    }
    
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setupBaseStyle()
        // 手动触发图片更新，确保IB预览正常
        if let image = buttonImage {
            setImage(image.withRenderingMode(.alwaysOriginal), for: .normal)
        }
    }
}

你可以试试上面的方法，应该能解决图片不显示的问题～

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