手把手AutoLayout - 两个不等宽View，“共同”居中于Superview

刷微博看到nixzhu的AutoLayout Tips，Tip 1是基于纯代码实现，由于本人比较懒，使用AutoLayout除非万不得已，否则是不会动代码，这里使用可视化的方式来演示，只是觉得可能更便于理解！

---

那么开始，新建工程就不用多说了，或者懒癌患者下载原作者工程（还是都下载吧，方便看效果）。

打开工程跑一盘，看下效果：

接下来我们开始纯可视化操作（PS：这里先不解释，直接跟着操作即可）：

首先打开原作者工程里的Main.storyboard，拖一个UIView到ViewController里，这里为了方便观察理解，我把图片背景色改了下。

接着拖一个UIImageView和UILabel到灰色的UIView里。

我们看到此时并无任何约束的警告，那好，现在开始添加约束。
这里先给UIImageView添加上下左右的约束，constant值随意。

添加完成之后开始报警告，先忽略，继续拉约束。

因为已经给UIImageView和UILabel添加了间隙约束，所以只用继续给UILabel添加上，右，左的约束即可。

其实这里给UILabel添加约束还有一种做法就是添加右边约束和Y轴上的约束即可。

这里我选择第二种，同样的效果，约束能少则少，或者按照实际需求来就好。
约束已经添加完整，SDK还是在报警告。

这里SDK提示我们view上需要X和Y轴上需要约束来确定控件位置。这里也是两个不等宽的 View，彼此相邻，并“共同”居中于 Superview最后的步骤。我们把view居中，然后在给一个X轴上的约束即可，所以随便搞一下，添加一个竖向居中（也就是Y轴居中）即可。到此我们全部约束添加完毕。
PS:这里为了更好区分，我给容器视图整了个备注叫Container View。

即便是添加完了约束，SDK还是提示不能确认位置。

大家不要慌，这里其实Container View不能确定位置原因在于UIImageView大小没确定，我们只需要把UIImageView设置一个占位或者给个图片即可。

或者

这里以添加图片为准，就此所有约束错误都以解决，只剩下frame的Waring。自行修复一下即可（All Views Update Frames）。

最后我们来看看完成的效果。

总体效果出来了，间距自行调整。手把手教程到此结束。

---

好了，po了一堆图之后我们再来简单说说核心思想：其实就是利用Storyboard里控件的Intrinsic Size特性，利用其手动占位或者系统自动帮忙占位的原理就可确认其width和height，然后在让其四边顶住Container View四边，Container View的width和height也就确认了，剩下的就是确认Container View的X轴和Y轴上的位置，三个控件的约束确定完成，Frame也就确认好了，也就达到了两个不等宽的 View，彼此相邻，并“共同”居中于 Superview的目的。
以此类推，利用两个或者多个控件占位居中。

其实Tip 2 - 让 AutoLayout 与 UIScrollView 合作无间也是类似原理，�确认好UIScrollView的ContentSize即可，其实还有更多的玩法，如需要手把手教程，留言呼唤。

最后再给懒癌患者配张动态图：

我的界面开发原则，能不写代码就不写代码，让我们的ViewController更瘦，逻辑更清晰更简洁。

欢迎吐槽和共同探讨无代码界面开发。