学习总结二：storyboard的使用（layout约束布局之界

接上篇

三，多控件约束。

我做的第一个项目主界面大致如下：

因为我SB里视图默认的尺寸是5.5的，所以最开始一直用6P的模拟器运行，只要界面放好，不加约束。在6P(6SP)的模拟器下面运行，界面不会出现什么问题。但是假如换到其他类型的模拟器就会出现界面混乱。

这种情况下，只能保持各控件的间距不变，让6个模块自适应大小，但是还要比例不能变化。还要要求各模块自适应后的大小一致。有了这些要求，下一步实现就方便了。

首先选一个基准的，我一般是选A做为基准，先给A定位。
现在假设布局要求如下，左侧和右侧的空白间距为20，中间竖向空白间距为14.模块A距导航栏30。模块上下间距20。
先给A加如下约束：

红框1处的选项，默认屏幕左右边距为20，所以写个0就可以，如果不勾选，左侧就要写成20。还有，因为现在要模块自适应大小，所以不能设置固定的宽高，只能设置固定的宽高比例，就选择红框2选项。
这时候只设置了模块A的约束，但是没有宽高限制，xcode会提示警告，先不用管。进一步设置模块B。
模块B的要求，应该是和模块A顶部对齐，底部对齐。然后宽高相同，左侧距离A14，右侧空20.设置如下：

先让B和A顶部对齐，底部对齐。
然后，设置B和A等宽登高（见下图）。其实因为需要设置等高，所以上一步，只需要设置个顶部对齐就OK。
tips：图三和图四，我都是同时选择了A和B，这时候只能设置两个模块共同的约束，切记不可以在图四中就把红框的约束设定。

然后设置B左边距离A14，右边距离边界20。

OK，现在第一排的两个模块已经设定完了。剩下的就简单了。

现在开始设定C的约束，C的要求，和A左右边对齐，距离A20，现在就有多种方法来设定C的X值，可以设定距离边界20，也可以直接让C与A左边对齐（我用这种方法）：
因为所有模块都等宽等高，所以设置对齐时，设置了左对齐就可以不用设置右对齐，设置了上对齐就可以不需要下对齐。

注意图八的红框处，C的左侧空间14，这时候已经给D设定了X值，所以给D设置约束的时候就可以不用像图五一样设置右间距，这两个是重复的，而且假如不小心给C设定了右间距，又给D设定了不一样的左间距，就会报错。

现在给D设置约束，已经有更多的参照物可以给D设定约束，第一种，按照正常的，设定D与B左右对齐，然后等宽等高，然后再给D加上约束20，左约束20。第二种，也可以直接让D与B左右对齐，然后再与C上下对齐，就可以完成定位。不需要设置等宽等高了。我用第二种设定如下：

到现在，已经设定了4个模块的约束，如果没有操作错误的话，xcode不会提示任何警告和错误。剩下的E/F模块就不继续贴图了。设定方法和C/D类似。可以有多种组合方法可以试试。

最终适配效果如下：