创建一个简单的 iOS 5 iPhone App 教程(1/3)

iPhone 对独立软件开发者来说是个很棒的平台。也许你都没想过能简单的使用一些代码就拥有实现自己想法的应用，并有数以百万计的潜在客户！ 最近，我已经得到了很多人新的iOS开发者询问如何开始的问题。所以，我认为写一个专为初学者的教程系列将是有益的。 但我们不会只专注一个主题，我们将深入的创建一个完整功能的应用。到最后，你将尝试到 iPhone 开发的许多领域,为未来开发您的应用做好准备。 那么，什么是我们要的应用？嗯，有一个背后的故事...... 一天晚上，我看到 Potato Bug ，并开始吓坏了，因为它是如此之大又丑！然后，我就痴迷于在线寻找各种可怕的虫子图片。并为传播它们为乐，我们打算使一个应用程序 - 评级可怕的虫子！ 制作这个应用程序的同时，我们将介绍一些iPhone开发中最常用的主题： iPhone 开发者入门 如何使用模型对象在您的应用中存储数据 如何使用 Table Views – 包括添加与删除行 如果为表行创建一个详情视图 如何支持 Portrait & Landscape 双方向 如何使用 Navigation 控制器 如何使用图片选择器 如何使用一般控件，如文本字段，按钮，图片视图 如何添加图标与默认图片 奖励：如何处理长时间运行的操作 看起来似乎很多东西，不过不要紧张 – 我们不怕有错误！ 此教程分三段，这里是第一段, 我们将讨论如何加载我们的模型的虫子列表，并将它们显示在表视图上。 （跳转到第二部分或第三部分） 本教程是iOS开发初学者的，但它假定您熟悉Objective-C和一般编程。如果您不了解 Objective-C ， 请先阅读苹果Objective-C 编程语言手册 。

夜狼 翻译于 8天前 1人顶 顶 翻译的不错哦!

您需要什么 首先第一件事情 – 要开发 iPhone ，你需要一台 Mac。 几乎任何一台 Mac 都可以，只要支持运行最新版本的 Mac OS 系统，Lion。 但是如果你想省钱，你可以选择相对便宜的 Mac Mini ，它做为开发机也是没问题的。 然后，你需要一个 XCode 副本，Apple’s iOS 开发者 IDE 。 如果您还没有，在 iPhone Dev Center 注册一个免费帐户并从 Mac App Store 下载 Xcode 。 如果你愿意，你可以注册为付费 iPhone 开发者，可让您在 App Store 上发布您的应用程序，但如果你只是想尝试 iOS 开发，免费帐户就行了。 如果你严肃对待 iOS 开发， 您可能需要一些 iOS 设备 (iPhone/iPhone 4/iPod Touch/iPad) 更好。 你可以只使用模拟器测试，但是一些 API 不会在模拟器上工作，您将需要一个物理设备进行测试。 就是这些了 - 那么如果你还没准备好，马上下载 XCode，并启动起来，让我们继续！

夜狼 翻译于 8天前 1人顶 顶 翻译的不错哦!

Hello, Table View! 我们从 iPhone 里最常见的控件 – Table View 开始。您可以已经在很多应用中看到过 Table View，这里有些示例： 所以无论如何，我们在应用程序的第一个屏幕将有其中之一，显示一个可怕的虫子列表！ 在 XCode 菜单选择 File\New Project ， 选择 iOS\Application\Master-Detail Application, 然后点击 Next。 在下一页中，输入产品名称（Product Name）为 ScaryBugs ，公司识别（company identifier）字符串 (com.yourcompanyname 或 com.yourname 更好), 选择设备类型（Device Family）为 iPhone， 确保 Use Storyboard 与 Use Automatic Reference Counting 为选中状态。完成后点击 Next 。 选择一个位置保存您的项目并点击 Create 。 在我们进行任何工作之后，让我们看看现在是什么样子的！ 在屏幕顶部的工具栏列表中选择 iPhone Simulator 然后点击 Run 按钮。 如果一些正常，您将在你的模拟器中看到如下界面： 您可以点 “+” 按钮创建一个新实体，点击新行看到一个它的详情视图： 正如你看到的，我们将使用选择的 Master-Detail Application 模版开始我们的项目。 我们不会深入这个模版，因为这超出了本教程，只需要注意我们有一个空的表视图和详情视图已经为我们准备好 - 我们只需要使用数据填充它们！ 为了这个目标，首先让我们创建一个类用于保存我们的虫子数据。

夜狼 翻译于 8天前 1人顶 顶 翻译的不错哦!

一个虫子数据模型：结构 请注意，XCode 项目浏览器包含了一个文件夹层次结构： 模版已经创建了一个根组和一个 Supporting Files 组。 这些组只是用于组织结构的目的，所以你可以自由的按你的需要改变。 在我们的例子中，我们要在这个项目中有相当数量的文件，让我们做一点整理。 首先，创建一个新的组用于存储用户界面文件。 control-click Scary Bugs 组，在菜单中选择 New Group 。 然后 control-click 新组选择重命名，将其命名为 “GUI”。将根组中的所有文件拖到 GUI 组中（但不包括 Supporting Files）。最后看起来应该像这样： 现在创建第二个新组，命名为“Model”，因为我们将添加一些数据模型类到其中。 现在您的树应该像这样： 在我们开始之前，让我们来谈谈我们将如何组织： ScaryBugData: 包括虫子名称与评分。 ScaryBugDoc: 包括全尺寸图片，缩略图， ScaryBugData。 我们做如上的设计让本教程后面要做的事情变的容易，我们将在磁盘上保存我们的数据，实现文件共享等。

夜狼 翻译于 8天前 1人顶 顶 翻译的不错哦!

一个虫子数据模型：实现 好的，现在开始吧！Control-click Model 组并点击 “New File…”。 选择 iOS\Cocoa Touch\Objective-C class 模版点击 Next。 命名类名为 ScaryBugData, 父类（Subclass of）为 NSObject ，点击 Next。 最后点击 Create 。 如果一切正常，您的项目浏览器现在应该看起来像这样： 好的，来创建我们的 ScaryBugData 类。 使用下面的代码替换 ScaryBugData.h 文件： 01 #import <Foundation/Foundation.h> 02 03 @interface ScaryBugData : NSObject 04 05 @property (strong) NSString *title; 06 @property (assign) float rating; 07 08 - (id)initWithTitle:(NSString*)title rating:(float)rating; 09 10 @end 这非常简单 - 我们只是定义了一个对象的两个属性 - 一个字符串用于虫子名称，一个浮点数用于评分。这里我们用了两个属性的属性（property attributes）： strong: 这描述运行时应该自动保持对象的强关联。这是一个神奇的方式告诉 ARC 运行时保证一个强关联到对象时不会释放对象，当它不再有关联时自动释放。更多详情，查看我的 Beginning ARC in iOS 5 Tutorial。 assign: 这意味着属性是直接设置，不涉及内存管理。这通用是用于像 float 这样的元类型（非对象）。 我们还定义了一个初始化方法，这样我们可以在创建虫子时设置标题与评分。 切换到 ScaryBugData.m 并使用下面代码替换： 01 #import "ScaryBugData.h" 02 03 @implementation ScaryBugData 04 05 @synthesize title = _title; 06 @synthesize rating = _rating; 07 08 - (id)initWithTitle:(NSString*)title rating:(float)rating { 09 if ((self = [super init])) { 10 self.title = title; 11 self.rating = rating; 12 } 13 return self; 14 } 15 16 @end 又是非常简单的一段。合成(synthesize)我们的属性并创建我们的初始化方法使用传入参数填充实例变量。注意我们使用了 ARC，所以这里不需要实现 dealloc。 好的，以上就是 ScaryBugData。 接下来还有同样的创建 NSObject 子类的工作，这次命名为 ScaryBugDoc。 使用下面代码替换 ScaryBugData.h ： 01 #import <Foundation/Foundation.h> 02 03 @class ScaryBugData; 04 05 @interface ScaryBugDoc : NSObject 06 07 @property (strong) ScaryBugData *data; 08 @property (strong) UIImage *thumbImage; 09 @property (strong) UIImage *fullImage; 10 11 - (id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage; 12 13 @end 这里没有什么特别的地方 – 只是创建了一些实例变量、属性和一个初始化方法声明。 使用如下代码替换 ScaryBugDoc.m ： 01 #import "ScaryBugDoc.h" 02 #import "ScaryBugData.h" 03 04 @implementation ScaryBugDoc 05 @synthesize data = _data; 06 @synthesize thumbImage = _thumbImage; 07 @synthesize fullImage = _fullImage; 08 09 - (id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage { 10 if ((self = [super init])) { 11 self.data = [[ScaryBugData alloc] initWithTitle:title rating:rating]; 12 self.thumbImage = thumbImage; 13 self.fullImage = fullImage; 14 } 15 return self; 16 } 17 18 @end 好了 - 我们的数据模型完成！现在该创建一些数据并在表视图中显示它了。

夜狼 翻译于 8天前 1人顶 顶 翻译的不错哦!

一个不同类型的虫子列表 首先，设置我们的表视图让它能处理显示 ScaryBugDocs 列表。 先修改表视图为动态行（而不是模版为我们生成的一个硬编码行）。 打开 MainStoryboard.storyboard 。 它允许您查看应用中的多个“屏幕”布局。 正如您看到的，这应用当前包含一个导航控制器（用它很容易在不多的屏幕间过渡切换），有一个名为 "master" 的根控制器和一个名为 “detail” 的第二控制器。 选择 Master View Controller 并在左边的导航面板中选择表视图（Table View）。 在右边的检查器中设置 Content 为 Dynamic Prototypes 。 这是一种允许你在故事板（Storyboard）编辑器中设计一个简单的表视图单元格的方式。这里只需要一个基本的单元格，所以只需要基本的样式。。 在左边的导航面板选中表视图单元格（Table View Cell）， 在属性检查器中设置 Style 为 Basic， Identifier 为 MyBasicCell。 有关创建自定义单元格的更多信息，查看我的 Beginning Storyboards in iOS 5 Tutorial。

夜狼 翻译于 6天前 1人顶 顶 翻译的不错哦!

好了，现在我们的表视图已经设置，只需要更新一些代码使用一个虫子列表填充这个表视图。 我们将使用一个 NSMutableArray 类型的 ScaryBugDocs 变量保存列表， 这个类型是可动态改变大小的数组集合。 在 MasterViewController.h 的 @interface 与 @end 之间添加下面这行： 1 @property (strong) NSMutableArray *bugs; 这将用于我们保存虫子列表的实例变量、属性。 转到 MasterViewController.m 文件做如下更改： 01 // 在文件开头 02 #import "ScaryBugDoc.h" 03 #import "ScaryBugData.h" 04 05 // 在 @implementation 之后 06 @synthesize bugs = _bugs; 07 08 // 在 viewDidLoad 方法最后 09 self.title = @"Scary Bugs"; 10 11 // 替换 shouldAutorotateToInterfaceOrientation with: 方法的 return 12 return YES; 13 14 // 替换 tableView:numberOfRowsInSection 方法内容 15 return _bugs.count; 16 17 // 替换 tableView:cellForRowAtIndexPath 如下： 18 - (UITableViewCell *)tableView:(UITableView *)tableView 19 cellForRowAtIndexPath:(NSIndexPath *)indexPath 20 { 21 UITableViewCell *cell = [tableView 22 dequeueReusableCellWithIdentifier:@"MyBasicCell"]; 23 ScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row]; 24 cell.textLabel.text = bug.data.title; 25 cell.imageView.image = bug.thumbImage; 26 return cell; 27 } 好了，最后讨论一些有趣的东西！ 首先，注意我们设置了一个名为 “title” 的属性为字符串 “Scary Bugs.”, “title” 是一个特殊的视图控制器内建属性。当在一个导航控制器中显示一个视图控制器时，它将当前的 “title” 属性显示在标题栏上。所以通过设置它，我们将看到 “Scary Bugs” 在顶上！ 下一个，注意我在 shouldAutorotateToInterfaceOrientation 中直接返回 YES，这告诉 OS 我们可以支持所有方向 – 竖屏，横屏与此倒置的它们。 因为这个类是 UITableViewController， 所以不需要更多处理 - 视图将自动旋转! 下一个, 当构建一个动态行的表视图时，我们需要重写 numberOfSectionsInTableView 与 numberOfRowsInSection 告诉系统有多少节/行(sections/rows)将在表视图中显示。 这里只有一个节，所以我们没有重写 numberOfSectionsInTableView 因为模版已经设置了返回 1。 对于行，我们只需要返回我们的虫子数组的对象数。

夜狼 翻译于 6天前 1人顶 顶 翻译的不错哦!

最后，我们实现 tableView:cellForRowAtIndexPath ， 它大概是实现一个表视图时中最重要方法。这里你设置一个特定行的单元格如何显示。 系统将为每一行调用一次该方法，这样你就可以设置它。 因为它很重要，让我们细看一下这个方法： 01 - (UITableViewCell *)tableView:(UITableView *)tableView 02 cellForRowAtIndexPath:(NSIndexPath *)indexPath 03 { 04 UITableViewCell *cell = [tableView 05 dequeueReusableCellWithIdentifier:@"MyBasicCell"]; 06 ScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row]; 07 cell.textLabel.text = bug.data.title; 08 cell.imageView.image = bug.thumbImage; 09 return cell; 10 } 第一行调用了 “dequeueReusableCellWithIdentifier” 帮助函数尝试返回一个可重用的单元格。 这是什么意思？ 是这样的，它是一个重要的性能优化。要知道表视图可能包括非常大是不是的行，但在屏幕上一次只显示有限的行。 这样做不需要每次新行进入屏幕时都创建新行， 系统可通过重用一个已经创建但滚动出屏幕之外的单元格来提高性能。 那么调用 dequeueReusableCellWithIdentifier ，如果没有可重用的行，就基于您在 Interface Builder 中的设置创建一个新单元格（记得我们设置它为基本样式并命名为“MyBasicCell”？）。

夜狼 翻译于 6天前 1人顶 顶 翻译的不错哦!

在故事板（Storyboard）编辑器中你可以自定义单元格的布局或使用一个内建的。这里我们选择包括一个文本标签和图片的基础样式。 如果您感兴趣，可以查看 Table View Programming Guide 中的 Standard Styles for Table-View Cells 主体看看基本表视图的各种样式选项效果。 最后，我们通过单元格的 textLabel 与 imageView (基本样式可用的) 设置要显示的内容。 信不信那是所有我们需要做 ！现在我们只需要设置要显示的表视图的一些示例数据。

夜狼 翻译于 6天前 1人顶 顶 翻译的不错哦!

可怕的虫子图片! 当然我们需要一些可怕的虫子图片！ 您可以浏览互联网找到一些或直接下载我在 stock.xchng 上找到的 Scary Bug Pictures。 准备好图片文件后，将他们拖动到你的项目导航树根节点。在选项中确保“Copy items into destination group’s folder (if needed)” 已选中，然后点击 Add。 接着打开 AppDelegate.m 并做如下更改： 01 // 在文件头部 02 #import "MasterViewController.h" 03 #import "ScaryBugDoc.h" 04 05 // 在 application:didFinishLaunchingWithOptions 方法开头 06 ScaryBugDoc *bug1 = [[ScaryBugDoc alloc] initWithTitle:@"Potato Bug"rating:4 thumbImage:[UIImage imageNamed:@"potatoBugThumb.jpg"] fullImage:[UIImage imageNamed:@"potatoBug.jpg"]]; 07 ScaryBugDoc *bug2 = [[ScaryBugDoc alloc] initWithTitle:@"House Centipede"rating:3 thumbImage:[UIImage imageNamed:@"centipedeThumb.jpg"] fullImage:[UIImage imageNamed:@"centipede.jpg"]]; 08 ScaryBugDoc *bug3 = [[ScaryBugDoc alloc] initWithTitle:@"Wolf Spider"rating:5 thumbImage:[UIImage imageNamed:@"wolfSpiderThumb.jpg"] fullImage:[UIImage imageNamed:@"wolfSpider.jpg"]]; 09 ScaryBugDoc *bug4 = [[ScaryBugDoc alloc] initWithTitle:@"Lady Bug"rating:1 thumbImage:[UIImage imageNamed:@"ladybugThumb.jpg"] fullImage:[UIImage imageNamed:@"ladybug.jpg"]]; 10 NSMutableArray *bugs = [NSMutableArray arrayWithObjects:bug1, bug2, bug3, bug4, nil]; 11 12 UINavigationController * navController = (UINavigationController *) self.window.rootViewController; 13 MasterViewController * masterController = [navController.viewControllers objectAtIndex:0]; 14 masterController.bugs = bugs; 这里我们使用 ScaryBugDoc 初始化方法设置 title, rating 与 image。 生成四个 ScaryBugDoc 添加到将用于表格视图显示的 NSMutableArray 中。 说到这，我们可以获取指向指针 RootViewController 因为我们知道这是导航控制器堆栈中的第一个视图控制器。 还有其他方法可以得到一个指针，但这是一个简单的方法。

夜狼 翻译于 6天前 1人顶 顶 翻译的不错哦!

这就是它！编译并运行你的应用程序，如果一切运作良好，你应该能在你的表视图中看到令人害怕的一系列虫子！ 从这里去哪里？ 这里是一个  示例工程，  有我们开发的这一系列教程的所有代码。 如果以上有让你困惑的内容或如果你希望我将一些内容讲得更详细，请告诉我们。 该系列的下部分，我们描述了如何为这些虫子创建详细视图(detail view)，使我们能编辑和评价这们的虫子！