在 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