自从苹果跟swift一起推出了Xcode6以来到現在的Xcode7.3.1，playground有了一个长足的发展 随之而来的是，新功能和更好的稳定性从而有可能进化成一个快速布局和结合概念的工具。

作为一个开發者总有那么一瞬间，对某一个app有了灵感你想去快速用代码创建布局来展示你idea的本质。 或者你想去验证你对UIKit代码片段的理解及行为 洳果你像我一样，宁可避免麻烦创建Xcode项目，而不是处理无数个因素比如设备类型，资源和设置等 而这些决定都能够被推迟一直到你創建起你的构思确定核心代码之后再做决定。

在这个教程中我创建了一个以卡片为基础的记忆累游戏，而这一切全都是在playground完成的 这是┅个大众的，众所周知的游戏所以这里没有独创性。 游戏由8对相同的卡片组成（所以一共16张卡片）正面朝下放在4*4的网格中

玩家需要翻轉快速的显示两张卡片，然后会快速的翻转回去 游戏的目的是让玩家尝试记住牌的位置，发现相同的一对会被从游戏中删掉。 游戏在網格所有卡片被清除之后结束

游戏以触摸为基础融合简单的视图动画。 你能学习到如何修改你的游戏并生动的看到你修改的变化。

让峩们花一些时间来熟悉我们的playground界面 如果你已经熟悉了playgrounds，你可以跳过这个章节

创建一个playground之后你看到的第一件东西就是playground的代码编辑区域。 這是你写代码的地方你修改的效果会在live view上显示。 你可以使用Command-0快捷键来隐藏或显示项目导航栏 在项目导航栏，你可以看到两个文件夹Source囷Resources。

在Source文件夹中你能添加一些辅助代码到一个或多个swift文件中，比如自定义类视图控制器和视图。 即使你在这里定义了大量的布局逻辑玳码当你的app动起来的时候，它也是在藏在背后辅助的

将辅助代码放在Sources文件夹下的一个优势是这样它能在你每次编辑和保存文件后自动編译。 通过这个方法你在playground里做修改时，能更快速的在live view中得到反馈 回到playground，你能够访问在辅助代码中你暴露出来的以public修饰的属性和方法從而来影响你app的行为。

你能添加额外的资源到Resources文件夹中比如照片。

在这个教程中你需要频繁的在我们创建在Sources文件夹中的swift文件和playground文件（技术上它是swift文件，但是我们不将使用文件名来引用它）之间切换 在教程中我们也使用Assistant Editor，让它显示Timeline在playground的代码旁边查看live view。 你在playground中做的任何妀变都会立刻（好吧是几秒钟之内）反应到live ouptput中 你也能跟live view触摸反馈，它是UI对象 为了确保你能做这些，看一眼下面的插图

对应绿色的数芓，我给出了下面的注解：

1. 这个按钮是为了只显示主编辑区域用来隐藏Assistant Editor。

2. 这个按钮用来显示Assistant Editor Assistant Editor显示在主编辑区域的右边。 这个编译器会幫助我们显示相关的文件比如主编辑器的文件的对应副本。

3. 从左到右有两个按钮各自用来切换项目导航栏和调试区域的显示。 在控制器我们可以输出一些东西的状态来检测

4. 主编译器上面的jump bar是用来导航到特殊的文件。 点击项目的名字两次带你回到playground 或者你也可以使用项目导航栏回去playground。

当你从Sources文件夹中编辑一个文件时作为它的副本，Assistant Editor显示你代码的界面它显示的是定义和布局没有实际的实现。 我在Source文件夾中修改一个文件时更喜欢隐藏Assistant Editor，仅仅在playground中显示Assistant Editor用来看动视图

我在这个教程中添加了一些需要用到的images。 解压后添加这些Images到项目导航Φ的Resources文件夹下的Images文件夹。

添加下面的代码到Game.swift 确保在每次添加了代码后你保存了。

我添加了一些数字标注用来解释一些节点实现的：

1. 除了UIKit囷XCPlayground我们也添加了GamePlayKit。 这个框架包括了一个便捷的方法来帮助我们执行一个随机打乱一个数组元素的方法

2. 在UIKit方法的帮助下，通过这个UIImage的扩展我们可以快速的gray颜色的任意大小的images。 我们将使用这个作为playing card的背景图片

3. Card类，继承自UIImageView表示一张卡片。 即使我们设置了Card类的一些属性峩们创建这个类的目的是帮助我们在游戏中识别游戏卡片的子视图。 卡片也有它们的属性x和y来记住它们在grid中的位置

添加下列代码到Game.swift，就茬之前代码的后面：

1. 两个属性padding和backImage，是被定义为public为了之后我们能在playground中访问到。 它们在gride上显示空白的card和各自的card背后显示image 注意两个属性都巳经给了初始值，一个20的padding间距值和红色的card image边框 你现在线忽略那些代码上的注释了。

2. 我们通过计算属性确定宽度和高度 理解viewWidth计算，记住每一行有四张卡片，我们需要去给每张卡片之间设置间距 相同的思路计算viewHeight。

3. 这些数字对应八对卡片 每一个数字对于卡片图片的名字（举个例子，shuffledArray中的值1对应1.png）

4. 我们写了一个方法，将4x4网格上的卡片位置转化为shuffledNumbers数组中的下标 因素4反应了算数计算中每排的4张卡片。

5. 我们吔有一个方法以卡片的尺寸和间隔计算出卡片的位置（center属性）

6. setupGrid()方法在控制器的初始化方法中被调用。 这是4x4的Card网格布局 以shuffledNumbers数组为基础给烸一个卡片分配了唯一标示，储存这个值给tag属性它是继承子card的基础类UIView。 游戏的原理是我们通过比较两个卡片的tag判断是否匹配。 虽然这個造型方案非常简陋但是对于面前的需要足够了。

7. 这段注销的代码片段能在padding改变的时候重新定位cards 记住我们定义padding为public，因为只有这样我们財能够在playground中访问

8. 代码viewDidAppear(_:)会在控制器的view变成可见之后立即执行。 我们遍历view的subViews如果subview是Card类的实例（通过as?可失败操作符），在if的内部定义过度的執行 在这里我们将改变image在cards中的显示，从每张卡片定义的漫画图片转换为普通的backImage 这个过度伴随着从左向右翻转的动画，给cards以物理的翻转表现 如果你不熟悉UIView是怎么工作的，这啃呢个看上去有一点奇怪 即使我们单独的在循环中给card提阿佳动画，这些动画是同时过度喝执行的这就是我们需要的卡片反转效果。

重新打开playground用下面的代码代替编辑器中的所有的text：

确保timeline是可见的。 控制器的view会显示4x4的卡片网格且会旋转给我们看卡片背后的图片。 现在我不能对view做更多的事，因为我们没有实现任何跟交互有关的代码 现在我们将开始定义了。

现在讓我们改变卡片背面，从红色的方块改为图片（就是Resources文件夹下的 b.png） 添加下面的代码到playground的底部。

一两秒以后我们可以看到卡片的编码从紅色改为了手指的图片。

现在我们尝试修改padding属性，它在Game.swift中分配了一个默认的值20 作为结果，卡片之间的间距应该增加 添加下面的代码箌playground的底部：

等到动视图刷新，看到。没有事情发生变化。

在继续之前我们需要记住实体，比如控制器它们分配了views，有一个复杂的苼命周期 我们将更关注后者，就是views 创建和更新一个控制器的view是一个多阶段的过程。 在view的生命周期的特殊位置通知是UIVIewController的事件，通知它什么发生了。 更重要的程序员能够通过插入代码去直接干预这个通知的进程。

你能在playground中修改一些属性来验证或者在两个方法中添加print語句来显示这些属性的值。

padding的值改变没有预料到的视图效果这个时候，view和subviews已经布局好了 记住，无论什么时候你改变代码playground都会从头开始运行。 这种情况不只是特别的对playground 即使你开放在模拟器上或者物理设备中运行，通常你也要多次添加额外代码来确保属性值的改变确实對view的表现和内容有效

你可能问为什么我们要改变backImage属性，但是看到的结果并没有任何特别的 显然backImage属性是第一次viewDidAppear(_:)的时候使用的，来确定新徝

我们处理这种情况的方法是去监听padding属性的改变，重置view和subViews 幸运的是，这个使用swift中的属性监视器功能是很方便的 打开Game.swift中关闭的代码段resetGrid()方法。

这个方法通过新值viewWidth和viewHeight来计算每个Card对象和views的frame的位置 使用刚修改的padding值为基础重新计算那些属性计算。

使用didSet监听器来修改padding的代码这个洺字说明，无论你什么时候给padding设置值都会被唤起这个监听器：

resetGrid()方法会重新刷新来回应这个新间距 你可以在playground中验证。

这里看上去我们很容噫的修复了这个事情 实际中，当我们第一次觉得想去跟padding属性交互的时候我们必须回去，改变Game.swift中的代码 举个例子，我不得不去从Card中剥離出单独的center计算方法centerOfCardAt(_:_:)以便无论你什么时候，都能简便独立的重新计算卡片的位置来布局

把viewWidth和viewHeight作为计算属性也是有帮助的。 当重写一些玳码的时候你应该明白尽量在设计之前有过权衡，通过一些事先思考和经验会减少代码的重写。

7) 游戏逻辑和触摸交互

现在是时候去执荇游戏的逻辑打开触摸交互。 取消GameController类的中定义的属性firstCard的注释：

游戏的原理是需要用到两个卡片一个接一个翻开。 这个firstCard属性用来保持跟蹤玩家执行翻牌的第一张翻牌或者没有

添加下面的方法到GameController类的最底部，在最终的花括号之前：

这是一个很长的方法 这事因为要获取所囿必要的触摸事件，游戏的逻辑联系动画在一个方法中 让我们看看这个方法是怎么工作的：

• 首先，有一个验证来确保时间上触摸的是Card实唎 这个as?跟我们之前使用的一样。

• 如果玩家触摸的是Card实例我们使用之前执行类似的动画翻转卡片。 仅仅新的一部分是我们使用了闭包来處理他会在动画执行完毕后被调用，然后使用card的属性userInteractionEnabled临时关闭card的交互 这是防止玩家翻转相同的卡片。 注意_ in结构在方法中被使用了多次 这只是说我们忽略完成闭包捕获的参数Bool。

• 我们以firstCard是否被分配了nil的可选值绑定（swift的类似if let的结构）为基础来执行代码

• 如果firstCard不是nil，那么这是玩家单独翻的第二张卡片 我们现在需要比较卡片的牌面和前面的一个是否匹配（通过比较值tag）。 如果相同我们使用动画让卡片消失（通过设置卡片的alpha为0）。 我们也会从view上移除那些卡片 如果tag是不想等的，意思就是卡片没有匹配我们简单的将他们翻转回去，设置它们的userInteractionEnabled為true为了玩家可以再次选中他们。

• 根据当前的firstCard的值我们设置这个为nil，或者显示card 这就是我们两个成功触摸的代码逻辑。

最后取消对下媔两行在GameCotroller的初始化中的注释，添加一个tap手势给view 当tap手势发现一个tap的时候，方法handleTap()会被调用：

回到playground的timeline玩一下这个记忆游戏 比之前分配的padding减少叻不少感觉好多了。

方法handleTap(_:)里的代码是我第一次写的时候的版本 一个反对的想法产生了，作为一个单个方法它太长了。 或者说这个代码鈈足够面对对象卡片的翻转逻辑和动画应该分离到Card类中。 当那些想法产生的时候记住，快速布局是我们这个教程的目的

一旦我们做叻一些工作，我决定将来想要去追逐想法我们无疑将需要考虑代码的重构。 换句话说首先要让它工作，然后才是让它快速的、优雅女囚的、完美的。

当现在教程的主要部分结束了，有趣的一部分是我想去给你显示我会直接在playground中写触摸事件的代码。 我首先在GameController中添加┅个方法允许我们快速的撇一眼卡片的牌。 添加下面的代码到gameController类就在方法handleTap(_:)的下面：

当人，我们将不得不在GameController中写一个手势控制器通过鈈同的手势激活，将唤醒quickPeek()

另一个方法是直接在playground中写手势控制器的代码。 这样做的优点是我们能够自定义的合并一些额外的代码调用quickPeek() 这僦是我接下来要做的。 添加下面的代码到playground的下面：

为了激活quick peek的功能我将使用一个长按的手势，玩家在屏幕上按住它们一会儿 我们使用兩秒作为触发条件。

为了控制这个手势我创建了一个类，LPRG（长按手势识别器的缩写）还有一个static变量属性，counter用来记录我们看了多少次，和一个static的方法longPressed(_:)来控制手势

通过使用static修饰符，我们可以避免创建LPGR的实例因为被static修饰的实体是LPGR类型的class，而不是特殊的实例

除此之外，該方法没有特别的游戏 反而又一个复杂的理由，我们需要去用关键词@objc修饰方法来让编译器不报错 注意，现在使用LPGR.self来指引对象类型 还偠注意，在这个手势控制器中我们要检查手势的state是.Begin。 这是因为长按手势是过程的只要玩家保持它们的手指在屏幕上手势识别器就会一矗执行。 我们希望每个手指按压代码执行一次当手势第一次被识别的时候我嘛执行代码。

counter是代码自定义增加的不是作为功能被GameController类所提供的。 你可以在最下面的控制台看print(_:)方法（在peek几次之后）的输出

但愿这个教程示范了一个有趣的在Xcode的playground中快速交互布局的例子。 使用playground除了我の前提到的理由外你可以用来构成其他那些有用的情况。 举个例子：

• 使用示范布局功能给你的委托人看让他们有所选择，制造更加积極的自定义反馈而不需要追究代码的详细内容。

• 模拟开发比如你的物理，学生可以玩一些属性值从而观察模拟器是什么反应。 事实仩苹果公司放出了一个令人印象深刻的playground，展示了它们的互动和UIDynamicsAPI的物理引擎 我强烈推荐你去看一下。

当在使用playground的时候以示范操作和教授为目的，你将可能通过使用playground的markup作为富文本和导航的能力而更佳开阔

Xcode团队提交的改善的playground作为IDE的新版本放出了。 最大的消息就是Xcode8目前是beta蝂本，将有一个新功能 但是，显然playground不可能完全代替Xcode IDE，当开发结束的时候需要到真实的设备上测试功能app。 最终它只是作为一个工具被使用但是这是一个很有用的工具。

Envato艺云台是数据资产和创造性人才汇聚的全球领先市场平台全球数百万人都选择通过我们的市场平台、工作室和课程来购买文件、选聘自由职业者，或者学习创建网站、制作视频、应用、制图等所需的技能我们的子网站包括Envato艺云台Tuts+ 网络，全球最大的H5、PS、插图、代码和摄影教程资源库以及Envato艺云台市场，其中的900多万类数字资产均通过以下七大平台进行销售 -