前言
Masonry在自动布局的领域里很受欢迎,被广泛使用。与此同时,FDTemplateCell在cell的动态高度计算里也被大家所认同,那么对于masonry实现的cell,如何更好地实现cell的动态高度计算以及如果cell带有展开收缩功能?闲话少说,直接上方法。
方法一 自计算
这里具体不阐述,全部手动计算高度,高度再在UITableView里修改对应height,这个方法比较原始,不仅适用于Masonry,同样也适用于纯frame操作。如果比较感兴趣,可以在评论区交流,或者github。
方法二 使用FDTemplateCell
全称应该是:UITableView+FDTemplateLayoutCell
非常适合动态计算UITableViewCell的高度,它的使用分两种,一种是自动布局,一种是非自动布局,因为这篇主要讲述在Masonry中的应用,所以主要介绍关于自动布局环境下的使用,如果对另外一种感兴趣的话可以再交流。
具体使用方式
- 引入库文件,可以手动导入Masonry跟UITableView+FDTemplateLayoutCell,也可以使用cocoapods:
pod 'Masonry', '~> 1.0.2'
pod 'UITableView+FDTemplateLayoutCell', '~> 1.5.beta' ```
2. 引入头文件,Masonry头文件建议放在pch中进行全局配置,**UITableView+FDTemplateLayoutCell**可以根据需要再添加。
3. 在tableView创建的过程中需要添加:
_tableView.rowHeight = UITableViewAutomaticDimension;
_tableView.estimatedRowHeight = 80;```
第二句是必须的,第一句最好同步加入。
- 在tableView的代理方法中实现:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
// 这个自动布局
CGFloat height = [tableView fd_heightForCellWithIdentifier:kCellId cacheByIndexPath:indexPath configuration:^(ViewCell *cell) {
cell.model = self.dataArray[indexPath.row];
}];
return height;
}
- 最为关键,是自定义cellmasonry布局时的注意事项。
(void)setupCostranins {
// 布局
// __weak typeof(self) weakSelf;
// titleLabel
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.offset(10);
make.top.offset(10);
}];
// expandButton
[self.expandButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.titleLabel.mas_bottom);
make.trailing.offset(-10);
}];
// infoLabel
[self.infoLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.equalTo(self.titleLabel.mas_leading);
make.top.equalTo(self.titleLabel.mas_bottom).offset(10);
make.right.offset(-padding);
}];
// lineView
[self.lineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.and.trailing.offset(0);
make.top.equalTo(self.infoLabel.mas_bottom).offset(10);
make.height.equalTo(@10);
make.bottom.offset(0);
}];
}
setupConstranins要放在初始化的时候调用,而不是在layoutSubViews中。记住最下面的视图一定要加bottom约束,这是FDTemplateCell动态计算高度的关键!
这个地方做一下修改。setupConstraints可以放在layoutSubviews中,不过需要在cell设置好model中添加一句 [self layoutIfNeeded];代码已更新。
关于cell的展开与收回
cell中的展开与收回通常针对的都是label,需要显示部分文字或者全部展开。
如果是其他的话只需要动态改变显示即可。对于label,只需要控制一个属性就搞定了,那就是numberOfLines,没错,就这一个属性就好了。如果是全部展开的话则numberOfLines = 0,如果是展开部分行的话,如4行,则numberOfLines = 4。
if (model.expand) {
self.infoLabel.numberOfLines = 0;
[self.expandButton setTitle:@"收起" forState:UIControlStateNormal];
} else {
self.infoLabel.numberOfLines = 4;
[self.expandButton setTitle:@"展开全文" forState:UIControlStateNormal];
}
可以用expand来控制是否展开,代理处理即可。
详情请见Demo
附github地址:
https://github.com/hllGitHub/MasonryAnimationAndLayout
接受大家的意见和批评!
有问题的交流:hllfj922@gmail.com
或者加入QQ群一起交流:139852091