引言
AutoLayout 和 Size Classes 是 iOS 8 中引入的界面布局机制,现在 iPhone 的尺寸也逐渐呈现多样化,显然不能沿用过去的点对点界面设计方式,而这个技术的引入则能够更加方便地设计不同屏幕尺寸下的界面,支持响应式布局。
本文将讨论 iPhone 下一个视频应用的简单实现,下面是最终效果图:
通过截图可以看出,两种屏幕模式下的界面样式差异不小,其实这两个界面完全可以在一个 Xib 中完成,只需要使用 Size Classes 技术。
实战开始
首先新建一个 Xib 文件,设置 Size Classes 为 (Any, Any),这样我们就可以设计在所有尺寸下都显示的界面元素,我们在该模式下拖入一个空白 View 来作为以后 AVPlayerLayer 的容器,为了区分我将颜色设置为这个“骚紫色”。(如图1)
现在我们设计横屏模式(也就是全屏)下的布局。我们切换 Size Classes 到 (Any, Compact),为什么要这么设置呢?这里我详细讲一下。
下面这张图是现今所有 iPhone 在不同模式下的 Size Classes:
为了设计适用于所有 iPhone 的横屏模式,我们肯定要设置高度限定为 Compact,因为没有一个 iPhone 在横屏下还老高老高的,但是宽度可不一定,比如 "Bigger than bigger" 的 Plus,它的横屏宽度就可以达到 Regular 这么大,所以我们不对宽度作限制,让宽度为 Any。
这里为了便于观察实际的效果,我们可以设置一下 Xcode Interface Builder 的 Simulated Metrics,把它调为横屏,隐藏状态栏等等。
然后我们设置这个 View 的布局限定,让它填充全屏幕。
接下来设计竖屏模式,我们调整 Size Classes 为 (Compact, Regular),从上面的表中可知,所有 iPhone 在竖屏状态下高度都能达到 Regular,而宽度都只是 Compact。
在这个模式下我们要添加上一切竖屏下应该有的东西:TableView、状态栏背景、返回按钮。
添加完毕后给它们设置布局限定。其中比较特殊的是哪个视频播放的区域,我们要让它在缩放的时候保持比例,所以勾选 Aspect Ratio。这样它的高度就可以根据比例自动调节了。
到这我们的布局就设计得差不多了,添加返回按钮的动作(好吧这个很小儿科,只是因为我多截了一张图...):
当然到这里还没有结束,还记得我们要放视频吗?我们需要在转屏的时候调整 AVPlayerLayer 的 frame
。
所以在代码中增加一个函数:
- (void)viewWillLayoutSubviews {
self.playerLayer.frame = self.playerView.bounds;
}
到此,结束。