约束

待我称王封你为后i 2022-06-05 06:05 219阅读 0赞

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

UITableView约束：

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

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

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

# **约束的基本** #

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

***位置***

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

***大小***

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

## 约束类型 ##

**距离约束**

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

![strip][]

约束UITableView

首先，看这个弹出框

![1240][]

约束弹出框

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

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

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

![1240 1][]

添加距离约束

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

![1240 2][]

约束确定

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

![1240 3][]

黄色箭头

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

![strip 1][]

Update Frames

你就会发现其尺寸变了。

![1240 4][]

Update Frames菜单

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

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

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

![1240 5][]

约束矛盾

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

![1240 6][]

约束错误提示

**宽高（width、height）约束**

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

![strip 2][]

宽高约束

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

![1240 7][]

宽高

**等高、等宽约束**

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

![strip 3][]

等高等宽约束

注意点：

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

![1240 8][]

错误图

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

![1240 9][]

选中二图

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

![1240 10][]

灰色菜单

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

**比例约束**

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

演示如下图：

![strip 4][]

比例约束

注意点：

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

然后，勾选Aspect Ratio

![1240 11][]

比例

最后修改比例值

![1240 12][]

比例值

**边对齐约束**

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

演示如下图：

![strip 5][]

左对齐约束

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

![1240 13][]

对齐约束菜单

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

**中心对齐约束**

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

演示图如下：

![strip 6][]

中心对齐

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

菜单如下：

![1240 14][]

中心对齐菜单

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

**父视图中心对齐**

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

演示如下：

![strip 7][]

父视图中心对齐

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

### **快捷约束** ###

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

演示如下：

![strip 8][]

快捷约束

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

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

**练习：**

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

演示如下图：

![strip 9][]

练习

这个不用多讲了。

**UILabel、UIButton约束**

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

演示如图：

![strip 10][]

label约束

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

**常见问题：**

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

![strip 11][]

1/3间距

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

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

![1240 15][]

居中

演示如下：

![strip 12][]

居中演示

自己理解一下吧。

3.如图绿色框中怎么利用约束巧妙实现呢？思考一下吧。累了，今天就更新到这先。

[strip]: /images/20220605/58647f5da0f0411aa1df4a26f432d053.png
[1240]: /images/20220605/2ebd6d79eb4e406c954ec7d231be61b9.png
[1240 1]: /images/20220605/1752b774e78e4aaf8a6e44d8f0946908.png
[1240 2]: /images/20220605/b03e14bfb2d44e8eaf5893f2ca9179dc.png
[1240 3]: /images/20220605/ef6b80f488914a1b97854093ddbbea27.png
[strip 1]: /images/20220605/c5707d2cbe124bcf8b84915dd5554491.png
[1240 4]: /images/20220605/36deed6e2c51474bbc21c5c67e0cf8c1.png
[1240 5]: /images/20220605/f3fd4ea44ac94ce0940f8808af235a0d.png
[1240 6]: /images/20220605/712485b994e44fd4a72c57eff9279408.png
[strip 2]: /images/20220605/cbaf712f63a241a8ae9ed054213150be.png
[1240 7]: /images/20220605/24dcb0cf11dd4f03a92acc2305742cde.png
[strip 3]: /images/20220605/cb35828b21734a87ab51fa8eceda81be.png
[1240 8]: /images/20220605/9015c87663f2404282f6bea55d0f1788.png
[1240 9]: /images/20220605/2cf294ac370a43ebaa75c26e0f10a029.png
[1240 10]: /images/20220605/4bb7bfdea230476f9f958dbdb49f6abc.png
[strip 4]: /images/20220605/2f2d0f1cd60a4961b29e6ac7f3db95c0.png
[1240 11]: /images/20220605/2f4466b2acf6467b85681070d6c9b9ac.png
[1240 12]: /images/20220605/244c060a9fe04af6afb07c8cd3f40e05.png
[strip 5]: /images/20220605/f1e493bbf98d4614844f229e714de3f7.png
[1240 13]: /images/20220605/3df40497c6004a76adcafc34c7f85f64.png
[strip 6]: /images/20220605/9b68bbab6cb64bea9fe22b7331b9739d.png
[1240 14]: /images/20220605/2755863ba0164725a03fb98da9e3c8f0.png
[strip 7]: /images/20220605/d5ebafa69a4d41fca17a7015872b26b7.png
[strip 8]: /images/20220605/e195fc3b7f1e459cb32ca496c1dab702.png
[strip 9]: /images/20220605/4f400055213c4e0eabd1569aac5e4746.png
[strip 10]: /images/20220605/d2c58e89baa142229f7e300ab8f63c20.png
[strip 11]: /images/20220605/bee0bfdb41224d9297a943cd3556226f.png
[1240 15]: /images/20220605/245efd8dcdc94ca58c24fa2148dfe4f0.png
[strip 12]: /images/20220605/2ae94b022cf94db68b8cded0d04fdb59.png