给自定义View在XIB上添加属性和预览

在项目中会需要改View的圆角、边框、阴影等属性值。一般我们可以用代码来更改属性,或者在View的XIB中通过keyPath的方式改变value的值。但是这些方法都不能很方便的直接设置值并直观的在xib上观察这些值的引起的View变化。IBInspectableIB_DESIGNABLE很好的解决了这方面的问题


先说说IBInspectable:
以给一个View加圆角来举例。
新建一个xxView继承自UIView,给xxView添加一个属性,并加上IBInspectable修饰

@property (nonatomic,assign) IBInspectable CGFloat cornerRadius;

打开XIB/StoryBoard在上面拖一个view,设置classxxView

给自定义View在XIB上添加属性和预览_第1张图片
01

点击属性指示器,可以看到xxView在XIB上多了一个属性cornerRadius

给自定义View在XIB上添加属性和预览_第2张图片
02

但是这样运行肯定死不能达到更改view的圆角的效果的,所以这儿还需要修改 xxViewcornerRadiussetter方法

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

在xib上修改cornerRadius为50,然后运行,得到了圆角效果:

给自定义View在XIB上添加属性和预览_第3张图片

再看一下身份指示器发现:xxviewkeypath多了一个,所以IBInspectable也是通过keypath实现更改属性的。

给自定义View在XIB上添加属性和预览_第4张图片

好了 IBInspectable介绍完了。再来看下 IB_DESIGNABLE
xxView加上 IB_DESIGNABLE

IB_DESIGNABLE
@interface xxView : UIView
@property (nonatomic,assign) IBInspectable CGFloat cornerRadius;
@end

然后再看一下xib文件发现在xib上我们可以直接通过更改属性来预览view的变化了。是不是很爽~


给自定义View在XIB上添加属性和预览_第5张图片

你可能感兴趣的:(给自定义View在XIB上添加属性和预览)