IBInspectable和IB_DESIGNABLE－Storyboad动态刷新初探

前言

在做应用的UI设计的时候，在xib或者SB开发中为我们提供了方便的可视化Interface Builder的图形化界面进行设置，并且动态的预览到效果，那样无疑会大大提高应用的开发效率。UI元素的常用属性在面板上基本都能看到，方便设置。但是毕竟会有漏网之鱼，比如最常用的UIImageView的圆角设置，就没有直接的设置选项。最近在学习Storyboard使用技巧的时候了解了下IBInspectable和IB_DESIGNABLE，接下来就和大家分享一下。

之前的做法

• 在代码处理

self.view.layer.cornerRadius = xxx;
self.view.layer.maskToBounds = YES;

• 面板中设置一些KVC属性的值

  
  
  

  屏幕快照 2017-05-09 下午11.34.44.png
  
  

  但是这样还是不能在视图中看到变化，不能实时刷新。

IB_DESIGNABLE

IB_DESIGNABLE的宏的功能就是让XCode动态渲染出该类图形化界面。

• 我这里的做法是继承了UIView，在子类.h文件中引入宏定义

#import 
///引入宏定义
IB_DESIGNABLE
@interface TestView : UIView

@end

• 然后在项目中所有的UIView都class都设置为继承的子类。

  
  
  

  2.png

• 最后再同之前一样，在面板上设置圆角，就发现可以动态刷新啦。

  
  
  

  3.gif

IB_DESIGNABLE和IBInspectable的配合使用

如果你觉得通过面板中的User Defined Rumtime Attributes来设置太麻烦了。那么你该考虑使用IBInspectable特性了。

• 自定义一个圆角属性
  ///自定的圆角属性
  @property (nonatomic, assign) IBInspectable CGFloat myCorner;
• 重写set方法

- (void)setMyCorner:(CGFloat)myCorner {
    
    _myCorner = myCorner;
    self.layer.cornerRadius = _myCorner;
    self.layer.masksToBounds = YES;
}

然后你会惊奇的发现在面板上，多了一个myCorner属性选项，并且可以动态设置和刷新状态，是不是很炫酷呢？

4.gif

如果不能动态刷新，重启XCode，如果还不能刷新,请开启Editor -> Automatically Refresh Views。

最后

• IBInspectable当然不仅限于设置圆角，你可与根据自己的需求来在面板上添加一些需要的属性，并重写set方法。不过个人建议，那些只会在初始化时设置一次，后期不会经常变化的逻辑可以这样使用，不然的话反而显得复杂化了。
• 我这里用的是继承的方法，当然还可以用category来实现。
• swift代码示例在后期补上。
• 以上示例亲测有效，还测了一些其他属性，这里就不贴出来啦。
  by丢丢