转载

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

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

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

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

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

接下来我们开始纯可视化操作（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 的目的。