iOS 自动布局 知识点记录[转]

自动布局 AutoLayout 名词释义

约束&参照

约束就是对控件的大小或者位置进行约束，参照就是以某个控件的位置进行约束，其实两者没有明确的分别，它们都可以对控件的位置与尺寸起到作用。

位置&尺寸

而所有控件，都逃不开位置和尺寸。

添加约束应遵循的规则

对于两个同层级view之间的约束关系，添加到它们的父view上
对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

---

xib 中使用：

image.png

约束基本的都是在这四个按钮中操作！

第一个图标：

这是xcode7在iOS9中新加入的功能——stack view，相当于一个容器view用来统一管理他所有subView的约束，其实普通的UIView也可以作为容器view来管理其subView的约束，我们之前做复杂UI显示逻辑的时候往往也会放一个背景的容器view，stack view就是起到这个作用，意义不是很大，它做的事情UIView也可以做，但 他的优势在于：可以通过设置属性的方式让系统自动添加对其subView的约束，而且该view是不渲染在页面上的，对它设置背景色等属性是无效的。

第二个图标：这是一个关于控件对齐的选项，我们可以在里面添加对齐约束条件。如下图：

image.png

虽然是老版本图，但是是一样的。
从上到下依次是左对齐、右对齐、上对齐、下对齐、水平对齐、竖直对齐，这些现在都是灰色的不能选择，只有同时选中多个控件，他们才是可用的，或者先选择一个控件，然后按住control拖动到另一个控件上，就会弹出一个控件对齐的窗口，可以在里面设置两个控件的对齐关系。

下图就是先选择一个控件，然后按住control拖动到另一个控件上，就会弹出一个控件对齐的窗口，可以在里面设置两个控件的对齐关系的方法：

image.png

下面的Equal Withs 和Equal Hights就是指让两个视图等高或者等宽。

第三个图标：更多用来添加单个控件的约束。

image.png

在约束上、下、左、右的时候，右边有个下箭头，你点击可以选择（比如说你点击左边的下箭头）就会让你选择左边是距离父视图多远，还是距离左边子视图多远（假设在你设置的这个视图的左边还有一个与你设置的视图平级的视图）。

image.png

它是在宽高的栏目里，意思是一个宽高的比例，根据比例来确定或者叫约束你的控件的宽高大小。比如说你拖了控件过后，约束这个控件距离上下多远，然后勾选这个选项。那么这个控件在下个模拟器中确定大小的原理是，同样的距离上下多远，那么它的高就确定下来，宽是多少呢？就是你最初在Xib文件中约束的时候，那个时候有一个当时的宽高之比，我在当前的模拟器中就根据这个比例来确定宽。

第四个图标：更新约束、更新尺寸、去掉约束、添加需要的约束等功能

image.png

红色勾选的就是去掉约束的方法，不同的是，上面的是你选中某一个控件的时候，删除单个空间的所有约束。下面的是删除整个Xib文件中所有控件的所有约束。其实还有一个比较简略的添加全局约束的方法，就是你在Xib文件中将控件拖好后，在下面的一栏（因为下面的一栏是添加全局的）选择Add Missing Constraints 选项，系统自动就将全局的约束给你添加好了。不过，这个约束比较粗略，最好还是自己动手，丰衣足食吧。

在二和三两个图标按钮里面，会有这么一个选项：

image.png

image.png

默认是None在约束后不会有位置发生变化，但会出现一个黄色的框框，就是你新约束的frame，并且这个时候会有个黄色警告箭头表示当前view的frame不匹配，需要更新frame。

image.png

黄色的警报就是给你说你的约束和以前不一样了，这时候你就选中那个控件，点击第4个图标，然后选择更新尺寸就可以了。（Update Frame）

 还有个红色的警报就比较严重，表示当前有错误约束：1.约束冲突，需要删除冲突的部分条件。2.约束条件不完善，需要添加完善约束(就是让编译器明确view的frame)，需要仔细体会，怎么样加约束才能让控件的大小和位置在屏幕中固定下来，多加或者少了都不好。

查看你的约束:约束添加好了过后，必要的时候可以去查看或者修改他们。如图：

image.png

这就是你添加好了控件的约束情况，你还可以点击Edit去再次修改它。

修改约束的优先级:约束添加好了过后，必要的时候可以去修改他们的优先级。如图：

image.png

其中的Priority就是本约束的优先级，默认为1000，你可以自己改，程序会优先执行优先级高的约束。

用Xib实现表格视图单元格的高度动态返回，就只需要一句话就够了:

_TestTableView.estimatedRowHeight = 200;

然后将表格视图的heightforrowatindexpath协议方法屏蔽掉就可以了.

---

⚠️自动布局 AutoLayout 会与 Frame 布局有冲突，导致Frame 布局失效

Frame的布局方式就是纯靠坐标布局，在灵活性上比较好，但大量数字让代码难以维护，但对比而言，在计算每个视图的Frame时需要在运行时进行大量计算，所以比较影响性能。
如果用了AutoLayout自动布局,那么我们在ViewDidLoad和ViewWillLayoutSubviews中修改Frame均不能生效，因为ViewWillLayoutSubviews这个方法在ViewDidLoad之后调用,也就是说frame生效之后接着就被autoLayout给重新布局了。所以要更改frame就要在ViewDidLayoutSubviews中更改。