我們經常會在用一些自定義 UIView 來完成一些特殊的UI效果，但是怎么讓我自定義的 UIView 在 Storyboard 中預覽和修改一些自定義參數呢。這就需要用到兩個吊吊的東西。
-
IB_DESIGNABLE讓你的自定 UIView 可以在 IB 中預覽。 -
IBInspectable讓你的自定義 UIView 的屬性出現在 IB 中 Attributes inspector 。
環境
OS X 10.11
Xcode 7
Objective-C
自定義一個 UIView
我們先來自定義一個簡單的 UIView，叫做 CircleView，顧名思義，可以顯示一個圓形的 UIView。
我們想一下 CircleView 會有那些屬性。
@interface CircleView : UIView
@property (nonatomic, assign) CGFloat lineWidth; // 圓形線條的寬度
@property (nonatomic, assign) CGFloat radius; // 圓形的半徑
@property (nonatomic, strong) UIColor *color; // 繪制的顏色
@property (nonatomic, assign) BOOL fill; // 是否填充，是不是實心圓
@end
有了這些屬性我們開始繪制。
- (void)drawRect:(CGRect)rect {
// 計算中心點
CGFloat centerX = (self.bounds.size.width - self.bounds.origin.x) / 2;
CGFloat centerY = (self.bounds.size.height - self.bounds.origin.y) / 2;
UIBezierPath *path = [[UIBezierPath alloc] init];
// 添加一個圓形
[path addArcWithCenter:CGPointMake(centerX, centerY) radius:_radius startAngle:0 endAngle:360 clockwise:YES];
// 設置線條寬度
path.lineWidth = _lineWidth;
// 設置線條顏色
[_color setStroke];
// 繪制線條
[path stroke];
if (_fill) {
// 如果是實心圓，設置填充顏色
[_color setFill];
// 填充圓形
[path fill];
}
}
OK，一個簡單的圓形 UIView 就搞定了，現在我們想在 IB 中使用這個 CircleView，打開一個 Storyboard，拖一個 UIView 上去，然后設置 UIView 的 Class 為我們自定義的 CircleView。
這時候我們是看不到預覽效果的。
IB_DESIGNABLE
想要在 IB 中預覽，只需要在自定義的 UIView 加上 IB_DESIGNABLE 修飾即可。
IB_DESIGNABLE
@interface CircleView : UIView
...
@end
之后再回到 Storyboard 中，會重新 building 一下，就可以看到預覽效果啦。
當然需要設置 CircleView 的幾個屬性，上面代碼中我并有寫默認值，所以是什么都看不到的，默認值自己設置一下就好我就不貼代碼。能預覽了之后，下一步就是怎么在 Storyboard 中直接修改 CircleView 的屬性，半徑、顏色之類的。
IBInspectable
還記得上面我們定義的 CircleView 的幾個屬性吧，只要我們能在 Storyboard 中修改這幾個屬性值，那么 CircleView 就會繪制出我們想要的效果。我們只需要屬性聲明的時候加上 IBInspectable 修飾，Xcode 會自動添加到 Storyboard 中 Attributes inspector 欄目中。
@property (nonatomic, assign) IBInspectable CGFloat lineWidth;
@property (nonatomic, assign) IBInspectable CGFloat radius;
@property (nonatomic, strong) IBInspectable UIColor *color;
@property (nonatomic, assign) IBInspectable BOOL fill;
OK，再回到 Storyboard 中，building 之后，選中我們的 UIView 元素，在右邊切換到 Attributes inspector 欄目，就可以在頂部看到我們自定義的屬性。
Xcode 會根據不同的數據類型提供不同的輸入框，我們可以隨意修改屬性，就可以看到預覽效果。
