[Xcode 实际操做]9、实用进阶-(25)使用Storyboard(故事版)的约束功能，使项目快速适配各类分辨率的设备

目录：[Swift]Xcode实际操做

本文将演示使用故事版的约束功能，使项目快速适配各类分辨率的设备。

在项目导航区打开并编辑主故事版【Main.storyboard】。

在当前故事版中，已经存在一个适配4寸屏幕的界面，

点击设备名称，更改设备类型。在弹出的模拟器列表中，选择一款拥有4.7寸屏幕的模拟器。

而后经过系统提供的约束功能，对各尺寸屏幕进行适配。

在故事版文档框架区中的【View Controller】，点击显示【MainView】视图下的全部子元素。

该视图是添加的自定义视图，尺寸与根视图相同，而且包含了页面中的全部元素。

创建约束的原则是首先须要对父视图进行约束，而后再对子视图进行约束。

因此先对当前视图进行约束。在【MainView】视图上按下鼠标右键，而后拖动到根视图，

以建立视图与根视图之间的约束关系。在弹出的约束类型列表中，

选择【Leading Space to Container】视图左边界与容器外间距之间，保持约束关系。

即不管出于那种尺寸的屏幕，二者之间的距离都保持不变。

视图周围出现了红色边框，而且在故事版文档框架区的右上角出现了红色错误标识。

这是由于系统还不清楚视图右边界、以及宽度和高度的约束关系。

在【MainView】视图上按下鼠标右键，而后拖动到根视图，在弹出的约束类型列表中，

若是在约束名称左侧，出现一个白色圆点，则标识该约束类型已经存在。

选择【Trailing Space to Container】视图右边界与容器外间距之间，保持约束关系。

使用一样的方式，继续设置当前视图与根视图之间的约束关系。在弹出的约束类型列表中，

选择【Vertical Spacing to Top Layout Guide】视图与顶部布局参考线，保持固定的垂直距离。

即不管处于那种尺寸的屏幕，二者间距都保持不变。

使用一样的方式，继续设置当前视图与根视图之间的约束关系。在弹出的约束类型列表中，

选择【Vertical Spacing to Bottom Layout Guide】视图底部布局参考线，保持固定的垂直距离。

即不管处于那种尺寸的屏幕，二者间距都保持不变。

在模拟器中，暂时还看不到变化，由于刚刚调整的视图，与根视图具备相同的背景颜色。

不过在适配父视图以后，如今能够给子视图添加约束。

而后选择分割器子视图，也就是在视图控制器中，那条较粗的灰色横线。

在分割线视图上按下鼠标右键，而后拖动到父视图。

由于父视图与根视图，创建了约束关系，因此子视图只要和父视图机创建约束关系便可。

参照MainView拖动到根视图的操做进行。

将分割线视图的左右边界和上下边界添加约束：

【Leading Space to Container】

【Top Space to Container】

【Trailing Space to Container】

如今只要固定分割线高度便可。

按下鼠标右键，而后拖动到分割线自身的其余位置，创建自身的约束。

在弹出的约束类型列表中，选择【Height】选项，

即不管出于哪种尺寸的屏幕，其高度始终保持不变。

【创建约束的原则】：首先须要对右向箭头所在的控件的父视图进行约束，而后再对箭头头所在的控件视图进行约束

---

在添加完约束后，如何修改一个控件的位置？

点击【显示和隐藏检查器】图标，打开检查器面板。

点击【尺寸检查器图标】，进入尺寸和位置设置面板。

点击右侧的垂直滚动条，跳转到下方的约束区域。

在【Constraints】区域，能够看到当前控件的全部约束信息，

点击底部间距【Buttom Space to】的【Edit】编辑图标，弹出约束编辑面板。

【Constant】:30，修改常量值。此时按钮的位置已经发生了变化。