iOS编程教程（四）：创建一个简单的表视图

创建Hello World应用程序有乐趣吗？在本教程中，我们将继续创建更复杂的东西，并使用表视图构建一个简单的应用程序，。如果你没有看过以前的iOS编程的基本教程，在继续接下来的教程之前先看看把。

首先，在iPhone应用程序什么是表视图中？表视图是一种常见的UI元素在iOS应用程序。在某些方面，大多数应用程序，使用表视图去显示数据列表。最好的例子是内置的手机应用程序。您的联系人显示在表视图中的。另一个例子是邮件程序。它使用表视图来显示你的信箱和电子邮件。，表视图不仅被设计去显示文本数据，也允许您数据在图像中显示。内置的视频和YouTube应用程序都是很好的例子。

使用表视图的应用程序示例

“创建SimpleTable项目”

有了表视图的简单理解，让我们开始着手创建一个简单的应用程序。如果你是认真学习的iOS编程就不要只翻阅文章。打开你的Xcode和代码！这是最好的方式来研究编程。

启动Xcode，创建一个新的项目“Single View application（单一视图的应用程序）”。

Xcode项目模板选择

点击“Next（下一步）”继续。再次，填写所需的所有选项的Xcode项目：

·         Product Name（产品名称）：SimpleTable-这是您的应用程序的名称。

·         Company Identifier（公司标识）：com.appcoda -它实际上是域名反写。如果你有一个域，您可以使用您自己的域名。否则，你可能会使用我们的，或者只需填写在“edu.self”。

·         Class Prefix（类前缀）：SimpleTable - Xcode使用的类的前缀自动命名类。以后，你可以选择自己的前缀，甚至留空白。但在本教程中，让我们保持简单，使用“SimpleTable”好了。

·         Device Family（设备系列）：iPhone -使用“iPhone”这个项目。

·         Use Storyboards（使用故事板）： [unchecked] -不要选择此选项。这个简单的项目我们不需要故事板。

·         Use Automatic Reference Counting（使用自动的引用计数）：[checked]-默认情况下，这应该被启用。不用管他。

·         Include Unit Tests（包括单元测试）：[unchecked] -不要选中此复选框。现在，你不需要单元测试类。

SimpleTable项目选项

点击“Next（下一步）”继续。Xcode然后问你在哪里保存 “SimpleTable”的项目。选择任何文件夹（例如桌面）来您的项目。并且，取消Source Control（源代码管理）选项。单击“Create（创建）”继续。

选择一个文件夹来保存你的项目

当你确认，Xcode根据您所提供的选项自动创建“SimpleTable的”项目。结果屏幕看起来像这样：

主屏的SimpleTable项目的

设计视图

首先，我们将创建用户界面和添加表视图。选择“SimpleTableViewController.xib”切换到界面生成器。

Interface Builder中SimpleTable项目

在对象库中，选择“Table View（表视图）”对象，并将其拖动到视图中。

插入“表视图”后您的屏幕应该像下面这样。

第一时间运行你的程序

在继续之前，请尝试使用模拟器来运行你的应用程序。单击“Run（运行）”按钮来建立你的应用程序并测试它。

模拟器的屏幕上会看起来像这样：

很简单，对不对？你已经在你的应用程序添加表视图了。但就目前而言，它不包含任何数据。接下来，我们将编写一些代码，来添加数据到表中。

添加表数据

回到Project Navigator（项目导航器）中，选择“SimpleTableViewController.h”。 “UIViewController”后添加“<UITableViewDelegate, UITableViewDataSource>”。你的代码应该象下面这样：

1 2 3 4 5

#import <UIKit/UIKit.h> @interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> @end

在Objective-C ，“UITableViewDelegate”和“UITableViewDataSource”被称为协议。基本上，为了在表视图中显示数据，我们必须遵循协议规定的要求，并实现所有强制性方法。

UITableViewDelegate和UITableViewDataSource

此前，我们已经在头文件中添加了“UITableViewDelegate”和“UITableViewDataSource”协议，。这可能会有点混乱。他们是干什么的呢？

在表视图后的实际类UITableView，，被设计成灵活处理各种不同类型的数据。您可能会显示一个列表的国家或联系人的姓名。或者像这个例子，我们将使用表视图呈现食谱列表。那么，你如何告诉UITableView的列表中要显示的数据呢？UITableViewDataSource就是答案。这是您的数据和表视图之间的链接。UITableViewDataSource协议声明了两个你必须实现的方法(tableView:cellForRowAtIndexPath and tableView:numberOfRowsInSection)，。通过实施这些方法，你告诉表视图中显示多少行，和每行中的数据。

另一方面，UITableViewDelegate，涉及到UITableView的外观。协议的可选方法，让你管理​​表里单个行的高度，配置表头和表尾，重新排序表格单元格。在这个例子中我们不改写这些方法。让我们把他们留在未来的教程把。

接着，选择“SimpleTableViewController.m”，并定义一个实例变量的表中的数据。

1 2 3 4

@implementation SimpleTableViewController {     NSArray *tableData; }

在方法view DidLoad中，添加以下代码，来初始化”tableData“数组。我们用食谱列表来初始化数组。

1 2 3 4 5 6

- (void)viewDidLoad {     [super viewDidLoad];     // Initialize table data     tableData = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil]; }

什么是数组？

数组是一种计算机编程里的基本数据结构。你可以把一个数组作为数据元素的集合。回到上述代码中的数组tableData在，它代表文本元素的集合。您可以把数组想像成这样：

数组元素中的每一个都能被识别或通过索引来访问。具有10个元素的数组，将具有从0到9的目录。这意味着，tableData [0]返回的“tableData”数组的第一个元素。

在Objective C，NSArray是用于创建和管理数组的类。您可以使用NSArray创建大小固定的静态数组。如果你需要一个动态数组，可以使用NSMutableArray。

NSArray提供工厂方法来创建一个数组对象。在我们的代码中，我们使用“arrayWithObjects”来实例化一个NSArray对象，并预载特定元素（如汉堡包）。

您还可以使用内置的方法来查询和管理数组。之后，我们将调用“count”的方法来查询数组中的数据元素数量。要了解更多有关NSArray的使用方法，你可以经常参考苹果的官方文件。

最后，我们必须添加两个数据源方法：“tableView：numberOfRowsInSection”和“tableView：cellForRowAtIndexPath”。这两种方法都是UITableViewDataSource协议的一部分。配置一个UITableView时，这是必须实现的方法。第一种方法是告知一个表视图页面中有多少行。因此，让我们添加下面的代码。“count”的方法只是简单返回在“tableData”数组的项目数。

1 2 3 4

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {     return [tableData count]; }

下一步，我们实现所需的其他方法。

1 2 3 4 5 6 7 8 9 10 11 12 13

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {     static NSString *simpleTableIdentifier = @"SimpleTableItem";     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];     if (cell == nil) {         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];     }     cell.textLabel.text = [tableData objectAtIndex:indexPath.row];     return cell; }

每次显示时表行，“cellForRowAtIndexPath”方法被执行。下面的插图会给你一个更好地了解关于UITableView、UITableDataSource如何工作。

UITableView和UITableDataSource如何一起工作

好吧，让我们点击“Run（运行）”按钮，并试验您的最终应用程序！如果你正确地编写代码，在模拟器运行的程序是这样的：

为什么它仍然是空白呢？我们已经写好生成表中数据、实现了所需方法的代码。但是，为什么表视图没有像预期那样显示呢？

其实一件事情。

连接数据源和委托（Delegate）

像 第一个教程中“Hello World”按钮，我们要建立表视图和我们刚刚创建的两个方法之间的连接。

返回到“SimpleTableViewController.xib”。按住键盘上的Control键，选择表视图并拖动到“File’s Owner（文件的所有者）”。您的屏幕应该是这样的：

连接表视图的数据源和委托

松开按钮，将显示“数据源”和“委托”弹出式窗口。选择“数据源”，建立表视图和数据源之间的连接。重复上述步骤，并与委托进行连接。

连接数据源和委托

就是这样。为了确保是否连接正确，您可以选择表视图。在Utility area（实用区域）的上半部分，您可以在“Connection Inspector”（即最右边的标签页）显示现有连接。

显示连接检查

测试您的应用程序

最后，它已经准备好测试您的应用程序。只要按一下“运行”按钮，让您的模拟器加载应用程序：

添加缩略图到您的表视图

表视图是过于平淡，是吧？给每一行添加添加图像怎么样？iOS的SDK使得它非常容易就做到这一点。你只需要为插入每一行的缩略图添加一行代码。

首先，下载这个示例图像。或者，您可以使用自己的图像，但要确保你的图片名字是“creme_brulee.jpg”。在项目浏览器中，用鼠标右键单击的“SimplyTable”文件夹，选择“Add Files to SimpleTable…”。

图像添加到您的项目

选择图像文件，并选中“Copy items to destination group（将项目复制到目标组的文件夹）”复选框。单击“确定”添加文件。

选择你的图像文件，并添加到项目中

现在，编辑“SimpleTableViewController.m”，并添加下面这行代码到“tableView：cellForRowAtIndexPath”方法：

1	cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

编辑后，你的代码应该是这样的：

选择你的图像文件，并添加到项目中

这行代码的用处是加载图像并显示在表格单元格的图像区域中。现在，再次点击“Run（运行）”按钮，您的SimpleTable应用程序应在每一行显示图像：

接下来干什么呢？

建一个表视图是简单的把，对不对？表视图在iOS编程的最常用的元素之一。如果你按照教程构建应用程序，你应该对关于如何创建表视图有一个基本的了解。在本教程中我尽量保持一切都简单化。在现实中，表中的数据将不会在代码中直接赋值。通常情况下，它能从文件、数据库或其他地方中加载。

在接下来的教程中，我们将看看如何可以进一步自定义的表格单元格。