在 Xcode 中直接预览应用 UI

在使用 Xcode 做 app 应用开发的时候,设计一下应用的 UI 界面是家常便饭,但是每次都要运行然后去模拟器里查看输出一件很麻烦的事情,尤其是当需要修改的元素很多、而且需要配适各种屏幕大小的时候——毕竟,现在 iPhone 的产品线不再那么单一了。

所以,一口气运行三四个模拟器这种事情恐怕也就只有你能干得出来了。

其实,Xcode 并不是没有给我们提供更方便的选择——在storyboard编辑页面,完全可以直接预览 UI 而不需要编译后在模拟器里运行。

现在,我们来创建一个示例项目,这个项目我只添加了一点点基本的元素作为演示,这并不是一个完整的项目。

示例项目
示例项目

这个时候如果我想看看这个界面在手机上的真实模样,那么一般来讲使用 cmd+r 编译运行,那么 Xcode 就会自动调用模拟器来显示——如果我想看在其他型号的 iPhone 上的预览,那么我就需要重新选择环境,然后再编译一次,相当的麻烦。

选择 UI 预览
选择 UI 预览

如上图显示,我们点击工作区左上角的那个方块,然后在出现的菜单当中选择最末尾的“Preview”,然后按住 option + shift 按钮再点击它。

用鼠标双击那个加号
用鼠标双击那个加号

在弹出的这个窗口当中,我们用鼠标双击那块青色区域右边的加号,这时候你就发现 Xcode 中的辅助窗口(默认是隐藏的)从代码变成了预览区域,这里边默认是 iPhone4s 的大小,你已经能够看到你的 UI 的预览了。

隐藏掉其他侧栏,让可视空间更大一点
隐藏掉其他侧栏,让可视空间更大一点

怎么样,这样的预览,可是即时的哦~再也不用来回编译代码啦!

要添加其他尺寸的屏幕预览,只需要点击预览窗口左下角的“+”号即可!

屏幕快照 2015-05-21 下午5.47.43

发表评论

电子邮件地址不会被公开。 必填项已用*标注