iOS开发——Autolayout的实践与技巧

        已经好久没有更新博客了，由于最近工作真的非常繁忙，所以就疏于分享了。今天我们来深入交流一下Autolayout的开发与使用。我在  http://blog.csdn.net/CHENYUFENG1991/article/details/47165751， http://blog.csdn.net/CHENYUFENG1991/article/details/47062527，两篇博客中对Autolayout进行了泛泛而谈，没有对深入的使用做进一步的讲解。今天我们就来弥补这方面的空缺。本文的demo上传至 https://github.com/chenyufeng1991/iOS-Autolayout 。

（1） 首先我们创建一个基于iOS项目，我们就在Storyboard上进行开发。需要选中右侧的Use Auto Layout,下面的Use Size Classes可选可不选，因为我们暂时还不用Size Classes。

。

（2）需要提醒的是，在项目中不能让有些界面勾选Autolayout，有些界面不勾选Autolayout，这样会让程序crash。还有就是，Autolayout中的原则有两个：一是Autolayout是一种相对布局（设置相对约束）；二是这种相对布局是对父容器而言的。

（3）当选用了Autolayout之后，我们可以发现界面的大小变为iPad的大小了，让我们非常的不适应。我们可以在选定某个界面后，在右侧选择一个手机大小。如图：

。

（4）在Storyboard和xib中设计Autolayout，主要用到下面的两个选项，Align和Pin。

。

（5）我们先来看看Align中的选项：

。

Horizontally in Container是相对父容器水平居中。Vertically in Container是相对父容器垂直居中。选中后，点击Add Constraints即可。

（6）再来看看Pin中的选项：

。

首先我们一般不勾选Constrain to margins这个选项，这个选项表示到界面周边的空白。一般默认可能会有8个点的留白，但是这并不是我们需要的。

上方的四个选项表示分别到上左下右的距离。可以根据需求设置，注意一定要选中中间的小红线，否则是没有效果的。但是点开选项可以发现，设置约束距离的时候是可以选择参照物的，这个参照物可以是离当前View最近的View，也可以是父容器。

下面的Width和Height是固定View的长宽。如果你不想在所有屏幕上View的长宽都限制死的话，就不需要选中，系统会根据你其他的约束自动缩放View。如果你一定要定死长宽的话，就可以设置。

下面的Aspect Ratio是设置当前View的长宽比例。

（7）以上的Align和Pin我们都只选中了一个View，当我们选中两个或多个View，来分析下Align：

。

当我们选中两个View的时候，Align中又多了几个选项。

Leading Edges，Trailing Edges，Top Edges，Bottom Edges，分别表示两个View左边缘、右边缘、上边缘、下边缘对齐。

Horizontal Centers,Vertical Centers分别表示两个View水平对齐、垂直对齐。Baselines表示基线对齐。

（8）当选中两个或多个View的时候，Pin的选项如下：

。

发现其中多了Equal Widths和Equal Height,这两个意思很明确，就是选中的多个View等宽或者等高。下面出现的Align意思同（7）中的对齐。

（9）下面我们来看看一个View设置了约束之后的效果和如何设置参数，我以下面的红色View来做讲解，选中了View后，右侧的视图可以看到当前View的所有约束：

。

所有约束：

。

当双击点开某一条约束后，就可以看到约束的详细信息。我解释一下约束的定义：

y = a * x + b;  

其中y表示第一个View的某个约束，x表示第二个View的某个约束，a表示比例系数，b是一个常量。我们以上面的Top Space to Superview Equals:284为例来讲解。

。

First Item就是我所说的y，Relation相当于等号，Second Item就是x，Constant就是b常量，Multiplier就是a比例系数。上面这个约束的意思就是：红色View的顶部位置是父View顶部位置加上284点，比例系数为1. 其中的Priority表示优先级，我们暂不考虑。其他的所有约束我们都可以通过这种方式来设置参数和分析。

（10）我们再来分析上面的三个灰、蓝、黑View平分界面宽度的操作。这里就要涉及比例系数了。按住control键，触摸板按住拖动蓝线到父容器；或者按住鼠标右键直接拖拽蓝线到父容器，选中Equal Widths。然后右侧就会出现如下所示：

。

表示在宽度上对父容器的一个比例系数。双击点开后，可以设置如下：

。

在Multiplier中，可以填入1:3这样的比例，也可以填入小数。在这里，我把View的宽度设为父容器宽度的1/3.然后把三个View设置成同样的就好。同样的，我把下面的红色View的高度设置为父容器高度的1/2.

（11）现在我要把上面三个View的高度设置为宽度的一半，这个比例该如何设置呢？选中View，然后Aspect Ratio.右侧就会出现如下：

。

双击进入后：

。

在这里，自变量、因变量都是对于同一个View来说的。比例系数为width为1，height为0.5.

（12）解决冲突。在使用Autolayout中，约束冲突时经常会碰到的问题，我们必须要去解决。有些冲突可能不会有任何影响，有些冲突可能会在版本升级中导致crash。警告类的冲突会以黄色显示，错误类的冲突会以红色显示。下面我们来谈谈如何解决。

最简单最傻瓜的解决冲突就是根据系统的提示修改即可。

。

      从左边可以看到，Expected表示根据你当前的约束得出你希望显示的值，而Actual表示当前你在Storyboard中显示的值。根据修改提示，如果你选择“Update frames”，表示你将会让约束不变，而改变当前在Storyboard中显示的效果。也就是最后的效果将会是Expected中的显示效果。如果你选择”Update constraints“,正好与Update frames相反，你将会改变约束的值，以当前在Storyboard中显示的效果为准。而后面的两个选项基本不用。

      而对于红色的冲突，那就是比较严重的。有些是提示你要删除某些约束，有些是提示你缺少某些约束。

。

如图所示，就是你缺少了某个约束导致的。

      但是，当你对Autolayout比较熟悉了以后，不会采取上述的系统提示方法去解决冲突，而是会在右侧根据某个View的所有约束去分析，然后手动的增删改约束，这样能快速的提高自己的布局能力。

（13）界面预览。当我们布局好一个界面后，怎么样才能看到显示效果呢？不同屏幕去运行？现在iPhone有四种屏幕，难道要分别去运行4次？现在有更为方便的预览方式。切换到Assistant editor视图，然后选择Preview即可。通过左下角的+按钮，可以分别添加4种不同的屏幕，然后就能同时看到显示效果。

。

如图所示：

。

     对于Autolayout而言，不仅要理解基本的布局概念，更重要的是去实践，然后对于布局就能随心所欲了。