Your SlideShare is downloading. ×
  • Like
01 A Simple iOS Application
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

01 A Simple iOS Application

  • 266 views
Published

一个简单的 iOS 应用

一个简单的 iOS 应用

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
266
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 UIDatePiUIButton ... 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 navigatorissue 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(普通) 320x480iPHone/iPod touch(Retina 3.5-inch) 640x960 Retina iPhone 4-inch 640x1136
  • 73. Launch Images