我們經(jīng)常會在用一些自定義 UIView 來完成一些特殊的UI效果，但是怎么讓我自定義的 UIView 在 Storyboard 中預(yù)覽和修改一些自定義參數(shù)呢。這就需要用到兩個吊吊的東西。
-
IB_DESIGNABLE讓你的自定 UIView 可以在 IB 中預(yù)覽。 -
IBInspectable讓你的自定義 UIView 的屬性出現(xiàn)在 IB 中 Attributes inspector 。
環(huán)境
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];
// 設(shè)置線條寬度
path.lineWidth = _lineWidth;
// 設(shè)置線條顏色
[_color setStroke];
// 繪制線條
[path stroke];
if (_fill) {
// 如果是實心圓，設(shè)置填充顏色
[_color setFill];
// 填充圓形
[path fill];
}
}
OK，一個簡單的圓形 UIView 就搞定了，現(xiàn)在我們想在 IB 中使用這個 CircleView，打開一個 Storyboard，拖一個 UIView 上去，然后設(shè)置 UIView 的 Class 為我們自定義的 CircleView。
這時候我們是看不到預(yù)覽效果的。
IB_DESIGNABLE
想要在 IB 中預(yù)覽，只需要在自定義的 UIView 加上 IB_DESIGNABLE 修飾即可。
IB_DESIGNABLE
@interface CircleView : UIView
...
@end
之后再回到 Storyboard 中，會重新 building 一下，就可以看到預(yù)覽效果啦。
當(dāng)然需要設(shè)置 CircleView 的幾個屬性，上面代碼中我并有寫默認(rèn)值，所以是什么都看不到的，默認(rèn)值自己設(shè)置一下就好我就不貼代碼。能預(yù)覽了之后，下一步就是怎么在 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 會根據(jù)不同的數(shù)據(jù)類型提供不同的輸入框，我們可以隨意修改屬性，就可以看到預(yù)覽效果。
