Storyboard代码可视化

关键字IB_DESIGNABLE用法

通过View重写drawRect方法，在定义Class前面添加IB_DESIGNABLE关键字（注意图中关键字的位置），按下command+R后，通过Storyboard，我们也可以在编译时实时预览我们的代码所产生的效果。

IB_DESIGNABLE用法演示

---

关键字IBInspectable用法

IBInspectable是对运行时属性进行的一种拓展，你在Attributed Inspector中进行的自定义属性配置，都会在Identity Inspector的运行时属性中得到体现。

通过为自定义View的属性添加IBInspectable关键字（注意图中关键字的位置），我们可以将原本需要代码配置的属性，放到故事板中。IBInspectable支持以下类型的属性：

BOOL
NSString
NSNumber
CGPoint
CGSize
CGRect
UIColor
NSRange
UIImage

IBInspectable用法演示

为IOS自带空间增加IBInspectable

实际上，我们只需要为项目添加一个View的Category，在其中声明一个@property并加上IBInspectable关键字,然后在实现文件中的getter&&setter方法中实现具体的逻辑。不用import头文件，也不需要运行,Storyboard中将自动出现这个属性以供配置。

UIView+Draw.h

@interface UIView(Draw)

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

@end

UIView+Draw.m

@implementation UIView(Draw)

- (void)setCornerRadius:(CGFloat)cornerRadius
{
    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = cornerRadius > 0;
}

- (CGFloat)cornerRadius
{
    return self.layer.cornerRadius;
}

- (void)setBorderColor:(UIColor *)borderColor
{
    self.layer.borderColor = borderColor.CGColor;
}

- (UIColor *)borderColor
{
    return [UIColor colorWithCGColor:self.layer.borderColor];
}

- (void)setBorderWidth:(CGFloat)borderWidth
{
    self.layer.borderWidth = borderWidth;
}

- (CGFloat)borderWidth
{
    return self.layer.borderWidth;
}

@end