概述
支付宝首页参杂了很多效果在里面，其中刷新的效果着实吸引了我。它采用了中段刷新，上拉联动的方案进行页面的展示。分析了一下，这样做的目的是为了保证用户在刷新的时候顶部不留刷新空白使得界面美观，在上拉加载更多的时候头部随着界面的上拉隐藏，保证用户在浏览内容的时候有更多的空间去展示内容。
支付宝首页刷新
分析
通过界面效果，大致能够感觉到界面是由tableView与一个headerView组成，这里存在争议的地方是headerView是tableView的一部分还是一个独立于tableView而存在的一个部分。
分析一下以上的两种情况：
- headerView是tableView的一部分
headerView是tableView的一部分，在下拉加载更多的时候，界面效果确实能够满足条件。但是下拉刷新的添加上存在点问题了，细心的你会发现支付宝中的刷新是在headerView下面，也就是说如果headerView是tableView的头部的话，那么刷新不会出现在界面的中间位置，而会在tableView的头部上方，也就是顶部。可见这种方案是不可行的。
- headerView是独立出来的一部分，与tableView在界面上隶属于同级
简单说，就是headerView与tableView均在一层View上，这里又有一点问题，就是tableView顶部直接放在headerView的下面是否可行呢？理论上tableView放在headerView的下面之后，下拉刷新就变得正常了，顶部headerView的的动态移动可以通过tableView的滚动的offset进行调整，貌似也没什么问题，所以按照上面的方法实现，结果有点小瑕疵：tableView向上滚动的时候顶部的headerView能够正常滚动，但是tableView由于向上滚动，会被自身的frame截掉部分内容，感觉怪怪的，这也是我之前发布的带头图的下拉刷新的界面实现（tabelView的section刷新错觉问题所在，效果如
上划联动所示。
上划联动（tableView直接放在headerView下面）
支付宝首页在上拉的时候，tableView的顶部内容并没有被截掉，显然tableView的内容展示部分要包括头部的header位置，这样才能保证上拉的时候内容不会被截掉，换句话说也就是tableView的位置应该在headerView下面，而且顶部与headerView的顶部保持一致。
页面层次
这里有个问题，如果将headerView放在tableView的上面，那么tabelView的上面内容会被headerView遮住，这个很好解决，只需要设置tableView的contentInset的内容偏移到headerView的高度即可，如上图所示。至于上划联动直接使用方案一中的方法就能满足需求。
实现
经过分析之后，我们实际上主要解决两个主要问题：
- tableView的内容偏移设置
- 上拉的时候动态改变头部headerView的位置，完成联动效果
tableView的内容偏移设置可以直接在tableView创建的时候进行设置，如下：
- (UITableView *)tableView{
if (!_tableView) {
MJWeakSelf;
_tableView = [UITableView new];
_tableView.dataSource = self;
_tableView.delegate = self;
//设置内容偏移
_tableView.contentInset = UIEdgeInsetsMake(202, 0, 0, 0);
//设置滚动条偏移
_tableView.scrollIndicatorInsets = UIEdgeInsetsMake(202, 0, 0, 0);
_tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
weakSelf.rowNum = 10;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[_tableView.mj_header endRefreshing];
});
[weakSelf.tableView reloadData];
}];
_tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
weakSelf.rowNum += 10;
[weakSelf.tableView reloadData];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[weakSelf.tableView.mj_footer endRefreshing];
});
}];
}
return _tableView;
}
如何在上拉加载的时候动态更新headerView的位置已达到联动效果呢？可以借助scrollViewDidScroll进行界面的更新，如下所示：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//页面没有加载的时候不进行调整
if (!self.view.window) {
return;
}
CGFloat offsetY = scrollView.contentOffset.y;
//上拉加载更多（头部还没有隐藏），动态移动header
if (offsetY > -202 & offsetY < 0) {
[self.topImg mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(-offsetY - 202);
}];
}else if(offsetY > 0){ //头部隐藏，固定头部位置
[self.topImg mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(-202);
}];
}else{ //下拉刷新
[self.topImg mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
}];
}
}
好了，设置完之后我们来看看实现的效果，如下：
局部刷新效果
总结
其实类似与这样的效果的地方还有很多，例如上拉的过程中，菜单悬浮，下拉局部刷新，都可以使用这样的方式去处理，只需要更改滚动时候的headerView的偏移既可，是不是觉得很有用呢？需要的同学可以下载Demo。
网友评论