iOS类似微信聊天页的顶部刷新-实现新数据无缝衔接自然显示

前言

因为目前在做的项目是IM项目，所以产品经常会提出些仿微信的需求。最近，又来了这么一个需求-聊天页顶部刷新要像微信那样，刷新数据后新数据和旧数据无缝衔接在一起，无跳动显示。

数据自然显示，无跳动.gif

过程

首先，项目聊天页用的是环信的EaseUI，刷新框架是明杰大神的MJRefresh。先说说底部刷新，底部刷新要实现上述效果其实很简单，把新数据接到数组，先reload tableView,再endRefresh就好了，如下图

底部刷新自然显示，无跳动.gif ：
但是，顶部刷新的机制就不一样了，首先新数据是插在数组的前面，这是reloadtableview，tableview顶部是显示整个数组第一个数据，明显是不对的，而环信的EaseUI是通过tableview的scrollToRowAtIndexPath方法使tableview定位在刷新数据的最后一个数据，这样显示也是可以的，但是结合endRefresh的代码之后，就会给人一种很突兀的体验，感觉数据是跳出来的，如下图
数据跳动.gif

说了这么久，究竟怎样才能实现上述数据很自然显示的效果。其实很简单，就是使用tableview的setContentOffset方法，获得刷新的数据后，把数据插在数组前，算出所有数据的显示高度总和后 ，这里要特别注意一点：高度的总和还要减去MJRefreshHeader的高度，之后才endRefreshing，这样就能实现数据自然显示了，如下代码：

  [self.tableView reloadData];
  [self.tableView setContentOffset:CGPointMake(0, 1000-54)];
  [self.tableView.header endRefreshing];

另外，MJRefreshHeader的高度大家可以在下图这个位置打个断点看看

MJRefreshHeader的高度.png

最后附上Demo地址

结束

刚开始接到这样的需求时，其实我是抗拒的。给我的感觉就是很难去实现，甚至我都想到要去改MJRefresh这个框架的源码，避免endRefresh的tableview的回弹。后来就探索到tableview的setContentOffset，就抱着试试的态度，没想到这么轻易就完成了。真的不得不感叹：需求也是让开发人员进步的需求。