自动布局(Auto Layout)

2016-08-04 本文已影响402人 Magenta_she

参考资料：

1. Auto Layout，通过设置在View上的约束，动态计算所有View的尺寸和位置。比如，你约束一个Button，使得它的水平中心线和一个ImageView相同。如果ImageView的尺寸或位置改变，Button会自动调整，以符合之前设置的约束。

外部变化 -> 发生于Superview的尺寸或位置改变。这时，所有view都要重新计算尺寸和位置。这些变化大部分发生在运行时，它们需要app能动态响应。

内部变化 -> 界面中的View的位置或尺寸的改变。比如，

--显示内容或图片时，新的内容或图片需要新的布局

--用户设置字体大小时，将改变与文本相关的控件的高度或宽度，布局必须能适应变化

2.Auto Layout是如何工作的呢？

考虑你设定的约束，自动计算出理想的位置和尺寸

3.Auto Layout常见问题

(1)设置了autolayout后，在代码中还能用self.someView.frame修改frame吗？不能。

(2)为什么有些控件只设置x，y值约束，也不会出错？

UIKit 的一些控件如 UILabel、UIImageView 等有自适应特性，会根据内容自适应尺寸，所以不需要再约束其宽高。

(3)同样的约束用在 UIScrollView 和 UIImageView上，为什么会出现错误？

#2 不使用Auto Layout

1.打开File Inspector，不勾选Auto Layout

2.拖三个View出来，设置尺寸，位置，颜色。

Top left:Origin 20,20, Size 130 x 254 Green

Top right:Origin 170,20, Size 130 x 254 Yellow

Bottom:Origin 20,294, Size 280 x 254 Blue

3.在Size Inspector里，选择Frame Rectangle。就以左上角的View为例吧，Frame Rectangle能让它紧贴顶部和左部边缘，并且随着superview尺寸的改变，能在水平和垂直方向上相应调整布局。

Size Inspector

但此时横向的效果图并不如意，三个view间并没有20的间隙。

横向效果图

4.改变需要重新布局的view的frame

--将view与属性关联起来，并override viewWillLayoutSubviews()方法

ViewController.swift

注意：viewWillLayoutSubviews()方法是针对4英寸的设备上的，所以对4.7或3.5英寸的设备并不奏效。而用nib方法或继续添加if分句都会过于麻烦，所以我们不妨回到Auto Layout上来。

当然，SnapKit也是一种解决的办法，可以尝试玩玩。

1.勾选Auto Layout，并去掉viewWillLayoutSubviews()方法。

2.加constraints

topLeftView

topRightView

bottomView

看一下最后的效果

在不同尺寸不同方向上的布局