iOS Storyboard约束详解

Posted 2020-10-05

链接：http://www.jianshu.com/p/b88c65ffc3eb

约束，就是指……此处略去1万字……都懂的，就不说了。直接进入实战环节。

本文的控件约束都是围绕着UITableView展开的。

UITableView约束：

在UITableViewController中的tableView是不用添加约束的，已经被绑定了。

UITableViewCell的约束也是不用添加的，宽度都是跟其UITableView一致，高度由协议方法：

tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)来决定。

约束的基本

约束基本内容为约束其位置、大小。

位置

位置基本可以靠约束x坐标（左边到父视图的距离），y坐标（上边到父视图的距离），也可以约束其中心位置。

大小

大小可以靠约束其宽（width）高（height），也在可在约束x坐标，y坐标的前提下，约束其右边到父视图的距离和下边到父视图的距离（前提都是父视图已经约束好了）等。

约束类型

距离约束

下边，在UIViewController中添加UITableView，并添加约束。

 

约束UITableView

首先，看这个弹出框

 

约束弹出框

一看就应该知道上边四项内容分别指，上下左右到父视图的距离。

下来这个Constrain to margains选项去掉，不去掉的话，即使你把间距设为零，它也不会紧贴着父视图，会有一段间距。关于Constrain to margains，自己查一下资料吧。一般都不会勾选这个选项的。

接下来，添加其上下左右距离父视图的约束，我们把值都设为0，注意要把红色的虚线点一下变为实线才算加了，

 

添加距离约束

最后还有一步，点击底部的Add constants，或者回车。否则没加上。

约束确定

 

很多时候，你会发现添加完约束之后，这里会有一个黄色的箭头，意思是你没有Update Frames（更新位置大小），也就是说当前的位置大小跟加完约束之后的位置大小不一致。

 

黄色箭头

点击一下Update Frames即可，操作如下图

 

Update Frames

你就会发现其尺寸变了。

 

Update Frames菜单

第一个Update Frames是更新当前选中视图的尺寸，第二个Update Frames
是更新全部（当前同一个父视图上的）视图的尺寸。

上边的UITableView约束了上下左右到父视图的距离，x坐标，y坐标，宽高是不是确定了呢？自己想想吧。

当约束没加完，或者约束矛盾（比如约束其左边到父视图的距离为0，但你又重复添加一个其左边到父视图的距离为10的约束）了，这里就会有一个红色的箭头

 

约束矛盾

点击红色箭头会有错误提示，提示你缺少哪个约束，或者那里矛盾了，如下图：

约束错误提示

宽高（width、height）约束

接下来我们在UITableView上添加一个Cell，然后在Cell上添加一个UIView，称之为view1，给UIView约束左边、上边到父视图的距离为0，宽高分别为100、44；

宽高约束

Width跟Height分别约束其宽高的具体值，我觉得没有必要多讲，记得添加的时候点上前边的勾就好，不要以为光是填写数值就好。

 

宽高

等高、等宽约束

在上边的基础上添加另一个UIView，称之为view2，其约束为：左边到view1的距离为10，上边到父视图的距离为0，宽高跟view1一致，操作如下图：

等高等宽约束

注意点：

1.view2放上去的时候，左边跟view1要稍微留点距离，如果view2左边遮住了view1一部分，那么在添加左边约束的时候，添加的是view2左边到父视图的距离，错误图如下，切勿模仿：

错误图

2.添加等宽等高两个约束时，要同时选中view1跟view2（command键），如图：

 

选中二图

否则，菜单栏这两个选项为灰色：

 

灰色菜单

多个视图等宽或等高，可同时选中多个，不一定是两个，但至少两个。

比例约束

在Cell上添加一个UIView，称之为view3，约束为：左边距离view2为10，上边距父视图为0，宽100，宽高比例4：1

演示如下图：

 

比例约束

注意点：

比例约束的前提是约束了宽高其中一项

然后，勾选Aspect Ratio

比例

最后修改比例值

 

比例值

边对齐约束

添加UIView，称之为view4，约束：其上边到view3距离为10，与view3左对齐，宽高均为44

演示如下图：

 

左对齐约束

注意点：必须同时选中view3和view4才能添加对齐约束，菜单如下图：

对齐约束菜单

四个选项分别为左对齐、右对齐、上对齐，下对齐。用法一致。

中心对齐约束

添加UIView，称之为view5，添加约束：view5与view4水平中心对齐，上边距离view4为10，宽高分别为100，44；

演示图如下：

中心对齐

注意点：跟边对齐约束一样，要选中两个view，多个亦可。

菜单如下：

 

中心对齐菜单

三个选项分别为水平中心对齐、垂直中心对齐、基线对齐。感觉基线对齐跟底部对齐一致，没有深究，也不常用，也许我的理解是错误的，甚至翻译都是错误的，有问题请指正，谢谢。

父视图中心对齐

添加UIView，称之为view6，添加约束：跟父视图水平中心对齐，上边到view5距离为10，宽高分别为100、44

演示如下：

 

父视图中心对齐

注意点：只需选中当前视图即可添加跟父视图中心对齐。

快捷约束

添加UIview，称之为view7，约束：上边距离view6为10，左右到父视图的距离均为100，高44

演示如下：

 

快捷约束

注意点：在选中的view上按住鼠标右键不放，拖动到对应的要添加约束的视图上释放即可，宽高（左右拖动，上下拖动）约束在本视图内释放即可。

常用控件约束及约束常见问题

练习：

将三个UIView放到Cell上，三个view的上下距离父视图均为0，左右相邻，并且等宽，宽度均为Cell宽的1/3；

演示如下图：

 

练习

这个不用多讲了。

UILabel、UIButton约束

在Cell上添加一个UILabel，约束：左边到父视图的距离为15，居中，

演示如图：

 

label约束

你会发现，只约束了UILabel的位置，没有约束宽高，上边没有红色箭头警告。这是因为UILabel的宽高可以随着字数，字体大小而默认了，也可以随之变化。UIButton与之类似。UILabel的右边跟父视图的距离一般是要约束的，防止因为字数过长跑到屏幕外边去。其他的控件视情况而定，用多了就会知道其特性。

常见问题：

1.添加一个UIView，其水平中心到父视图的左边距离为父视图宽度的1/3，该怎么添加呢？

 

1/3间距

Multiplier是一个系数，默认都为1。可以这么理解，水平居中的时候其中心位置=1 × 1/2 × 父视图宽。那要其中心为父视图宽的1/3，只需将系数1改为2/3即可。

 

2.如下图，有时候希望图片跟文字这个整体居中，而不是仅仅文字居中，怎么半呢？

居中

演示如下：

 

居中演示

自己理解一下吧。