转载

基于 Worklight Foundation 构建适应多屏幕尺寸 Native iOS 应用

Xcode6 Story Board 介绍

XCode 是苹果提供的一套开发工具，用来快速开发 Native 移动应用。在 XCode 升级到 6.x 之后，视图布局工具 Story Board（故事板）发生了很大的变化，这也是因为随着 iPhone6 系列的发布，苹果的移动设备屏幕尺寸变得更加丰富，丰富的屏幕尺寸带来的一个问题就是需要为不同尺寸的屏幕进行不同的视图布局。在 Xcode6 之前开的 iOS 开发模式中，Story Board 中的每一个 ViewController（视图控制器）是一个固定高宽的矩形，在上面可以做 iOS 移动应用横竖屏幕的不同布局。这种开发模式下，iPhone 的 Story Board 和 iPad 的 Story Board 因为设备尺寸差距的原因是分开的，也即 iPhone 应用的 Story Board 布局无法给 iPad 使用，需要重新创建一个 iPad Story Board。如果应用有涉及到横竖屏的切换，那么横屏状态下需要额外的一套布局。因此在 iPhone6 出来之后，设备尺寸增多，这种开发模式就显得笨重且低效率。

Size Class

在 XCode6 中，为了能使同一个 Story Board 中的视图控制器能给所有尺寸屏幕的 iOS 应用使用，在 Story Board 中的每一个视图控制器都提供了一组特别的尺寸对象集，其中的每一个尺寸对象都有两个 Size Class，一个垂直的 Size Class 和一个水平的 Size Class。并且每一个 Class 都有 3 个可能的值：compact（压缩型），regular（普通型），或者 any（任意型），这些值基于设备和方向进行改变。你的应用将会基于当前的 Size Class 为每一个视图控制器布局好它的界面，相斥的 Size Class 之间的布局相互不影响。这样，以前需要多个 Story Board 的设计模式就可以用一个 Story Board 设计来完成了。

点击 Story Board 界面的底部的 Size Class 选择器就可以出现 Size Class 的选择视图，XCode6 使用一个网格来让用户选择哪个 Size Class 来工作，如下图所示。

图 1. Size Class 网格选择器

基于 Worklight Foundation 构建适应多屏幕尺寸 Native iOS 应用

总计有 9 种 Size Class 的组合，他们分别对应各种尺寸，不同横竖方向的 iPhone，iPad。它们分别是：

wCompact+hCompact： 这个组合适用于布局横屏的 3.5/4.0/4.7 英寸屏幕 iPhone
wCompact+hAny：这个组合适用于布局横竖屏幕 3.5/4.0/4.7 英寸屏幕 iPhone
wCompact+hRegular：这个组合适用于布局竖屏幕所有尺寸屏幕 iPhone
wAny+hCompact：这个组合适用于布局横屏幕所有尺寸屏幕 iPhone
wAny+hAny：这个组合适用于布局横竖屏幕所有的 iOS 设备，常用这组 Size Class 组合
wAny+hRegular：这个组合适用于布局竖屏幕所有尺寸 iPhone，以及布局横竖屏幕的 iPad
wRegular+hCompact：这个组合适用于布局横屏 5.5 英寸的 iPhone（iPhone6+）
wRegular+hAny：这个组合适用于布局横竖屏 iPad
wRegular+hRegular：这个组合适用于布局横竖屏 iPad

可以看出以上的 9 种组合对屏幕的适配上有相互的重叠交叉。通常我们选择 wAny+hAny 组合来做所有 iOS 设备通用的布局，而针对特定设备的布局，则需要配合使用对应的 Size Class 组合来加以限制。

例如：在小屏幕 iPhone（4.7 英寸以下）中横屏才会出现的布局，则需要配合使用 wCompact+hCompact 组合加以限制。这样，wCompact+hCompact 组合下视图控制器上的局部只会在小屏幕 iPhone 横屏下才会展示。

另外，并不是所有的尺寸都能在 Size Class 中找到明确的组合（比如没有组合可以明确表示 iPhone6+的竖屏，iPad 的横竖屏也不好区分），但是我们可以使用表示这个尺寸范围的组合。比如我们可以用 wCompact+hRegular 来表示 iPhone6+的竖屏。

最新的 Worklight 建立的 iOS Native 工程在 XCode 6 中使用 Class Size 来布局这一功能是默认激活的，对于一些导入老 Worklight Native 工程则没有被激活，则可以通过设置 Story Board 的属性来激活：

图 2. 激活使用 Size Class 选项

Layout Constraints

激活 Story Board 的 Size Class 之后，直接控件拖拽至视图控制器放置不能直接的反映控件在视图中的真实位置了，因为一个 Size Class 可能对应多个屏幕尺寸的布局。为了使放置的控件能够如实的反映其在移动设备上的位置。我们需要用 Layout Constraint（布局约束）来对控件的位置进行校正。

在 XCode 中，选中视图控制器上的控件，然后点击 Story Board 下方的几个选项即可对控件的 Layout Contraints 进行调整：

图 3. Layout Constrains 选项

常用的控件和控件间的 Layout Constraints 具体如下：

Leading Edges：不同行的控件之间行左对齐。输入数字可以控制对齐偏移量，正值为相对左移。
Trailing Edges：不同行的控件之间行右右对齐。输入数字可以控制对齐偏移量，正值为相对左移。
Top Edges：不同列的控件之间顶部对齐。输入数字可以控制对齐偏移量，正值为相对上移。
Bottom Edges：不同列的控件之间底部对齐。输入数字可以控制对齐偏移量，正值为相对上移。
Horizontal Centers：控件之间水平中心对齐。输入数字可以控制对齐偏移量，正值为相对上移。
Vertical Centers：控件之间垂直中心对齐。输入数字可以控制对齐偏移量，正值为相对左移。
Base Lines：带有文本的控件之间以字体的 Base Line 对齐，非文本类控件之间无此功能。输入数字可以控制对齐偏移量，正值为相对左移。
Horizontal Center in Container：控件相对于视图控制器水平居中。输入数字可以控制对齐偏移量，正值为相对左移。
Vertical Center in Container：控件相对于视图控制器垂直居中。输入数字可以控制对齐偏移量，正值为相对上移。
Spacing to nearest neighbor：控件相对于它最近的组件的间距，分为上下左右间距。
Constrain to margins：指定视图控制器的边界是否留出系统预设的空白区域。
EqualWidth：终止控件与另一个控件是否等宽。
EqualHeight：控制控件与另一个控件是否等高。
Aspect Ratio：等比例缩放，也即是在调整控件大小时，控件会按已经设定的高宽比例放大或者缩小。
Align：等同于以上几种控件之间的对齐方式。

开发应用过程中可以灵活的运用这几种布局约束实现非固定坐标的布局，结合 Size Class，能够使得布局可以随着屏幕尺寸方向的改变而做出自我调整。

回页首

Worklight 6.2 Native iOS 开发实例

上文介绍 XCode6 Story Board 的新特性，接下来我们开发一个实例来详细说明这些特性。假设我们需要为某个应用开发一个简洁的登陆界面，这个登陆界面包含有的界面元素为：

一个包含用户名，密码和提交按钮的表单，表单要求水平垂直居中对齐于视图控制器。
横屏大屏幕的 iPhone（iPhone6+）显示一段“横屏大屏幕 iPhone”说明。
横屏小屏幕的 iPhone（iPhone4/5/6）显示一段“横屏小屏幕 iPhone”说明。

创建 Worklight 工程

Worklight 6.2 不直接提供支持 Story Board 的 Native 工程的创建，所以我们需要进行一些配置，使得 Worklight 6.2 能支持 Native iOS 开发，具体如下：

打开 Eclipse，新建一个 Worklight Hybrid 工程，为工程添加一个 iPhone application-descriptor。如下图所示：
图 4. 创建完一个带 iOS 工程之后的 Worklight 项目列表
右击 iPhone application，选择 run as->Xcode project。
在弹出来的 XCode 工程中新建一个 Main.storyboard 文件，然后在工程的 iOS Target Properties 中添加一个属性：Main storyboard file base name，设置成 Main。
图 5. 设置 Worklight Native iOS 工程的初始化 Story Board

通过以上设置，一个基于 Worklight 6.2 的 iOS native 工程就配置好了。

给通用的 Size Class 添加 Layout Constrains

根据以上的假设场景，因为针对所有尺寸设备的布局上都会有表单，所以，我们可以将 Story Board 首先切换到 wAny+hAny 模式进行表单的布局。如上文所说的特性：wAny+hAny 是一组通用的 Size Class，布局的内容将会对所有尺寸所有方向的屏幕都起作用。

当我们在视图控制器上放置完控件之后，打开辅助预览功能查看预览布局，就可以看到如下的效果，各个屏幕尺寸方向的设备上显示都没有对齐，有的甚至不能完全显示：（图中 4/4.7/5.5 英寸分别为 iPhone5/iPhone6/iPhone6+）

图 6. Story Board 放置完控件之后的预览

上文已经讨论过，在视图控制器中放置控件的位置不能反映其在设备中的真实位置。我们需要用控件的布局约束来调整，让其能够在每个屏幕尺寸方向上都有居中对齐的效果：

调整用户名文本标签。让其距离视图控制器左边 20 逻辑像素，注意这里暂时不设置距离视图控制器顶部的像素距离，用户名文本标签不设宽度，使用自适应的宽度即可。
图 7. 设置用户名文本标签的布局约束
调整用户名输入框，设置用户名输入框距离用户名文本标签 10 个逻辑像素。选中输入框，然后按住 control 键拖拽鼠标至用户名文本标签，就会弹出如下所示的菜单。选中水平间隔，输入 10 逻辑像素即可。
图 8. 设置两个控件之间的水平间距
设置用户名输入框到视图控制器的右边距为 20 逻辑像素，这里依旧不设置输入框的宽度，也不输入输入框到视图控制器顶部的距离。

图 9. 设置输入框的右边距

设置完之后登录表单中的用户名输入组的效果如下，可以看到文本标签和输入框没有垂直居中对齐，我们需要再进行一些设置。

图 10. 设置完控件边距约束之后预览
同时选中文本标签和输入框，设置一个新的对齐约束，勾选上控件间的垂直居中对齐属性。
设置完之后，用户名输入组的对齐效果已经比较完美了：

图 11. 控件垂直居中对齐之后预览
接下来放置密码输入文本标签和密码输入框。因为用户名文本标签和输入框位置都已经确定了，所以我们可以让密码输入组对齐用户名输入组即可。放置好密码控件组之后，设置密码文本标签和用户名文本标签两者等宽并且行间左对齐，密码输入框和用户名输入框也设置为两者等宽并且行间左对齐，最后，设置下密码文本标签和密码输入框两者垂直居中。

图 12. 设置控件之间等宽和行对齐

布局完密码控件组之后预览效果如下：可以看见一个表单的效果已经出来了

图 13. 表单初步效果
放置一个登录按钮，按钮的布局可以使用以上的方式设置为对齐输入框，这样就布局成功一个完整的表单。
设置整个表单垂直居中于视图控制器。由于我们一开始没有设置用户名输入框距离顶部的高度（默认为 0），因此这个输入框与顶部是贴合的，为了实现整个表单垂直居中的效果，我们需要给表单添加垂直居中于视图控制器的约束。由于整个表单现在已经有了控件的垂直间距约束并且都相等，所以，我们只需要设置下密码输入框垂直居中，整个表单就都会相应的移动到视图控制器的垂直居中位置：

图 14. 设置整个表单相对于视图控制器垂直居中

全部设置完之后，我们可以看到一个水平垂直都居中于视图控制器的表单：

图 15. 完整的垂直居中表单预览

实现特定 Size Class 的布局

接下来我们需要考虑实现假设需求中的几点：在不同的屏幕尺寸和屏幕方向的设备上显示一段文字。首先我们需要实现在横屏大屏幕的 iPhone（iPhone6+）上显示一段“横屏大屏幕 iPhone”说明。显然，我们需要找一个只对 iPhone6+横屏布局生效的 Size Class。

9 种 Size Class 只对横屏大屏幕 iPhone 生效的 Size Class 组合为 wRegular+hCompact，因此我们切换 wAny+hAny 至 wRegular+hCompact，然后居中放置一个文本标签，写入内容。对比预览内容如下：

图 16. 大屏幕 iPhone 显示一段文字预览

可以看到，在大屏幕 iPhone 下出现了一段文字，而小屏幕 iPhone 的横屏则没有。通过这样的限制，这段文字布局就被限制只在一种情况下出现了。

与限制在横屏大屏幕的 iPhone 的布局类似，我们需要实现的需求中的另外两点都可以通过调整 Size Class 组合来加以限制，只在小屏幕显示文本的 Size Class 组合为 wCompact+hCompact，只在 iPad 上显示文本的 Size Class 组合为 wRegular+hRegular。预览的效果分别如下：

图 17. 小屏幕 iPhone 显示一段文字预览