【Autolayout案例02-距离四周边距 Objective-C语言】

一、好，来看第二个案例

1.第二个案例，是什么意思呢，第二个案例，要求屏幕中间，有一个UIView

UIView，是个红色的UIView

UIView的大小，我不限定

但是无论你是什么屏幕下

这个UIView距离上边，始终是50

距离右边，始终是50，

距离下边，始终是50，

距离左边，始终是50，

这个UIView，距离四周，始终是50啊，

直接设那个边界，是不是就OK了

新建一个项目，Name：005自动布局案例2-距离四周边距相等

打开新建项目的storyboard，直接选中它

可以把电脑的分辨率调大点儿，不然看不全吧

中间放一个UIView进来

这个UIView进来之后呢，给它来一个背景色

给它来个红色背景色

给完红色背景色以后，

给完红色背景色以后，换成其他颜色背景色，这个红色太刺眼了

我要让它距离四周的距离，都是50啊

选中这个空间，我们可以把左边那个打开

选中那个控件，然后打开下面这里，

让它距离上边、左边、下边、右边

距离给它一个固定的值

1）距离上边是多少，50

2）距离左边是i多少：50

3）距离右边是多少： 50

4）距离下边是多少：50，

接下来，我这儿是不是都改成50了

上、下、左、右都勾上，表示距离上、下、左、右距离是固定的，都给它填50，表示都是50

然后，这时候，点一下，Add 4 Constraints，

把四个约束增加上

增加上以后，这里看一下

还有红色箭头儿吗，没有了吧，为什么没有红色啊

难道这时候，X 、 Y 、 高 、 宽 、 都确定了吗

你距离左边的值固定了：是不是X确定了

你距离右边的值固定了：是不是宽度就确定了吧

距离左边，X到这儿，距离右边，宽度到这儿，是不是中间自动拉伸，是不是宽度就固定了

就是说，X 固定了，宽度 固定了

距离上边的值固定了：是不是Y值固定了

距离下边的值固定了：是不是高度固定了

所以说，距离上、下、左、右，四个值设置好以后，这个元素的X、Y、高、宽，是不是就全都固定了

然后这个时候看着是不是很不爽，

问题解决一下，让它对齐

Fix

我如果不解决，你想运行的话，也行

command + R

上、下、左、右、是不是都是这个距离

所以说，你这儿不需要解决，但是一般人，都会解决一下，看着是不是很不爽

现在看起来，距离上、下、左、右、是不是都有一段距离了

但是，事实上，现在距离上、下、左、右、这个距离，其实好像不是50，

是不是上边那边距离要高点儿，

打开那个预览程序

添加预览

这样的话，我们是不是可以实现，在不同屏幕下，都可以实现，距离上、下、左、右、都有一个距离了吧

都可以实现，距离上、下、左、右、都有一个距离了吧

我现在希望把刚才那些约束都删掉，怎么办呢

选中你这个View

点下边的第三个按钮，注意，上面有一个Selected Views

当前选中的约束

删除所有的约束：Clear Constraints

下面那个，All Views

是所有当前控制器中所有的控件，删除它们的约束

刚才我们为这个控件，是不是设置了四个约束啊

你想删除这个控件的四个约束，得选中这个控件，一点上面这个Clear Constraints

就把当前这个View的那几个约束，给删掉了

如果说当前控制器里面有很多个控件，你想把所有的控件的约束，都删掉，

那么这时候，点哪儿

All Views：下面有一个Clear Constraints

这个就是删除所有控件的所有约束

好，点一下上面这个

点完以后，刚才我们为这个控件建的那几个约束，是不是都被删掉了吧

这就回到一开始那个效果，就没有任何约束了

没有任何约束以后，我要演示一个问题

好，我先给它，怎么做呢，先限制一下它这个View的宽、和高吧

好，比如说，这个View的宽是多少呢，宽是468，高是100，

然后呢，距离上边，距离上边，给它来个10，可以吧

注意，我重新限制这个约束，让它：

1）宽 ： 468

2）高： 100

3）距离上边： 10

然后呢，点：Add 3 Constraints

增加3个约束

增加完毕以后，出现了红色箭头儿，这里是不是缺乏必要约束，是不是缺东西啊

宽、和高，设定好了，距离上边是10，

距离上边是10，意味着，Y，确定好了

刚才，我是不是限定了一下，宽，468，高，100，距离上边，是10

宽、和高，限定好了吧

这个距离上边是10，Y是不是限定好了，

Y是10，然后呢，X，是不是还没确定，

所以，再给它增加一个X，怎么让X呢

水平：居中对齐

是不是X就限定好了

点一下：Add 1 Constraints

X确定好了以后，没有这个问题了吧

点一下黄色按钮，把这个问题解决一下

好，有这个效果了

command + R

在iPhone6下运行一下，在随便一个模拟器下，运行一下

我刚才设置，距离上边是几，是10，吧

这是10 吗

10，是不是很窄的一条儿啊

这儿为什么不是10

对，这是一个状态栏

那么，我不希望它距离状态栏这个距离，我希望它距离View顶部是10，怎么办

选中我们刚才这个

选中我们刚才这个View

我刚才在设置这个距离的时候，

这儿是不是直接写了个10 啊

然后这儿，点中这个红色的竖线

这儿直接写了个10

点这个向下箭头儿注意看，向下箭头儿，这里面有两个选项

1）一个是距离

一个是距离这个Top Layout Guide （current distance = 10）

这里是顶部布局导航，这就指的是我们那个状态栏

为什么是状态栏

点开这个地方，你看一下，这里

看到了吗

Top Layout Guide

是不是那个Top Layout Guide

这是什么，看到右边的那个蓝线了没有

选中它，是不是表示上面这个状态栏，这一条儿啊

电池这个状态栏

也就是说，默认，你选中这个View以后

你设置它的对齐方式

你设置它固定以后，你这儿写个10

你这儿没有点它，默认

默认，它是不是距离这个状态栏的距离是10

它是距离状态栏的距离是10，不是距离View的最顶部的距离是10 ，吧

那么，这个，才是距离控制器的View的最顶部的距离是10

那么，这儿看的不是很清楚，怎么办，

我把这个控制器的View，给它改个名儿，就看清楚了

注意看啊，我把这个改个名儿，改成什么

改成：控制器的View

控制器的View 吧

这是控制器的View，把这改成控制器的View

这是不是状态栏

这个是控制器的View

然后呢，我选中我自己的View

我设置它这个，距离上边距离的时候，注意，

距离上边的距离是10，我把它这个红色竖线固定

然后，下边选什么

能选这个吗，

这个是不是距离状态栏的高度

距离状态栏的距离

我要的是不是距离控制器的距离是10 啊

选中上面这个，距离控制器的距离

不是30，是10

然后，我再增加的时候，是不是就可以了

但是现在我再增加，可以吗，是不是约束冲突了吧

刚才你已经增加了一个，距上边是10，

约束冲突了

1）刚才你已经增加了一个：距离状态栏的距离是10

2）现在你又增加了一个：距离控制器的距离是10

到底以哪个为准呢

咋办

解决这个问题

把谁删掉

把上面这个删掉吧，Top layout Guide，删掉吧

把距离状态栏是10，这个删掉

Delete，

是不是就没有这个错误了

点这个黄色的按钮

把这个警告解决一下，好，我们再运行

距离上边，是不是这个是10 啊

所以这儿给大家，再说的一个知识点，就是

我们在设置这个边界的时候，设置边界的时候，一定要注意

设置边界的时候，你一定要点开这个向下的箭头儿看一下

当前你设置的是距谁的距离是10

你一定要把这个看一下

这是我们这儿，说的这么一个问题

2.再说一个问题，我把所有的约束都删掉，选中它

把控制器里面所有控件的所有约束，都删掉

Clear Constraints

好，所有的约束是不是都删掉了

这是不是作废的约束，

作废了

点一下红色的按钮

Add Missing Constraints

这是它给我建议的约束，但是我要吗，不要吧

选中UIView，点下面这个，

Clear Constraints

是不是所有的约束都删掉了，

怎么这个还有呢

我选中这个控制器View

选中控制器View，再点下面这个Clear Constraints

还是删不掉

我选中这个约束，点Delete

可以删掉了

选中它，按一下Delete键，就删了

把这个删掉，现在这个是不是一点儿约束都没有啊

选中这个UIView

然后点这个边界：上、下、左、右

都给它选上

是不是要设置这个距离

1）距上边是0

2）距左边是0

3）距右边是0

4）距下边是0

再把上边这个0旁边的下拉箭头儿点开

这儿是不是直接就是这个啦，控制器View

这儿就是这个，没有状态栏这个效果

我点一下它，上边是不是又变成10了

我把上边的距离，改成0

距上、下、左、右、都是0

点一下下面的Add 4 Constraints

增加完毕以后，没有那个错误，是不是有警告啊

警告解决一下

OK，是不是好了

然后，这个时候，再运行

看到啥了

1）距上边是0，没有问题吧

2）距下边是0，其实也没有问题

3）左、右、两边儿，是不是有个间距

OK，我们给它看一下那个辅助编辑器里面

辅助编辑器里面

看看

1）第一个：在4英寸下面，是不是左右有个间距

2）第二个：在3.5英寸下面，是不是左右有个间距

3）第三个：在4.7英寸下面，是不是左右有个间距

4）第四个：在5.5英寸下面，是不是左右有个间距

5）第五个：在iPad下面，是不是左右有个间距

现在这就是问题

我们刚才怎么设的

我们刚才，是选中这个View

明明写的都是0，为什么它还左右有一个间距呢

从xcode6开始，默认情况下，如果是这个代码，一模一样的手法，你在xcode5下，写完以后，是不会有左、右、间距的

左、右、是没有间距的

只是因为xcode6，才有这个效果

原因是：

1）xcode6，为iPhone Plus 做了特殊的设置

它会为iPhone Plus 、左、右、留那么一个间距

如果你这儿写0的话

它是从这儿开始的，不是从最边上开始的

如果你希望它从最边儿起开始

一种办法是，把这个写成-16

这个也变成 - 16

就是说，自从有了iPhone6 Plus以后

它认为0，不是从那个控制器最边儿上起开始的

而是从它一个16个点以后开始的

如果你希望它左右没有间距，你就直接这里给它写一个 -16

-16以后，表示距离左边是-16

这个时候，它才表示真正的贴紧左边

这是一种解决办法

2）另外一种解决办法

你把这个就写个0

偏偏就要写

就写0

然后呢，我把下面这个勾掉

Constrain to margins

把这个约束，margin，把这个勾去掉

上边是不是自动变成16了

这儿再写个0

把这个勾儿去掉以后，它认为你现在的位置，就是16的位置

不是0的位置吧

这个时候，你把这个16这个位置，再写成0

这就跟xcode5一样了

这就回到它以前的位置了

回到以前的那个意思

0就表示0

就两种解决办法

来，把这两个解决办法，给大家演示一下

额，删掉所有的约束

我们刚才，直接选中它（UIView）

把这个上、下、左、右、都设置为0

是不是因为有这个边界问题

最终导致，左、右、有两个边界吧

好，我把这个约束删掉

删掉以后，选中这个绿色View，然后呢

点开它

距离上、下、左、右都是0

距离上面这个View，是0

距离右面这个View，是0

距离左边控制器的View，是0

距离下边控制器的View，是0

额，这是要选择下边这个吧

要选择下面这个，别选择上边这个

选择这个，目前没有问题，当你有下边导航栏的时候，就可能有问题

选择下边这个

下边是距离控制器的底边，是0

选完它以后，把这个勾，勾掉

把这个勾，勾掉以后，左、右、自动变成16了吧

让后把这改成0

这样就回到了默认的方式

你这儿写了0，就是0

不会 有那个奇怪的边界

没有那个奇怪的边界

然后再点这个Add 4 Constraints

设置约束

增加4个约束的时候

这个时候，是不是，没有问题了吧，把这个问题解决一下

把这个警告解决一下

好，然后是不是填满了

填满以后，再看这个，预览一下

看一下，没问题了吧

所以说，其实我们一开始，做这个，距离上、下、左、右、都是50的时候

我们写的那个50，其实根本不是我们想要的那个50吧

事实上，它是不是可能，根本不是50，

因为：

1）第一：你没考虑上边那个状态栏那个东西

2）第二：你也没考虑那个-16那个东西吧

是不是这两个都没有考虑

所以说，接下来，咱们把一开始的那个程序，重新做一下，

距离上、下、左、右、都会50，

3.选中这个View

选中这个View，怎么办呢，把它所有的约束，都给它删掉

删掉以后，选中这个View，点开它

首先，把这个勾去掉

是不是表示，不要左、右、那两个间距啊

然后，上、下、左、右、四个小竖线都选上

1）上边，距离控制器的View，是0

2）左边，距离控制器的View，是0

3）右边，距离控制器的边界，是0

4）下边，距离控制器的边界，是0

注意，要选择控制器的边界

是0

不要选择上边，上边这个将来也是底部导航条之类的

我们选择，距离控制器的底部，是0

但是我们这儿要的，是不是不是0，是50吧

哦，说错了，是50吧，都改成50

这样的话，才是真正的距离控制器的上、下、左、右、都是50，

选完以后，你直接增加这个约束

这样的话，直接点Add

如果说，控制器中这个控件，和你约束不一致，是不是等会儿还得解决一下那个警告

或者说，你直接选择，下边：Update Frames

选择Update Frame

直接选择这个Iterms of New Constraints

直接选择这个Iterms of New Constraints

新增加这个约束的这个对象

点完以后，自动更新Frame

是不是省的你自己再去解决那个警告了

直接，系统解决

是不是自动就可以了

不需要解决警告吧，

这才是真正的，距上、下、左、右、的距离是50

来，打开那个辅助编辑器

预览一下

先删除这些

1）iPhone3.5，没问题

2）iPhone4，没问题

3）iPhone4.7，没问题

4）iPhone5.5，没问题

5）iPad，没问题

6）旋转，没问题

这样的话，就OK了吧，这才是真正的距离上、下、左、右、都是50

刚才那个案例，主要说了这么三个知识点：

1）第一个知识点：如何设置上、下、左、右、四个距离吧

2）第二个知识点：设置距离，上、下、左、右、margin、边界的时候，

要注意，设置上边的时候，是不是会考虑这个状态栏这个问题吧

一个就是如何设置这个距离

再一个就是，是否考虑上边这个状态栏的问题

3）第三个知识点：是不是有这个约束这个问题

就这么三个知识点

所以说，大家设的时候，也要考虑这么三个问题

好，这是我们这么一个案例的介绍

这是我们案例2的这么一个案例

好，大家先去吃饭吧