【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<UITableViewDataSource,UITableViewDelegate>

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成功。详情代码请参考 自定义表视图单元。