一个简单的 iOS 应用

1. A Simple iOS Application
范圣刚，princetoad@gmail.com，www.tfan.org

2. 第⼀一个 iOS 应⽤用：Quiz

3. views UIButton UIView
UIAlertVie UIScrollVi UISearchB UIWebVie
... UIControl
w ew ar w
UITextFie UIPageC UIDatePi
UIButton
... UISlider UIButton
ld ontrl cker

4. 创建⼀一个 Xcode 项⺫⽬目

5. Single View Application

6. Mouse over -> 简介

7. 导航区域
• Project
• Symbol
• Search
• Issue
• Debug
• Breakpoint
• Log

8. Project navigator
• files
• folders
• template groups

9. 构建界⾯面

10. 对象编辑器（Object editor）
• interface builder - 创建和配置视图对象
• XIB file - archive

11. XIB file & NIB file
• archived objects 的 XML 表⽰示
• 容易编辑
• NIB file
• 更⼩小
• 易于解析
• 构建过程中 - 编译过的 NIB ⽂文件被拷⻉贝进了应⽤用程序
的 bundle

12. bundle
• ⼀一个包含应⽤用程序可执⾏行⽂文件和可执⾏行⽂文件使⽤用
的所有资源的⺫⽬目录

13. NIB ⽂文件的加载
• 加载 NIB ⽂文件 - 使 archive 在其中的对象变得可⽤用
• 只有⼀一个 NIB ⽂文件 - 当应⽤用程序第⼀一次启动时就被
加载
• 复杂的应⽤用程序可以拥有很多 NIB ⽂文件 - 被⽤用到的
时候才被加载

14. 编辑器区域
• dock view: 显⽰示 XIB ⽂文
件中的对象
• dock view 可以展开成
Outline view
• canvas

15. outline view -> three objects
• File’s Owner
• First Responder
• View

16. canvas 部分
• 在 outline 中点击 View 对象 -> 在 canvas 中显⽰示
• 在视图周围的蓝⾊色阴影区域拖动 -> 移动 canvas(重
新组织 canvas)
• 点击左上⾓角的 x 符号 -> 关闭视图
• 在 canvas 区域的 view 对象 -> 和要在应⽤用程序中
呈现的⼀一致

17. utilities area
•四个额外的⽤用户界⾯面元素: 两个⽂文本
标签和两个按钮
•Xcode’s toolbar -> View:切换
navigator, debug area, 和 utilities area
•点击右边的按钮以显⽰示 utilities area
•utilities area 有两个部分: inspector 和
library
•顶部是 inspector, 包含了当前显⽰示在
编辑器区域的⽂文件的设置
•底部的区域是 library, 列出了可以添
加到⽂文件或者项⺫⽬目中的条⺫⽬目
•相对⼤大⼩小 -> 拖动它们之间的线

18. object library
• 每个 section 上⾯面有⼀一个各类 inspector 和 library
的 selector
• object library: 包含可以添加到 XIB ⽂文件的 objects
• Label object
• search bar

19. 两个 Label 和 Button，⾏行为，外观和实例变量
• UILabel
• UIButton
• 标签和按钮都是对象，对象具有指定他们⾏行为和
外观的实例变量
• 例如，当你给⼀一个按钮输⼊入⼀一个 title 时，你就设
置了按钮的 title 实例变量
• 你可以在canvas上直接编辑⼀一些实例变量，但是
⼤大多数必须在”attributes inspector”中编辑

20. attributes inspector

21. Model-View-Controller

22. MVC
• 任何⼀一个对象都是下列之⼀一：
• model 对象
• view 对象
• controller 对象

23. View 对象
• 对⽤用户可⻅见
• 按钮，标签等，⼀一般是 UIView 的⼦子类
• ⾃自定义视图类：DangerMeterView 或
IncomeGrapView

24. Model 对象
• 持有数据
• 对界⾯面⼀一⽆无所知
• ⼀一般使⽤用标准的集合类（NSArray,
NSDictionary,NSSet）
• 标准数据类型：NSString, NSDate, NSNumber
• ⾃自定义类

25. controller 对象
• 应⽤用的管理者
• 保持 view 和 model 对象同步
• 控制应⽤用流程
• 保存 model 对象到⽂文件系统
• 可重⽤用程度较低
• 名字类似：ScheduleController,
ScoreViewController

26. MVC 模式

27. Quiz 对象图解

28. 声明

29. 声明
• relationships
• responsibilities
• 5个实例变量
• 2个⽅方法
• QuizViewController.h

30. 声明变量
• questions
• 指向包含 NSString 实例的 NSMutableArray 的指针
• answers
• 另⼀一个指向包含 NSString 实例的 NSMutableArray 的指针
• currentQuestionIndex
• 持有 question 数组中当前 question 索引的 int 变量
• questionField
• 显⽰示当前问题的 UILabel 对象的指针
• answerField
• 显⽰示当前问题答案的 UILabel 对象的指针

31. code
@interface QuizViewController : UIViewController
{
int currentQuestionIndex;
// model 对象
NSMutableArray *questions;
NSMutableArray *answers;
// view 对象
IBOutlet UILabel *questionField;
IBOutlet UILabel *answerField;
}
@end

32. 声明⽅方法
@interface QuizViewController : UIViewController
{
int currentQuestionIndex;
// model 对象
NSMutableArray *questions;
NSMutableArray *answers;
// view 对象
IBOutlet UILabel *questionField;
IBOutlet UILabel *answerField;
}
- (IBAction)showQuestion:(id)sender;
- (IBAction)showAnswer:(id)sender;
@end

33. IBAction 和 IBOutlet
• 把 controller 和 XIB ⽂文件中的 view 对象连接起来

34. 建⽴立连接

35. connection
• 两个对象可以⼀一起⼯工作
• xib加载以后，controller 需要知道 Label 在内存中
的位置，以告知他们显⽰示什么
• button 需要知道 controller 在什么地⽅方，以便在按
钮按下后可以通知 controller

36. 当前的连接和需要建⽴立的连接

37. missing connections
• QuizViewController, 需要有⼀一个指向 UILabel 实例
的指针，这样 controller 就可以告诉 Label 显⽰示什
么
• UIButton 实例必须有⼀一个指向 QuizViewController
的指针，以便可以在被按下时给 Controller 发送消
息

38. 设置questionField指针

39. 设置answerField指针

40. targets和actions
• 点击 UIButton ，发送 message 到另⼀一个对象；
• 被发送 message 的对象叫做 target
• message 称做 action，并且是 button 点击时被触
发的⽅方法的名称
• button 要回答两个问题：target 是谁？action 是什
么？
• 对 Show Question ⽽而⾔言，我们希望 target 是
QuizViewController, action 是showQuestion:

41. targets和actions设置
• 按住 Control，从object（UIButton）拖到
target（File’s Owner）
• 松开⿏鼠标，target 被设置，弹出菜单让你选择
action

42. 设置targets和actions

43. connections 概述
• 设置了指针 questionField 和 answerField 分别指向
对应的 labels
• QuizViewController 是两个按钮的target
• 项⺫⽬目模版⽣生成了⼀一个附加的 connection：
QuizViewController 的 view outlet 被连接到了呈现
应⽤用背景的 View 对象

44. connections inspector

45. 实现⽅方法

46. 模板代码
• viewDidLoad
• viewDidUnload
• shouldAutorotateToInterfaceOrientation

47. initWithNibName:bundle:
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle
*)nibBundleOrNil
{
// 调⽤用⽗父类实现的init⽅方法
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// 创建两个数组，并且让指针指向他们
questions = [[NSMutableArray alloc] init];
answers = [[NSMutableArray alloc] init];
// 添加questions和answers到这些数组
[questions addObject:@"HTML5 中基于分辨率的画布元素叫什么名字?"];
[answers addObject:@"Canvas"];
[questions addObject:@"Web Sockets 使⽤用的是HTTP协议吗？"];
[answers addObject:@"不是"];
[questions addObject:@"Node.js 主要是前端脚本还是服务器端脚本？"];
[answers addObject:@"服务器端"];
}
// 返回新对象的地址
return self;
}

48. code-completion 和 placeholders
• double-check 代码完成给出的建议
• 注意使⽤用⾃自⼰己的参数换掉 placeholders

49. IBOutlet
• view 对象⼀一般在 XIB ⽂文件中创建
• model 对象总是通过可编程的⽅方式创建

50. 实现两个 action
• 修改 QuizViewController.m ⽂文件
• 把下⾯面的代码放到 initWithNibName:bundle: 之
后，@end 指⽰示符之前

51. - (IBAction)showQuestion:(id)sender
{
// 跳到下⼀一个问题
currentQuestionIndex++;
// 判断是否到了最后⼀一个问题
if (currentQuestionIndex == [questions count]) {
// 回到第⼀一个问题
currentQuestionIndex = 0;
}
// 拿到索引指定的问题数组中的字符串
NSString *question = [questions objectAtIndex:currentQuestionIndex];
// 在控制台打印字符串
NSLog(@"当前显⽰示问题：%@", question);
// 在question field显⽰示字符串
[questionField setText:question];
// 清除答案字段
[answerField setText:@"???"];
}
- (IBAction)showAnswer:(id)sender
{
// 当前问题的答案是什么？
NSString *answer = [answers objectAtIndex:currentQuestionIndex];
// 在答案字段显⽰示
[answerField setText:answer];
}

52. 构建并在模拟器中运⾏行

53. Build and Run on the Simulator
• 编译并运⾏行：
Command-R

54. issue navigator
issue navigator：Command-4
点击issue定位到源⽂文件和出问题的代
码⾏行

55. debug area
查看console

56. 应⽤用部署

57. 部署准备
• 开发者证书
• 使⽤用 Keychain Access 添加证书⽂文件到 Mac 的密钥链，⽤用来给
代码进⾏行数字签名
• provisioning profile
• 位于开发设备和电脑上的⽂文件。包括⼀一个开发者证书，⼀一个
单独的 App ID，以及可以安装这个应⽤用的设备的 device ID 的
列表。后缀是：mobileprovision
• Device ID(UDID)
• 唯⼀一标识⼀一个 iOS 设备
• App ID 和 Bundle identifier
• application identifier 是⽤用于在 App Store 唯⼀一标识你的应⽤用的
字符串，⼀一般看起来像这样：org.tfan.AwesomeApp

58. 部署流程
• Xcode 使⽤用电脑上的 provisioning profile 访问适当
的证书
• 这个证书被⽤用来给 application 的⼆二进制⽂文件签名
• 开发者设备的 UDID 被⽤用来跟 provisioning profile
中的 UDID 之⼀一进⾏行匹配，App ID 跟 bundle
identifier 进⾏行匹配
• 签名后的⼆二进制⽂文件被发送到开发设备
• 在设备上的 provisioning profile 再⽤用来跟签名过的
⼆二进制⽂文件进⾏行确认
• 最后，启动

59. Organizer窗⼝口

60. 在设备上运⾏行

61. 应⽤用图标

62. 图标
• 图标就是在iOS桌⾯面上
表⽰示应⽤用程序的简单
的图⽚片；
• 不设置图标就是纯⽩白
平铺的效果；

63. 不同的设备需要不同⼤大⼩小的图标
设备 图标⼤大⼩小
iPhone/iPod touch(⾮非Retina) 57x57像素
iPhone/iPod touch(Retina) 114x114像素
iPad 72x72像素
Retina iPad 144x144像素

64. 缩放
• 如果你只提供了⼀一个 57x57 像素的图⽚片，在需要
更⼤大 icon 的设备上，图⽚片会被按⽐比例放⼤大。
• 因此发布到 App Store 的应⽤用应该为每⼀一类设备都
提供⼀一个 icon

65. Icon的圆⾓角效果是iOS实现的

66. 代码和资源
• 代码（像QuizViewController.h和
QuizViewController.m）被⽤用来⽣生成应⽤用程序本
⾝身；
• 资源是指像图⽚片，声⾳音之类的应⽤用程序在运⾏行时
需要⽤用到的东⻄西；
• XIB ⽂文件，在运⾏行时被读取，因此也属于资源

67. 在summary⾯面板添加Icon

68. 拖拽 image ⽂文件到 icon 区块
• image ⽂文件被添加到项⺫⽬目
• QuizInfo.plist ⽂文件中多了两个条⺫⽬目

69. 启动图⽚片

70. launch image 的作⽤用
• 应⽤用正在加载时显⽰示，否则⽤用户在此过程中只会
看到⿊黑⾊色屏幕
• 描绘应⽤用⼀一旦完成启动后⽤用户将要与之交互的⽤用
户界⾯面

71. launch ⽰示例

72. 不同设备的Launch image⼤大⼩小
设备 ⼤大⼩小
iPhone/iPod touch(普通) 320x480
iPHone/iPod touch(Retina 3.5-inch) 640x960
Retina iPhone 4-inch 640x1136

73. Launch Images