iOS開發那些事--簡單表視圖

表視圖是iOS開發中使用最頻繁的視圖，咱們通常都會選擇以表的形式來展示數據，好比通信錄、頻道列表等。表視圖分段、分組、索引等功能使咱們所展 示的數據看起來更規整更有調理，更使人興奮的是表視圖還能夠利用細節展現等功能多層次的展現數據，正所謂一表勝千言。 不過，相較於其它控件表視圖的使用比較複雜，可是對比於表視圖各類靈活多變的功能，咱們在使用上花費的努力仍是至關值得的。

 

簡單表視圖

表視圖的形式靈活多變，本着由淺入深的原則，咱們先從簡單表視圖開始學習。本節講的簡單表視圖是動態表，（iOS 5以前所有是動態表沒有動態表和靜態表區別）。

建立簡單表視圖

在iOS 5以後咱們可使用xib或者故事板技術建立表視圖，要顯示的是一個最基本的表，咱們只需實現UITableViewDataSource協議中必需要實 現的方法便可，分別是tableView:numberOfRowsInSection:和 tableView:cellForRowAtIndexPath:就能夠了。：

構造方法initWithFrame:style:是在實例化表視圖的時候調用，若是採用xib或故事板來設計表視圖，那麼表視圖的建立是在實例化 表視圖控制器的時候完成的，表視圖顯示的時候會發出tableView:numberOfRowsInSection:消息詢問當前節中的行數，表視圖單 元格顯示的時候會發出tableView:cellForRowAtIndexPath:消息爲單元格提供顯示數據。

咱們建立一個簡單表視圖，單元格使用默認樣式，有圖標和主標題，顯示的是世界盃球隊的信息。

 

使用「Single View Application」模板建立一個工程，工程名爲「SimpleTable」，打開IB設計畫面，在「View Controller Scene」選中「View Controller」刪除控制器，而後從控件庫中拖拽一個「Table View Controller」到設計畫面。

 

將h文件中ViewController的父類從原來的UIViewController修改成UITableViewController。

在IB設計畫面左側的Scene列表中選擇「Table View Controller Scene」 → 「Table View Controller」， 打開表視圖控制器的標識檢查器，在Class選項裏選擇「ViewController」，這是咱們本身的編寫視圖控制器。

而後在Scene列表中選擇「Table View Controller Scene」 → 「Table View Controller」 → 「Table View」， 打開表視圖的屬性檢查器。Content下有兩個選項「Dynamic Prototypes」和「Static Cells」，這兩個選項只有在故事板中才有。「Dynamic Prototypes」是構建「動態表」

若是經過代碼來實現單元格的建立，「Prototype Cells」項目要設爲0，代碼實現的模式代碼以下：

 

static NSString *CellIdentifier = @」CellIdentifier」;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

}

Identifier是可重用單元格標識符，這個可重用單元格與Collection視圖中的可重用單元格概念同樣。首先，在表視圖中查找是否有可 以重用的單元格，若是沒有就經過initWithStyle: reuseIdentifier:構造方法建立一個單元格對象。

若是要利用故事板設計單元格，要選擇「Table View Controller Scene」 → 「Table View Controller」 → 「Table View」 → 「Table View Cell」，打開單元格的屬性檢查器，Style下有不少選項， Identifier是指可重用單元格標識符。

 

這樣操做之後在代碼部分就不須要實例化單元格了，咱們直接經過設定的Identifier取得單元格的實例，以此達到重用單元格的目的。

 

static NSString *CellIdentifier = @」CellIdentifier」;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

    }

咱們須要將「team.plist」和「球隊圖片」添加到工程中，ViewController.h文件的代碼以下：

 

#import <UIKit/UIKit.h>

@interface ViewController : UITableViewController

@property (nonatomic, strong) NSArray *listTeams;

@end

須要將ViewController的父類修改成UITableViewController。還定義NSArray*類型的屬性 listTeams，listTeams用來裝載從文件中讀取的數據。讀取屬性列表文件team.plist的操做是在viewDidLoad方法中實現 的

 

ViewController.m文件的viewDidLoad方法代碼以下：

 

- (void)viewDidLoad

{

[super viewDidLoad];

NSBundle *bundle = [NSBundle mainBundle];

NSString *plistPath = [bundle pathForResource:@"team" ofType:@"plist"];

//獲取屬性列表文件中的所有數據

self.listTeams = [[NSArray alloc] initWithContentsOfFile:plistPath];

}

咱們再看看UITableViewDataSource協議方法，代碼以下：

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

{

return [self.listTeams count];

}

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

{

static NSString *CellIdentifier = @」CellIdentifier」;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

}

NSUInteger row = [indexPath row];

NSDictionary *rowDict = [self.listFilterTeams objectAtIndex:row];

cell.textLabel.text =  [rowDict objectForKey:@"name"];

NSString *p_w_picpathPath = [rowDict objectForKey:@"p_w_picpath"];

p_w_picpathPath = [p_w_picpathPath stringByAppendingString:@".png"];

cell.p_w_picpathView.p_w_picpath = [UIImage p_w_picpathNamed:p_w_picpathPath];

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

return cell;

}

因爲當前的這個表事實上只有一個節，所以不須要對節進行區分，在tableView: numberOfRowsInSection:方法中直接返回listTeams屬性的長度便可。 tableView:cellForRowAtIndexPath:方法中NSIndexPath參數的row方法能夠得到當前的單元格行索引。 cell.accessoryType屬性是設置擴展視圖類型。

咱們能夠將單元格的樣式UITableViewCellStyleDefault替換爲其它三種，來體驗一下其它的三種單元格樣式的效果。

簡單表案例運行結果