tableView滚动不流畅(二)

tableView滚动不流畅涉及的原因是方方面面的, 其中复杂的高度计算也是令滚动卡顿的多发原因之一, 如果你的cell的高度相当复杂, 而且你又不得不在viewController的tableView代理方法中处理这些高度逻辑, 这将导致viewController代码臃肿之余, 也会成为tableView卡顿的重要原因

为此wwdc有专门的一期讲述了如何合适的设置rowHeight的策略, 就是self-sized cell
<img src="https://i-blog.csdnimg.cn/blog_migrate/dd06f1ab5c4082cd4bdae80ef31428e7.png" data-rawwidth="741" data-rawheight="463" class="origin_image zh-lightbox-thumb" width="741" data-original="https://pic4.zhimg.com/bf7f92da2ff5f1bda9157fd6da0eede3_r.png">

如图所示, row123是已经在屏幕上被展示的cell, 而row4则是下一个会被展示的cell, 这时row4这个cell的rowHeight是你预先为他设置的estimated height, 又或者是UITableViewDelegate中返回的height.
<img src="https://i-blog.csdnimg.cn/blog_migrate/d961a333e199fe105f9ff7df6a145425.png" data-rawwidth="741" data-rawheight="463" class="origin_image zh-lightbox-thumb" width="741" data-original="https://pic3.zhimg.com/63ad1114c864fefc18a310b07518245e_r.png">当用户滚动的时候, 首先, cell就会被创建(或重用), 然后, cell会被调用调整size的方法, 接着, cell会根据tableView的size去调整自身的contentSize, 最后, cell被展示出来. 这就是self-sized cell的思路.

当用户滚动的时候, 首先, cell就会被创建(或重用), 然后, cell会被调用调整size的方法, 接着, cell会根据tableView的size去调整自身的contentSize, 最后, cell被展示出来. 这就是self-sized cell的思路.

如下图所示, 整个控制器中即使没有任何UITableViewDelegate的方法, 也没有额外的关于高度的私有方法, 只是简单的赋值.也能达到根据文字长度自动调整高度的效果, 并且不会因为复杂的高度计算而导致卡顿.

<img src="https://i-blog.csdnimg.cn/blog_migrate/aac8691a0fd1cef4c00a2faaec58d4c1.png" data-rawwidth="830" data-rawheight="589" class="origin_image zh-lightbox-thumb" width="830" data-original="https://pic1.zhimg.com/98a04d22faa9e20317a5de4f36d9f2cc_r.png">

使用这种策略, 所有的高度逻辑都被放在cell里面, 你在tableView返回cell的方法中, 只需要简单赋值给cell, 例如不同长度的文字, cell便会根据你所赋值的内容自动调整高度

以上的4步中, 最关键的是第二步. 如何让一个cell去size自己的大小呢?

首先你的cell要使用Autolayout布局, 以上面的demo为例, 帮label简单设置上下左右四个约束就可以了. 设置好了以后label能正常的显示, 但是tableView仍然没办法根据内容的长度来调整cell的高度.
<img src="https://i-blog.csdnimg.cn/blog_migrate/72de6fb6ea2d16edb856971bed6a1200.png" data-rawwidth="808" data-rawheight="643" class="origin_image zh-lightbox-thumb" width="808" data-original="https://pic1.zhimg.com/c64a9fa138c629d32935d6fdf7ae36f0_r.png">以上是wwdc的原装代码, 使用了VFL这种蛋疼玩意, 其实用xib简单地拖四个到边缘约束也是没问题的

以上是wwdc的原装代码, 使用了VFL这种蛋疼玩意, 其实用xib简单地拖四个到边缘约束也是没问题的

这是因为虽然cell已经具有自我布局的功能, 但是tableView还是以前那个tableView, 它仍然会去寻找自身的rowHeight属性或者返回height的代理方法来确认每一行的高度.

所以最后一步是在tableView中启动动态布局, 告诉tableView用新的方法来布局行高.

<img src="https://i-blog.csdnimg.cn/blog_migrate/35ff0dbc147919f516d8356d50b26ad6.png" data-rawwidth="549" data-rawheight="105" class="origin_image zh-lightbox-thumb" width="549" data-original="https://pic3.zhimg.com/ea63a4dd7367082331dab7255ff5623a_r.png">

在tableView的初始化方法中加入以上代码, estimatedRowHeight是为cell提供一个预估的行高, 还有一个作用是根据预算行高和行数, 显示合理长度的scrollIndicator (灰色的滚动条) , 而UITableViewAutomaticDimension则是告诉tableView你将通过别的方法来算出行高, 而不是rowHeight或者delegate方法.

再运行一下, 你将得到一个在没有任何delagete方法设置行高的viewController中, 布局出根据内容有动态高度的tableView.
<img src="https://i-blog.csdnimg.cn/blog_migrate/feeb4e3087a9406c9baf8cae94056ecc.png" data-rawwidth="375" data-rawheight="689" class="content_image" width="375">