带头图的下拉刷新的界面实现（tabelView的section刷新错觉）

概述

直接切入正题，最近公司项目迭代，要实现带头图的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);
            
        }];
        
    }
    
    
}

效果如下：

方案二

总结

对于上述两种实现方案，最终所达成的效果都差不多，选择也是根据项目的需求来定的，同时也希望能为需要实现该效果的同学一点灵感。

git demo地址