UITableView 的資料設定方式

 

UITableView 是 iOS 中，非常重要的使用者介面 ，仔細觀察 iOS 的應用程式，不然發現絕大部份的應用程式都會用上 UITableview，它的特性就是可以一次瀏覽所有的項目，並且可以用階層的方式顯示項目的細節。下面將從使用 Master-Detail Application 專案樣板開始，製作出一個簡單的 UITableView 的瀏覽介面，包含項目的設定與它的細節。

Master-Detail Application

Master-Detail Application 是 iOS SDK 所提供的專案樣板之一，它的功能就是建立一個主從式或是階層式的互動應用程式，如果在 iPhone 上呈現的就是 UITableView，而在 iPAD 上則是左右攔或是彈出式的 UITableView（Split View），對於想要製作純表單互動的應用程式來說，使用 Master-Detail Application 樣板開始你的專案，是個不錯的選擇，但是如果有其他考量，也可以參考以下做法製作類似 Master-Detail Application 樣板的環境。

首先在 Storyboard 上放置一個 Navigation Controller，它的作用是處理畫面複雜的階層關係，讓使用清楚地知道目前畫面所在的位置，與它的上下層關係。接下來我們將刪除畫面上的 Root View Controller 並替換成 Table View Controller，使用右鍵拖曳連線的方式，將 Navigation Controller 與 Table View Controller 建立關係（Relationship - RootViewController），如下圖。

將兩個 View Controller 建立關係

完成之後 Table View Controller 上方就會出現 Navigation Bar，接下在 Storyboard 放置一個 View Controller，來顯示由 Table View 所選擇的項目細節，同樣將 Table View Controller 與剛剛放置的 View Controller 建立關係，在 Segues Style 的部分選擇 Push，如下圖。

Segues Style 的部分選擇 Push

最後要替這兩個我們所放置的 View Controller（Table 與 View）產生 Class  好實作它們的操作，你可以在專案新增檔案 UIViewController subclass 的項目中找到彼此對應的類別，關於更多的設定細節，可以參考使用 Storyboard Segue 實作 UIViewController 的切換（上）與使用 Storyboard Segue 實作 UIViewController 的切換（下）一文來作設定。

Table View 中顯示動態內容（Master）

在 Table View 中的資料內容可以分成靜態與動態兩種，如果你是使用 Master-Detail Application 樣板開始，你會發現在表格從已經替你填好了一筆靜態資料（Detail），你可以直接在 Storyboard 上編輯你的靜態資料，但這意味著你將無法透過程是執行的方式來改變這些資料的內容，如果要採用動態的方式，必須把 Table View 的 Content 屬性改成 Dynamic Prototypes。

將Table View 的 Content 屬性改成 Dynamic Prototypes

好了，現在我們可以開始產生動態資料了，首先來到 Table View Controller 對應的 MasterViewController class 裡，新增一個存放資料的陣列 roleArray。

@property (strong)NSArray *roleArray;

接著在 viewDidLoad 的方法函式內初始化這個陣列、設定其資料內容，並同時設定 Navigation Bar 的標題文字。

- (void)viewDidLoad {
    [super viewDidLoad];

    roleArray = [[NSArray alloc] initWithObjects:@"野蠻人", @"法師", @"弓箭手", @"盜賊", @"德魯伊", @"騎士", nil];
    [self setTitle:@"LEGO Heroica"];
}

接下來使用內建的方法函式來設定顯示資料量的數目，顯示的數目通常會與資料陣列的長度相同，但是切記如果顯示資料量的數目大於陣列的長度，很有可能在操作時因為錯誤的 Index 導致程式 crash。

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

最後則是使用另一個內建方法函式設定每筆資料的內容，每筆資料的內容理應與陣列的內容相同，此方法函式會依照上述設定的資料量數目執行數次，每次都會回傳一個表格欄位。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    //製作可重複利用的表格欄位Cell
    static NSString *CellIdentifier = @"CellIdentifier";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    //設定欄位的內容與類型
    cell.textLabel.text = [roleArray objectAtIndex:indexPath.row];
    cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
    return cell;
}

檢視上述程式碼，其中包含一個可以重複利用表格欄位 Cell 的 程式碼區段，它會使用reuse 標籤來查詢目前是否有可用的表格欄位，如果沒有才會去建立新的 Cell 實體，此目的是為了節省記憶體資源的浪費，Table View 不會每次繪製表格欄位時就產生一個新的 Cell 實體，相對的畫面上也放不下過多的表格欄位，當使用者在滑動檢視這些欄位時，其實可以使用滑出畫面的表格欄位來取代滑入畫面的表格欄位。

使用 Master-Detail Application 樣板的讀者，請記得在 Storyboard 上設定 Table View Cell 的 Identifier 標籤供 reuse 來使用，否則編譯器會出現警告提示。

在 Storyboard 中替 Table View Cell 加上 reuse 的標簽

兩個 View Controller 之間的參數傳遞（Detail）

如果你是使用 Master-Detail Application 樣板，那麼到這裡為止應該已經可以繪製出動態的表格項目，並且在點擊項目後可以切換到另一個顯示項目細節的畫面，接下來就是設置項目的細部資訊（圖片或是 Title 等），使每個項目點擊進來之後都可以檢視其細節。你可以想像成在點擊表格欄位並取得該欄位的 Index之後，透過此 Index 從陣列中取得物件（可能只是一個值、也可能是包含許多參數的物件，全看當初陣列的設計），將物件整個傳遞給  DetailViewController class，讓它做分析、配置整個版面。

首先在 MasterViewController class 裡 import DetailViewController.h，方便我們之後透過 segue 使用 DetailViewController class 裡的方法函式。

#import "DetailViewController.h"
接著使下列內建方法函式來幫助我們傳遞參數。
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {

    //利用index取得陣列內的物件
    NSIndexPath *path = [self.tableView indexPathForSelectedRow];
    NSString *roleName = [roleArray objectAtIndex:path.row];

    //使用segue將物件傳給Detail View Controller class
    [segue.destinationViewController setDetailItem:roleName];
}

上述程式碼只有在 Table View Controller（Master）與 View Controller（Detail）之間是透過 segue 做連結時才有效。

最後來到 DetailViewController class 中，編輯方法函式 configureView 來配置你的介面環境，你所需要的資訊剛剛都已經傳至 detailItem 裡，現在，只要利用它就可以完成介面的配置了。

- (void)configureView {
    // Update the user interface for the detail item.
    if (self.detailItem) {

    //設定Navigation Bar的title
    [self setTitle:self.detailItem];

    //設定圖片
    UIImage *roleImage = [UIImage imageNamed:[NSString stringWithFormat:@"%@.png",self.detailItem]];
    [self.roleImage setImage:roleImage];
    }
}


其他的參數傳遞方式

如果你的兩個 View Controller 之間並沒有透過 segue 來做連結，就可以使用這種傳統的方式，同樣你必須先在 MasterViewController class 裡 import DetailViewController.h，接著透過一個 Table View 內建的方法函式 tableView:didSelectRowAtIndexPath:，來完成參數的傳遞。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    //透過標簽取得目標實體
    MLDetailViewController *detailView = [self.storyboard instantiateViewControllerWithIdentifier:@"Detail"];

    //傳遞參數
    [detailView setDetailItem:[roleArray objectAtIndex:indexPath.row]];

    //切換畫面
    [self.navigationController pushViewController:detailView animated:YES];
}

上述程式碼中，由於有透過 Identifier 標籤來與 Storyboard 上的 View Controller 做連結，所以必須回到 Storyboard 上，將 View Controller 的 Identifier 標籤設定成與上述程式碼相同的 Detail 標籤才行。

設置 View Controller 的 Identifier 標籤