创建自定义 View 在 IB 中实时渲染

曾想自定义的 View，可以像系统自带属性一样，并且实时渲染，动态更新内容，现在在 Xcode6 终于让你可以轻松的做到。

你不用编译就能实时预览，现在配置自定义界面方便多了， IBInspectable 和 IBDesignable 使它成为可能。

IBInspectable

IBInspectable 属性提供访问旧功能的新方法：用户自定义的运行时属性。从目前的身份检查器（identity inspector）中访问，这些属性在Interface Builder整合到Xcode。可以通过它来配置Nib，Xib，storyboard实例中的任何键值编码（key-value-coded）属性：

以前想实现，只能点+号手动添加例如想给 UIView 添加一个圆角半径，设置 Key Path 为：layer.cornerRadius,type 为 Number ，Value 为 4，如果使用 IBInspectable 只需要在 @property 声明后加上 IBInspectable（或者 swift 加上 @IBInspectable ），就可以在 IB 的观察面板中（inspector pannel）里直接编辑。其他交由 Xcode 自动完成，属性名字会自动分组，名称从驼峰（camel-）转换成 title-模式。

目前可检查属性支持

备注 :

经本人亲测，除 NSNumber , NSRange 不会产生观察面板属性， NSRange 不会在 runtime Attributes 中自动添加，其他都会自动生成。
支持颜色类型 UIColor 但是不支持 CALayer 的 CGColor ，设置颜色时只需设置 UIColor ，不要要设置 CGColor ，系统会自动将 UIColor 转换，例如设置 borderColor。

IBDesignable

当你应用到 UIView 或者 UIView 的子类中的时候，只需加上 IBDesignable ，就可以让 IB 在画布上实时渲染视图。当你更新属性后，视图会自动更新不需要重新运行程序。

标记一个自定义视图为 IBDesignable ，只需要在类名前面加上 IB_DESIGNABLE （ Swift 里加上 @IBDesignable ）。你的初始化，布置和绘制方法都将用来在画布上渲染你的自定义视图:

IB_DESIGNABLE

@interface CustomView :UIView {

@property (nonatomic, strong) IBInspectable UIColor *borderColor;		
@property (nonatomic, assign) IBInspectable CGFloat borderWidth;

...

}

@end

实时效果：

有了这个功能，一个设计师或者开放人员可以轻松调整自定义的控件呈现。任何改变，都将立即呈现，有的想 Swift 里面的 playground 功能，实现：所见即所得。

由于在 Interface Builder 中呈现自定义视图不会有应用程序的完整上下文，你可能需要生成模拟数据以便显示，例如一个默认用户头像图片或仿制的天气数据。有两种方法可以为这个特殊的上下文添加代码：

prepareForInterfaceBuilder() :此方法与你代码的其余部分一起编译，但只有当视图正在准备在 Interface Builder 显示时执行
TARGET_INTERFACE_BUILDER:#if TARGET_INTERFACE_BUILDER 预处宏,在 Objective-C 或 Swift 下都是工作的，它会视情况编译正确代码

#if !TARGET_INTERFACE_BUILDE

// this code will run in the app it self

#els

// this code will execute only in IB
#endif

参考资料:

Demo 地址:

IBInspectable_IBDesignable_Demo