基于 CoreText 实现的高性能 UITableView

引起UITableView卡顿比较常见的原因有cell的层级过多、cell中有触发离屏渲染的代码(譬如:cornerRadius、maskToBounds 同时使用)、像素是否对齐、是否使用UITableView自动计算cell高度的方法等。本文将从cell层级出发,以一个仿朋友圈的demo来讲述如何让列表保持顺滑,项目的源码可在文末获得。不可否认的是,过早的优化是魔鬼,请在项目出现性能瓶颈再考虑优化。

首先看看reveal上页面层级的效果图


然后是9.3系统iPhone5的真机效果

1、绘制文本

使用core text可以将文本绘制在一个CGContextRef上,最后再通过UIGraphicsGetImageFromCurrentImageContext()生成图片,再将图片赋值给cell.contentView.layer,从而达到减少cell层级的目的。

绘制普通文本(譬如用户昵称)在context上,相关注释在代码里:

绘制朋友圈内容文本(带链接)在context上,这里我还没有去实现文本多了会折叠的效果,与上面普通文本不同的是这里需要创建带链接的AttributeString和CTLineRef的逐行绘制:

上述方法运用起来就是:

这样就完成了文本的显示。

2、显示图片

图片包括用户头像和朋友圈的内容,这里只是将CALayer添加到contentView.layer上,具体做法是继承了CALayer,实现部分功能。

通过链接显示图片:

其他比较简单就不展开。

3、显示小视频

之前的一篇文章简单讲了怎么自己做一个播放器,这里就派上用场了。而显示小视频封面图片的CALayer同样在显示小视频的时候可以复用。

这里使用了NSOperationQueue来保障播放视频的流畅性,具体继承NSOperationVideoDecodeOperation相关代码如下:

解码图片是因为UIImage在界面需要显示的时候才开始解码,这样可能会造成主线程的卡顿,所以在子线程对其进行解压缩处理。

具体的使用:

4、其他

1、触摸交互是覆盖了以下方法实现:

2、页面上FPS的测量是使用了YYKit项目中的YYFPSLabel。

3、测试数据是微博找的,其中小视频是Gif快手。

本文的代码在https://github.com/hawk0620/PYQFeedDemo

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

1 15 收藏 7 评论

关于作者:Hawk0620

喜欢新奇事物,爱探索和冒险,用艺术的视角欣赏技术,也迷恋篮球和音乐。 个人主页 · 我的文章 · 2 ·  

相关文章

可能感兴趣的话题



直接登录
最新评论
  • 福尔阿皓斯 iOS developer 2016/07/12

    楼主,请教个问题,获取image的时候,加一个runloop 检测的目的是什么?

    • Hawk0620   2016/07/13

      RunLoop 在进入休眠前,就会执行 loop 内的任务,从而在合适的时机把操作同步到主线程上,提高性能。

  • xdkhan iOS开发 2016/07/13

    你好,在Demo中每次
    调用此方法时configWithData
    就会创建几个layer,添加到cell上。如果cell多次重用,不会造成layer重复添加吗?

  • 可以发一下你之前写的播放器的文章地址吗?看到这块有点不太明白,谢谢啦

  • xzh一笑奈何   2016/08/23

    楼主你好,我发现计算文字size时,同一段文字在5s和6下都是一样的范围。最后发现是此时屏幕宽度打印出来都是320导致的。但最后文字又是适配不同机型的,请问这是怎么回事?

跳到底部
返回顶部