iOS UITableView estimatedRowHeight 小记

6,419 阅读4分钟

原文地址

estimatedRowHeight 是 iOS7.0 以后引入的属性,用来预估列表视图的高度。下面看一下官网的解释:

大概的意思是:

为行高提供一个非负的预估值,可以提高列表视图的加载性能。如果列表包含高度可变的行,则在加载表时计算这些行的所有高度可能会非常昂贵。估算允许您将几何体计算的一些成本从加载时间推迟到滚动时间。

其默认值是 automaticDimension,这意味着表视图会默认选择一个预估高度供你使用。将该值设置为0将禁用估计高度,这将导致表视图请求每个单元格的实际高度。如果表使用自调整大小的单元格,则此属性的值不能为0。

使用预估高度时,表视图会自动管理从滚动视图继承的 contentOffset 和 contentSize 属性。不要试图直接读取或修改这些属性。

注意:estimatedRowHeight 在 iOS11 之前默认值为0,在 iOS11 之后,默认值为automaticDimension。

例子

下面我们通过一个例子来从下面两个方面来了解这个属性:

  • tableView:heightForRowAtIndexPath: 和 tableView:cellForRowAtIndexPath 执行次数
  • contentSize 的变化情况。
- (void)viewDidLoad {
    [super viewDidLoad];
    for (NSInteger i = 0; i < 100; ++i) {
        NSString *text = [NSString stringWithFormat:@"%ld", i];
        [self.dataSource addObject:text];
    }
    
    [self.listView reloadData];
    
        [self.listView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:NULL];
}

- (NSMutableArray *)dataSource {
    if (!_dataSource) {
        _dataSource = [NSMutableArray arrayWithCapacity:10];
    }
    
    return _dataSource;
}

- (UITableView *)listView {
    if (!_listView) {
        _listView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
        _listView.delegate = self;
        _listView.dataSource = self;
        [self.view addSubview:_listView];
    }
    
    return _listView;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.dataSource.count;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"height at row:%ld", indexPath.row);
    return 200;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"testCell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testCell"];
    }
    
    cell.textLabel.text = self.dataSource[indexPath.row];
    NSLog(@"cell at row:%ld", indexPath.row);
    return cell;
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"contentSize"]) {
         NSLog(@"contentSize:%@",  NSStringFromCGSize(self.listView.contentSize));
    }
}

禁用 estimatedRowHeight 属性:

打印结果如下:

2021-02-17 15:44:21.220452+0800 CategoryDemo[39013:1055808] height at row:0
...
2021-02-17 15:44:21.247421+0800 CategoryDemo[39013:1055808] height at row:49
2021-02-17 16:10:23.095358+0800 CategoryDemo[40146:1088361] contentSize:{414, 10000}
2021-02-17 15:44:21.261236+0800 CategoryDemo[39013:1055808] cell at row:0
2021-02-17 15:44:21.262052+0800 CategoryDemo[39013:1055808] height at row:0
2021-02-17 15:44:21.263151+0800 CategoryDemo[39013:1055808] cell at row:1
2021-02-17 15:44:21.263665+0800 CategoryDemo[39013:1055808] height at row:1
2021-02-17 15:44:21.264298+0800 CategoryDemo[39013:1055808] cell at row:2
2021-02-17 15:44:21.264718+0800 CategoryDemo[39013:1055808] height at row:2
2021-02-17 15:44:21.265399+0800 CategoryDemo[39013:1055808] cell at row:3
2021-02-17 15:44:21.265783+0800 CategoryDemo[39013:1055808] height at row:3
2021-02-17 15:44:21.266447+0800 CategoryDemo[39013:1055808] cell at row:4
2021-02-17 15:44:21.266824+0800 CategoryDemo[39013:1055808] height at row:4

通过打印结果可以看出:

  • tableView:heightForRowAtIndexPath:方法会先全部执行一遍。
  • 只加载可见区域内的 cell。
  • 加载 cell 时又调用了一遍 tableView:heightForRowAtIndexPath: 方法。
  • 一次生成 contentSize,值不会变化。

不禁用 estimatedRowHeight 属性:

打印结果如下:

2021-02-17 16:17:57.565084+0800 CategoryDemo[43013:1104211] contentSize:{414, 2200}
2021-02-17 16:17:57.581135+0800 CategoryDemo[43013:1104211] cell at row:0
2021-02-17 16:17:57.582222+0800 CategoryDemo[43013:1104211] height at row:0
...
2021-02-17 16:17:57.684118+0800 CategoryDemo[43013:1104211] cell at row:19
2021-02-17 16:17:57.684557+0800 CategoryDemo[43013:1104211] height at row:19
2021-02-17 16:17:57.685262+0800 CategoryDemo[43013:1104211] contentSize:{414, 5320}
  • 加载 20 个 cell(如果20个cell的高度小于tableview的可见区,则加载可见区内的cell),可能会影响展现埋点。
  • 只在加载 cell 时调用一遍 tableView:heightForRowAtIndexPath: 方法。
  • contentSize 的值会变化。

总结

  • 在禁用预估高度时,系统会先把所有 cell 的实际高度先计算出来,也就是先执行tableView:heightForRowAtIndexPath:代理方法,接着用获取的 cell 实际高度的总和计算tableView 的 contentSize,然后才显示tableViewCell的内容。在这个过程中,如果实际高度计算比较复杂的话,就会消耗更多的性能。

  • 在使用预估高度时,系统会先使用预估高度来计算 tableView 的 contentSize, 因此 contentSize 的高度会动态变化,如果差值为0,tableView 的 contentSize 高度不再变化。由于使用预估高度代替了实际高度的计算,减少了实际高度计算时的性能消耗,但是这种实际高度和预估高度差值的动态变化在滑动过快时可能会产生跳跃现象,所以预估高度和真实高度越接近越好。