UITabelView自适应高度那些事

UITabelView自适应高度那些事

这里主要介绍在项目中开发中， 遇到的关于tableView自适应高度的问题， 这里主要是针对cell和section header的动态高度设置， 主要涉及到多行文本， 图文混排等自适应高度。

cell高度设置

一般来说， 我们会使用tableview的delegate来设置cell高度， 通常会使用下面这些方法：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;

要注意的是， 这里返回的高度是多少， cell高度就显示多少， 那么如果遇到cell高度不一致的情况， 例如：文本内容多行， 文本内容不一致等问题， 可能一种简单的方法就是动态计算高度， 然后返回计算的高度， 通常计算文本高度我们会使用下面的方法：

- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullable NSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 7_0);

这样做其实也没有什么问题， 主要就是不够灵活， 而且需要计算的地方很多， 也很消耗资源， 那么有没有可以自动设定高度， 动态变化的方式呢？

estimatedRowHeight

解决方法就是利用estimatedRowHeight， 查看UITableView文档发现， 在iOS7之后多了下面几个属性， 都是跟估算高度有关， 这里我们就可以利用这些属性值来动态设定高度， 而不需要重复计算来设置高度。

@property (nonatomic) CGFloat estimatedRowHeight NS_AVAILABLE_IOS(7_0); // default is 0, which means there is no estimate
@property (nonatomic) CGFloat estimatedSectionHeaderHeight NS_AVAILABLE_IOS(7_0); // default is 0, which means there is no estimate
@property (nonatomic) CGFloat estimatedSectionFooterHeight NS_AVAILABLE_IOS(7_0); // default is 0, which means there is no estimate

一般而言， 我们都是使用AutoLayout进行布局， 对于cell的高度我们是不是也可以利用AutoLayout来自动实现呢？ 答案是可以的， 主要就是利用estimatedRowHeight来解决， 下面来看看解决方法：

1. 像下面这样， 设置估算高度， 然后真实高度设置为UITableViewAutomaticDimension， 意思就是自动计算高度， 也不需要通过UITableView的delegate来设置， 使用很方便。

 self.testTableView.estimatedRowHeight = 100;
 self.testTableView.rowHeight = UITableViewAutomaticDimension;

 self.testTableView.estimatedSectionHeaderHeight = 100;
 self.testTableView.sectionHeaderHeight = UITableViewAutomaticDimension;

1. 还有一种方式用法也差不多， 就是通过delegate设置， 不过是利用estimated开头的代理方法：

// Use the estimatedHeight methods to quickly calcuate guessed values which will allow for fast load times of the table.
// If these methods are implemented, the above -tableView:heightForXXX calls will be deferred until views are ready to be displayed, so more expensive logic can be placed there.
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(7_0);
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForHeaderInSection:(NSInteger)section NS_AVAILABLE_IOS(7_0);
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForFooterInSection:(NSInteger)section NS_AVAILABLE_IOS(7_0);

使用方法如下：

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellIdentifier"
                                                            forIndexPath:indexPath];
    return [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
}

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForHeaderInSection:(NSInteger)section{
        TestHeaderView *header = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"headerIdentifier"];
    return [header.contentBackView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
}

这里需要注意的是， 我们如果使用xib创建的UITableViewHeaderFooterView， 默认contentView是nil， 做法就是在xib最底层手动添加一层UIView， 例如这里的contentBackView就是自己创建的contentView。

还有一点就是， 如果看到以下的log信息：

2016-07-22 19:49:56.786 TableViewTest[4114:134738] Setting the background color on UITableViewHeaderFooterView has been deprecated. Please use contentView.backgroundColor instead.

这个的解决方法就是设置xib文件的background为default， 默认是白色， 然后通过contentView.backgroundColor来设置背景色。

到这里基本解决方法就介绍完了， 如果大家要了解更多深入的问题， 可以看看下面的文章。

参考

优化UITableViewCell高度计算的那些事

使用autolayout自定义动态高度的cell

UITableViewCell 高度计算从混沌初始到天地交泰