从零开始：你的第一个iOS App

这次分享，我会给出写一个简单的 App 的每一个步骤，每一步都会有一张截图以及对应的文字说明，希望大家能在电脑上跟着每一步进行操作，最后都能完成这个 App。每个步骤我会给一个序号，如果你有哪一步不明白的，大家可以根据每个序号来进行提问。

第一步  打开 Xcode ，点击红色框的部分，创建一个新工程。你也可以点击菜单里里的 File -> New -> Project，效果是一样的。

第二步  选择 1 iOS下的 Application，然后选择 2 Single View Application，然后点击 Next。

第三步 这里我们讲一下每个部分都是什么意思。

Product Name 这里填入你的 App 的名字，建议使用英文字母，最好不要有空格和特殊字符。

Organization Name 这里填入你的组织/公司的名字，比如 Google 公司就直接填 Google，当然你也可以随便填一个。

Organization Identifier  这里是你的组织/公司的唯一标识，这部分和 Product Name 会混合成你的产品的唯一标识，这个标识在整个 iOS 的 App Store是唯一的，所以一般建议用你的域名的反向形式，比如 Google 公司的主域名是 google.com, 那么在这里就反过来填 com.google，如果你没有域名也可以编一个，比如我这里填的就是自己的名字，这一般也能保证不重复。

Language  注意，我们这里选了 Swift，默认是 Objective-C。

Device 我们选择只针对 iPhone 的，另外还有选项是 iPad 和 Universal（iPhone 和 iPad 都兼容）。

Use Core Data, Include Unit Tests, Include UI Tests 我们暂时用不到，全都不选中。

填完之后，点击 Next，我们进入下一步

第四步 选择你的保存路径后，一个工程就建立成功了。默认会选中 Main.storyboard 这个文件，storyboard 主要是用于写 iOS 的 UI 布局的，红色框起的部分是 Xcode 的编辑器部分，我们可以在左边的文件列表里选择文件，如果选中 swift 后缀的文件，会进入大家都很熟悉的代码编辑界面。由于我们现在选中的是 storyboard，所以进入了一个可视化的编辑界面。这是个所见即所得的编辑器，最后在手机屏幕上的 UI 基本就是这个编辑器里的样子。

大家的这个界面可能比截图里的大，这里分别点击 1 2，然后在 3 所在的下拉框里选择 iPhone 4.7-inch，这个部分主要是改变设计期间的外观的，不影响实际运行的结果，最终的大小取决于你所运行的设备屏幕大小。

第五步 这次我们添加一个 button 到屏幕中去，首先选中 1 这里是所有 UI 组件的列表，然后再 2 的位置输入 button，在列表中找到 3 Button 这个条目，然后用鼠标左键点中把这个条目拖到屏幕中去。注意屏幕中的 Button 边缘，这八个点可以拖动来缩放 Button，基本上所有的 UI 组件都可以这样操作。

添加完后，我们注意一下 4 的位置，这里多了一个 Button 条目，这个 Button 就是我们刚才拖进去的那个 Button，可以看到它是作为 View 的一个子项，这里简单讲下，View 是 iOS 里最基本的 UI 组件，所有像 Button，Label 这些最终都是继承自 View，而每一张页面，一般都有一个最顶层的屏幕大小的 View，我们添加的所有 UI 组件最终都会作为它的子项。

第六步  按图中顺序分别点击 1 2，在 3 的输入框中把内容修改为 Greeting （或者任何你喜欢的文字），敲回车确定。这时候 Button 的内容就变成了你输入的部分。红色框的部分就是用于修改选中的 UI 组件的各种属性的，大家有兴趣可以修改下 Text Color 看看效果。

第七步 这一步我们要把 storyboard 中的设计界面与实际的代码关联起来了，首先我们看一下红框的位置，最顶层的 View Controller Scene，这个表示的是一个 iOS 页面的所有组成部分，里边一般都有一个顶层元素 View Controller，这个 View Controller 可以理解为它所包含的那个定层 View 的控制部分，而这个 View Controller 正好和我们的 ViewController.swift 中的 ViewController 类是相关联的。

接下来我们进入编辑器的辅助模式，点击图中 1 的图标，然后选中红框中的 View Controller，这时候右侧应该会打开 ViewController.swift，如果没有打开，选中 2，在 Automatic 下找到 ViewController.swift。

第八步  我们为点击页面中的 Button 添加一个响应事件，右键点击 1 所示的 Button 所在的位置，再弹出来的菜单里鼠标左键按下选中 Touch Up Inside 后边的小圆圈，然后拖动到 3 的位置（注意这个位置要在最后一个大括号前边，也就是类的作用域里），松开鼠标。

解释一下，这个右键弹出的菜单，里边 Touch 开头的就是指这个 UI 组件被用户进行对应操作将会响应的事件，这个事件可以和我们的代码关联起来。

第九步 继续前边，松开鼠标会弹出如图所示的对话框，在 1 的位置输入你喜欢的名字，这个将会作为事件响应的函数名，在这里我们用 showAlert，之后点击 2 Connect，就会在 ViewController 类里生成一个叫 showAlert 的类方法。

第十步 回到标准编辑器界面（点击 1），选择 ViewController.swift（点击 2），在 showAlert 中添加如下代码。

let alert = UIAlertController(title: "Greeting", message: "Hello World", preferredStyle: .Alert)

let action = UIAlertAction(title: "Ok", style: .Default, handler: nil)

alert.addAction(action)

presentViewController(alert, animated: true, completion: nil)

第一行，我们创建了一个 UIAlertController 的对象，UIAlertController 就是一个类似对话框的东西

第二行，第三行，创建了一个 UIAlertAction 的对象，并把这个对添加到了刚才创建的 UIAlertController，UIAlertAction 表示了对话框上一个个按钮

最后，我们调用 presentViewController 把这个对话框显示出来。

添加完代码后，我们把 3 的地方换成 iPhone 6s 模拟器，然后点击 4 运行。

第十一步 如果一切正确的话，Xcode 会启动一个 iPhone 的模拟器，然后显示如左图，点击 Greeting 会变为右图。至此，我们就完成了一个最简单的 Hello World 的 App。

接下来，我们把这个 Hello World App 改造成一个简单的猜数字的游戏，每局游戏开始会随机生成一个 0-99 的数字，然后你输入一个你猜测的数字，系统会提示你猜大了还是猜小了，最后猜中，会显示出你一共猜了多少次才猜中的。

第十二步 我们选中 Main.storyboard，在页面中添加一个新的 Button，并把它的内容改为 开始新的一局 ，然后在 1 的位置输入 Text，在 2 的位置找到 Text Field，然后把它拖到 3 的位置。Text Field 是一个负责接收用户输入的 UI 组件。同时我们把 Greeting 的内容修改为 提交 ，让这个 Button 用来提交我们的答案。

第十三步 和之前生成 Button 的点击事件一样的步骤，为 开始新的一局 这个 Button 添加点击事件的响应函数，选择 1 进入编辑器的辅助模式，右键点击 2，拖动 3 到 4 的位置。

第十四步 和之前类似，在弹出的对话框中输入 startNewGame，这样会 ViewController 类中生成一个叫 startNewGame 的方法。

第十五步  这一次我们为 Text Fileld 在 ViewController 生成一个对应的成员变量。这次的做法和之前的添加 Button 的响应事件有点不同，选中 1 的 Text Field，然后按住 Ctrl 键不放，同时鼠标左键按住拖动到 2 的位置，松开鼠标和键盘，注意，和之前一样，要拖动到类的作用域里，不要不小心拖到方法的作用域中去。

第十六步 在弹出的对话框中 1 的输入框中填入成员变量的名字，这里我们给它取名 guessNumTextField。

然后大家就可以回到标准编辑器的界面了。后边都是敲代码的部分了 。

var number = Int(arc4random_uniform(100))

var times = 0

第十七步 接下来我们再刚才生成的 guessNumTextField 下边再添加两个成员变量 number（这个变量的目的是保存每一局生成的数字），times（这个变量保存已经猜过的次数）。

简单解释一下 var times = 0，由于我们给 times 赋值 0，Swift 的自动类型推导功能会自动推导出 times 的类型为 Int，所以我们不需要给 times 标注类型了。

然后在这里我们声明变量用了 var，而不是之前的 let，两者的区别在于可变性，使用 var 声明的变量，以后还可以再给它赋值，而使用 let 声明的变量只能赋值一次。

最后我们给 number 赋值里的 arc4random_uniform(100) 是用于生成一个随机数，参数 100 的意思是在 0-99 中生成一个。

第十八步  我们在 starNewGame 方法中把 times 初始化为 0，同时生成一个新的待猜数字。

times = 0

number = Int(arc4random_uniform(100))

et resultText = guessNumTextField.text!           if let result = Int(resultText) {                   times += 1                   var message = ""                   if result > number {               message = "你输入的数字(result)太大了"           } else if result < number {               message = "你输入的数字(result)太小了"           } else {               message = "猜中了，结果就是(result),你一共猜了(times)次"           }                   let alert = UIAlertController(title: nil, message: message, preferredStyle: .Alert)           let action = UIAlertAction(title: "确定", style: .Default, handler: nil)           alert.addAction(action)           presentViewController(alert, animated: true, completion: nil)               } else {           let alert = UIAlertController(title: nil, message: "请输入0-99中的任意一个数字", preferredStyle: .Alert)           let action = UIAlertAction(title: "确定", style: .Default, handler: nil)           alert.addAction(action)           presentViewController(alert, animated: true, completion: nil)       }

第十九步  这是我们最长的一段代码，这里包含了猜数字游戏的所有逻辑代码。接下来我们分别解释一下

1 的部分是从输入框中取出用户输入的内容，返回结果为 String 类型

2 是 Swift 里一种独特的用法，在 if 中直接声明变量，Int(resultText) 复杂将 String 类型转换为 Int，如果转换失败的话，result 就会为空，此时 if 分支就会失败，转入 else 分支

3 我们先看一下 else 分支，如果用户输入非数字类型，或者根本没有输入内容，我们就弹出对话框，提示出错

4 将猜测次数加一

5 根据猜测结果生成对话框中要显示的内容，分别提示用户猜小了，猜大了，或者是猜中了。注意特殊语法 (result) ,Swift 在字符串中可以插入任何变量或者表达式，只要把他们放在 ()，程序就会对他们自动求值，然后转换成对应的字符串进行替换。

6 将刚才生成的内容在对话框中显示出来

第二十步 好了，我们的小游戏到此就开发完毕了，点击运行，应该会得到这个结果。

大家可以玩几局看看。看你一般几次可以猜中。

本文由董一凡在StuQ首发，更多进阶iOS学习可以 点击这里 了解iOS开发专项学习课程。