iOS開發之自定義UITableView

在上一篇中我記錄的是iOS中的UITableView的使用，不過隻有很簡單的在單元格中顯示圖檔和一個标簽，這一篇記錄的實作一個稍微複雜一點的UITableView，單元格裡面的内容由我們自定義，而不是固定的一個圖檔一個标簽，程式運作的效果如下：

由于是用的iOS模拟器，是以UITableView中的分割線沒有顯示出來，如果用真機測試或者将模拟器放大的話，是可以顯示分割線的。下面就一步步記錄下實作這個自定義UITableView的過程：

1、打開Xcode建立一個項目，命名為：CustomTableView，選擇Single View Application；

2、在Main.storyboard中拖入TableView控件，然後在TableView控件中拖入一個TableViewCell控件;

3、選中Main.storyboard中的TableViewCell，然後在Xcode右邊的Size inspector中将TableViewCell的高度設定為78，如下圖所示：

上圖中需要注意的是，隻有勾選了Custom複選框後，才能設定Row Height的高度。

4、向TableViewCell中拖入圖檔、标簽、按鈕等控件，如下圖所示：

這裡将TableViewCell中的Image大小設定為60*60，可以選中TableViewCell中的Image後，在Xcode右側的Size inspector視圖中設定。

5、設計好了TableView中的單元格後，需要建立一個類代表這個單元格，在項目中建立一個類CustomTableViewCell繼承自UITableViewCell，然後選中Main.storyboard中的單元格，在右邊的Identity inspector視圖中，将單元格的Class設定為我們建立的CustomTableViewCell，接着打開xcode的Assistant editor視圖，Xcode中間部分就分成了兩個視圖在左邊的視圖打開Main.storyboard，在右邊打開我們建立的CustomTableViewCell.h檔案，然後使用滑鼠右鍵，将TableViewCell中的控件拖拽到CustomTableViewCell.h檔案中，這樣就在CustomTableViewCell中建立了與單元格中的控件對應的成員變量，如下圖所示：

6、給單元格設定一個字元串類型的辨別符，選中Main.storyboard中的單元格，然後打開右側的Attributes inspector視圖，在Identifier屬性中填入MyTableViewCell，如下圖所示：

這裡的辨別符是我們任意指定的一個字元串，在後面的代碼中還要用到，作用是唯一辨別這個單元格

7、編寫代碼給TableView加上測試資料。

在ViewController.h檔案中，我們需要實作UITableViewDelegate和UITableViewDataSource協定，如下代碼所示：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

#pragma mark 裝載UITableView中的測試資料，顯示在單元格中的标題
@property (strong, nonatomic) NSMutableArray *titles;

#pragma mark 裝載UITableView中的測試資料，顯示在單元格中的子标題
@property (strong, nonatomic) NSMutableArray *subtitles;

@end
           

然後在ViewController.m檔案中，需要生成測試資料，并實作協定中的某些方法，ViewController.m檔案的代碼如下：

#import "ViewController.h"
#import "CustomTableViewCell.h"

@interface ViewController ()

@end

@implementation ViewController

static NSString *identifier = @"MyTableViewCell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // 加載測試資料
    [self loadData];
}

#pragma mark 加載測試資料
- (void)loadData {
    //初始化兩個數組
    self.titles = [NSMutableArray array];
    self.subtitles = [NSMutableArray array];
    //給數組添加20條測試資料，用于顯示到TableView上
    for(int i = 0; i < 20; i++) {
        [self.titles addObject:[NSString stringWithFormat:@"This is title %i", i]];
        [self.subtitles addObject:[NSString stringWithFormat:@"this is subtitle %i", i]];
    }
    //給UITableView設定代理和資料源
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
}

#pragma mark 該方法傳回的是UITableView的行數
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.titles count];
}

#pragma mark 該方法傳回某一行的單元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    CustomTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
    //在這裡處理單元格中的圖檔和标簽等控件
    cell.cellImage.image = [UIImage imageNamed:@"avatar.jpg"];
    cell.cellTitle.text = [self.titles objectAtIndex:indexPath.row];
    cell.cellSubtitle.text = [self.subtitles objectAtIndex:indexPath.row];
    return cell;
}

#pragma mark 該方法傳回單元格的高度，需要跟我們在Size inspector視圖中設定的高度保持一緻
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 78;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
           

上面的代碼注釋寫得比較清楚了，到這裡就可以運作程式了。

-----end-----