AutoLayout简洁之道

针对 Xib 的自动约束做了简单的说明

Imagem de capa

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

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

需要用到的功能

QQ20151126-0.png

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

1.两个试图相对布局

QQ20151126-1.png

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

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

2.相对于最近试图布局

QQ20151126-2.png

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

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

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

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

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

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

约束管理

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

实例说明:

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

QQ20151126-3.png

方案1:

1.选中广告条试图。 2.选择QQ20151126-4.png

QQ20151126-5.png

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

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

方案二

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

QQ20151126-6.png

QQ20151126-7.png

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

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

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

QQ20151126-8.png

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

案例2:

QQ20151126-3.png

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

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

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

QQ20151126-9.png

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

QQ20151126-10.png

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

QQ20151126-11.png

修改高度参数如上。

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

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