首先，在iPhone App中的表視圖是什么？

?

表視圖（Table View) 是IOS Apps 中一個(gè)通用的UI元素。很多應(yīng)用程序在一定程度上，都有使用表視圖來顯示數(shù)據(jù)列表。最好的例子是內(nèi)置的iPhone應(yīng)用程序。你的聯(lián)系人顯示在表視圖中。另外一個(gè)例子是Mail應(yīng)用程序，它使用表視圖顯示你的郵箱和郵件。不僅可以用來顯示文本數(shù)據(jù)，表視圖也可以呈現(xiàn)圖像數(shù)據(jù)。內(nèi)置的Video和YouT ube應(yīng)用程序是這一用法的例子

?

1.創(chuàng)建simpleTable 項(xiàng)目

?

啟動(dòng)Xcode， 創(chuàng)建一個(gè)Single View application 的新項(xiàng)目

?

輸入Xcode項(xiàng)目所有必須的選項(xiàng)：

Product Name: SimpleTable

?

Company Identifier: com.appcode

?

Class Prefix: SimpleTable

?

Device Family: iPhone

?

Use Storyboards:[不選擇]

?

Use Automatic Reference Counting:[選擇]

?

Include Unit Test:[不選擇]

?

?

2.設(shè)計(jì)視圖

?

首先，我們將創(chuàng)建用戶界面，并添加表視圖。選擇SimpleTableViewController.xib文件，切換到Interface Builder界面。

?

在對(duì)象庫（Object Library）中，選擇Table View對(duì)象，并拖拽到視圖中。

?

?

3.第一次運(yùn)行你的應(yīng)用程序

在繼續(xù)之前，嘗試使用模擬器運(yùn)行你的應(yīng)用程序。點(diǎn)擊Run按鍵構(gòu)建你的App并進(jìn)行測(cè)試。

?

模擬器屏幕如下圖所示：

?

?

我們已經(jīng)設(shè)計(jì)好了表視圖，但是，現(xiàn)在它沒有包含任何數(shù)據(jù)。接著，我們將編寫代碼，添加表數(shù)據(jù)。

?

4.添加表數(shù)據(jù)

?

返回項(xiàng)目導(dǎo)航欄，選擇SimpleTableViewController.h 文件。 在UIViewController 之后，添加<UITableViewDelegate,UITableViewDataSource>。完成后代碼如下所示：

?

?

#import <UIKit/UIKit.h>

?

@interface SimpleTableViewController : UIViewController < UITableViewDelegate , UITableViewDataSource >

?

@end

?

?

在Object-C中，UITableViewDelegate和UITableViewDataSource稱為協(xié)議?；旧希瑸榱嗽诒硪晥D中顯示數(shù)據(jù)，我們必須遵守定義在協(xié)議中的要求，并實(shí)現(xiàn)所有要求的方法。

?

UITableViewDelegate 和 UITableViewDataSource

?

UITableView 是表視圖幕后的實(shí)際類，用來靈活處理不同的數(shù)據(jù)類型。你可以顯示國家列表或者聯(lián)系人姓名?；蛘呦癖臼纠粯樱覀儗⑹褂帽硪晥D程序菜譜列表。因此，你可以告訴UITableView需求顯示的數(shù)據(jù)列表呢？

?

UITableViewDataSource 是答案，它用來連接你的數(shù)據(jù)和表視圖。

?

UITableViewDataSource 協(xié)議定義了2個(gè)要求實(shí)現(xiàn)的的方法

?

（tableView:cellForRowAtIndexPath 和 tableView:numberOfRowsInSection)。通過實(shí)現(xiàn)這些方法，你告訴表視圖顯示多少行數(shù)據(jù)和每一行數(shù)據(jù)。

?

UITableViewDelegate 負(fù)責(zé)處理UITableView的表現(xiàn)。協(xié)議中可選方法讓你管理表行的高度，配置節(jié)點(diǎn)頭部和底部，對(duì)表單元重新排序等等。

?

接著，選擇SimpleTableViewController.m 文件，定義一個(gè)實(shí)例變量，存放數(shù)據(jù)。

?

@implementation SimpleTableViewController

{

NSArray * tableData;

}

?

在viewDidLoad方法中(Called after the controller's view is loaded into memory - 在控制器的視圖裝載到內(nèi)存中完成之后，調(diào)用該方法),添加如下代碼實(shí)例化 tableData 數(shù)組。我們初始化數(shù)組位菜譜離列表：

?

- ( void )viewDidLoad

{

? ? [ super viewDidLoad ];

? ? //Initialize table data

? ? tableData = [ NSArray arrayWithObjects : @"Egg Benedict" , @"Mushroom Risotto" , @"Full Breakfast" , @"Hamburger" , @"Ham and Egg sandwith" , @"Creme Brelee" , @"White Chcolate Dount" , @"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 ];

}

?

在Object-C中，NSArray 是創(chuàng)建和管理數(shù)組的類，你可以使用NSArray創(chuàng)建靜態(tài)數(shù)組，其容量是固定的。如果你需要?jiǎng)?chuàng)建動(dòng)態(tài)數(shù)組，則使用NSMutableArray代替。

?

NSArray提供了一組工廠方式來創(chuàng)建數(shù)組對(duì)象。在我們的代碼中，我們使用arrayWithObjects來實(shí)例化一個(gè)NSArray對(duì)象，并預(yù)先填充特定的元素(如Hamburger)。

?

最后，我們需要添加2個(gè)數(shù)據(jù)源方法：tableView:numberOfRowInSection 和 tableView:cellForRowAtIndexPath。這兩個(gè)方法是UITableViewDataSource協(xié)議的一部分。在配置UITableView時(shí)，需要強(qiáng)制實(shí)現(xiàn)這兩個(gè)方法。

?

第一個(gè)方法用來通知表視圖選擇了多少條數(shù)據(jù)行，因此添加如下代碼。count方法簡單返回tableData數(shù)組中元素個(gè)數(shù)。

?

- ( NSInteger )tableView:( UITableView *)tableView numberOfRowsInSection:( NSInteger )section

{

? ? return [ tableData count ];

}

?

接著，我們實(shí)現(xiàn)另外一個(gè)需要實(shí)現(xiàn)的方法:

?

- ( 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;

}

【一步一步學(xué)IOS5 】 創(chuàng)建一個(gè)簡單的表視圖(Table View)應(yīng)用程序