iOS8 Xcode6中Size Classes简单使用教程

Size classes是iOS8中新特性,有了它可以根据设备屏幕或者旋转状态来自定义app布局,在iOS8之前,开发者需要用多个Storyboards使用不同的UI布局来适配旋转状态及不同的设备。在这篇教程中我们主要看看在Xcode6中如何使用Size Classes来适配。

打开Xcode,新建项目选择Single View Application,Product Name填写iOS8SizeClassesTutorial,Organization Name和Organization Identifier根据自己填写,选择Swift语言 与Universal设备。

打开storyboard,在Xcode6中视图控制显示的为正方形,这是因为size class默认为Any width与And height。在storyboard给每个角落位置增加一个按钮,名称分别为"top-left,top-right, bottom-left and bottom-right".将ViewController背景颜色设置为Cyan,这时Storyboard看起来大致如下：

编译运行后,可以发现右边的2个按钮不见了,这是因为layout是为And-width和Any-height设计的。接下来,我们将按钮固定在每个角落上,选择top-left button,Ctrl+Drag方式拉到左边ViewController上并选择“Leading Space to Container Margin”（如下图）,这时按钮Button将会固定在left位置。

接下来,再按以上方式然后选择“Top Space to Top Layout Guide”，这时按钮Button则会固定在Top位置。

使用同样的方法给其他的按钮增加以下约束：

• top-right button -> Trailing Space to Container Margin, Top Space to Top Layout Guide
• bottom-left button -> Leading Space to Container Margin, Bottom Space to Bottom Layout Guide
• bottom-right button -> Trailing Space to Container Margin, Bottom Space to Bottom Layout Guide 编译运行工程后,这时可以发现所有的按钮都正确的排版在界面上。

有时我们需要单独给某一个特殊的size class建一个界面，下面表格列出了可用的Size Classes.

在 Interface Builder中选择Compact Width 和 Compact Height Size Class

所有的iPhone横屏都使用这个size class除了iPhone 6 plus.这时修改界面只会影响当前的Size Class。接下来给ViewController增加一个按钮top-center按钮,ctrl+dragging方式给这个按钮增加以下约束：

• Top Space to Top Layout Guide
• Center Horizontally in Container 这些约束会将按钮固定在Top-center位置,编译运行项目后可以发现界面如下在横屏模式时top-center按钮会显示：

而在竖屏模式时,top-center按钮不可见了,这是因为竖屏方向是属于另一个Size Class的部分。

由于每次选择不同设备查看不同效果时需要重新编译/运行，这样显得有点麻烦。实际上我们可以直接通过Xcode6来预览效果。首先选择Assistant Editor,在第二个界面上选择Preview -> Main.storyboard(Preview)

在这个预览界面底部点击“+”按钮,可以将对应的设备预览增加到界面上。

例如选择iPhone4-inch和3-5-inch，对应的预览并排列出在界面上,也可以通过点击预览图上设备名称来旋转横竖状态的查看对应预览效果。如下图可以看出top-center仅仅出现在横向状态时的预览。

原文：http://www.swiftmi.com/topic/105.html