iOS学习31之UITableVIewCell自定义

1. 自定义Cell

　1> 为什么要自定义Cell

• UITableView 中系统的Cell共提供了四种默认样式,  分别是:

　　　　UITableViewCellStyleDefault

　　　　UITableViewCellStyleValue1

　　　　UITableViewCellStyleValue2　　

　　　　UITableViewCellStyleSubtitle

　　但是在实际使用过程中, Cell样式的布局上千差万别, 因此我们需要自定义Cell

• 在前期我们学过自定义视图, 即创建一个类继承于 UIView 或者 其他的视图, 在自定义类中创建其子视图, 这样就会形成一个新的自定义视图。

• 系统提供的cell满足不了复杂的样式,因此: 定义Cell和自定义视图一样,自己创建一种符合我们需求的Cell并使用这个Cell。

　2> 自定义Cell的步骤

• 创建一个类继承于 UITableViewCell

• 实现 UITableViewCell 的初始化方法:

 // 初始化
 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
     if (self) {
         //初始化子视图
         [self initLayout];
     }
     return self;
 }

 //初始化子视图布局方法
 - (void)initLayout {

     //1.头像
     self.headerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(, , , )];

     self.headerImageView.layer.masksToBounds = YES;

     self.headerImageView.layer.cornerRadius = CGRectGetWidth(self.headerImageView.frame) / ;

     // cell提供一个contactVIew属性，专门用来自定义cell，防止在cell布局的时候发生布局混乱，如果是自定义cell，记得将子控件添加到contactVIew上
     [self.contentView addSubview:self.headerImageView];

     //2.姓名
     self.nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(self.headerImageView.frame) + , CGRectGetMinY(self.headerImageView.frame), , )];

     [self.contentView addSubview:self.nameLabel];

     //3.电话号码
     self.phoneLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.nameLabel.frame), CGRectGetMaxY(self.nameLabel.frame) + , , )];

     [self.contentView addSubview:self.phoneLabel];
 }

contentView 是 Cell 提供一个属性，专门用来自定义 Cell ，防止在 Cell 布局的时候发生布局混乱，如果是自定义 Cell，记得将子控件添加到 contactVIew 上

效果图:

• 确保所有的你想添加的子视图都在自定义 Cell 的初始化方法中创建, 由于 UITableView 的重用机制, 一个 Cell 在第一次创建成功并用于下一次显示的时候,不会再走初始化方法, 这样可以避免子视图的重复创建。

• 在 Cell 的子视图创建成功后,将子视图设置为属性,类似于 UITableViewCell 所自带的 textLabel 和 detailTextLabel 属性。便于在 UITableView 的协议中给自定义视图赋值。

2. 多种Cell混合使用

　1> 概述

　　在 TableView 中不仅仅只显示一种 Cell , 多种 Cell 可以并存

　2> 使用场景

　　一个重用标识符只能针对于一种 Cell 样式, 不同的 Cell 需要基于不同的重用标识符来进行区分, 重用标识符的区分需要根据不同的情况来划分, 如:

• model 属性划分(不同的数据内容,比如一个数据中有 type 字段, 为1代表图片类型, 为0代表文字类型)

 Model *model = [self.tableArray objectAtIndex:indexPath.row];
 //根据model属性划分
 if (model.type == ) {
     FirstTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:firstIdentify];
     return cell;
 }
 if (model.type == ) {
     SecondTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:secondIdentify];
     return cell;
 }

• 固定的行显示的 Cell 类型不一样

 // 第一行显示第一种Cell
 if (indexPath.row == ) {
     FirstTableViewCell *cell = [tableView
                                 dequeueReusableCellWithIdentifier:firstIdentify];
     return cell;
 }
 // 第二行显示第二种Cell
 if (indexPath.row == ) {
     SecondTableViewCell *cell = [tableView
                                  dequeueReusableCellWithIdentifier:secondIdentify];
     return cell;
 }

3. Cell自适应高度

　1> 自适应高度的两种应用

　　① 文本自适应高度:根据文本内容设定Label高度

　　　第一步: 修改 Label 的高度(在 - (void)layoutSubView 方法中 )

 - (void)layoutSubviews {

     // 1. 获取文本高度
     CGFloat textHeight = [Tool textHeightWithText:self.myLabel.text font:[UIFont systemFontOfSize:]];
     // 2.修改label的frame
     self.myLabel.frame = CGRectMake(, , self.bounds.size.width, textHeight);
 }　　　　

　　　获取文本高度的方法(一般封装在工具类中)

 // 计算文本高度
 + (CGFloat)textHeightWithText:(NSString *)text font:(UIFont *)font {

     // iOS7.0中求文本高度的方法，返回一个CGRect的高度

     // 第一个参数
     CGSize size = CGSizeMake([UIScreen mainScreen].bounds.size.width, );

     // 第二个参数：设置以行高为单位
     CGRect rect = [text boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : font} context:nil];

     return rect.size.height;
 }

　　第二步:设置 Cell 的高度

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

     CGFloat textHeight = [Tool textHeightWithText:self.myModel.textString font:[UIFont systemFontOfSize:]];

     return textHeight;
 }

　  ② 图片自适应高度:根据图片宽度进行等比例缩放

　　第一步：修改imageView的高度

 - (void)layoutSubviews {
     // 1.获取图片的高度
     CGFloat imageH = [Tool imageHeightWithImage:self.myImageView.image];
     // 2.修改imageView的高度
     self.myImageView.frame = CGRectMake(, textHeight, [UIScreen mainScreen].bounds.size.width, imageH);
 }

　　获取图片高度的方法(一般封装在工具类中)

 + (CGFloat)imageHeightWithImage:(UIImage *)image {

     // 获取图片的宽度和高度
     CGFloat width = image.size.width;
     CGFloat height = image.size.height;
     // 计算图片高度
     float scile = height / width;
     float screenH = [UIScreen mainScreen].bounds.size.width;

     return  scile * screenH;
 }

　　第二步:设置 Cell 的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    CGFloat imageHeight = [Tool imageHeightWithImage:self.myModel.image];

    return imageHeight;
}

　　在上面 获取图片高度的方法 中存在一个 bug , 当计算图片高度的数据类型为CGFloat时, 对于某些图片就会出现程序崩溃

　　错误代码:

 + (CGFloat)imageHeightWithImage:(UIImage *)image {

     // 获取图片的宽度和高度
     CGFloat width = image.size.width;
     CGFloat height = image.size.height;
     // 计算图片高度
     CGFloat scile = height / width;
     CGFloat screenH = [UIScreen mainScreen].bounds.size.width;

     return  scile * screenH;
 }

　　错误信息:

　　③ 两种使用同时出现

　　　其他部分全部相同,处理在第二步设置Cell的高度, 代码如下:

 // 设置cell的高度
 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
     // 得到文字自适应高度
     CGFloat textHeight = [Tool textHeightWithText:self.myModel.textString font:[UIFont systemFontOfSize:]];
     // 得到图片自适应高度
     CGFloat imageHeight = [Tool imageHeightWithImage:self.myModel.image];
     // 返回两者的和
     return textHeight + imageHeight;
 }