AutoLayout 是iOS6的新特性，很多人都选择不去使用，因为很多app都不需要支持旋转，而且设备的尺寸就那几个，很好判断，但是随着设备的尺寸不断增多，ios8推出了新方法 Size Classes彻底的解决了适应屏幕的问题。虽然Size Classes 是 iOS 8 的功能， 但是Xcode 6 对它做了一点向后兼容的处理，可以有限度地支持 iOS 7 等版本。但是 Size Classes 必须要与AutoLayout 配合使用才能达到真正想要的效果，所以先学习AutoLayout是很有必要的！
这篇博客只要介绍用storyborad来实现autoLayout， VFL来实现auto layou 以后也会说到
一、AutoLayout 介绍
Auto Layout 是一种自动布局，为什么说是自动布局呢，因为它和以往的布局方式不同（以前的方式按照 frame 来赋值），Auto Layout 是根据某一个view 和 另n（n >= 1）个view 的上，下，左，右的距离来定那一个view的位置的，想要使用 Auto Layout 必须摒弃老的frame 的观念，不然，你永远也搞不定 Auto Layout。
有一些人可能会说 Auto Layout 把界面弄得很乱，刚布置好，结果两个view 的距离又变了，那是因为你的约束没有设置好，没设置好，当然会有问题，所以就不要抱怨啦。
二、AutoLayout 使用
关于用VFL实现下述布局请看 AutoLayout 使用之代码实现(VFL)
（1）界面需求以及效果图
下面用一个简单地例子还实现autoLayout，使得我们的工程在不同尺寸的设备上界面不会乱，而且旋转也不会乱（此工程基于xcode6），先解说一下这个图，中间的模块是始终居中显示的，黄色和绿色的图是沿y轴中心（virtical center）的方向显示，并和背景View 的左边或者右边的大小值固定，“红”“橙”“蓝”“紫” 这四个图的约束关系为：和背景View的左边或右边的约束成固定值，离最近的上方或下方的View的成固定值：先看一下最后的效果图：
运行在3.5inch 的机子 和4.0英寸的机子：
运行在4.7英寸以及5.5英寸的机子
再看一个在4英寸上旋转的图：
大家可能觉得不好看，没关系。这个是约束的原因，适当修改约束他会变得好看的！如果怎么都修改都不好看，那没办法了，还是用代码动态改变吧！下面详细的介绍怎么实现这个过程的
（2）storyBoard中的各种约束介绍
下面只介绍和本例子有关的约束，但这些约束就是我们用得最多的约束！其他约束大家可以边练习边琢磨是什么。
下面的这些东西要选中某个View后才能选择！
1、有关于“中”的显示：
2、自己（self）
第一个框为离自己最近的View的距离，很常用！
假如有一个如下布局为：
这样的关系用简单的 方式表示为：[bottom] - [self] - [label]，那么，离self 左边最近的View为 button ， 离self右边最近的view为 lable，上图中的第一个框就是让你填选中的view（self）离最近的View的距离，如果self 的右边没有View ， 那么，这个距离就是self 到 根视图（self.superView）的距离。
上图第二个框是给选中的View设置固定的宽度和高度，当添加好约束后，点击第三个框“Add Constranints”添加约束。
加好约束后，可以看到View Contraller Scence 处多了很多的约束
这些约束是可以修改和删除的，你可以直接点击某一个约束进行删除，或选中某个约束后在下图红框中修改：
（3）动手实现上例约束
首先，新建一个工程，因为xcode6的View都很大，而且在这里我们不介绍 Size Classes,只介绍autoLayout，不妨先将View的视图修改成4inch的视图，以及将 size Classes 在选项中”去勾“，如图：
”去勾“，将size classes的”勾“ 去掉
我们在这几个View中加上7个小视图，这几个视图的宽高都设置成65 ，调节各自的背景颜色，并按顺序摆放， 如图所示：
我们先看一下不添加任何约束用3.5inch 4.0inch 4.7inch 和5.5inch模拟器运行的图：
再看一下在4.0 inch 下旋转的图：
这显然不是我们想要的
Xcode6中加入了一个预览的好动西。当你在布局的时候，他可以随着你的布局让你预览效果，为了更好地看到自己布局是否准确，在我们布局的时候可以利用它，如图切换到预览模式：
当我们不添加任何约束时的预览图为：
点击下面的“+” 还可以查看不同尺寸的设备的预览图
现在我们先在每一个view加上长和宽的约束，使他不管在什么时候都为一个边长固定的正方形，以中间的view为例子，其他的一样加。
点击中间的View，为其添加长和宽的约束，如下图，其他的View一样加：
加好后你的预览图也变了：
点击View 可以看到那个View的下方多了一个长和宽的约束的约束，视图中的View多了两条橙色的线，这个线分别指向view的长和宽。橙色线出现代表你的约束不完全，表明你的约束太少，在不同的设备中你的View得不到一个满意的约束，你的View会随着设备的尺寸动起来，还需要继续添加。
我们用如上的方法添加剩余其他的view，使其长度和宽度都为65，效果图如下：
现在我们让中间的那一个View 居中显示，选择中间的view，如下图：
这边的“0” 指的是中间，些其他的数字会左右，上下移动，大家可以试试
添加好约束后，预览图也发生了变化:
我们看到，中间的view现在已经居中显示了，而且蓝色的线出现了（表示约束完全），只是有一个虚线框在我们视图的下面，这代表了我们在容器中布局的位置不对，应该将视图移动到虚线框中，这里我们先不管他，最后在修改，或不改也无妨。
现在我们来看黄色的View，我们想让他和中间的视图在一条水平线上（垂直居中），且它离容器左边的距离为一个固定值。现在我们选中它，如下图：
让他垂直居中，以及离根视图左边为 13，效果图如下：
让绿色的View 和黄色的View一样 垂直居中，以及离根视图右边的距离为13：
预览图如下：
下面我们来实现红色的view 和橙色的view 让他离下面的最近的view 的距离以及根视图的左边或右边的位置成固定值：
红色的View：
橙色的View：
看一下预览图：
我们在实现蓝色的View和 紫色的View 的约束，使得他们 和离得最近的上面的view 以及根视图形成一个约束
蓝色的view：
紫色的View：
效果图如下：
到这里，我们的约束就全部添加好了，最好来解决之前说过的位置不对的问题，大家会发现我们的工程莫名其妙的出现了很多的警告：
点进左边红框的警告区域：
点进里面小的警告，选择“Fix Misplacement”这样警告就会消失了，这个警告是告诉我们,我们在放视图的时候位置和我们的约束时的位置不一样。
点击后，视图的位置会改变，但是约束的位置不会变.运行程序，得到了和最上面一样的效果！
这个只是一个入门级别的，复杂一点的就拼拼凑凑就好了。
下一篇博客将介绍怎么用代码的形式（VLF）实现上述的布局，这种布局方式虽然不方便（要写），但是却能更好的添加！
1005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
