关于使用故事版与xib的一些干货

一、前言

从事iOS开发算是有两年多了，从一开始使用纯代码，再到慢慢接触xib,再到后来使用故事版进行快速UI搭建。也收获了使用interface builder时很实用的一些干货，所以在此分享给大家。

本篇文章主要介绍使用SB和Xib时能够用到的两个个宏:IB_DESIGNABLE，IBInspectable。使用这些宏，利用运行时机制，就可以把这些属性映射到XIB上了，同时我们UI类的自定义属性也可以映射上去。

二、进入主题

IB_DESIGNABLE(OC) 、 IBDesignable(Swift)

IB_DESIGNABLE宏的功能就是让XCode动态渲染出该类图形化界面;使用IB_DESIGNABLE的方式，把该宏加在自定义类的前面;

• 自定义一个UIView ->XLLView

import UIKit
// 在定义类的前面加上IBDesignable宏
@IBDesignable
class XLLView: UIView {
    override func awakeFromNib() {
    }
}

• 在main.storyboard中拖入一个UIView,并将其类型改为XLLView。
  当把类型改为XLLView之后，在故事版的这个地方，我们能看到如下信息:

  
  
  自定义View可以成功被刷新的信息

当你在故事版或xib自定义View的属性信息栏看到如上图中的Designables Up to date，恭喜你，这个视图在interface builder中可以动态刷新了。

• 利用keyPath设置圆角，可以成功动态刷新自定义视图，效果如下:
  
  修改keyPath动态刷新视图
  
  注意:当我们在xib或故事版中修改UIView为我们自定义的累的时候，还有可能出现下面的情况:
  
  设置动态刷新失败

遇到这种情况，不要慌。深吸一口气，然后潇洒的关掉Xcode，心里默念一句MMP，再重启Xcode，一般都能好。这个interface builder动态渲染技术，在苹果这里应该还不是很成熟，出现bug也实属正常。

IBInspectable

上面我们也了解了动态渲染宏IBDesignable的用法，通过keyPath我们能直观地看到效果。但是小伙伴们应该发现了，利用keyPath也比较麻烦啊（苦逼的我一般都是代码敲出来复制到上面去的）。接下来我们就可以通过IBInspectable来代替keyPath设置。

• 在自定义类XLLView中定义一个属性cornerRadius，并使用IBInspectable来修饰，实现其setter方法。

@IBDesignable
class XLLView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = true
        }
    }
}

• 此时我们回过头来在看故事版，效果如下：

  
  
  自定义属性可视化
  
  

  自己自定义的属性就这么愉快地跑到了interface builder的属性信息中，被可视化了。怀着激动地心情设置各种值，发现结合了** IBDesignable**一样能够动态渲染图形。

  
  
  两个宏结合使用效果

后语

上面演示的例子是用Swift的编写的，OC的其实也一样，只是语法不同罢了。现附上OC与Swift测试代码，以供参考。
interface builder相关宏在OC与Swift中测试调用Demo

• 参考文章：https://www.jianshu.com/p/a90e44ba1f2b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
  此篇文章作者描述的比较全面，从Category分类和UIView的一些常用子类中各种测试调用了这两个宏，有兴趣的童鞋可以看一下。