iOS - IB_DESIGNABLE 和 IBInspecta

场景

在开发中，经常会遇到设置 UIView 或者 UIImageView 等控件圆角的情况，在 xib 和 storyboard 里面，我们一般使用 Runtime Attributes 的方式，通过 layer.cornerRadius 和 layer.masksToBounds 设置圆角半径和边缘裁剪。如下图

Runtime Attributes

虽然运行起来能够实现，但是我们并不能在 xib 马上看到效果，要能实时在 Xcode 显示界面效果，就需要用到 IB_DESIGNABLE 和 IBInspectable 特性了。

用法

从 Xcode 6 开始，苹果就提供了 IB_DESIGNABLE 和 IBInspectable 特性，用法如下表

特性	用途	OC 使用	swift 使用
IB_DESIGNABLE	动态渲染该类图形化界面	IB_DESIGNABLE 写在 @interface 前	@IBDesignable 写在 class 前
IBInspectable	可视化编辑该类的属性	IBInspectable 写在属性类型前	@IBInspectable 写在变量前

直接上代码。创建一个UIView子类，加上 IB_DESIGNABLE 特性

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface LCBaseView : UIView

@end

这时候已经能在设计器直接看到效果了（不要忘了设置 CustomClass ）

IB_DESIGNABLE

然后再试试 IBInspectable，给 View 加一个 cornerRadius 属性用来设置圆角半径

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface LCBaseView : UIView

/** 圆角半径 */
@property (nonatomic, assign) IBInspectable CGFloat cornerRadius;

@end

然后在 .m 文件中重写 set 方法设置圆角

#import "LCBaseView.h"

@implementation LCBaseView

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

@end

回到设计器，会发现刚刚我们自定义的属性神奇的出现在了面板上。把之前设置的 Runtime Attributes 属性全部删了，在这里设置一个100，已经实现了我们想要的效果。

IBInspectable