A Simple iOS Application

范圣刚，princetoad@gmail.com，www.tfan.org

第⼀一个 iOS 应⽤用：Quiz

views UIButton UIView

UIButton

UIControlUIWebView

UISearchBar

UIScrollView

UIAlertView...

UIDatePicker

UIPageContrl

UITextFieldUISliderUIButton...

创建⼀一个 Xcode 项⺫⽬目

Single View Application

Mouse over -> 简介

导航区域• Project

• Symbol

• Search

• Issue

•Debug

• Breakpoint

• Log

Project navigator

• !les

• folders

• template groups

构建界⾯面

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

XIB !le & NIB !le

• archived objects 的 XML 表⽰示•容易编辑•NIB !le

•更⼩小•易于解析•构建过程中 - 编译过的 NIB ⽂文件被拷⻉贝进了应⽤用程序的 bundle

bundle

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

NIB ⽂文件的加载•加载 NIB ⽂文件 - 使 archive 在其中的对象变得可⽤用

•只有⼀一个 NIB ⽂文件 - 当应⽤用程序第⼀一次启动时就被加载

•复杂的应⽤用程序可以拥有很多 NIB ⽂文件 - 被⽤用到的时候才被加载

编辑器区域• dock view: 显⽰示 XIB ⽂文件中的对象

• dock view 可以展开成 Outline view

• canvas

outline view -> three objects

• File’s Owner

• First Responder

• View

canvas 部分•在 outline 中点击 View 对象 -> 在 canvas 中显⽰示

•在视图周围的蓝⾊色阴影区域拖动 -> 移动 canvas(重新组织 canvas)

•点击左上⾓角的 x 符号 -> 关闭视图

•在 canvas 区域的 view 对象 -> 和要在应⽤用程序中呈现的⼀一致

utilities area

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

object library

•每个 section 上⾯面有⼀一个各类 inspector 和 library 的 selector

• object library: 包含可以添加到 XIB ⽂文件的 objects

• Label object

• search bar

两个 Label 和 Button，⾏行为，外观和实例变量

•UILabel

•UIButton

•标签和按钮都是对象，对象具有指定他们⾏行为和外观的实例变量

•例如，当你给⼀一个按钮输⼊入⼀一个 title 时，你就设置了按钮的 title 实例变量

•你可以在canvas上直接编辑⼀一些实例变量，但是⼤大多数必须在”attributes inspector”中编辑

attributes inspector

Model-View-Controller

MVC

•任何⼀一个对象都是下列之⼀一：• model 对象

• view 对象

• controller 对象

View 对象•对⽤用户可⻅见•按钮，标签等，⼀一般是 UIView 的⼦子类

•⾃自定义视图类：DangerMeterView 或IncomeGrapView

Model 对象•持有数据•对界⾯面⼀一⽆无所知•⼀一般使⽤用标准的集合类（NSArray,

NSDictionary,NSSet）

•标准数据类型：NSString, NSDate, NSNumber

•⾃自定义类

controller 对象•应⽤用的管理者•保持 view 和 model 对象同步

•控制应⽤用流程•保存 model 对象到⽂文件系统

•可重⽤用程度较低•名字类似：ScheduleController,

ScoreViewController

MVC 模式

Quiz 对象图解

声明

声明• relationships

• responsibilities

• 5个实例变量

• 2个⽅方法•QuizViewController.h

声明变量• questions

•指向包含 NSString 实例的 NSMutableArray 的指针

• answers

•另⼀一个指向包含 NSString 实例的 NSMutableArray 的指针

• currentQuestionIndex

•持有 question 数组中当前 question 索引的 int 变量

• questionField

•显⽰示当前问题的 UILabel 对象的指针

• answerField

•显⽰示当前问题答案的 UILabel 对象的指针

code@interface QuizViewController : UIViewController

{ int currentQuestionIndex; // model 对象 NSMutableArray *questions; NSMutableArray *answers; // view 对象 IBOutlet UILabel *questionField; IBOutlet UILabel *answerField;}@end

声明⽅方法@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

IBAction 和 IBOutlet

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

建⽴立连接

connection

•两个对象可以⼀一起⼯工作• xib加载以后，controller 需要知道 Label 在内存中的位置，以告知他们显⽰示什么

• button 需要知道 controller 在什么地⽅方，以便在按钮按下后可以通知 controller

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

missing connections

•QuizViewController, 需要有⼀一个指向 UILabel 实例的指针，这样 controller 就可以告诉 Label 显⽰示什么

•UIButton 实例必须有⼀一个指向 QuizViewController 的指针，以便可以在被按下时给 Controller 发送消息

设置questionField指针

设置answerField指针

targets和actions

•点击 UIButton ，发送 message 到另⼀一个对象；

•被发送 message 的对象叫做 target

•message 称做 action，并且是 button 点击时被触发的⽅方法的名称

• button 要回答两个问题：target 是谁？action 是什么？

•对 Show Question ⽽而⾔言，我们希望 target 是QuizViewController, action 是showQuestion:

targets和actions设置•按住 Control，从object（UIButton）拖到

target（File’s Owner）

•松开⿏鼠标，target 被设置，弹出菜单让你选择action

设置targets和actions

connections 概述•设置了指针 questionField 和 answerField 分别指向对应的 labels

•QuizViewController 是两个按钮的target

•项⺫⽬目模版⽣生成了⼀一个附加的 connection：QuizViewController 的 view outlet 被连接到了呈现应⽤用背景的 View 对象

connections inspector

实现⽅方法

模板代码• viewDidLoad

• viewDidUnload

• shouldAutorotateToInterfaceOrientation

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;}

code-completion 和 placeholders

• double-check 代码完成给出的建议

•注意使⽤用⾃自⼰己的参数换掉 placeholders

IBOutlet

• view 对象⼀一般在 XIB ⽂文件中创建

•model 对象总是通过可编程的⽅方式创建

实现两个 action

•修改 QuizViewController.m ⽂文件

•把下⾯面的代码放到 initWithNibName:bundle: 之后，@end 指⽰示符之前

- (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];}

构建并在模拟器中运⾏行

Build and Run on the Simulator

•编译并运⾏行：Command-R

issue navigator

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

debug area

查看console

应⽤用部署

部署准备•开发者证书

• 使⽤用 Keychain Access 添加证书⽂文件到 Mac 的密钥链，⽤用来给代码进⾏行数字签名

• provisioning pro!le

• 位于开发设备和电脑上的⽂文件。包括⼀一个开发者证书，⼀一个单独的 App ID，以及可以安装这个应⽤用的设备的 device ID 的列表。后缀是：mobileprovision

• Device ID(UDID)

• 唯⼀一标识⼀一个 iOS 设备

• App ID 和 Bundle identi!er

• application identi!er 是⽤用于在 App Store 唯⼀一标识你的应⽤用的字符串，⼀一般看起来像这样：org.tfan.AwesomeApp

部署流程• Xcode 使⽤用电脑上的 provisioning pro!le 访问适当的证书

•这个证书被⽤用来给 application 的⼆二进制⽂文件签名

•开发者设备的 UDID 被⽤用来跟 provisioning pro!le 中的 UDID 之⼀一进⾏行匹配，App ID 跟 bundle identi!er 进⾏行匹配

•签名后的⼆二进制⽂文件被发送到开发设备•在设备上的 provisioning pro!le 再⽤用来跟签名过的⼆二进制⽂文件进⾏行确认

•最后，启动

Organizer窗⼝口

在设备上运⾏行

应⽤用图标

图标•图标就是在iOS桌⾯面上表⽰示应⽤用程序的简单的图⽚片；

•不设置图标就是纯⽩白平铺的效果；

不同的设备需要不同⼤大⼩小的图标

设备 图标⼤大⼩小

iPhone/iPod touch(⾮非Retina) 57x57像素

iPhone/iPod touch(Retina) 114x114像素

iPad 72x72像素

Retina iPad 144x144像素

缩放•如果你只提供了⼀一个 57x57 像素的图⽚片，在需要更⼤大 icon 的设备上，图⽚片会被按⽐比例放⼤大。

•因此发布到 App Store 的应⽤用应该为每⼀一类设备都提供⼀一个 icon

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

代码和资源•代码（像QuizViewController.h和

QuizViewController.m）被⽤用来⽣生成应⽤用程序本⾝身；

•资源是指像图⽚片，声⾳音之类的应⽤用程序在运⾏行时需要⽤用到的东⻄西；

• XIB ⽂文件，在运⾏行时被读取，因此也属于资源

在summary⾯面板添加Icon

拖拽 image ⽂文件到 icon 区块• image ⽂文件被添加到项⺫⽬目

•QuizInfo.plist ⽂文件中多了两个条⺫⽬目

启动图⽚片

launch image 的作⽤用•应⽤用正在加载时显⽰示，否则⽤用户在此过程中只会看到⿊黑⾊色屏幕

•描绘应⽤用⼀一旦完成启动后⽤用户将要与之交互的⽤用户界⾯面

launch ⽰示例

不同设备的Launch image⼤大⼩小

设备 ⼤大⼩小

iPhone/iPod touch(普通) 320x480

iPHone/iPod touch(Retina 3.5-inch) 640x960

Retina iPhone 4-inch 640x1136

Launch Images