开发中经常会遇到朋友圈这种功能,看似简单,但是要做好又有点难度,经过不懈的努力终于写了一个还行的圈子,亲测
在5s上面跑的很流畅。以下就是实现思路,demo没有抽出来,所以没有上传
先上一张图明确一下需求,
首先头像和名字是固定的,内容的高度是自适应的, 点赞区域的高度也是自适应的,
评论的内容也是动态高度自适应,并且有多少显示多少,很多同学最开始肯定会优先想到使用 layout 自动布局。
最开始我也是这样做的,并且很快的就实现了,但是Layout 最后还是会通过系统转化成 frame ,
所以当评论内容一多就特别容易掉帧。 这个时候就在考虑优化方案
首先想到的就是把 高度计算从cell 充剥离出来, cell 只管复制 ,高度先在model的时候就计算好,
然后评论的地方套入一个tableview 。这个时候相对刚开始确实是有了一定的优化,但是又掉坑里面了。
因为图片最多就9张, 所以在初始化的时候就创建了 9 个imageview ,然后根据数据判断需要显示几个
所以图片区域并不会在掉帧。唯一还需要优化的是嵌入的评论 tableview 。因为需要 在 Cell 赋值的时候刷新评论tableview
所以造成每次滑动的时候都会调用刷新,当评论数据多的时候就会引起掉帧。
这个时候终极方案来了, 网上很多大佬都说用异步绘制,但是对于一般的小白来说异步绘制太过繁琐,而且每条评论都是需要点击的这个时候方案虽好,却不好用,不适合经验不足的小朋友,所以我们需要换一种思路。继续上图
先从最外面下手 ,首先使用 tableview的分组模式 UITableViewStyleGrouped
先看图上 headview 区域 因为这个地方 内容都可以先固定下来,也就是说可以直接在初始化的时候创建一次就行了,
只要计算好内容的高度和图片区域的高度就能提前确定 headview 的高度了,所以这一块我们可以放到 section的头部
在看 评论 因为每一条评论都可以使用lable来展示,这样的话样式也能固定下来,所以就放在cell 上面,一条评论一个 row
因为所有的高度都是在model就计算好了,所以不用在动态去计算高度了,在者通过内容区分,把每一块都放在了合适的地方
避免了tableview 嵌套tableview 的性能消耗,到这里一个相对简单的实现方案就实现了。
因为demo在公司项目里面,这里就不上demo了,有问题可以直接下方评论或者直接加我qq 345499860