从零开始:做你的第一个iOS App

基于CocoaChina的从零开始:你的第一个iOS App教程,适配Xcode 9和Swift 4

简单展示了button和text field两个基本控件的使用,并做出一个简单猜数字游戏

第一步 创建工程

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

选择 ① iOS下的 Application,然后选择 ② Single View Application,最后点击 Next。

 

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

  • Product Name 这里填入你的 App 的名字,建议使用英文字母,最好不要有空格和特殊字符。
  • Team 我这里在Xcode里登陆了我的Apple ID,所以直接有显示,否则可以填自己的名字
  • Organization Name 这里填入你的组织/公司的名字,比如 Google 公司就直接填 Google,当然你也可以随便填一个。
  • Organization Identifier 这里是你的组织/公司的唯一标识,这部分和 Product Name 会混合成你的产品的唯一标识,这个标识在整个 iOS 的 App Store是唯一的,所以一般建议用你的域名的反向形式,比如 Google 公司的主域名是 google.com, 那么在这里就反过来填 com.google,如果你没有域名也可以编一个,比如我这里填的就是自己的名字,这一般也能保证不重复。
  • Language 默认是Swift,另有Objective-C可选,这里我们采用Swift。
  • Use Core Data, Include Unit Tests, Include UI Tests等选项我们暂时用不到,全都不选中。

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

选择你的保存路径后,一个工程就建立成功了。

默认会选中项目根文件,呈现项目的全局配置,这里可以根据需要略微修改一些参数

 

  1. 目标iOS版本
  2. 目标设备
  3. 是否要求全屏

之后可以点选左上角文件树的Main.storyboard进入默认的App主界面,正式开始App的编写

第二步 创建一个交互按钮

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

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

按图中顺序分别点击 ①(选中刚刚创建的按钮), ②(切换到属性选项卡),在 ③(标签属性) 的输入框中把内容修改为 Greetings (或者任何你喜欢的文字),敲回车确定。这时候 Button 的内容就变成了你输入的部分。属性选项卡展示选中的 UI 组件的各种属性,大家有兴趣可以修改下 Text Color 看看效果。

下一步我们要把 storyboard 中的设计界面与实际的代码关联起来了

首先我们看一下红框的位置,最顶层的 View Controller Scene,这个表示的是一个 iOS 页面的所有组成部分,里边一般都有一个顶层元素 View Controller,这个 View Controller 可以理解为它所包含的那个定层 View 的控制部分,而这个 View Controller 正好和我们的 ViewController.swift 中的 ViewController 类是相关联的。

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

我们为点击页面中的 Button 添加一个响应事件,右键点击/双指轻按 ① 所示的 Button 所在的位置,再弹出来的菜单里鼠标左键按下选中 Touch Up Inside 后边的小圆圈,然后拖动到 ③ 的位置(注意这个位置要在最后一个大括号前边,也就是类的作用域里),松开鼠标。 解释一下,这个右键弹出的菜单,里边 Touch 开头的就是指这个 UI 组件被用户进行对应操作将会响应的事件,这个事件可以和我们的代码关联起来。

拖到代码区域之后会弹出如图所示的对话框,在 ① 的位置输入你喜欢的名字,这个将会作为事件响应的函数名,在这里我们用 showAlert,之后点击 ② Connect,就会在 ViewController 类里生成一个叫 showAlert 的类方法。

点击①处回到标准编辑器界面,选择 ViewController.swift,在 showAlert 中添加如下代码。

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

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

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

添加完代码后,我们可以在 ③ 处选择程序调试用的设备(如果有设备连接在电脑上的话)或者模拟器,然后点击 ④ 运行。

如果一切正确的话,App会被自动安装并启动如左图,点击 Greeting 会变为右图。至此,我们就完成了一个最简单的 Hello World 的 App。

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

第三步 创建输入文本框和第二个交互按钮

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

和之前生成 Button 的点击事件一样的步骤,为 开始新的一局 这个 Button 添加点击事件的响应函数,选择 ① 进入编辑器的辅助模式,右键点击 ②,拖动 ③ 到 ④ 的位置。

在弹出的对话框中输入 startNewGame,这样会 ViewController 类中生成一个叫 startNewGame 的方法

这一次我们为 Text Fileld 在 ViewController 生成一个对应的成员变量。这次的做法和之前的添加 Button 的响应事件有点不同,选中 Text Field,然后按住 Ctrl 键不放,同时鼠标左键按住拖动到UIViewController类中,和之前一样,要拖动到类的作用域里,不要不小心拖到方法的作用域中去。

在弹出的输入框中填入成员变量的名字,这里我们给它取名guessNumTextField, 然后大家就可以回到标准编辑器的界面了。后边都是敲代码的部分了 。

接下来我们再刚才生成的 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,同时生成一个新的待猜数字。

 

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

  1. 从输入框中取出用户输入的内容,返回结果为 String 类型
  2. Swift 里一种独特的用法,在 if 中直接声明变量,Int(resultText) 复杂将 String 类型转换为 Int,如果转换失败的话,result 就会为空,此时 if 分支就会失败,转入 else 分支
  3. 我们先看一下 else 分支,如果用户输入非数字类型,或者根本没有输入内容,我们就弹出对话框,提示出错
  4. 将猜测次数加一
  5. 根据猜测结果生成对话框中要显示的内容,分别提示用户猜小了,猜大了,或者是猜中了。注意特殊语法 (result) ,Swift 在字符串中可以插入任何变量或者表达式,只要把他们放在 (),程序就会对他们自动求值,然后转换成对应的字符串进行替换。
  6. 将刚才生成的内容在对话框中显示出来

好了,我们的小游戏主体到此就开发完毕了,大家可以玩几局看看。看你一般几次可以猜中。

第四步 杂项

1.报错”Safe Area Layout Guild before iOS 9.0″

将模拟器对象设置为>=iOS 9.0,或者将红圈中选项取消勾选

2.报警”All interface orientations must be supported unless the app requires fullscreen”

在项目根文件的全局设置中设置要求全屏或支持所有方向

 

发表评论

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