在 Xcode 5 的 Storyboard 中使用 UITableView

当咱们最开始启动 iOS 编程课程的时候，咱们写了一个关于 UITableView 的教程，展现了如何使用 UITableView 去建立一个简单的表格应用。这是咱们最受欢迎的教程之一。然而，你可能会发现这个教程在 Xcode 5 下不适用了。最新版的 Xcode 促进了界面生成器（Interface Builder）中 Storyboard 的使用。Storyboard 再也不是一个开发项目时的候选，它是默认的了。这是为何那份教程不适用的缘由之一。

不管如何，咱们决定去彻底地为 Xcode 5 和 iOS 7 更新那份表格视图（Table View）的教程。咱们如今开始吧！

进入 UITableView 教程

首先，什么是 iPhone 应用里面的表格视图（Table View）？表格视图是 iOS 应用中一个基础的 UI（user interface） 元素。从某种意义上讲，大多数应用都利用表格视图去显示一系列的数据。最好的例子就是内置的电话（Phone）应用。你的联系人是在一个表格视图中展现的。另外一个例子是邮件（Mail）应用。它使用表格视图去显示你的邮件箱和邮件。不只仅是能够用于展现文字数据，表格视图也容许你展现图片形式的数据。YouTube 和 Airbnb 这两个应用就是最好的例子。

建立一个简单表格项目

带着表格视图的概念，让咱们动手去开发一个简单的应用。若是你真的想学习 iOS 编程，你不要只是阅读这个教程。打开你的 Xcode 开始写代码吧！这是学习编程最好的方式。

当你打开 Xcode 后，选择 "Single View application" 模板，建立一个新的项目。

点击 "Next" 继续。接着，填写全部建立 Xcode 项目时的必要选项。

项目名称（Product Name）：SimpleTable -- 这是你的应用的名字。
公司标识符（Company Identifier）：com.appcoda -- 这实际上写出另外一种形式的域名，若是你有本身的域名，你可使用本身的域名。不然，你可使用个人域名，或者干脆填上："edu.self"
类前缀（Class Prefix）：SimpleTable -- Xcode 使用类前缀去自动为类命名。在未来你或者能够选择本身的类前缀甚至干脆留空。但如今的这个项目，仍是保持简单，把它设为 "SimpleTable"。
设备系列（Device Family）：iPhone -- 只需为这个项目选择 "iPhone"。

接着点击 "Next" 下一步。Xcode 会询问你在那里保存这个 "SimpleTable" 项目。选择一个文件夹（例如 Desktop）去保存你的项目。保持版本控制（Source Control）的选项不选，点击 建立(Create) 继续。随便选一个文件夹保存你的项目。通过你确认以后，Xcode 会自动基于你的选择建立 "SimpleTable" 项目。完成后的画面会是下面那样：

设计视图

首先，咱们建立一个用户界面，而后添加表格视图。选择 Main.storyboard 转换到 Storyboard 界面。

SimpleTable 项目的 StoryBoard

在对象库（Object Library）中，选择"Table View" 对象，而后拖拽到视图中。

稍微挑战一下它的高度，这样它就不会掩盖住状态栏（status bar）。插入表格视图后，你的屏幕看起来应该会像下面那样。

第一次运行你的应用

在继续深刻以前，使用模拟器试着运行你的应用。点击 "Run" 按钮去构建你的应用，而后测试。
模拟器屏幕上看起来应该会是下面那样：

很简单是否是？你已经为你的应用设计了表格视图。然而，到如今为止，视图里面没有任何东西。下一步，咱们会写一些代码去添加表格数据。

增长表格数据

返回到项目导航，选择 "SimpleTableViewController.h"。在 "UIViewController" 后面附加 "<UITableViewDelegate, UITableViewDataSource>"

#import <UIKit/UIKit.h>

@interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@end

UITableViewDelegate 和 UITableViewDataSource 是 Objective-C 中的协议。基本上，若是要在表格视图中展现数据，咱们必须接纳定义在协议中的要求，实现全部必须实现的方法。

如今，咱们开始为应用写代码。选择 “SimpleTableViewController.m” 而后定义一个处理表格数据的实例变量。

@implementation SimpleTableViewController
{
    NSArray *recipes;
}

在 viewDidLoad: 方法中，添加下面的代码去声明 "recipes" 数组。咱们用一系列的菜谱（recipes）初始化数据。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Initialize table data
    recipes = [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];
}

最后，咱们必须增长两个 datasource 方法：tableView:numberOfRowsInSection 和 tableView:cellForRowAtIndexPath。这两个方法是 UITableViewDataSource 协议的一部分。第一个方法是用于通知表格视图在这个区段（section）中有多少行。因此咱们添加下面的代码。count: 方法只是返回 tableData 数据中条目的数量。

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

接着，咱们继续实现其余须要的方法。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    return cell;
}

cellForRowAtIndexPath: 方法会在表格每一行显示的时候被调用。下面描述了关于 UITableView 和 UITableDataSource 如何工做的概念，看完应该能更好地理解。

如今，点击 Run 按钮，测试你最后的程序。噢！！你看到的仍然是一个空的应用。它就像以前同样。

为何仍是空的呢？咱们早已经写了产生表格数据的代码，也实现了须要的方法。但为何表格视图没有像咱们预料的那样显示？

还要一件事要作。

链接 DataSource 和 Delegate

就像是教程最初的 "Hello World" 按钮，咱们必须为咱们建立的两个方法和表格视图之间创建一个链接。

回到 Main.storyboard，选择表格视图。按住你键盘上的 Control 键，点击表格视图，而后拖拽到 dock 上的 "Simple Table View Controller"。你的屏幕会像下面那样：

放开两个按钮，一个弹条(pop-up)会显示 dataSource 和 delegate。你能够再一次选择表格视图。在 Utility 区域上方，你能够在 Connection Inspector(最右的 tab) 看到项目中存在的链接。

测试你的应用

最后，能够测试你的应用了。点击 "Run" 按钮，而后让模拟器加载你的应用。

增长 Thumbnail 到你的表格视图

这个表格视图看起来太朴素了，对不？若是说给每一行加一张图呢？iOS SDK 能够很是容易让你作到这个。你只须要增长一行为每一行插入一个 thumbnail 的代码。
首先，下载示例图片。你也可使用本身的图片，但必须命名为 “creme_brulee.jpg”。在项目导航里，右击 "SimplyTable" 文件夹，而后选择 "Add Files to SimpleTable…"

选择你下载的的图片文件，在复选框（checkbox）中选择 "Copy items to destination group’s folder"。选择这个选项后，图片会被复制到项目文件夹下面。

如今，编辑 SimpleTableViewController.m 文件，把下面的那行代码添加到 tableView:cellForRowAtIndexPath 方法中，把它放到 "return cell" 以前。

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

编辑后，你的代码看起来应该是下面那样的：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];

    return cell;
}

表格视图的格带有一个展现图片的默认属性。上面那行的代码只是加载图片，而后展现到表格格子的图像区域中。如今，再次点 "Run" 按钮，你的 SimpleTable 应用应该会在每一行显示图片。

总结

其实建立一个表格视图很简单是否是？表格视图是 iOS 编程中最通用的元素之一。若是你阅读了这个教程，跟着咱们一块儿建立这个应用，你应该会对如何建立表格视图有基本的理解。我尽可能把这里的内容说得很简单。在实际中，表格的数据不会像上面那样直接存在代码里。通常来讲，它是从文件、数据库或者其余地方加载进来的。在后面的教程中，你会学习如何从一个文件中存储和加载表格数据。在进一步深刻以前，确保你能彻底明白表格视图是如何运做的。不然，你须要重读一次这个教程。

做为一个参考，你能够从这里下载上面的 Xcode 项目。

---

原文：Working with UITableView in Xcode 5 Using Storyboard
翻译：Segmentfault