前言
其实这个关于 UITableViewCell 高度自适应的文章在网上也有很多，这里推荐下 sunnyxx单身的一篇文章，本文也是根据他的思路自己琢磨出来的，并且这也是一个比较古老的话题了，正好最近在项目中也需要去做一些高度自适应的东西，在这里做一个记录，记录下在 Masonry 自动布局中的 Cell 高度自适应
Let's Start
整个高度自适应的核心就是这段代码
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
在这个代码中我们需要返回 cell 的高度，默认都是44,那么在这个方法中我们还要用到的一个核心代是：
[someView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize]
这个方法返回的是一个 CGSize 对象，我们需要用到的就是这个返回值的 height 值，这个方法会根据 someView 中的子视图的约束来计算出一个新的size，那么如果你的约束条件有冲突的话这个方法返回的值会有问题，这个方法中还需要传入一个参数，这个参数类型有两种:
UILayoutFittingCompressedSize
UILayoutFittingExpandedSize
根据自己的理解，传入第一种参数会得出一个大小适中的尺寸，那么传入第二种参数的话的到的值应该比第一种参数的值要大。
介绍完核心的思路后，我们来看一下大致的代码，首先是自定义的 cell：
@interface DemoCell : UITableViewCell
- (void)setDemoCellType:(NSString *)type info:(NSString *)info;
@end
@interface DemoCell ()
@property (nonatomic, strong) UILabel *typeLabel;
@property (nonatomic, strong) UILabel *infoLabel;
@end
@implementation DemoCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
[self commonInit];
}
return self;
}
#pragma mark - Public Mehods
- (void)setDemoCellType:(NSString *)type info:(NSString *)info
{
self.typeLabel.text = type;
self.infoLabel.text = info;
}
#pragma mark - Customized
- (void)commonInit
{
[self.contentView addSubview:self.typeLabel];
[self.typeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.contentView.mas_top).offset(16);
make.left.equalTo(self.contentView.mas_left).offset(16);
make.width.mas_equalTo(100);
}];
[self.contentView addSubview:self.infoLabel];
[self.infoLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.typeLabel.mas_bottom).offset(10);
make.left.equalTo(self.typeLabel.mas_left);
make.right.equalTo(self.contentView.mas_right).offset(-16);
make.bottom.equalTo(self.contentView.mas_bottom).offset(-5);
}];
}
#pragma mark - Getters
- (UILabel *)typeLabel
{
if (_typeLabel == nil)
{
_typeLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_typeLabel.textColor = [UIColor blackColor];
_typeLabel.backgroundColor = [UIColor redColor];
}
return _typeLabel;
}
- (UILabel *)infoLabel
{
if (_infoLabel == nil)
{
_infoLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_infoLabel.textColor = [UIColor blackColor];
_infoLabel.backgroundColor = [UIColor yellowColor];
_infoLabel.numberOfLines = 0;
}
return _infoLabel;
}
@end
这里代码都很简单，使用了 Masonry 布局，外部可调用 - (void)setDemoCellType:(NSString *)type info:(NSString *)info;来进行 cell 内容的赋值。
接下来就是 tableView 的代理方法中我们需要做的事情
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat height = 0;
NSString *info = _dataArray[indexPath.row][kCellInfoText];
NSString *type = _dataArray[indexPath.row][kCellTypeText];
[self.demoCell setDemoCellType:type info:info];
height = [self.demoCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
return height + 1;
}
这里要注意的一点是 self.demoCell 只是用来计算的，它并没有显示在 tableView 上，还有这里是以 cell 中的 contentView 来计算，并且在最后返回的时候需要 +1 因为 cell 本身的高度要比它 contentView 的高度要高 1。
其实到这里，我们想要的效果就已经达到了，但是如果数据比较多并且很复杂的时候呢，这个方法会很耗时并且有可能会掉帧，掉帧的问题我现在还没有研究，主要说一下耗时，我的数据源大致长这个样子
_dataArray = @[@{kCellInfoText:@"1\n2\n3\n4\n5\n6", kCellTypeText:@"type..."},
@{kCellInfoText:@"123456789012345678901234567890", kCellTypeText:@"type..."},
@{kCellInfoText:@"1\n2", kCellTypeText:@"type..."},
@{kCellInfoText:@"1\n2\n3", kCellTypeText:@"type..."},
@{kCellInfoText:@"1", kCellTypeText:@"type..."},
@{kCellInfoText:@"1\n2\n3\n4\n5\n6", kCellTypeText:@"type..."},
@{kCellInfoText:@"123456789012345678901234567890", kCellTypeText:@"type..."},
@{kCellInfoText:@"1\n2", kCellTypeText:@"type..."},
@{kCellInfoText:@"1\n2\n3", kCellTypeText:@"type..."},
@{kCellInfoText:@"1", kCellTypeText:@"type..."},
@{kCellInfoText:@"1\n2\n3\n4\n5\n6", kCellTypeText:@"type..."},....后面还有很多类似的就不贴出来了];
在说这个问题之前要先说下使用到的工具 Xcode 自带的 instrument 中的 Time Profiler 首先我们需要设置一下
图中的勾选项依次是(参考自网络)
Separate by Thread: 显示每个线程
Invert Call Tree: 从上倒下跟踪堆栈，例如:FuncA{FunB{FunC}} 勾选此项后堆栈以C->B-A 把调用层级最深的C显示在最外面
Hide System Libraries: 勾选此项你会显示你app的代码,这是非常有用的. 因为通常你只关心cpu花在自己代码上的时间不是系统上的
还有
Flatten Recursion: 递归函数, 每个堆栈跟踪一个条目
Top Functions: 一个函数花费的时间直接在该函数中的总和，以及在函数调用该函数所花费的时间的总时间。因此，如果函数A调用B，那么A的时间报告在A花费的时间加上B花费的时间,这非常真有用，因为它可以让你每次下到调用堆栈时挑最大的时间数字，归零在你最耗时的方法。
那么接下来就可以开始测试了，测试数据如下：
当我们来回滑动的时候，它耗时会不断的在增加，因为每次滑动都会去计算一次高度，这显然不是我们想要的，为了解决这个问题，我们需要一个缓存来存储每一个 cell 的高度，那我们修改代码如下:
if (self.cache[@(indexPath.row)])
{
height = [self.cache[@(indexPath.row)] floatValue];
}
else
{
NSString *info = _dataArray[indexPath.row][kCellInfoText];
NSString *type = _dataArray[indexPath.row][kCellTypeText];
[self.demoCell setDemoCellType:type info:info];
height = [self.demoCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
[self.cache setObject:@(height) forKey:@(indexPath.row)];
}
return height + 1;
我们将每个 cell 的 indexPatch.row 作为 key 值来将高度存储到缓存中，第一次计算过后，每次都去缓存中去取。
对比两次我们的结果却大不一样。有关帧率的问题等我研究后，在写一篇文章来记录下。
