在 StoryBoard 中重用 xib 进行 UI 设计

本文介绍在 storyboard 中使用视图的 xib 文件进行 UI 设计，支持 xib 文件的实时渲染显示，显示效果如下：

创建需要复用的视图类，例如：BlogCover。
创建复用视图类对应的 xib 文件，按照需要的元素、约束等进行设计，设计完成后关联视图类，关联时要在 File's Owner 处填写类名，示例如下：
完成视图类实现，在实现时有两种方式，普通方式会产生两级根视图，在 xib 中设计时看到的根视图在运行时实际已经是第二级视图了，在下面代码示例中可以看到。为了减少一层不必要的视图，需要做一些额外的处理，这是第二种方法做的事情。下面先看第一种方法：
@IBDesignable 标记可以让自定义的视图在 IB 中实时渲染显示。
xibSetup() 方法中调用 addSubview 会使 xib 中看到的根视图变成了自定义视图的子视图，这就是上面提到的一个小问题，使用时没有影响，只是调试视图层级时会少有麻烦。

下面看看改进方法，将 xibSetup() 方法进行改造即可，核心思想：将真正需要的子视图逐个从二级视图中转移至根视图中，所有约束一并转移至根视图中。迁移约束的过程中需要注意几个点：

关联至二级视图的约束，需要改为一个新的关联至根视图的约束，这其中包括 firstItem, secondItem 两种情况。
使用了 UILayoutGuide 进行约束的，因为它与视图是关联的，需要解除原关联并重新关联至根视图中。另外对于 iOS 11 以上，UIView 增加了 safeAreaLayoutGuide 属性，它需要单独处理，不能直接解除关联，需要在根视图中创建一个新的使用 safeAreaLayoutGuide 的约束。还有两个约束：layoutMarginsGuide, readableContentGuide，处理方法与 safeAreaLayoutGuide 一致，适用于 iOS 9 以上。

示例代码如下：

以上第二个方法，在没有特殊需求的情况还是尽量避免使用，毕竟第一个方法的副作用只是多了一个视图层级，更通用一点，而第二个方法可能还会遗漏一些规则未处理。