本文将演示使用故事版的约束功能，使项目快速适配各种分辨率的设备。
在项目导航区打开并编辑主故事版【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，修改常量值。此时按钮的位置已经发生了变化。