自适应TableViewCell(XIB)

前言:前一文自适应TableViewCell(纯代码)介绍了如何使用纯代码方式实现tableViewCell自适应高度,那么本文就来介绍一下如何使用XIB+Autolayout的方式实现tableViewCell的自适应高度.先看一下效果图,和上篇文章介绍的效果图是一样的.

图1.gif

• 1 . 创建model类,添加数据源,并且保存在数组中.这个数据源我是写在了,plist文件当中,并且使用cocoaPods导入MJExtension进行数据转模型.

#pragma mark - 懒加载
- (NSArray *)dataSource {
    if (!_dataSource) {
        self.dataSource = [AdaptiveModel mj_objectArrayWithFilename:@"ModelList.plist"];
    }
    return _dataSource;
}

• 2 . 创建自定义的AdaptiveTableViewCell继承自UITableViewCell创建的时候勾选XIB, 接下来在XIB中添加子控件,并且给子控件添加约束.设置nameLabel的左边距和上边距是10, text_label距离nameLabel的上边距是10,距离contentView的左右边距都是10. 设置prctureImageView距text_Label的上边距是10,距contentView的左边距和下边距是10,并且设置宽高都是100;

图2.png

需要注意: 要设置text_Label的lines是0,否则不会自动换行.

图3.png

• 3 . 接下来要在viewController中注册自定义单元格,这个时候有2个地方需要注意,一是需要设置tableView的rowHeight为UITableViewAutomaticDimension, 这行代码的租用是设置tableView所有的cell是根据真实高度自动计算的(根据设置的约束), 另外就是需要设置tableView的预算高度.这两者缺一不可.这两行代码放在一起是就是使用了self-sizing技术,这个技术也是在iOS8以后才支持的.目前已经iOS10.1了,大可不必担心.

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
 
    self.tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
//    [self.tableView registerClass:[AdaptiveTableViewCell class] forCellReuseIdentifier:identifier];
    [self.tableView registerNib:[UINib nibWithNibName:@"AdaptiveTableViewCell" bundle:nil] forCellReuseIdentifier:@"AdaptiveCell"];
    
    // self-sizing(iOS8以后才支持)
    // 设置tableView所有的cell的真实高度是自动计算的(根据设置的约束)
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    // 设置tableView的估算高度
    self.tableView.estimatedRowHeight = 200;
    
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.view addSubview:self.tableView];
    
}

需要注意:tableView的估算高度,可以给一个随意的值,只要是大于0的就可以.建议给这个值给的稍微大一点,这里面牵扯到tableView性能优化的一些东西.

• 4 .配置单元格,给单元格上的控件赋值.

// 设置单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    AdaptiveTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"AdaptiveCell" forIndexPath:indexPath];
    // 传递数组模型
    cell.model = self.dataSource[indexPath.row];
    return cell;
}

• 5 . 到这一步我们就要思考一下,我们刚开始设置单元格上的控件的时候,图片给的是一个固定的高度100,但是有些数据中没有图片,那我们就可以把图片的高度设置成0,把图片距离下边框的间距也设置成0.否则,没有图片的那些单元格中,就会出现一片空白的区域.我们需要把图片的高度约束和下边距约束拉成属性,在model的setter方法中进行修改.
  
  

  图4.png

@interface AdaptiveTableViewCell ()

@property (weak, nonatomic) IBOutlet UILabel *nameLabel; // 姓名
@property (weak, nonatomic) IBOutlet UILabel *text_Label; // 正文
@property (weak, nonatomic) IBOutlet UIImageView *picthreView; // 图片

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureHeight; // 图片高度约束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureBottom; // 图片底部约束

@end

// 重写setter方法
- (void)setModel:(AdaptiveModel *)model {
    if (_model != model) {
        _model = model;
    }
    
    self.nameLabel.text = model.name;
    self.text_Label.text = model.text;
    
    if (model.picture) { // 有图片
        self.picthreView.hidden = NO;
        self.picthreView.image = [UIImage imageNamed:model.picture];
        self.pictureHeight.constant = 100;
        self.pictureBottom.constant = 10;
    } else { // 没有图片
        self.picthreView.hidden = YES;
        self.pictureHeight.constant = 0;
        self.pictureBottom.constant = 0;
    }
}

需要注意:在没有图片时候需要把图片的约束更改为0,在有图片的时候也一定要把约束更改回来,否则因为tableViewCell的循环引用,界面滑动的时候,会造成显示混乱.

总结:到这里我们就把自适应TableViewCell的功能实现了.对比来说,使用AutoLayout方式要比使用纯代码的方式更加简单一些.不需要再去计算控件的高度这些繁琐的步骤,只有几个注意事项需要多注意.避免不必要的错误.

• 1.要设置text_Label的line是0,否则不会自动换行.
• 2.要设置tableView所有的cell的真实高度是自动计算的(根据设置的约束) self.tableView.rowHeight = UITableViewAutomaticDimension;
  // 设置tableView的估算高度 self.tableView.estimatedRowHeight = 200;
• 3.在没有图片时候需要把图片的约束更改为0,在有图片的时候也一定要把约束更改回来,否则因为tableViewCell的循环引用,界面滑动的时候,会造成显示混乱.

另附本文gitHub地址

上一篇:自适应TableViewCell(纯代码)