【AutoLayout案例3 Objective-C语言】

一、咱们接下来，再把这个案例实现一下

1.要求，

1）在控制器的顶部，有两个UIView，一个是蓝色View，一个是红色View

2）这两个UIView的高度，永远是相等的，蓝色和红色的高度是相等的，都是50

3）红色View和蓝色View，是右对齐的

4）蓝色View，距离父控件的左边、上边、右边，都是30

5）蓝色View，红色View，中间间距也是固定的，30

6）红色View的左边，也就是红色View，是蓝色View的一半儿

红色View的宽度，是蓝色View的一半儿，

这个怎么实现呢，你可以设置它俩宽度相等，再把这个红色View的宽度，改成蓝色View的一半儿，也可以设置什么呢，设置红色View的左边，与这个控制器的中点，中线，对齐

这是不是中线，是在这里

如果，这个红色View的左边，和我们这个蓝色View的左边，对齐，这样的话，是不是它俩宽度相同的了

但是，我如果设置，红色View的左边，和我们当前这个控制器的中心点对齐，那么这个时候，红色View的宽度，是不是刚好是蓝色View的一半儿

1）一个是：设置红色View与蓝色View等宽，再修改“宽度”是蓝色View的一半儿

2）在一个是：先设置红色View水平居中对齐，再设置红色View，距离我们的父容器，我们这个View的中线，让这个中线的距离，等于这个红色View左边的距离

两种思路，来，给大家写一下

二、第一种思路，设置红色View与蓝色View等宽，再修改“宽度”是蓝色View的一半儿

1.我就在这一个项目里写，再拽一个控制器过来

再拽这么一个控制器

好，把它拽过来以后，是不是要

把上面这个箭头儿，给它拿过来

箭头儿移下来，是不是就直接执行这个了

然后，接下来，我们这里有两个View，直接拽两个View

一个蓝色View、一个红色View

我们可以先拽一个，一个一个来

拽一个蓝色View过来

背景色，设置成蓝色

蓝色

然后我们来设置一下约束

OK，它这个宽度是多少啊，没有宽度吧

它距离左、右、上、距离都是30

当你设置它距离左边距离，和距离右边距离以后，这个时候，它的宽度、和X的宽度，是不是就定了

然后，它的高度，是不是始终是50

高度也定了

然后，再给它一个距离上边的距离，是30，这样的话，它的宽和高、X和Y，是不是都给定了吧

都决定了，所以说，我们先设一下蓝色View

蓝色View，我们选中这个蓝色View

写个字儿吧，这是蓝色

好，选中蓝色View

1）然后我们设置它，距离

距离，哪里，先把这个勾去掉

距离上、左、右

看一下这个下拉菜单

距离，都是30

看一下上边这个下来菜单

看一下右边这个下拉菜单

距离，都是30

2）然后，它的高度，是多少

是不是50

高度是50吧

好，点增加，增加完毕以后

没有红色箭头儿了吧，点一下这个黄色箭头儿，它完全可以建议蓝色View的位置和大小了吧

更新一下

更新一下，蓝色View，是不是显示在这里

2.然后，接下来，再来一个红色View

把它拽过来，按住option键，拖一下

这时候，把它的、把它这个控件上的所有约束，都删掉

然后呢，再设置它的背景颜色是红色

然后

接下来，看一下，有什么约束

1）第一，要求，我们这个红色View，距离蓝色View，的这个间距，是不是也是30，啊

OK，那么，我就选中这个红色View，找到它的设置间距，设置上边的距离

距离上边，谁啊

距离蓝色View，是多少

是30

然后，点一下，增加

好，它距离蓝色View，就是30了

2）然后，再设置这个红色View的右边，是不是和蓝色View的右边，对齐

选中红色View

按住command 键，再选中蓝色View

再选中我们的蓝色

然后，选中我们的对齐方式

是什么对齐来着，左对齐、还是右对齐

右对齐，Trailing Edges：右对齐，把它勾上

点击增加

好，这样的话

红色View，右对齐，意味着它的，它和这个右对齐，是不是对齐了

3）然后呢，你设置它的高，它的高，是不是得和这个蓝色View的高度一样啊

所以说，还得再加一个

选中红色View

再选中蓝色View

让它俩的高度，相同

Equal Heights

然后，它俩的高度，是不是相同了

点击增加

高度相同以后，这个红色View，距离蓝色View这个间距，是30，所以它的Y值，是不是确定了

然后呢，这个红色View，和这个蓝色View，是右对齐的，这个时候，只是它右对齐确定了吧，那么现在它的X和宽，是不是还没确定

我只要给它，让这个红色View的宽度，和蓝色View的宽度一确定，

这个时候，它的宽度，和X，是不是都确定了

如果让红色View，的宽度，和蓝色View的宽度相等，那么这个时候，红色View的宽度，决定了，宽度知道了以后，距离右边的距离也知道了，这个X，是不是自然就确定了

所以说，一种办法，是选中这个红色View

再按住command键，选中蓝色View

让它俩的什么相等，让它俩的宽度，宽度，

点击增加

这个时候，全都确定了吧

确定好以后，还要更新frame

更新一下

OK，这是不是都OK了吧

我们先看一下，这个时候的效果，是不是在不同的屏幕下，都正常

预览一下

预览一下

是不是每一个屏幕，横过来，都是正常的吧

竖屏的时候呢

这样是不是都正常了

但是我们要的是什么，我们要的是

红色View的宽度，是不是蓝色View的一半儿啊

我们打开左边这个

左边这个控制器里面，注意看

这，这么多

这么多约束，这是蓝色这么一个高度

然后，这么多约束，是不是都

都是我们刚才加的一些约束啊

哪个约束是我们要的呢，看一下

哪个是红色View的宽度，

我们说，让红色View和蓝色View宽度是一致的那个啊

Equal Widths，吧

Equal Widths，是不是这个东西

为什么两个都是蓝色，因为我这儿又忘记改名儿了吧

看一下这个Equal Widths

就是蓝色View的宽度，和红色View的宽度，是不是相同

这是不是这个约束啊

这就是设置红色View、和蓝色View，约束相等的这个约束

选中这个约束，然后点开右边这个

点开右边的这个属性工具栏

这叫什么栏，

就是工具、工具箱

选中这个约束，点一下这个工具箱

点这个属性

我们这个约束的意思：就是说，好吧，这个名字改一下，不改名字太乱了

把这个“蓝色View”，名字改成“红色View”

既然把名儿改了，我把约束都重加一下，可以吧

先删除所有的约束

Clear Constraints

都删了吧

1）选中蓝色View，先设置蓝色View，距离上、左、右、都是30

还有高，对吧

选中它，怎么办，点开这个按钮

上、左、右三条竖线先点上，这个勾去掉

把这个下拉菜单看一下

下拉菜单都选择View

都是多少

都是30吧

高度多少，50，

点击增加

OK，蓝色View，是不是搞定了

更新一下frame

点Fix Misplacement

合到一块儿了，先不更新了吧

不更新了

等会儿再更新吧，红色是不是还没设啊

蓝色这个时候，是不是好了

3）蓝色设置好以后，接下来，我要让红色距离蓝色是不是30

选中红色View

把上边这个竖线选上，下面这个勾去掉

距离上边，谁，

是不是距离上边蓝色，多少，30吧

距离蓝色View，30

4）然后，我让红色和蓝色，是不是右对齐

选择红色

再按住command键，选择蓝色

再选择第一个，对齐方式按钮

尾部，Trailing Edges，这个右对齐啊

点击增加

5）接下来，我希望让红色和蓝色的宽度一致

高度和宽度，是不是都一致

选中红色View，按住command键，再选中蓝色View

这边，让它的宽度和高度一致

点击增加

更新一下frame

另一个黄色箭头儿，也更新一下

是不是OK了

这样就没有问题了

6）然后，现在我要的是，让这个红色View，是蓝色View宽度的一半儿

我们看，哪个是设置红色View的约束

设置红色View的约束，是让红色View和蓝色View的宽度，是一样的约束啊

Equal Widths

Equal Widths - 红色View - 蓝色View

宽度是不是一样啊

选中这个约束，然后找到右边的属性

打开这个属性界面，这个是非常有意义的，我们后面就会操作这个

这个意义就是说，解释这个约束什么意思

我们刚才是不是选中红色和蓝色这两个View，设置它俩的宽度，是相等的吧

那么，这个约束的意思，就是说

让红色View的宽度

Relation：关系

Relation：Equal

相等的意思

Greater than or Equal：大于等于

Equal：是相等的意思

让红色View的宽度，等于蓝色View的宽度

Constant：这是个常量

加上这么个值，

Multiplier：乘以 1

刚才，这个约束，意思就是这个意思

Priority：别管这个1000，这个是优先级，先别管它

当我选中红色View，再选中蓝色View

然后呢，设置它俩宽度一样的时候，

事实上，内部执行的是什么代码

内部执行的是：

1）让红色View的这个宽度

2）等于

3）蓝色View的这个宽度

红色View的宽度 = 蓝色View的宽度

不就完了吗

但是，人家还没完

后面还要

4）再加上 0

5）再乘以 1

加上0，乘以1

最后计算完毕以后，是不是就是，它俩结果还是一样的啊

给大家写一下这个公式

这个红色View的宽度，是一个未知数，

红色Width - X

为啥是未知数，因为我们没有设置它吧

红色View的宽度，是个未知数

这个未知数，我们是不是没有设置过

没有设置过，现在我们要根据这个约束，来设置红色View的宽度

红色View的宽度，等于啥

X = （蓝色View的宽度 + 0 ） * 1

红色Width = X

X = （蓝色Width + 0 ） * 1

那么，最后，你告诉我，红色View的宽度，等于多少

是不是就等于蓝色View的宽度啊

也就是我们设置这个约束，其实内部生成这样的代码

生成这样一个公式

iOS在运行的时候，就实行了这个公式，根据它一算

算完以后，这个X，和蓝色Width，是不是宽度相等

所以说，让它俩相等了

我现在希望让红色View的宽度，等于蓝色View的宽度的一半儿，

怎么办

是不是这儿乘以0.5，就OK了

红色Width = X

X = （蓝色Width + 0 ） * 0.5

来、来、来、改一下，把这儿改成0.5，回车

看到了吗，是不是变成一半儿了

变成一半儿了吧

来，咱们看一下，在不同的屏幕下，是不是一样的

打开辅助编辑器

点开Preview

看一下

是不是都是这个效果

打横

这样是不是都转了

这就是我们这么一个效果，也就是说，要想实现题目的意思，我就可以按照我们这种思路来实现啊，来，再给大家看一下刚才的效果

刚才，就是我们设置了两个View宽度一样的时候，事实上，就是生成的这么一个公式吧

生成了这么一个公式

来，我们再看第一个，第一个这个约束

1）第一个约束，是什么意思：Horizontal Space - （30）- 蓝色View - View

设置蓝色View，距离父容器的左边，是不是水平等于30啊

我们看一下，这个公式，是什么公式啊

选中第一个约束

看到公式是这样的公式

蓝色View的什么，Leading吧，

我们注意，下面所有这些约束，是两个约束相关联，都是在下面

2）我看哪个是距离上边的，应该是这个吧

应该是这个，看到了吗，

Vertical Space - （30） - 蓝色View - View

我一选这个的时候，你看这根线

我一选这个的时候，你看这根线，是不是变粗了

是不是这个啊，

这个是不是垂直距离啊

注意，蓝色View的Top ，等于 SuperView，是不是当前蓝色View的父控件

等于父控件的Top

如果只执行这三句话

让蓝色View的顶部，是不是等于父控件的顶部，是不是让Top重合了

是不是让蓝色View的顶部，紧贴住父控件的顶部，是不是对齐了

距离顶部是0了，但是它不是

这个约束的意思是

蓝色View的顶部等于父控件的顶部，加上30，乘以1

还是来写一个方程吧

来看，现在我是谁不知道

蓝色View距离顶部的距离

我是不是希望限制蓝色View，距离顶部的距离啊

蓝色View距离顶部的距离，这个是不是不知道吧

蓝色Top = X

它是一个未知数，它等于什么呢

蓝色View的，距顶部的距离，等于什么

是不是等于它的父控件的、控制器的顶部吧

X = （self.top + 30 ） * 1

我们说，控制器的顶部，其实，它的Y值，就是几

是不是0，啊

（0 + 30 ） * 1

你告诉我，最后结果多少，是不是就是30

所以说，我们这个蓝色View，top距离，最后就是30啊

明白我的意思吧

也就是说，这个Constant，是个常量，表示用这个值，加上它，

用这个值，加上它

你可以每一个约束，点开看一看

每一个约束，其实都是对应的这么一个公式

让你要的这个值，等于另外一个值，加上多少，再乘以多少

这样的话，最后，把这个公式一算，就算出来了我们要的那个，我们设的那个控件的那个值

明白，也就是说，每一个约束，都是这么一个公式

好，所以说，我们，当把约束设置好以后，只要改这里的公式里面这个值，就可以改它的结果

OK，这是我们第一种思路

第一种思路，就是先设置完这个红色View的宽度，和蓝色View的宽度一样，

再设置红色View的宽度，是蓝色View的一半儿啊

再把它改成一半儿，这是第一种思路

好，这个我就给大家先删掉，咱们再用另外一种思路

二、再用下面这种思路

1.先设置红色View水平对齐，水平居中，然后再设置红色View的左边，等于水平线，等于父控件的中线，就OK了

好，把刚才这一堆，先删掉

随便选一个View

然后，把所有的值，都删掉

把所有的约束，都删掉

好，所有的约束都删掉了

2.咱们再重新写一下

1）首先，选中蓝色View

把这个勾去掉

怎么办，Height = 50，吧

然后，上面三个竖线，都勾上

下拉列表看一下，选择这个View

左、右的间距，都选择这个View

点增加

好，蓝色View，OK了吧

2）好，然后再设置红色View，右边对齐，顶部距离30吧

它先距离我们顶部，把这个勾去掉

顶部，距离蓝色View

是不是30，

点一下增加

好，然后呢

我让它右边对齐，是不是也行

让它俩是不是，右边对齐啊

点一下增加

然后呢，高度是不是相同

Equal Heights

点一下增加

好，这个时候，本来我再点一下“宽度相同”，是不是就行了

然后呢，再乘以0.5就行了，但是我这一次，不点“宽度相同”

点一下增加

好，不点宽度相同以后，接下来，我们说，这个红色View的宽度，是不是还没有

怎么做呢

我让红色View，

注意，我选择红色View，让红色View水平

让红色View，水平居中对齐

红色View，在我们当前这个父容器当中，水平居中对齐

点一下增加

水平居中对齐

点一下增加

这个时候，红色View，水平居中对齐，来，我们点一下这个黄色箭头儿

更新一下frame

Fix Misplacement

OK

注意，既然你要水平居中对齐

然后呢，你又让红色View和蓝色View右对齐

这个有了

然后呢，现在效果是不是红色View和蓝色View，是不是看起来是一样的

看起来是一样的，对吧

但是，我现在不要它俩看起来是一样的

我要的是，红色View跟左边有一段距离、与这个中线对齐

宽度是蓝色View的一半儿

所以说，我们找到这个居中对齐的约束

看看，哪个是居中对齐的约束

注意看，这个约束，就是居中对齐的约束吧

Center X Alignment - View - 红色View

红色View的X，和控制器View的中线对齐

我们打开这个约束的属性，看一眼

Superview.Center X：父容器的中线的X

Equal：等于

红色View.Center X：红色View的中线的X

是不是它俩中点就对齐了

然后呢，但是我不要这个，我要这个父容器的

我要这个父容器的中点的X，等于红色View的什么，

Leading，吧

左边

看到了吗，

如果要让父控件的X，等于红色View的中心的X，

这样的话，是不是它俩宽度一样啊

它俩就水平居中对齐了吧

就水平居中对齐了

但是我要的不是这个，我要的是父容器中点的X，和谁相等啊，等于我们这个红色View的左边的这个值，

红色View.Center X

这样是不是也能实现一半儿

Leading，是左边，对吧

头部，是不是就是我们左边的意思

再看一下预览效果

点一下Preview

预览

竖屏

是不是都是一样的，好，然后咱们把所有的约束都给它删掉

3.约束都删掉了吧

1）我们现在一个是蓝色View

一个是红色View

我们最终，只要确定，蓝色View的什么，

width：

height：

X：

Y：

然后，它整体值，是不是都设置好了

只要设置这么几个值，就可以了

那么， 我设置蓝色View的时候，我首先要让蓝色View，距离

上、下、左、右，是30，啊

先把上边这三个竖线勾上

把这个下拉菜单打开，选择这个View

这三个竖线都选上，下拉菜单都选择这个View，值都改成30，

把下面这个勾去掉

把这个勾掉以后，这三个是不是都有了，有了以后，我是不是要再给它加一个高

点一下增加

这四个约束确定以后，

你距离上边，距离是30，

意味着谁确定了

是不是Y值确定了

Y：距离顶部30

就把Y值，确定了

距离左边30，把谁给确定了，X

高度，50，把谁确定了，height，吧

height：50

宽度是：你距离左边30，距离右边30，是不是把宽度给确定了

width：距离左边30 + 距离右边30

这两个是不是一起配合，把宽度给确定了

所以，第一个蓝色View，是不是搞定了

2）再看红色View

红色View

width：

height：

X：

Y：

首先，我设置红色View，距离蓝色View，间距是30，

选中红色View

把这个勾去掉

把竖线选上，点开下拉菜单

选择蓝色View

距离蓝色View的间距是30，

点击增加

这样的话，把谁确定了

红色View的Y，是不是确定了

Y：距离蓝色View的间距是30

这个是把Y给确定了

然后，我们再确定它的高

和蓝色View是不是相等

高，和蓝色View相等，

选中红色View

然后呢，再选中蓝色View

然后呢，让它们的什么相等，高，相等

height：设置红色View与蓝色View的高，相等

这个就把它的高，给确定了

然后，接下来，是不是还剩一个X，和一个宽啊

那么，我首先，把这个红色View，和这个蓝色View，设置它们右对齐

选中红色View

再选中蓝色View

在对齐方式里面，是不是让它们，右对齐

点击增加

然后，加上

设置完它右对齐以后，这个时候，它的X，决定了吗，没有，

那么，现在还差个谁

是不是还差一个宽，和X

当你仅仅是，设置它的右对齐以后，宽也没决定，X也没决定，

然后，这时候，我再设置一个什么，

再设置一个，让当前这个红色View，水平居中对齐，

选中红色View

打开对齐方式按钮，设置它水平，居中对齐

点击增加

看一看

你水平，一居中对齐，你要水平居中，你右边必须在这里，左边是不是肯定就在这里了，

所以，当你一设置水平居中以后，因为你右边，决定在这儿，右边在这里，它距离中点，距离这么多，你让它水平居中，表示红色View，将来中点，必须是在这里，右边在这里，那肯定左边和它相等的左边，左边是不是也得在这里，所以，这里就是设置它，水平居中，加右对齐，就决定了它的什么，X，和宽，吧

X：设置红色View与蓝色View，右对齐 + 红色View水平居中

把这两个搞定以后，红色View，是不是也搞定了

这个时候，我们走一个，

看一下是什么效果

它俩是一样的，

那么，我希望，红色View，是蓝色View的一半儿

那我就选中，让红色View的不要是中点，和这个控制器的中点对齐，让红色View的这个左边，和控制器的中点对齐，是不是就变成它的一半儿了，

来，找到这个，哪个是设置红色View的中点呢，

先找到这个红色View

红色View的X，这个是不是设置中点对齐的啊

选中这个约束，在右边

这个是什么，控制器的中点，等于，红色View的中点，

这样是不是居中对齐了

应该是，控制器的中点，等于红色View的左边，Leading，

OK，这样是不是就是一半儿啊

就是这么一个意思，这个就说到这儿，

看一下，

两种思路，就告诉大家，多种思路都可以实现，以后就灵活的去用一下

这个案例，就讲到这里