Xcode Playgrounds的快速，交互式原型制作

您将要创造的

介绍

自从与Swift一起在Xcode 6中引入到Xcode 7.3.1的当前迭代以来，游乐场已经走了很长一段路。 凭借新功能和更好的稳定性，它们正在发展成为一种可行的工具，可用于快速制作原型或快速破解概念验证。

作为开发人员，有时您会以应用程序有趣的想法的形式来获得灵感，并且希望快速编写出代表您想法的本质的原型。 或者，您只想验证您对某些UIKit代码的行为的理解。 如果您像我一样，宁愿避免创建Xcode项目的麻烦和精神开销，也不必处理各种因素，例如设备类型和分辨率以及构建设置。 这些决定可以推迟到您确定核心想法值得追求之后再进行。

在本教程中，我们将在操场范围内创建一个基于纸牌的记忆游戏。 这是一个常见的知名游戏，因此在这里没有独创性。 游戏由八对相同的卡（总共16张卡）组成，这些卡面朝下放在4x4网格中。

玩家需要翻转两张脸部短暂露出的卡，然后Swift将其翻转过来。 游戏的目的是让玩家尝试记住牌的位置并发现相同的对，然后将其从游戏中删除。 清除网格后，游戏结束。

该游戏基于触摸，并包含简单的视图动画。 您将学习如何对应用程序进行修改并实时查看更改结果。

1.入门

启动Xcode，然后从Xcode的“ 文件”菜单中选择“ 新建”>“游乐场...” 。 给游乐场命名，例如MemoryGameXCPTut ，将Platform设置为iOS ，然后保存游乐场。 我正在本教程中使用Xcode 7.3.1。

在操场上找路

让我们花一些时间熟悉一下Playground界面。 如果您已经熟悉操场，请随意浏览本节。

一个游乐场可以具有多个页面，每个页面都与其自己的实时视图和其自己的源/资源文件夹相关联。 在本教程中，我们不会使用多个页面。 游乐场支持标记格式，该格式允许您将富文本格式添加到游乐场并在游乐场页面之间链接。

创建游乐场后，您首先看到的是游乐场源代码编辑器。 这是您编写代码的地方，对实时视图有直接影响。 切换项目浏览器外观的一种方法是使用快捷键Command-0 。 在项目浏览器中 ，您可以看到两个文件夹Source和Resources 。

资料来源

在Sources文件夹中，您可以在一个或多个Swift文件中添加辅助代码，例如自定义类，视图控制器和视图。 即使定义原型逻辑的大部分代码都在那儿，它还是辅助的，因为当您实时查看应用程序时，它隐藏在后台。

将辅助代码放在Sources文件夹中的优点是，每次您修改和保存文件时都会自动编译该辅助代码。 这样，您可以在操场上进行的更改在实时视图中获得更快的反馈。 回到操场，您可以访问公共代码和在辅助代码中公开的方法，这些方法会影响应用程序的行为。

资源资源

您可以在“ 资源”文件夹中添加外部资源，例如图像。

在本教程中，您经常需要在我们在Sources文件夹中创建的Swift文件和Playground文件（技术上也是Swift文件，除非您不会通过其文件名来引用）之间跳转。 我们还使用了本教程中的助手编辑器 ，该助手显示时间轴 ，以与操场代码并排查看实时输出。 您在操场上所做的任何更改都会即时（在几秒钟之内）反映在实时输出中。 您还可以与实时视图及其用户界面元素进行触摸交互。 为了确保您可以执行所有操作，请快速浏览下图。

对应于我在图中添加的绿色数字：

1. 此按钮隐藏“ 助理编辑器”，以便仅主编辑器可见。
2. 此按钮显示助手编辑器 。 助手编辑器在主编辑器的右侧可见。 该编辑器可以通过向我们显示相关文件（例如主编辑器中文件的对应文件）来提供帮助。
   
3. 从左到右，这两个按钮分别用于切换项目浏览器和调试控制台的外观。 在控制台中，我们可以检查打印语句的输出等。
4. 主编辑器顶部的跳转栏还可用于导航到特定文件。 单击项目名称两次将带您回到操场。 或者，您也可以使用项目浏览器 。

有时，在查看游乐场时，您需要确保助手编辑器正在显示时间轴而不是其他文件。 下图显示了如何执行此操作。 在助手编辑器中 ，选择游乐场的时间轴 ，而不是手动 ，以使您可以在助手编辑器中显示任何文件。

当您从Sources文件夹编辑源文件时， 助手编辑器会显示其源代码，即代码的接口，即声明和函数原型，而没有其实现。 当我在Sources文件夹中的文件上工作时，我更喜欢隐藏助手编辑器 ，而只在操场上公开助手编辑器以查看实时视图。

要访问游乐场的特殊功能，您需要导入XCPlayground模块。

import XCPlayground

您将XCPlaygroundPage对象的currentPage的liveView属性设置为符合XCPlaygroundLiveViewable协议的对象。 这可以是自定义类，也可以是UIView或UIViewController实例。

将文件添加到Sources / Resources文件夹

我添加了一些可以在本教程中使用的图像。 下载图像 ，解压缩档案，然后将“图像”文件夹中的图像添加到“ 项目浏览器 ”中游乐场的“ 资源”文件夹中。

确保仅拖动图像，以使每个图像文件都位于Resources文件夹中，而不位于Resources / Images中 。

在操场上删除代码。 右键单击Sources文件夹，然后从菜单中选择New File 。 将该文件的名称设置为Game.swift。