在iOS
UI
开发过程中,UITableView
的动态Cell
高度一直都是个问题。实现这样的需求,实现方式有很多种,只是实现起来复杂程度和性能的区别。
在不考虑性能的情况下,tableView
动态Cell
高度,可以采取估算高度的方式。如果通过估算高度的方式实现的话,无论是纯代码还是Interface Builder
,都只需要两行代码就可以完成Cell
自动高度适配。
实现方式:
需要设置tableView
的rowHeight
属性,这里设置为自动高度,告诉系统Cell
的高度是不固定的,需要系统帮我们进行计算。然后设置tableView
的estimatedRowHeigh
t属性,设置一个估计的高度。(我这里用的代理方法,实际上都一样)
原理:
这样的话,在tableView
被创建之后,系统会根据estimatedRowHeight
属性设置的值,为tableView
设置一个估计的值。然后在Cell
显示的时候再获取Cell
的高度,并刷新tableView
的contentSize
。
实现代码:
UITableView
部分
- (void)tableViewConstraints {
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.dataList.count;
}
- (MasonryTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
MasonryTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:LXZTableViewCellIdentifier];
[cell reloadViewWithText:self.dataList[indexPath.row]];
return cell;
}
// 需要注意的是,这个代理方法和直接返回当前Cell高度的代理方法并不一样。
// 这个代理方法会将当前所有Cell的高度都预估出来,而不是只计算显示的Cell,所以这种方式对性能消耗还是很大的。
// 所以通过设置estimatedRowHeight属性的方式,和这种代理方法的方式,最后性能消耗都是一样的。
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 50.f;
}
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
// 设置tableView自动高度
_tableView.rowHeight = UITableViewAutomaticDimension;
[_tableView registerClass:[MasonryTableViewCell class] forCellReuseIdentifier:LXZTableViewCellIdentifier];
[self.view addSubview:_tableView];
}
return _tableView;
}
UITableViewCell
部分
// 自定义了一个UIImageView和UILabel控件,并且通过Masonry进行约束。
[self.avatarImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(40, 40));
make.top.left.equalTo(self.contentView).mas_offset(CellPadding);
}];
[self.detailLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.avatarImageView.mas_right).mas_offset(CellPadding);
make.top.equalTo(self.contentView).mas_offset(CellPadding);
make.right.bottom.equalTo(self.contentView).mas_offset(-CellPadding);
make.height.greaterThanOrEqualTo(@30);
}];
以上内容来自:iOS自动布局框架-Masonry详解
以上内容根据本人需求验证,发现坑很大啊!!!
需要补充的一点是:
cell
的高度是由系统来计算,好像很厉害的样子,实际上,系统是计算各个控件的高度,加上间距得出来的。所以我们必须告诉系统,各个控件的height
,top
和bottom
。
自定义Cell
中,我们指定avatarImageView
的height
,和top
,
指定detailLabel
的top
,bottom
,和>30的height
。
运行没有问题,但当设置图片的高度>44时,返回到高度仍然是默认高度,cell
并不能计算出实际高度。
我用自己的项目来做测试,布局如下:
设置imageView
的top
,left
,width
,height
=width
的x倍
label
设置left
,top
,width
。
运行:
结果:不能自动计算高度
思考:估计cell
自动计算高度也是根据各个控件的top
,height
和bottom
来计算所得的,所以会不会是缺少bottom
约束呢?
为了排除其他控件的影响,我删除了label
,只留下imageView
。
运行:
cell
的高度仍然为默认高度:44。
并且控制台输出提示:
>2017-11-29 15:39:46.879167+0800 YXTableViewTest[1531:72187] [Warning] Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead.
翻译:
只警告一次:检测到一个情况:约束含糊地表明tableview的cell的contentview的高度为0。我们正在考虑无意的崩溃,并使用标准高度来代替。
提示缺少约束,可能出现height
为0的情况,系统因此使用默认高度,44。estimatedRowHeight
的默认高度为:44。
根据提示,那么我可不可以这样理解:由于系统不会主动添加约束,当缺少bottom
约束时,系统无法得到完整的约束,来计算imageView
所占高度。所以无法计算cell
的高度。
解决:增加约束
separatorView.top = 9;
此时xib
提示错误:约束出错
因为我的cell
高度是随意拉出来的。
所以需要自己计算cell
的高度,吻合separatorView.top = 9;
设置cell
的高度为91,错误提示消失
运行:无问题
其实不管xib
的错误警告也是没有问题的。毕竟约束都设置正确了。
切换为6Plus,出现了警告,提示无法同时满足所有约束:
[LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
·
·
·
经过一番折腾,还是没能解决。
好吧,既然运行没有问题,那就不管了。以后有办法再解决。