实现结果
先给大家看下效果图。
实现效果图
实现原理
实现支付宝首页刷新滑动效果用一个tableView。用一个tableView比较简单，需要考虑三个问题：
1.下拉滑动深灰色view的时候需要深灰色的view不动；
2.刷新的位置在深灰色view下面位置；
3.tableView滚动条的位置是在深灰色view下面；
解决这三个问题，问题也就迎刃而解了。
下拉深灰色view保持不动
这里用了一个fakeTableHeaderView作为tableView的子view，用一个透明的view作为tableView的TableHeaderView，当tableView下拉的contentOffset.y<0时，我们改变对应fakeTableHeaderView的y坐标，使其一直在顶部。代码如下：
- (void)scrollViewDidScroll:(UIScrollView*)scrollView{
CGFloattableViewoffsetY = scrollView.contentOffset.y;
if( tableViewoffsetY <=0){
self.fakeTableHeaderView.frame = CGRectMake(0, tableViewoffsetY, kScreenWidth, TableHeaderViewHeight);
}
}
刷新的位置在深灰色view下面位置
刷新基于MJRefreash，写了一个笑脸的layer动画，有提供一个参数ignoredScrollViewContentInsetTop可以直接设置其刷新的偏移量，所以我们可以设置这个参数，让刷新的位置在tableHeaderView的下面。
//TableHeaderViewHeight为tableHeaderView高度
self.tableView.mj_header.ignoredScrollViewContentInsetTop = -TableHeaderViewHeight;
tableView滚动条的位置是在深灰色view下面
这个可以用scrollIndicatorInsets来伪装 这个伪造思路来源于kirito_song 很感谢，一直纠结于这个滚动条怎么实现，看到他写的支付宝首页效果可以通过设置这个。我们实现思路一样，有兴趣的同学可以去看看。
/* 修改scrollIndicatorInsets。仿造出tableView从下方开始的效果 */
_tableView.scrollIndicatorInsets = UIEdgeInsetsMake(TableHeaderViewHeight, 0, 0, 0);
总结
这种实现方式相对来说比较简单，也好理解，就是多了一个透明的TableHeaderView。有试过直接把fakeTableHeaderView作为tableHeaderView 但是在scrollViewDidScroll方法里面并不能改变坐标的y值，如果有其他好的方式欢迎在下方评论留言。另外有同学用scrollView里面镶嵌了一个tableView的实现方式，这种要注意cell复用问题。有时间再想下这种实现方式。
网友评论