使用@IBDesignable和@IBInspectable预览自定义视图

想不想在Interface Builder中直接看到你的自定义视图的效果，而不用每次都运行App？@IBDesignable就是你的秘密武器！ 它可以让你在设计时就预览自定义视图，大大提高开发效率。 想象一下，实时调整颜色、大小，简直不要太方便！

什么是@IBDesignable？

@IBDesignable是一个编译器指令，告诉Xcode你的自定义UIView或NSView可以在Interface Builder中渲染。 简单来说，就是让你的代码和设计稿无缝衔接。 这样，你就可以在设计阶段就看到最终效果，减少不必要的调试时间。

如何使用@IBDesignable？

使用方法非常简单！ 只需要在你的自定义视图类声明前加上@IBDesignable即可。 例如：

@IBDesignable
class MyCustomView: UIView {
    // 你的自定义视图代码
}

加上这行代码后，打开你的Storyboard或XIB文件，选中你的自定义视图，Xcode就会自动渲染它。 如果你的视图没有立即更新，可以尝试Build一下项目 (Command + B)。

使用@IBInspectable添加可配置属性

光能预览还不够，如果能在Interface Builder中直接修改属性就更棒了！ @IBInspectable可以让你在属性面板中直接调整自定义视图的属性。 比如，你可以添加一个borderColor属性，让设计师直接在Interface Builder中修改边框颜色。

@IBDesignable
class MyCustomView: UIView {
    @IBInspectable var borderColor: UIColor = .clear {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }
    @IBInspectable var borderWidth: CGFloat = 0.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
}

在这个例子中，我们添加了borderColor和borderWidth两个属性，并使用@IBInspectable标记。 现在，在Interface Builder中选中MyCustomView，你就可以在属性面板中看到这两个属性，并直接修改它们的值。 记得在didSet中更新视图的layer属性，这样修改才能生效。

常见问题和注意事项

• 性能问题： 频繁的渲染可能会影响Interface Builder的性能。 尽量避免在draw(_:)方法中进行复杂的计算。
• 代码错误： 如果你的代码有错误，Interface Builder可能无法正确渲染视图。 仔细检查你的代码，确保没有语法错误或逻辑错误。
• 自动更新： 有时候Interface Builder可能不会自动更新视图。 尝试Build一下项目，或者重启Xcode。
• 约束冲突： 确保你的视图有正确的Auto Layout约束，否则可能无法正确显示。

实例演示：创建一个可配置的圆角按钮

让我们创建一个可配置圆角按钮的例子，来加深理解。

1. 创建一个新的UIView子类，命名为RoundedButton。
2. 在类声明前加上@IBDesignable。
3. 添加一个cornerRadius属性，并使用@IBInspectable标记。

@IBDesignable
class RoundedButton: UIButton {
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
}

现在，你可以在Interface Builder中拖拽一个UIButton，将其类设置为RoundedButton，然后在属性面板中修改cornerRadius的值，实时看到圆角效果！ 🎉

通过使用@IBDesignable和@IBInspectable，你可以极大地提高你的UI开发效率，让你的自定义视图在Interface Builder中完美呈现。 赶紧尝试一下吧！