iOS 自动布局 Auto Layout 入门 02 使用自动布局

在上一节中，我们使用autosizing+代码的方法使三个view按我们的需求显示在应用程序中，这一节，我们使用Auto Layout来实现同样的功能。

转载请注明出处：http://blog.csdn.net/yamingwu/article/details/44132637

删除willAnimateRotationToInterfaceOrientation方法并enable auto layout：

编译运行程序，并将设备旋转至横屏状态：

这并不是我们想要的效果。

下面，我们开始使用Auto Layout。选中绿色和黄色的view，从Xcode的Editor菜单选择Pin\Widths Equally和\Pin\Horizontal Spacing。橙色的T型代表view之间的约束（constraints）。此时，我们设置这两个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 Superview

至此，我们将看到如下约束：

但是，还有一些约束是橙色而不是蓝色的，这就意味着我们的布局还没有完成。自动布局没有足够的约束来计算view的位置和大小。我们需要添加更多的约束，让所有的约束都成为蓝色。

同时选中3个view，从Editor菜单选择Pin\Heights Equally。再选中左侧的view和下面的view，选择Editor\Pin\Vertical Spacing。

此时，我们的Interface Builder如下图所示，所有的约束都是蓝色了。

编译运行，并将设备旋转为横屏，效果如下：

这正是我们所期望的效果。使用自动布局，我们不需要任何的代码，而是通过设置view之间的约束，来实现需求。

我们来回顾一下，我们添加了什么样的约束：

• 左上的view和右上的view拥有相同的宽度。
• 左上的view和右上的view之间有20点的水平间隔。
• 所有3个view都有相同的高度。
• 上面的两个view和下面的view之间有20点的间隔。
• 这3个view和屏幕的边界之间有20个点的间隔，包括上、下、前、后四个方向。

选中左上view后右上view之间的水平间距约束：

可以看到，约束的属性也是可以修改的，因为约束也是一个真实的类（NSLayoutConstraint）。我们修改Constant字段为100，将左上view和右上view之间的间距设置为100，程序执行效果如下：