用实例学习 iOS AutoLayout & Size

引言

AutoLayout 和 Size Classes 是 iOS 8 中引入的界面布局机制，现在 iPhone 的尺寸也逐渐呈现多样化，显然不能沿用过去的点对点界面设计方式，而这个技术的引入则能够更加方便地设计不同屏幕尺寸下的界面，支持响应式布局。

本文将讨论 iPhone 下一个视频应用的简单实现，下面是最终效果图：

竖屏界面 横屏界面

---

通过截图可以看出，两种屏幕模式下的界面样式差异不小，其实这两个界面完全可以在一个 Xib 中完成，只需要使用 Size Classes 技术。

实战开始

首先新建一个 Xib 文件，设置 Size Classes 为 (Any, Any)，这样我们就可以设计在所有尺寸下都显示的界面元素，我们在该模式下拖入一个空白 View 来作为以后 AVPlayerLayer 的容器，为了区分我将颜色设置为这个“骚紫色”。（如图1）

Figure 1.

现在我们设计横屏模式（也就是全屏）下的布局。我们切换 Size Classes 到 (Any, Compact)，为什么要这么设置呢？这里我详细讲一下。

下面这张图是现今所有 iPhone 在不同模式下的 Size Classes：

Figure 2.

为了设计适用于所有 iPhone 的横屏模式，我们肯定要设置高度限定为 Compact，因为没有一个 iPhone 在横屏下还老高老高的，但是宽度可不一定，比如 "Bigger than bigger" 的 Plus，它的横屏宽度就可以达到 Regular 这么大，所以我们不对宽度作限制，让宽度为 Any。

Figure 3.

这里为了便于观察实际的效果，我们可以设置一下 Xcode Interface Builder 的 Simulated Metrics，把它调为横屏，隐藏状态栏等等。

Figure 4.

然后我们设置这个 View 的布局限定，让它填充全屏幕。

接下来设计竖屏模式，我们调整 Size Classes 为 (Compact, Regular)，从上面的表中可知，所有 iPhone 在竖屏状态下高度都能达到 Regular，而宽度都只是 Compact。

Figure 5.

在这个模式下我们要添加上一切竖屏下应该有的东西：TableView、状态栏背景、返回按钮。

添加完毕后给它们设置布局限定。其中比较特殊的是哪个视频播放的区域，我们要让它在缩放的时候保持比例，所以勾选 Aspect Ratio。这样它的高度就可以根据比例自动调节了。

Figure 6. Figure 7.

到这我们的布局就设计得差不多了，添加返回按钮的动作（好吧这个很小儿科，只是因为我多截了一张图...）：

Figure 8.

当然到这里还没有结束，还记得我们要放视频吗？我们需要在转屏的时候调整 AVPlayerLayer 的 frame。

所以在代码中增加一个函数：

- (void)viewWillLayoutSubviews {
    self.playerLayer.frame = self.playerView.bounds;
}

到此，结束。