前言:前一文自适应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地址
