我們經(jīng)常會(huì)在用一些自定義 UIView 來完成一些特殊的UI效果端姚，但是怎么讓我自定義的 UIView 在 Storyboard 中預(yù)覽和修改一些自定義參數(shù)呢。這就需要用到兩個(gè)吊吊的東西垫毙。
-
IB_DESIGNABLE讓你的自定 UIView 可以在 IB 中預(yù)覽蜜葱。 -
IBInspectable讓你的自定義 UIView 的屬性出現(xiàn)在 IB 中 Attributes inspector 寺庄。
環(huán)境
OS X 10.11
Xcode 7
Objective-C
自定義一個(gè) UIView
我們先來自定義一個(gè)簡(jiǎn)單的 UIView，叫做 CircleView皮壁，顧名思義椭更，可以顯示一個(gè)圓形的 UIView。
我們想一下 CircleView 會(huì)有那些屬性蛾魄。
@interface CircleView : UIView
@property (nonatomic, assign) CGFloat lineWidth; // 圓形線條的寬度
@property (nonatomic, assign) CGFloat radius; // 圓形的半徑
@property (nonatomic, strong) UIColor *color; // 繪制的顏色
@property (nonatomic, assign) BOOL fill; // 是否填充虑瀑，是不是實(shí)心圓
@end
有了這些屬性我們開始繪制湿滓。
- (void)drawRect:(CGRect)rect {
// 計(jì)算中心點(diǎn)
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];
// 添加一個(gè)圓形
[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í)心圓，設(shè)置填充顏色
[_color setFill];
// 填充圓形
[path fill];
}
}
OK舌狗，一個(gè)簡(jiǎn)單的圓形 UIView 就搞定了叽奥，現(xiàn)在我們想在 IB 中使用這個(gè) CircleView，打開一個(gè) Storyboard痛侍，拖一個(gè) UIView 上去朝氓，然后設(shè)置 UIView 的 Class 為我們自定義的 CircleView。
這時(shí)候我們是看不到預(yù)覽效果的主届。
IB_DESIGNABLE
想要在 IB 中預(yù)覽赵哲，只需要在自定義的 UIView 加上 IB_DESIGNABLE 修飾即可。
IB_DESIGNABLE
@interface CircleView : UIView
...
@end
之后再回到 Storyboard 中君丁，會(huì)重新 building 一下枫夺，就可以看到預(yù)覽效果啦。
當(dāng)然需要設(shè)置 CircleView 的幾個(gè)屬性绘闷，上面代碼中我并有寫默認(rèn)值橡庞，所以是什么都看不到的，默認(rèn)值自己設(shè)置一下就好我就不貼代碼印蔗。能預(yù)覽了之后扒最，下一步就是怎么在 Storyboard 中直接修改 CircleView 的屬性，半徑华嘹、顏色之類的吧趣。
IBInspectable
還記得上面我們定義的 CircleView 的幾個(gè)屬性吧，只要我們能在 Storyboard 中修改這幾個(gè)屬性值耙厚，那么 CircleView 就會(huì)繪制出我們想要的效果再菊。我們只需要屬性聲明的時(shí)候加上 IBInspectable 修飾，Xcode 會(huì)自動(dòng)添加到 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 會(huì)根據(jù)不同的數(shù)據(jù)類型提供不同的輸入框，我們可以隨意修改屬性略水，就可以看到預(yù)覽效果价卤。
