iOS深刻學習（UITableView系列4：使用xib自定義cell）

能夠經過繼承UITableViewCell從新自定義cell，能夠像下面同樣經過代碼來自定義cell，可是手寫代碼老是很浪費時間，

//CustomTableViewCell.h文件
@interface CustomTableViewCell:UITableViewCell
@property (nonatomic, strong) UIImageView *headImageView;
@property (nonatomic, strong) UILabel *nameLabel;
@property (nonatomic, strong) UILabel *textLabel;
@end

//CustomTableViewCell.m文件
@implementation CustomTableViewCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
        _headImageView = [[UIImageView alloc] init];
        [self.contentView addSubView:_headImageView];
        _nameLabel = [[UILabel alloc] init];
        /*省略Label的屬性設置*/
        [self.contentView addSubView:_nameLabel];
        _textLabel = [[UILable alloc] init];
        /*省略Label的屬性設置*/
        [self.contentView addSubView:_textLabel];
    }
    return self;
}
- (void)layoutSubviews
{
    //省略佈局代碼
    self.headImageView.frame = CGRectMake(.....);
    self.nameLabel.frame = CGRectMake(.....);
    self.textLabel.frame = CGRectMake(....);
    [super layoutSubviews];
}
@end

上面CustomTableViewCell的.h/.m文件中，我用了大段的代碼來給自定義的cell佈局，真的挺麻煩。而後在ViewController中使用的時候是這樣的，

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleIdentify = @"SimpleIdentify";
    CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleIdentify];
    if(cell == nil)
    {
        cell = [[CustomTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleIdentify];
    }
    //_person就是UITableView的數據源，它裏面存放的是Person數據模型，
    //Person包括頭像headStr、name、speechText等屬性
    Person *person = [_persons objectAtIndex:indexPath.row];
    cell.headImage.image = [UIImage imageNamed:person.headStr];
    cell.nameLabel.text = person.name;
    cell.textLabel.text = person.speechText;
    return cell;
}

上面就是使用代碼自定義cell所要作的工做，咱們當cell顯示沒有達到預期的時候咱們還要回頭改變其中UI控件的座標，或者更改控件屬性，固然這只是要多花點時間，最終仍是能夠實現的。

可是。。。咱們仍是要試着提升本身的開發效率，使用愈來愈成熟的xib技術，能夠很大地提升開發效率，固然也是要勤加練習，熟能生巧。

開始閱讀下面的內容以前，我假設你已經看過我以前的博客-UITableView系列1，那篇博客是本篇博客的基礎；若是你沒有看過，那就看看吧，而後接着看本篇博客。

因此下面開始學習吧！Come on！

按照下面的步驟開始操做，

（1）新建一個空的（Empty）xib文件，File->New，在面板中選擇User Interface->Empty，以下圖，

將文件命名爲CustomTableViewCell，表示自定義的cell意思。

（2）拖動一個TableViewCell到空的（Empty）xib文件中，以下圖，

（3）修改CustomTableViewCell的高度爲90，經過屬性面板來設置，以下圖，

（4）拖一個UIIMageView到CustomTableViewCell的xib文件，設置該UIImageView控件的tag值爲10；再拖兩個UILabel到xib文件，設置tag分別爲1和2，其佈局方式以下圖，

上面的幾個步驟就進行了CustomTableViewCell的自定義，下面的步驟就是使用這個經過xib文件進行自定義的cell。

（5）選中CustomTableViewCell，點擊左上角的File's Owner，以下圖，

選中這個xib文件中的File's Owner是爲了設置CustomTableViewCell的文件全部者，接着看下一步。

（6）在右側的面板，選擇「Show the Identify Inpector」選項，以下圖

這時候咱們發現CustomTableViewCell的File's Owner爲NSObject，由於我要在個人RootViewController中使用，因此我將"NSObject"替換爲"RootViewController"，代表這個cell的全部者是RootViewController。（PS：你須要將此處的NSObject改成你使用該CustomTableViewCell的ViewController文件名。）

（7）在使用該CustomTableViewCell的ViewController的頭文件中寫下以下代碼，

@interface RootViewController:UIViewController
{

}
@property (nonatomic, strong) IBOutlet UITableViewCell *customCell;
@end

有人會奇怪這段話是什麼意思，接着下面的步驟，你就會明白。

（8）在CustomTableViewCell.xib文件中，拖動File's Owner指向TableViewCell，以下圖，

（9）在彈出的界面中選擇customCell選項，以下圖，

這就是爲何第（7）步驟要在RootViewController.h文件中聲明一個IBOutlet關鍵字修飾的customCell變量的緣由了。

（10）新建一個數據模型文件Person，繼承自NSObject，其代碼以下，

//Person.h文件
@interface Person : NSObject
@property (nonatomic, strong) NSString *name;
@property (nonatomic, strong) NSString *headStr;
@property (nonatomic, strong) NSString *speechText;
@end
//Person.m文件
#import "Person.h"

@implementation Person

@end

之因此叫它模型文件，是由於該文件中的屬性與CustomTableViewCell上面的控件所需的內容一致，以MVC的視角來看Person就是M（Model），CustomTableViewCell就是V（View），而RootViewController就是C（Controller）。

（11）在RootViewController中初始化TableView數據源_persons，代碼以下，

@interface RootViewController ()<UITableViewDelegate,UITableViewDataSource>
{
    NSArray *_persons;
}

@end

@implementation RootViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    Person *p0 = [[Person alloc] init];
    p0.name = @"路飛";
    p0.headStr = @"person0";
    p0.speechText = @"我要當海賊王！";

    Person *p1 = [[Person alloc] init];
    p1.name = @"卓洛";
    p1.headStr = @"person1";
    p1.speechText = @"受盡磨難而不折，此乃修羅之道！";
    
    Person *p2 = [[Person alloc] init];
    p2.name = @"羅賓";
    p2.headStr = @"person2";
    p2.speechText = @"我要活下去，把我帶向大海吧！";
    
    Person *p3 = [[Person alloc] init];
    p3.name = @"娜美";
    p3.headStr = @"person3";
    p3.speechText = @"幫幫我，路飛！";
    
    _persons = [NSArray arrayWithObjects:p0,p1,p2,p3, nil];
}
@end

由於我是海賊迷，因此找了路飛、卓洛、娜美、羅賓的圖片當作頭像，你能夠到網上down幾張，更名爲person0.png、person1.png、person2.png、person3.png。

（12）在-tableView:cellForRowAtIndexPath:中使用CustomTableViewCell.xib建立cell，代碼以下，

#pragma mark - UITableView methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [_persons count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleIdentify = @"SimpleIdentify";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleIdentify];
    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomTableViewCell" owner:self options:nil];
    if ([nib count]>0)
    {
        self.customCell = [nib objectAtIndex:0];
        cell = self.customCell;
    }
    //獲取數據源中_person數組中的元素，對應每個cell
    Person *person = [_persons objectAtIndex:indexPath.row];
    //經過tag值來獲取UIImageView和UILabel
    UIImageView *headImageView = (UIImageView *)[cell.contentView viewWithTag:0];
    UILabel *nameLabel = (UILabel *)[cell.contentView viewWithTag:1];
    UILabel *textLabel = (UILabel *)[cell.contentView viewWithTag:2];
    headImageView.image = [UIImage imageNamed:person.headStr];
    nameLabel.text = person.name;
    textLabel.text = person.speechText;
    
    return cell;
}

最終的效果圖以下，

總結：上面的步驟看起來複雜，可是當你習慣xib來編程的時候，使用鼠標拖拉空間，微調界面，那種感受就像本身不是純粹的程序員，仍是一個設計師。

我把源代碼放到了Github上面，有興趣的朋友能夠去下載看看。或者在Mac終端，輸入git clone https://github.com/pythonhater/TableViewSamples.git，便可得到源代碼。