概述
直接切入正题，最近公司项目迭代，要实现带头图的tabelView的刷新，其实也没什么，但是刷新的地方不在头部的上方，而是放在了头部视图的下方，效果如下：
有点tableView的组刷新的错觉。头部视图跟随tableView的滚动一起联动，下拉完成刷新，上拉实现加载更多。
方案探索
界面这样设计也是有一定道理的，因为头部视图占据了很大一部分的空间，如果将其固定，那么用户所能看到的内容就会在头部视图以下的位置了，这样体验很不友好。但是如果将它放在了tableView的头部，那么问题又来了，刷新放在了tableView的顶部，刷新的时候顶部会出现大片空白并且头部视图还因此偏移，整体画面很不好看。所以最终选择了当前的设计：在头部视图下面添加对应的刷新，而用户在浏览内容的时候，将头部视图动态隐藏掉，这就有点像tableView的刷新放在了sectionHeader的下面（显然是一种错觉嘛），所以为了实现上面的两种效果，我想了两种方案，分享一下：
在说这两种方案之前，先说一下界面的构造，头部视图实际上不在tableView的header上面，而是单独的放在了controller的view上，与tableView位于同一层次，tableView在头部视图的下面
方案一：使用动画过渡来隐藏头图，达到浏览空间的拓展。
实现这样的效果，可以在tableView滚动的时候进行scrollView的内容偏移量contentOffset的监听，我们都知道，contentOffset.y的值随着滚动方向的不同发生不同的变化，下滑y值会随之变大，上滑y值减少（有些时候可以通过该特性进行上滑、下滑的判断）。scrollView中有一个对应滚动的回调scrollViewDidScroll:(UIScrollView *)scrollView,通过该回调，拿到对应的y值。此时对当前的y值进行判断，如果y>0，那么对headerView进行约束的更新，当然这个更新不能直接将tableView偏移到顶部，这样会出现跳跃感，为了让界面看起来过渡友好，可以用动画来解决，如下：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat contentOffsetY = scrollView.contentOffset.y;
if (contentOffsetY > 0) {
//隐藏顶部img
if (!self.isHidden) {
[UIView animateWithDuration:0.25 animations:^{
[self.tableView mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
}];
[self.tableView layoutIfNeeded];
}];
self.isHidden = YES;
}
}else{
//显示顶部img
if (self.isHidden) {
[UIView animateWithDuration:0.25 animations:^{
[self.tableView mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(202);
}];
[self.tableView layoutIfNeeded];
}];
self.isHidden = NO;
}
}
}
效果如下：
方案二：利用约束更新，实时更新顶部的头图位置，保证它与tableView的滚动协调，进而过渡自然
也是利用了scrollView的滚动回调的偏移量来进行约束的更新，由于更新分三种情况：
- 偏移量y<0，处于下拉刷新状态，应该恢复头部起始位置
- 偏移量y>=0 && y<=topImg.height,处于划滚动浏览状态，应该适当隐藏头部imgView
- 偏移量 y>topImg.height，处于完全浏览状态。应该完全隐藏掉头部imgView
实现如下：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat offsetY = scrollView.contentOffset.y;
//偏移量在顶部image的高度以内
if (offsetY <= 202 & offsetY > 0) {
[self.topImg mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(-offsetY);
}];
}else if(offsetY > 202){ //大于顶部头部高度，固定顶部的高度
if (self.topImg.frame.origin.y == -202) {
return;
}
[self.topImg mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(-202);
}];
}else if(offsetY < 0){
[self.topImg mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
}];
}
}
效果如下：
总结
对于上述两种实现方案，最终所达成的效果都差不多，选择也是根据项目的需求来定的，同时也希望能为需要实现该效果的同学一点灵感。
