AutoLayout 使用之storyboard演示（入门篇）

      AutoLayout 是iOS6的新特性，不少人都选择不去使用，由于不少app都不须要支持旋转，并且设备的尺寸就那几个，很好判断，可是随着设备的尺寸不断增多，ios8推出了新方法 Size Classes完全的解决了适应屏幕的问题。虽然Size Classes 是 iOS 8 的功能， 可是Xcode 6 对它作了一点向后兼容的处理，能够有限度地支持 iOS 7 等版本。可是 Size Classes 必需要与AutoLayout 配合使用才能达到真正想要的效果，因此先学习AutoLayout是颇有必要的！

这篇博客只要介绍用storyborad来实现autoLayout， VFL来实现auto layou 之后也会说到

1、AutoLayout 介绍

      Auto Layout 是一种自动布局，为何说是自动布局呢，由于它和以往的布局方式不一样（之前的方式按照 frame 来赋值），Auto Layout 是根据某一个view 和 另n（n >= 1）个view 的上，下，左，右的距离来定那一个view的位置的，想要使用 Auto Layout 必须摒弃老的frame 的观念，否则，你永远也搞不定 Auto Layout。

     有一些人可能会说 Auto Layout 把界面弄得很乱，刚布置好，结果两个view 的距离又变了，那是由于你的约束没有设置好，没设置好，固然会有问题，因此就不要抱怨啦。

2、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后才能选择！

一、有关于“中”的显示：

二、本身（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）实现上述的布局，这种布局方式虽然不方便（要写），可是却能更好的添加！