用实例学习|用实例学习 iOS AutoLayout & Size Classes 用实例学习iOSAutoLayout&SizeClas

引言 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。
所以在代码中增加一个函数：