Autolayout的基本使用01

1. Autolayout基本概念

》讲解如何打开Autolayout(勾选Use Auto Layout)
为了我们能够使用autolayout,必须勾选, 为了更清楚的认识autolayout, sizeclass 先不要勾选. 

>没有使用auturesizing/autolayout时是设置frame , 设置frame其实就是告诉系统控件的X/Y/宽/高.
>以前可以通过frame直接设置控件的X/Y/宽/高.>以前可以通过auturesizing间接设置控件的X/Y/宽/高.>so使用autolayout时也是间接设置控件的X/Y/宽/高即可 

讲解故事版底部几个按钮作用:第一个按钮: 

这个按钮是用来设置对齐方式的: 

用来设置两个兄弟控件A与B, A最左边与B的最左边的距离 

用来设置两个兄弟控件A与B, A最右边与B的最右边的距离 

用来设置两个兄弟控件A与B, A顶部与B的顶部的距离 

用来设置两个兄弟控件A与B, A底部与B的底部的距离 

用来设置两个兄弟控件A与B, A中心的x坐标与B中心的x坐标的距离 

用来设置两个兄弟控件A与B, A中心的y坐标与B中心的y坐标的距离 

设置子控件中心的x坐标距离父控件中心x坐标的距离 

设置子控件中心的y坐标距离父控件中心y坐标的距离 

总结:这些都是为了设置控件的位置信息第二个按钮(Pin):可以认为是设置控件位置,尺寸的

从上往下: 

不仅可以autoresizing外部四根线那样设置子空间与父控件的之间的间距,还可以设置兄弟空间之间的间距它有上下左右四个方向 

设置当前控件的固定宽高 

设置多个控件的宽高相等

设置控件之间的对齐方式

第三个按钮:自动修正 : 当控件的约束出现错误或警告时候 使用 

注意:使用这个修正功能并不能保证每次都按你的意愿进行修正,而是按照xcode认为是正确的方式进行修正第四个按钮:
很少使用,一般都是默认情况 

sibling 兄弟姐妹ancestor 祖先descendant 后代 

勾选表示:当兄弟控件或祖先控件与该控件有关于szie(尺寸) 的约束关系的时候,但调整该控件的大小的时候,与之有约束关系的控件随之变化 

勾选表示:当后代(子孙)控件与该控件有关于szie(尺寸) 的约束关系的时候,但调整该控件的大小的时候,与之有约束关系的控件随之变化 

练习1
1.让子控件永远居中, 宽高永远100

1.0 拖入一个控件设置尺寸为100,100 ,位置随便放置1.1设置距离父控件中心 

添加完毕后 

这里会出现一个红色的箭头:

1.2 红色箭头: 

storyboard当缺少约束或约束冲突时候,会出现红色的箭头分析:我们知道要设置一个控件的约束信息,必须提供位置和尺寸

现在在所设置水平与垂直居中仅仅是设置了蓝色方块的位置信息,还没有设置蓝色方块的宽高,因为缺少约束所以出现红色箭头

1.3.设置宽高 

1.4 黄色箭头:黄色箭头代表当前控件的X或Y或宽或高和autulayout约束的不一致但这个并不影响控件运行的位置和尺寸,控件运行的时候会按照约束的位置和尺寸来展示控件但是有时候我们为更加好看,需要控件进行修正,修正有两种方式
1.4.1 第一种方式: 

修复完毕: 

1.4.2 :通过command + z 可以回退刚刚设置 

1.4.3 第二种方式修复警告: 

1.4.5 红色箭头出现是由于 缺少约束 或 约束冲突导致的,我刚才仅仅是验证了缺少约束, 接下来验证约束冲突

在storybaord中可以为一个控件相同的约束添加多次 

添加后: 

这里红色箭头出现的原因是因为一个约束 width == 100 而另外一个约束 width >= 200

约束冲突导致的1.4.6 修复红色箭头 

总结:上面的练习让我们学会了:
1.通过layout设置控件水平和垂直居中
2.通过layout设置控件的尺寸
3.红色箭头:表示缺少约束或约束冲突
4.如何修复红色箭头
5.黄色箭头:表示layout的约束控件的x/y/w/h 与控件在storybaord中的x/y/w/h 不一致6.如何修复黄色箭头