ios7 中的 Auto Layout 使用教程 第二节

原文：http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1

我们接着上面的章节  Beginning Auto Layout Tutorial in iOS 7: Part 1 -- ios7 中的 Auto Layout 使用教程 第一节

     当我们给storyboard加完constraints约束之后，它看起来是这样的：

     

     大家可以看到图中多了好多橙黄色的横线 --- "T-bar",到现在为止，我们已经给绿色和黄色的View添加了两个constraint ： 一个是Equal Widths constraint让这两个view等宽的，另外一个是view和view之间20px寛的约束，这里反复说到一个词语 constraint --- 约束，可以这么理解，在autolayout里面就没有什么左边坐标，大小size是多少等。有的是相对位置，控件和周边的关系是什么等等，这个听起来有点不好学习，其实不然，一旦掌握了，So easy啦！不信接着往下看。

      大家先不要问 为什么 要这么做，要做的是，先把这个项目做完。

       接下来我们再给这三个view添加如下约束，请严格按照以下几个步骤：

       左边绿色view，选择菜单Editor->Pin

• Top Space to Superview
• Leading Space to Superview

右边黄色view，选择菜单Editor->Pin：

• Top Space to Superview
• Trailing Space to Superview

底边蓝色view，选择菜单Editor->Pin：

• Leading Space to Superview
• Trailing Space to Superview
• Bottom Space to Supervie

添加完之后可以得到如下：

但是你会看到这些线条还是橙黄色（正常颜色应该是蓝色），这就索命View之间还缺少约束Constraint,目前约束还不够标准计算出view在旋转中发生的位置、大小的变化。

 

选中这三个view，选择 菜单 Editor->Pin->Heights Equally

在重新选中绿色view和蓝色view（这两个view），选择菜单 Editor->Pin->Vertical Spacing.

现在IB上面的三个view应该是：

现在所有的蓝色线条都变成了蓝色，AutoLayout也有了足够的信息进行布局计算，运行一下看看（在3.5和4.0寸模拟器来回切换）如下图：

出来了，是不是很流逼啊！没有写什么代码定位置，定大小，AutoLayout可以表达出view和view之间的关系（如何布局）。

我们总结一下，我们虽然没有写代码，但是这个storyboard上面加入好几个Constraint（auto Layout模式下）

绿色和黄色的View有系统宽度约束。

绿色和黄色的View有20像素宽度的约束。

所有view都有相同高度的约束。

所有的view无论是彼此之间还是和superview边缘都有20像素间缝的约束。

所有这些约束加在一起，我就可以实现，所有子view随着superview变化而调整变化。

在Xcode的Document Outline (xcode的左边)你可以看到所有的Constraints:

Constraint是对象，所以它们就会有属性，举个例子来说，选中一个名字为Horizontal Space (20)的约束，改变他的值由20编程100，如下图：

运行如下图：

现在大家应该看到Auto Layout的优越的地方了，下一节我会告诉大家他的工作原理。