iPhone 对独立软件开发者来说是个很棒的平台。也许你都没想过能简单的使用一些代码就拥有实现自己想法的应用,并有数以百万计的潜在客户! 最近,我已经得到了很多人新的iOS开发者询问如何开始的问题。所以,我认为写一个专为初学者的教程系列将是有益的。 但我们不会只专注一个主题,我们将深入的创建一个完整功能的应用。到最后,你将尝试到 iPhone 开发的许多领域,为未来开发您的应用做好准备。 那么,什么是我们要的应用?嗯,有一个背后的故事...... 一天晚上,我看到 Potato Bug ,并开始吓坏了,因为它是如此之大又丑!然后,我就痴迷于在线寻找各种可怕的虫子图片。并为传播它们为乐,我们打算使一个应用程序 - 评级可怕的虫子! 制作这个应用程序的同时,我们将介绍一些iPhone开发中最常用的主题:
看起来似乎很多东西,不过不要紧张 – 我们不怕有错误! 此教程分三段,这里是第一段, 我们将讨论如何加载我们的模型的虫子列表,并将它们显示在表视图上。 (跳转到第二部分或第三部分) 本教程是iOS开发初学者的,但它假定您熟悉Objective-C和一般编程。如果您不了解 Objective-C , 请先阅读苹果Objective-C 编程语言手册 。 | ![]() 夜狼
|
您需要什么首先第一件事情 – 要开发 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,并启动起来,让我们继续! | ![]() 夜狼
|
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 模版开始我们的项目。 我们不会深入这个模版,因为这超出了本教程,只需要注意我们有一个空的表视图和详情视图已经为我们准备好 - 我们只需要使用数据填充它们! 为了这个目标,首先让我们创建一个类用于保存我们的虫子数据。 | ![]() 夜狼
|
一个虫子数据模型:结构请注意,XCode 项目浏览器包含了一个文件夹层次结构: 模版已经创建了一个根组和一个 Supporting Files 组。 这些组只是用于组织结构的目的,所以你可以自由的按你的需要改变。 在我们的例子中,我们要在这个项目中有相当数量的文件,让我们做一点整理。 首先,创建一个新的组用于存储用户界面文件。 control-click Scary Bugs 组,在菜单中选择 New Group 。 然后 control-click 新组选择重命名,将其命名为 “GUI”。将根组中的所有文件拖到 GUI 组中(但不包括 Supporting Files)。最后看起来应该像这样: 现在创建第二个新组,命名为“Model”,因为我们将添加一些数据模型类到其中。 现在您的树应该像这样: 在我们开始之前,让我们来谈谈我们将如何组织:
我们做如上的设计让本教程后面要做的事情变的容易,我们将在磁盘上保存我们的数据,实现文件共享等。 | ![]() 夜狼
|
一个虫子数据模型:实现好的,现在开始吧!Control-click Model 组并点击 “New File…”。 选择 iOS\Cocoa Touch\Objective-C class 模版点击 Next。 命名类名为 ScaryBugData, 父类(Subclass of)为 NSObject ,点击 Next。 最后点击 Create 。 如果一切正常,您的项目浏览器现在应该看起来像这样: 好的,来创建我们的 ScaryBugData 类。 使用下面的代码替换 ScaryBugData.h 文件:
这非常简单 - 我们只是定义了一个对象的两个属性 - 一个字符串用于虫子名称,一个浮点数用于评分。这里我们用了两个属性的属性(property attributes):
我们还定义了一个初始化方法,这样我们可以在创建虫子时设置标题与评分。 切换到 ScaryBugData.m 并使用下面代码替换:
好的,以上就是 ScaryBugData。 接下来还有同样的创建 NSObject 子类的工作,这次命名为 ScaryBugDoc。 使用下面代码替换 ScaryBugData.h :
使用如下代码替换 ScaryBugDoc.m :
| ![]() 夜狼
|
一个不同类型的虫子列表首先,设置我们的表视图让它能处理显示 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。 | ![]() 夜狼
|
好了,现在我们的表视图已经设置,只需要更新一些代码使用一个虫子列表填充这个表视图。 我们将使用一个 NSMutableArray 类型的 ScaryBugDocs 变量保存列表, 这个类型是可动态改变大小的数组集合。 在 MasterViewController.h 的 @interface 与 @end 之间添加下面这行:
转到 MasterViewController.m 文件做如下更改:
首先,注意我们设置了一个名为 “title” 的属性为字符串 “Scary Bugs.”, “title” 是一个特殊的视图控制器内建属性。当在一个导航控制器中显示一个视图控制器时,它将当前的 “title” 属性显示在标题栏上。所以通过设置它,我们将看到 “Scary Bugs” 在顶上! 下一个,注意我在 shouldAutorotateToInterfaceOrientation 中直接返回 YES,这告诉 OS 我们可以支持所有方向 – 竖屏,横屏与此倒置的它们。 因为这个类是 UITableViewController, 所以不需要更多处理 - 视图将自动旋转! 下一个, 当构建一个动态行的表视图时,我们需要重写 numberOfSectionsInTableView 与 numberOfRowsInSection 告诉系统有多少节/行(sections/rows)将在表视图中显示。 这里只有一个节,所以我们没有重写 numberOfSectionsInTableView 因为模版已经设置了返回 1。 对于行,我们只需要返回我们的虫子数组的对象数。 | ![]() 夜狼
|
最后,我们实现 tableView:cellForRowAtIndexPath , 它大概是实现一个表视图时中最重要方法。这里你设置一个特定行的单元格如何显示。 系统将为每一行调用一次该方法,这样你就可以设置它。 因为它很重要,让我们细看一下这个方法:
是这样的,它是一个重要的性能优化。要知道表视图可能包括非常大是不是的行,但在屏幕上一次只显示有限的行。 这样做不需要每次新行进入屏幕时都创建新行, 系统可通过重用一个已经创建但滚动出屏幕之外的单元格来提高性能。 那么调用 dequeueReusableCellWithIdentifier ,如果没有可重用的行,就基于您在 Interface Builder 中的设置创建一个新单元格(记得我们设置它为基本样式并命名为“MyBasicCell”?)。 | ![]() 夜狼
|
在故事板(Storyboard)编辑器中你可以自定义单元格的布局或使用一个内建的。这里我们选择包括一个文本标签和图片的基础样式。 如果您感兴趣,可以查看 Table View Programming Guide 中的 Standard Styles for Table-View Cells 主体看看基本表视图的各种样式选项效果。 最后,我们通过单元格的 textLabel 与 imageView (基本样式可用的) 设置要显示的内容。 信不信那是所有我们需要做 !现在我们只需要设置要显示的表视图的一些示例数据。 | ![]() 夜狼
|
可怕的虫子图片!当然我们需要一些可怕的虫子图片! 您可以浏览互联网找到一些或直接下载我在 stock.xchng 上找到的 Scary Bug Pictures。 准备好图片文件后,将他们拖动到你的项目导航树根节点。在选项中确保“Copy items into destination group’s folder (if needed)” 已选中,然后点击 Add。 接着打开 AppDelegate.m 并做如下更改:
这里我们使用 ScaryBugDoc 初始化方法设置 title, rating 与 image。 生成四个 ScaryBugDoc 添加到将用于表格视图显示的 NSMutableArray 中。 说到这,我们可以获取指向指针 RootViewController 因为我们知道这是导航控制器堆栈中的第一个视图控制器。 还有其他方法可以得到一个指针,但这是一个简单的方法。 | ![]() 夜狼
|
这就是它!编译并运行你的应用程序,如果一切运作良好,你应该能在你的表视图中看到令人害怕的一系列虫子! 从这里去哪里?这里是一个 示例工程, 有我们开发的这一系列教程的所有代码。如果以上有让你困惑的内容或如果你希望我将一些内容讲得更详细,请告诉我们。 该系列的下部分,我们描述了如何为这些虫子创建详细视图(detail view),使我们能编辑和评价这们的虫子! |