當我們最開始啟動 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"];
編輯後，你的代碼看起來應該是下面那樣的：
cell.imageView.image = [UIImage imageNamed:@"creme_brelee.jpg"];
表格視圖的格帶有一個展示圖檔的預設屬性。上面那行的代碼隻是加載圖檔，然後展示到表格格子的圖像區域中。現在，再次點 "Run" 按鈕，你的 SimpleTable 應用應該會在每一行顯示圖檔。
總結
其實建立一個表格視圖很簡單是不是？表格視圖是 iOS 程式設計中最通用的元素之一。如果你閱讀了這個教程，跟着我們一起建立這個應用，你應該會對如何建立表格視圖有基本的了解。我盡量把這裡的内容說得很簡單。在實際中，表格的資料不會像上面那樣直接存在代碼裡。一般來說，它是從檔案、資料庫或者其他地方加載進來的。在後面的教程中，你會學習如何從一個檔案中存儲和加載表格資料。在進一步深入之前，確定你能完全明白表格視圖是如何運作的。否則，你需要重讀一次這個教程。
作為一個參考，你可以從這裡下載下傳上面的 Xcode 項目。