我們經常會在用一些自定義 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 會根據不同的數據類型提供不同的輸入框,我們可以隨意修改屬性,就可以看到預覽效果。