【ios學習記錄】- 通過nib檔案實現自訂表格視圖單元

【ios學習記錄】- 通過nib檔案實現自訂表格視圖單元

添加自訂表格視圖單元有兩種方法：一種方法是建立單元時在程式中添加子視圖，第二種方法是從分鏡或者nib檔案中載入它們，在這裡我們簡單採用第二種方法

一般來說，ios資料列表包含了兩部分：表視圖（分組表和無格式表）和表視圖單元。每個表視圖都是UITableView類的一個執行個體，用於顯示表資料的視圖對象；而每個可見行都是UITableViewCell類的一個執行個體，顯示表中的一行。如所示：

表視圖單元包含了三種樣式：映像，文字標籤和詳細文字標籤。而對於某種業務的要求（如右上要顯示標籤文字，右下顯示映像），預設的單元樣式不能滿足，此時我們可以對錶視圖單元進行自訂顯示。

添加自訂表格視圖單元有兩種方法：一種方法是建立單元時在程式中添加子視圖，第二種方法是從分鏡或者nib檔案中載入它們，在這裡我們簡單採用第二種方法，如下：

在開始之前，咱們有必要知道UITableView的兩個協議：UITableViewDelegate和UITableViewDataSource。表視圖從遵循UITableViewDelegate協議的對象中擷取配置資料，從遵循UITableViewDataSource協議的對象中獲得行資料。

總體關係圖：

主要流程：

1、 建立CustomCellTableView工程，選擇Single View Application。

2、 建立UITableViewCell的子類CustomCell
選擇File->New->File，然後選擇Cocoa Touch Class。

輸入“CustomCell”，繼承於UITableViewCell，勾選“Also create XIB file” ，按Next直至成功。

3、 建立表視圖單中繼資料檔案CustomCellData。

選擇File->New->File，先選擇Objective-C File建立CustomCellData.m檔案，然後再選擇Header File建立CustomCellData.h檔案。

在這裡，因為表視圖單元的資料是通過CustomCellData來儲存，顯示視圖是通過CustomCell，所以檔案組織形式還是採用資料（model）和表視圖單元視圖（View）分開。建立一個CustomCell Group檔案夾，然後再分別建立View檔案夾和Model檔案夾，用以分別歸納CustomCell和CustomCellData檔案。如所示。

4、 用介面構建器可視化布局CustomCell.xib，設定約束，介面如所示。

Identifier設為CustomCell。

Custom Class要確定為CustomCell。

按住Controll鍵，將輸出介面關聯至相關的標籤。

5、 開啟主分鏡main storyboard，串連tableview到ViewController.m

點擊ViewController，確保Custom Class為ViewController。

點擊TableView，按住control鍵串連輸出變數到View Controller。

這裡tableview的委託（delegate）有兩種設定方法，第一種是nib檔案中設定，按住controll鍵，分別把dataSource和delegate拉到tableview中；第二種是在代碼中設定，開啟ViewController.m，在viewDidLoad中輸入以下代碼：

self.tableView.dataSource = self;self.tableView.delegate = self;

6、 匯入圖片。

直接拖拉圖片檔案password.png到項目導覽列中，如所示。

7、 輸入核心代碼。

CustomCellData.m：用以儲存表視圖儲存格中要顯示對象的資料。

#import "CustomCellData.h"@implementation CustomCellData+ (instancetype)cellWithInfo:(NSString *)mainTitle                    subTitle:(NSString *)subTitle                   leftImage:(NSString *)leftImage                  rightImage:(NSString *)rightImage                        time:(NSString *)time{    CustomCellData *item = [[self alloc] init];    item.mainTitle = mainTitle;    item.subTitle = subTitle;    item.leftImage = leftImage;    item.rightImage = rightImage;    item.time = time;    return item;}@end

CustomCell：表視圖單元，繼承自UITableViewCell，表格中顯示的每一行。

#import "CustomCell.h"@implementation CustomCell/* 可重用cell單元 */+ (instancetype)cellWithTableView:(UITableView *)tableView {    static NSString *ID = @"CustomCell";    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];    if (cell == nil) {        cell = [[[NSBundle mainBundle]loadNibNamed:[[self class] description] owner:nil options:nil]lastObject];    }    return cell;}- (void)setItemData:(CustomCellData *)itemData{    _itemData = itemData;    [self setupData];}- (void)setupData{    self.leftImage.image = (_itemData.leftImage == nil ? nil : [UIImage imageNamed:_itemData.leftImage]);    self.rightImage.image = (_itemData.rightImage == nil ? nil : [UIImage imageNamed:_itemData.rightImage]);    self.mainTitle.text = _itemData.mainTitle;    self.mainTitle.font = [UIFont fontWithName:@"Helvetica" size:15.f];    self.SubTitle.textColor = [UIColor colorWithRed:((float)((0x800000 & 0xFF0000) >> 16))/255.0                                              green:((float)((0x008A00 & 0xFF00) >> 8))/255.0                                               blue:((float)(0x000087 & 0xFF))/255.0 alpha:1.0];    self.SubTitle.text = _itemData.subTitle;    self.SubTitle.font = [UIFont fontWithName:@"Helvetica" size:9.f];    self.timeLabel.text = _itemData.time;    self.timeLabel.font = [UIFont fontWithName:@"Helvetica" size:9.f];}@end

ViewController.h：實現UITableView協議。

@interface ViewController : UIViewController

ViewController.m：實現UITableViewDataSource和UITableViewDelegate協議方法，並在cellForRowAtIndexPath協議方法中調用自訂CustomCell。記得在ViewController.h中添加協議。

#pragma mark UITableViewDataSource/** * 每行表視圖儲存格顯示的內容資料設定 */- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    CustomCell *cell = nil;    CustomCellData *itemData = nil;    if (0 == indexPath.section) {        itemData = self.dataArray[indexPath.row];    }else if (1 == indexPath.section) {        itemData = self.saleDataArray[indexPath.row];    }    cell = [CustomCell cellWithTableView:tableView];    cell.itemData = itemData;    return cell;}- (void)setupData{    NSDate *dateNow = [NSDate date];    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];    [formatter setDateFormat : @"H:m"];    NSString *time = [formatter stringFromDate:dateNow];[self.dataArray addObject:[CustomCellData cellWithInfo:@"檔案傳輸助手" subTitle:@"想傳什麼儘管傳" leftImage:@"ic_sale_re" rightImage:@"password" time:time]];[self.dataArray addObject:[CustomCellData cellWithInfo:@"通訊錄" subTitle:@"你的專屬通訊錄" leftImage:@"ic_sale_re" rightImage:@"password" time:time]];[self.dataArray addObject:[CustomCellData cellWithInfo:@"訂閱號" subTitle:@"人人都是產品經理" leftImage:@"ic_sale_re" rightImage:@"password" time:time]];[self.saleDataArray addObject:[CustomCellData cellWithInfo:@"李雷" subTitle:@"北京大學附屬中學" leftImage:@"ic_sale_re" rightImage:@"password" time:time]];[self.saleDataArray addObject:[CustomCellData cellWithInfo:@"韓梅梅" subTitle:@"北京大學附屬中學" leftImage:@"ic_sale_re" rightImage:@"password" time:time]];}

運行程式，OK成功。詳情代碼請參考 自訂表格視圖單元。