Xcode 8 的 Size Classes 使用

作者: 要上班的斌哥 | 来源:发表于2017-06-03 22:38 被阅读721次

Size Classes 是 Apple 在 iOS 8 推出的一个新特性，用于适配不同的设备屏幕的UI界面。在 Xcode 8 中，Interface Builder 对 Size Classes 的支持方式发生了一些改变，不过 Size Classes 的理念是没有发生变化的。

Size Classes

在 Size Classes 中，设备的宽高可以被区分为 Compact 和 Regular,若是不区分设备则是 Any 。

示意图

参考来自网友的一张图，图有点年代，我在补充说明的时候增加了 iPhone 7 系列的设备，我们可以得到如下的信息：

所有的 iPhone 在竖屏状态下，设备屏幕的高为 Regular 类型，设备屏幕的宽为 Compact 类型
iPhone 4，5，6，7 在横屏状态下，设备屏幕的宽为 Compact 类型，设备屏幕的高为 Compact 类型
所有的 iPad (这里暂时不考虑 Multitasking ) 不管在横屏还是竖屏状态下，设备屏幕的宽和高都为 Regular 类型
iPhone 6 Plus ，iPhone 7 Plus 在横屏状态下，设备屏幕宽为 Regular 类型，设备屏幕的高为 Compact 类型
设备屏幕的宽为 Any 类型，设备屏幕的高为 Any 类型，这个时候表示所有的设备宽高

Interface Builder 的支持

在 Xcode 6 和 Xcode 7 , Interface Builder 对 Size Classes 的支持是采用九宫格的形式，如下图所示

九宫格

来看看 Xcode 8 的支持，咋一看有种熟悉而陌生的感觉，不过操作还是基本一致的。

image.png

接下来通过一个案例来说明 Xcode 8 的 Interface Builder如何使用 Size Classes 。这个案例是一个简单的界面，界面上有 2 个 View，一个是绿色背景，另一个是红色背景，该案例在 iPhone 竖屏上是 2 个 View 竖直排列，在 iPad 横竖屏和 iPhone Plus 横屏是 2 个 View 横向排列。

拖出 2 个 UIView，一个填充绿色背景，另一个填充红色背景

iPhone 实现

绿色背景的 UIView，宽高都为 80 ，UIView 的顶部距离屏幕顶部 80，水平居中。

绿色背景的约束

红色背景的 UIView，宽高都为 80 ，UIVIew 的顶部距离绿色背景 UIVIew 的底部 80，水平居中。

红色背景的约束

若是我们没有点击图片右下角的 Vary for Traits 选择具体的 Size Classes 类型，那么我们添加的约束就是默认添加到 Any 类型的 Size Classes ，也就是所有的设备都使用我们添加的约束。也就是说现在所有添加到红色背景和绿色背景这 2 个 View 的约束都会被添加到所有的设备，那么我们验证一下。

Any 类型

iPhone 7 竖屏效果

iPhone 7 横屏效果

iPad Air2 竖屏效果

iPad Air2 横屏效果

根据运行效果我们可以看出，添加到 2 个 UIVIew 的约束确实是在所有类型的设备都起作用了。接下来，我们改进这个约束，在 iPhone 竖屏上是 2 个 View 竖直排列，在 iPad横竖屏， iPhone Plus 横屏上是 2 个 View 横向排列。

iPad 的横竖屏状态下，设备屏幕的宽和高都是 Regular,
iPhone Plus 在横屏状态下，设备屏幕的宽也是 Regular。如下图所示，设备选择 iPhone 7 Plus ，设备方向选择横屏，点击 Vary For Traits 弹出 width 和 height 选择。勾选 width 表示列出所有在横屏状态下，屏幕的宽为 Regular 的设备类型。

image.png

如图所示，勾选 width ，Xcode8 列出所有在横屏状态下，屏幕的宽为 Regular 的设备类型, 共有 8 种情况。

屏幕的宽为 Regular 的设备类型

Vary For Traits 所在的工具栏为蓝色状态，说明所有做的约束的修改只会应用在 Vary For Traits 列出的设备类型中，也就是 iPad横竖屏， iPhone Plus 横屏状态下。

第一步删除红色背景 UIView 的 2 条位置约束

删除约束

可以看到红色背景 UIView 的 2 条位置约束变灰色，不过并没有被真正删除，而是在当前的 Size Classes 不加载这2条约束。

并不是真正删除约束

约束变灰色

给红色背景的 UIView 重新添加位置约束，添加的约束如图所示

image.png

在当前的 Size Classes 的约束添加完成之后，点击 Done Varying 。告诉 Xcode 约束已经 OK 了，回到 Any 的 Size Classes 状态。

done

回到 Any 的 Size Classes 状态，这个时候 Vary for Traits 的工具栏为灰色

Any

正确的结果应该是，在 iPad 横竖屏情况下，2 个UIView 是横向排列。在 iPhone 7 横竖屏情况下，2 个 UIView 是竖向排列。在 iPhone 7 Plus 竖屏情况下，2 个 UIView 是竖向排列。在 iPhone 7 Plus 横屏情况下，2 个UIView 是横向排列。从截图中可以看出，我们得到了正确的结果。