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

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

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

IBInspectable

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

runtime Attributes setting

以前想实现，只能点+号手动添加例如想给UIView添加一个圆角半径，设置Key Path 为：layer.cornerRadius,

type为Number ，Value为4，如果使用IBInspectable只需要在@property 声明后加上IBInspectable（或者swift 加上@IBInspectable），就可以在IB的观察面板中（inspector pannel）里直接编辑。其他交由Xcode自动完成，属性名字会自动分组，名称从驼峰（camel-）转换成 title-模式。

inspector pannel

目前可检查属性支持

supported  types

备注

1.经本人亲测，除NSNumber,NSRange不会产生观察面板属性，NSRange不会在runtime Attributes 中自动添加，其他都会自动生成。

2.支持颜色类型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

实时效果：

custom view

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

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

1.prepareForInterfaceBuilder() :此方法与你代码的其余部分一起编译，但只有当视图正在准备在Interface Builder显示时执行.

2.TARGET_INTERFACE_BUILDER:#if TARGET_INTERFACE_BUILDER预处理宏在 Objective-C 或 Swift 下都是工作的，它会视情况编译正确代码：

#if !TARGET_INTERFACE_BUILDER

   // this code will run in the app itself

#else

   // this code will execute only in IB

#endif

---

参考资料

http://nshipster.cn/ibinspectable-ibdesignable/

Apple 官方介绍

Demo地址

IBInspectable_IBDesignable_Demo