• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
01 A Simple iOS Application
 

01 A Simple iOS Application

on

  • 395 views

一个简单的 iOS 应用

一个简单的 iOS 应用

Statistics

Views

Total Views
395
Views on SlideShare
395
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    01 A Simple iOS Application 01 A Simple iOS Application Presentation Transcript

    • A Simple iOS Application范圣刚,princetoad@gmail.com,www.tfan.org
    • 第⼀一个 iOS 应⽤用:Quiz
    • views UIButton UIView UIAlertVie UIScrollVi UISearchB UIWebVie ... UIControl w ew ar w UITextFie UIPageC UIDatePiUIButton ... UISlider UIButton ld ontrl cker
    • 创建⼀一个 Xcode 项⺫⽬目
    • Single View Application
    • Mouse over -> 简介
    • 导航区域• Project• Symbol• Search• Issue• Debug• Breakpoint• Log
    • Project navigator• files• folders• template groups
    • 构建界⾯面
    • 对象编辑器(Object editor)• interface builder - 创建和配置视图对象• XIB file - archive
    • XIB file & NIB file• archived objects 的 XML 表⽰示 • 容易编辑• NIB file • 更⼩小 • 易于解析 • 构建过程中 - 编译过的 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 navigatorissue navigator:Command-4点击issue定位到源⽂文件和出问题的代码⾏行
    • debug area查看console
    • 应⽤用部署
    • 部署准备• 开发者证书 • 使⽤用 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
    • 部署流程• Xcode 使⽤用电脑上的 provisioning profile 访问适当 的证书• 这个证书被⽤用来给 application 的⼆二进制⽂文件签名• 开发者设备的 UDID 被⽤用来跟 provisioning profile 中的 UDID 之⼀一进⾏行匹配,App ID 跟 bundle identifier 进⾏行匹配• 签名后的⼆二进制⽂文件被发送到开发设备• 在设备上的 provisioning profile 再⽤用来跟签名过的 ⼆二进制⽂文件进⾏行确认• 最后,启动
    • 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(普通) 320x480iPHone/iPod touch(Retina 3.5-inch) 640x960 Retina iPhone 4-inch 640x1136
    • Launch Images