利用IB_DESIGNABLE配合IBInspectable实现Interface Builder控件的动态实时刷新

在iOS中利用Interface Builder进行UI设计时,不同控件的很多属性都不能直接在属性选项卡中进行设置,比如控件的圆角layer.cornerRadius,边框宽度layer.borderWidth,边框颜色layer.borderColor等等。

我们通常都是通过KVC的keypath手动在runtime属性里面手动添加,如下图:


利用IB_DESIGNABLE配合IBInspectable实现Interface Builder控件的动态实时刷新_第1张图片
在runtime属性选项卡中进行属性设置

但是这种方式不能在Interface Builder的中直接显示出来,而必须运行后才能看到结果,如果属性能够在Interface Builder的图形化界面进行设置,并且动态的预览到效果,那样无疑会大大提高应用的开发效率。而XCode为我们提供了这样的一种方式,就是使用IBInspectableIB_DESIGNABLE,这两个是IOS8为我们提供的特性,支持自定义属性映射到XIB(运行时机制) 。

在定义类的前面加上IB_DESIGNABLE这个宏,那么该控件在xib或storyboard上就可以进行实时渲染了。
在定义类的属性前面加上IB_DESIGNABLE宏,确保该属性在xib或storyboard上可以展示

这里用UIView的cornerRadius属性举例:

  • 自定义类的声明

IB_DESIGNABLE
@interface IB : UIView //这里可以根据需要改继承的类,例如UIButton, UITextField

@property (nonatomic, assign) IBInspectable CGFloat cornerRadius;

@end
  • 自定义类的实现
@implementation IB

- (void)drawRect:(CGRect)rect {
    self.layer.cornerRadius = _cornerRadius;
    self.clipsToBounds = YES;
}

@end

自定义类完成后将控件的类指定为自定义的类


利用IB_DESIGNABLE配合IBInspectable实现Interface Builder控件的动态实时刷新_第2张图片
关联控件为自定义类

这样会在属性选项卡中看到cornerRadius这个属性

利用IB_DESIGNABLE配合IBInspectable实现Interface Builder控件的动态实时刷新_第3张图片
cornerRadius属性选项

这样就可以完成控件的动态刷新设置而不用等运行完后才能看到结果,最终效果如下:


利用IB_DESIGNABLE配合IBInspectable实现Interface Builder控件的动态实时刷新_第4张图片
动态刷新

你可能感兴趣的:(利用IB_DESIGNABLE配合IBInspectable实现Interface Builder控件的动态实时刷新)