iOS8+ UITableView自动计算cell高度并缓存

这篇文章咱们来说一下UITableView的cell自适应高度,以及遇到的问题的解决办法。在看文章以前但愿你已经会UITableView的基本使用了。ios

先奉上这篇文章的demo的Github地址:UITableViewCellHeightDemo。你们能够下载下来和文章配合看。git

cell高度计算的历史

在iOS8以前,若是UITableViewCell的高度是动态的,若是想要显示正确的话,咱们须要在下面这个UITableView的代理方法中,返回每一行的精确高度:github

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;

若是cell的控件不少,样式很复杂的话,在这里面咱们就可能须要写不少代码去作一些复杂的计算,甚至可能致使滑动不流畅。缓存

后来也有一些人写了一些第三方去解决这个问题,例如UITableView-FDTemplateLayoutCell。只要给cell自上而下加好约束,它就能够帮咱们去算cell的高度而且能够缓存,省去了咱们本身写计算代码的成本。具体能够进连接里面看看它的demo。学习

可是在iOS10的系统下, FDTemplateLayoutCell会卡界面,并且tableview的行数越多表现的越卡。ui

并且苹果在iOS8以后,推出了一种超级简单的cell动态自适应的方法,使用起来比 FDTemplateLayoutCell也简单一些,并且如今iOS10都出来了,没有必要去支持iOS7了,因此最后我仍是选择了用系统的办法。这样咱们之后就不再用写heightForRowAtIndexPath方法了哈哈哈。atom

系统的cell自适应高度的使用方法

首先咱们须要把cell上的控件自上而下加好约束,若是对约束不熟悉的话建议看看下面这两篇文章学习一下:
Auto Layout Tutorial in iOS 9 Part 1: Getting Started(http://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2)
[Auto Layout Tutorial in iOS 9 Part 2: Constraintsspa

用xib加约束和用masonry加代码约束都是能够的。注意约束必定要自上而下加好,让系统知道怎么去计算高度。在这篇文章的demo里面的cell加的约束是这样的:代理


cell约束

加好约束后,而后告诉tableView本身去适应高度就能够了。有两种写法:code

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

或者直接写这个代理方法就能够了

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath { return 100; }

这个的意思就是告诉tableView,你须要本身适应高度,我不给你算啦哈哈哈。可是咱们须要告诉它一个大概高度,例如上面的100,理论上这个是能够随便写的,并不影响显示结果,可是越接近真实高度越好。

来看下demo效果:


demo

咱们看到,cell已经本身适应内容算出了高度,是否是很方便呢哼哼。
具体的代码你们能够去demo看哦。

其实section的header和footer也是能够自动适应的,对应的方法有:

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForHeaderInSection:(NSInteger)section; - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForFooterInSection:(NSInteger)section;

可是咱们在实际开发中,通常都是根本没有header和footer,有的话通常也是给一个固定高度。因此在这里就不讲解了,原理都同样。

可能遇到的问题和解决办法

1.高度不对
有时候有可能运行出来后看到cell的高度显示的不对,就像这样:


高度不对


这个问题是由于约束没有知足自上而下,从而系统不知道怎么去计算。解决办法就是去修改约束,直到知足为止。必定要好好理解约束啊!

2.点击状态栏没法滚动到顶部
咱们知道,若是界面中有UIScrollView的话,点击状态栏会让其滚动到顶部,就像这样:


点击状态栏会滚动到顶部

可是若是咱们用了自动计算高度的方法,又调用了tableView的reloadData方法(例如咱们的数据有分页的时候,加载完下一页的数据后会去刷新tableView)。这时候就会出现问题,点击状态栏就有概率不能精确滚动到顶部了:


Untitled.gif

解决这个问题的办法是去缓存cell的高度,代码以下:

@property (nonatomic, strong) NSMutableDictionary *heightAtIndexPath;//缓存高度所用字典
#pragma mark - UITableViewDelegate -(CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath { NSNumber *height = [self.heightAtIndexPath objectForKey:indexPath]; if(height) { return height.floatValue; } else { return 100; } } - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { NSNumber *height = @(cell.frame.size.height); [self.heightAtIndexPath setObject:height forKey:indexPath]; }

解释一下,就是用一个字典作容器,在cell将要显示的时候在字典中保存这行cell的高度。而后在调用estimatedHeightForRowAtIndexPath方法时,先去字典查看有没有缓存高度,有就返回,没有就返回一个大概高度。

缓存高度以后,在demo里面多试几回,发现点击状态栏已经能够精确滚动回顶部了:


用缓存高度解决了问题

这段代码其实能够写在viewController的基类里面,这样写一遍就能够每一个地方都能缓存cell的高度了。详见demo。这样就完美了!



文/iOS_小松哥(简书做者) 原文连接:http://www.jianshu.com/p/64f0e1557562 著做权归做者全部,转载请联系做者得到受权,并标注“简书做者”。
相关文章
相关标签/搜索