AutoLayout简洁之道

我也是前几天才有空了解了一下AutoLyout,虽然现在布局已经入门,但是道行尚浅,不足请之处,我会更新文档。
其实XIB和代码都可以用AutoLayout,现在代码自己不习惯,因为XIB可以一眼的看出来是什么约束。

感谢@广州-八爷提醒文章的错误

需要用到的功能

QQ20151126-0.png

1.是IOS8新出的,属于表格一样的布局,我们暂时不用多管。
2.是进行两个试图进行约束的
3.是对于单个试图进行约束的,默认相对于父试图。
4.是对于约束更新和擅长管理的。

1.两个试图相对布局

AutoLayout简洁之道_第1张图片
QQ20151126-1.png

红线圈着是我们常用的约束分别代表着
1.左对齐Leading Edges
2.右对齐Tralling Edges
3.上对齐Top Edges
4.下对齐Buttom Edges
5.水平对齐Horizontal Centers
6.竖直对齐Vertical Centers

勾选就是我们约束了这个条件 后面可以设置约束的距离大小 默认为0

2.相对于最近试图布局

AutoLayout简洁之道_第2张图片
QQ20151126-2.png

红线是我们单个布局最长用到的

分别代表着:
1,距离最近试图顶部

  1. 距离最近试图底部
  2. 距离最近试图左边
  3. 距离最近试图右边

Constrain to margins默认是勾选,会默认多8距离,因为苹果认为大屏幕的有点距离好看。你如果觉得定位试图不准,可以取消。

1。设置宽度 Width
2 . 设置高度 Height

  1. 设置宽度一样(只能选中多个试图布局才能用) Equal Widths
  2. 设置高度一样(只能选中多个试图布局才能用) Equal Heights

约束管理

1.约束更新 ,删除
因为截图不了,就不上图了。

实例说明:

设置下面图广告条高度140 左边和父试图对齐 右边于父试图对齐 上和父试图对齐

AutoLayout简洁之道_第3张图片
QQ20151126-3.png

方案1:

1.选中广告条试图。

2.选择
QQ20151126-4.png
AutoLayout简洁之道_第4张图片
QQ20151126-5.png

1.取消了Constrain to margins
2.设置上对齐0
3.设置左对齐0
4.设置右对齐0
5.设置高度140

怎么才能约束成功 其实原理就是用约束控制Frame.我们都知道Frame有坐标,大小控制。上面添加的约束为什么会成功呢。
相对于父试图上对其和左对齐就确定了坐标。
相对齐父试图左对齐和右对齐就确定了高度
设置了高度就确定了高度。
从而确定了这个试图的FRAME。

方案二

1.选中父试图和广告图
2.选择

QQ20151126-6.png
AutoLayout简洁之道_第5张图片
QQ20151126-7.png

1.设置了左对齐
2.设置了右对齐
3.设置了顶部对齐。

你们问了这个和上面不是一样的吗。上面的默认是相对于父试图。这个是相对于你选中的试图。现在选中的和父试图是一个,所以意义是一样的。

我们虽然设置了左右对齐设置了宽度
顶部对齐和左对齐确定了为了但是没有设置高度
再次选择pan


QQ20151126-4.png
AutoLayout简洁之道_第6张图片
QQ20151126-8.png

我们选中广告条设置高度位140。
我们确定了这个试图的FRAME,从而也约束成功了。

案例2:

AutoLayout简洁之道_第7张图片
QQ20151126-3.png

现在我希望这个广告条是我们宽度的一半

确定宽度和位置还是和之前的一样。但是现在高度不确定了。

我们选中父试图和广告条。

AutoLayout简洁之道_第8张图片
QQ20151126-9.png

约束如上,让两个高度相等。

AutoLayout简洁之道_第9张图片
QQ20151126-10.png

我们点击上图的红线位置。

AutoLayout简洁之道_第10张图片
QQ20151126-11.png

修改高度参数如上。

我们设置试图的高度等于父试图高度。Mutiplier设置位0.5。
我们以为试图的高度位宽度的一半也就是0.5。我们试图的宽度等于父试图的宽度。因为我们参考父试图设置。

我们没办法参考自己的高度和宽度的,因为还没确定下来具体的值。

未完待续

你可能感兴趣的:(AutoLayout简洁之道)