[iOS] 列表滑动展开隐藏头部HeaderView

平常遇到大多数的带有列表的应用都会遇到这个场景：在列表顶端有一个Header，当向上滑动列表时，压缩header，向下滑动列表到头时，展开header。这种样式在例如微博，twitter这些展示动态的界面里很常见。这种效果怎么实现呢？下面介绍我用的方法。

新博客：wossoneri.com

先看一下效果图

首先看一下BiliBili客户端的视频浏览界面。默认界面Header完全展开，并且Header显示AV号（别乱想，就是视频编号了）以及播放按钮。滑动之后Header被压缩，按钮移到AV号左边。

我就照着界面简单实现了主要功能，比较简陋。对于按钮移动的动画就没有去花时间还原了，毕竟这里主要是为了实现滚动压缩、展开Header，动画不讨论。

实现思路

如图所示：

首先在要将该界面分成两部分：一个ScrollHeader，一个UITableView。

• ScrollHeader占据屏幕上方，高度为展开后的高度
• UITableView占据整个屏幕，这样可以完全滚动。为了让内容不被ScrollHeader遮盖，设置contentOffset属性即可

我这里用的ScrollHeader是作为独立的控件使用，与UITableView的HeaderView并无关系

之后将ScrollHeader分成两部分：topView和bottomView。

• topView 即为压缩后的布局
• bottomView 即为展开后的布局
  我这里采取将topView固定在ScrollHeader的顶部，覆盖在bottomView上方，根据滑动对其淡入淡出。

另一种效果是把topView与bottomView上下连接在一起，也就是没有覆盖关系，然后当bottomView向上滑时topView从屏幕外滑入屏幕内。这个读者可以尝试着实现一下。

实现方法

首先按照前面的设计将界面布局好，之后的重点是为ScrollHeader增加滑动效果。
由于我的ScrollHeader继承的是UIView，所以为了处理滑动，为其设置一个UIScrollView

@property (nonatomic, strong) UIScrollView *headerScrollView;

这个属性的作用就是获得UITableView对应的scrollView，因为UITableView本身是继承UIScrollView的，所以在初始化ScrollHeader的时候可以这么写：

MyScrollHeader header = [[MyScrollHeader alloc] init];
header.headerScrollView = _tableView;

这样，在ScrollHeader中就可以通过headerScrollView来判断滑动状态了。

剩下的工作就是捕捉滑动状态，并且对滑动距离进行计算，移动topView和bottomView了。对于计算也不做过多说明了，因为没有几张草图也说不清。直接贴上代码，跟着代码算一下就知道怎么回事了。

#pragma mark - scroll state
-(void)willMoveToSuperview:(UIView *)newSuperview{
    [self.headerScrollView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:Nil];
    self.headerScrollView.contentInset = UIEdgeInsetsMake(_bottomHeight, 0, 0, 0); // tableview 偏移
}

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{ //监视滑动
    CGPoint newOffset = [change[@"new"] CGPointValue]; 
    [self updateSubViewsWithScrollOffset:newOffset];
}

-(void)updateSubViewsWithScrollOffset:(CGPoint)newOffset {
    
    //    NSLog(@"scrollview inset top:%f", self.headerScrollView.contentInset.top);
    //    NSLog(@"new offset before:%f", newOffset.y);
    //    NSLog(@"newOffset : %f", newOffset.y);
    
    float startChangeOffset = - self.headerScrollView.contentInset.top;
    
    newOffset = CGPointMake(newOffset.x, newOffset.y < startChangeOffset ? startChangeOffset : (newOffset.y > _destinaOffset ? _destinaOffset : newOffset.y));
    //    NSLog(@"new offset after:%f", newOffset.y);
    
    float newY = - newOffset.y - _bottomHeight;
    float d = _destinaOffset - startChangeOffset;
    float alpha = 1 - (newOffset.y - startChangeOffset) / d;

    self.frame = CGRectMake(0, newY, self.frame.size.width, self.frame.size.height);
    topView.frame = CGRectMake(0, -newY, self.frame.size.width, self.frame.size.height);
    
    topView.alpha = 1 - alpha;
    bottomView.alpha = alpha;
    
    _currentOffset = newOffset.y;
    NSLog(@"current offset: %f", _currentOffset);
}

最后放上源码

github

粗略写的，代码是用自动布局写的。往后抽空会优化一下代码，把ScrollHeader封装成控件方便使用。