一行核心代码作出相似tableViewHeaderView和AppStore里的ScrollView悬浮条效果

如今主流app里面常常须要有tableView上滑出现悬浮条样式的设计，宝宝看了下appleStore里面专题推荐用的scrollView 也有相似的悬浮效果，只不过它是下拉悬浮，而主流的是上滑悬浮！最终实现效果如如下gif图。

其实一看上去 表觉得是两种不一样的方案，其实两种思路方式彻底一致，原本核心代码就一行，那么要修改的代码岂不是半行，确实如此哦，宝宝已笑疯😂😂😂，好了啦，开个玩笑，进入正题！ ##先别敲代码，想一想悬浮条实现思路

• ###上滑悬浮条样式的思路 当你看到本文第一张的动图的时候你想到了什么，对，没错，上滑的时候高度在减少最后会减少到一个固定值，下滑的时候高度在增长最后也会增长到一个固定值，那么简单点描述就是悬浮条原点不变，让其高度减少，在下面代码里第二种实现方式就是这样；其实我实现的是让悬浮条的原点变化，高度不变，也是同样的效果。
• ###appStore下拉悬浮条样式的思路 有了第一种思路，会发现下拉悬浮条的过程与上面惊人的类似，上滑的时候高度在减少，只不过最后会减为0，下滑的时候高度在增长最后也会增长到一个固定值。
• ###技术实现 经过KVO监听tableView的contentOffset属性值或者在scrollView的代理方法中监听contentOffset的值来让悬浮条的原点变化，高度不变，或者原点不变，高度变化！ 将自定义的headerView放在tabView 的上面，即headerView和tableView为平级关系，都添加到viewController的view上，而后设置tableView的contentInset为headerView的值，在tableView滑动的时候，动态改变view的位置或者大小，使这个headerView看起来就像是有了悬浮功能的tableView.tableHeaderView。
• ###核心代码 宝宝真的没有骗大家，真的只要一行，只要你看得懂就行😂😂😂，由于我把五行if语句和成一行了，表问我为何！ _yellowView.frame = offset.y < -64 ? (offset.y <= -200 ? CGRectMake(0, 0, 375, 200) : CGRectMake(0, -offset.y - 200, 375, 200)) : CGRectMake(0, 64 - 200, 375, 200);

##代码实现

- (void)viewDidLoad {

    [super viewDidLoad];
   //加载tableView到self.view上
    UITableView *tableView = [[UITableView alloc]  initWithFrame:CGRectMake(0, 0, 375, 667) style:UITableViewStylePlain];
    [tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"];
    tableView.dataSource = self;
    tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);
    [self.view addSubview:tableView];
  //利用KVO监听tableView的contentOffset的属性值，从而动态改变悬浮条yellowView的frame值
   [tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];

  //加载yellowView做为悬浮条视图到self.view上，所以tableView和yellowView是同一级关系，黄色视图在tableView的上面
    TouchView *yellowView = [[TouchView alloc] initWithFrame:CGRectMake(0, 0, 375, 200)];
    yellowView.backgroundColor = [UIColor yellowColor];
  //将alpha设置成为0.7的透明度是为了看得更清楚底下的tableView随时滚动的位置
    yellowView.alpha = 0.7;
    [self.view addSubview:yellowView];
  //设置成全局的实例变量是为了在监听方法中能够改变悬浮条yellowView的frame值
   _yellowView = yellowView;
 }

#pragma mark - KVO监听tableView的contentOffset的属性值变化
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {

     CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];

    //64为悬浮条最终停留的高度
    if (offset.y < -64) {
    
         //小于-64则有两种状况，第一种小于-64是当悬浮条一进来时候，因为contentInset.top被咱们调成了悬浮条的高度200，
       所以offset.y初始值是-200，当用户上滑悬浮条的时候，会在 -200 <= offset.y <= -64 范围内波动，咱们须要
       调整悬浮条的Y坐标为-offset.y - 200，如- (-180) - 200 = -20 ,表明tableView向上偏移了20各点，咱们改变其原点，
       形成悬浮条悬停的假象;第二种小于-64是当悬浮条一进来时候，offset.y初始值是-200,当用户下滑悬浮条的时候，offset.y会负的越多，
       在 offset.y < -200 范围内波动，咱们须要调整悬浮条的Y坐标为固定值200，不让其变大变小便可！！搞定
    
       //第一种方案，改变悬浮条的Y坐标，而不改变其高度，这也是本文核心代码！！！！
       _yellowView.frame = offset.y <= -200 ?  CGRectMake(0, 0, 375, 200) : CGRectMake(0, -offset.y - 200, 375, 200);
    
       //第二种方案，改变悬浮条的高度，而不改变其原点
       //_yellowView.frame = offset.y < -200 ?  CGRectMake(0, 0, 375, 200) : CGRectMake(0, 0, 375, -offset.y);
    
       //下面这行代码不必添加，我看到网上不少人加了这句，实属不必，tableView滚动原本就靠contentOffset，contentInset只是添加额外的滚动区域的
       //_tableView.contentInset = offset.y > -200 ? UIEdgeInsetsMake(-offset.y, 0, 0, 0) :UIEdgeInsetsMake(200, 0, 0, 0);
    }else {
    
       //大于等于-64就只有一种状况了，当到达临界值的时候就会 悬停64的最小高度，该高度本身随便写啦，而后appStore那个效果是上滑到临界值后，高度依然减少，
     那么须要调整悬浮条的Y坐标为-offset.y - 200，offset.y会愈来愈 大于-64，致使_yellowView.frame.origin.y负的越多，越来偏离屏幕原点，
     正好知足需求看不见悬浮条啦！
    
      //appStore下拉悬浮条效果只须要改这行代码让上滑的时候原点超过其高度200，这样就看不到悬浮条了
      //_yellowView.frame = CGRectMake(0, -offset.y - 200, 375, 200);;
    
      //第一种方案，改变悬浮条的Y坐标为悬停最小值64 - 200，这样在用户界面上就只显示64的高度，而不改变其高度
      _yellowView.frame = CGRectMake(0, 64 - 200, 375, 200);
    
      //第二种方案，改变悬浮条的高度为最小值64，而不改变其原点
      //_yellowView.frame = CGRectMake(0, 0, 375, 64);
    
      //下面这行代码不必添加，我看到网上不少人加了这句，实属不必，tableView滚动原本就靠contentOffset，contentInset只是添加额外的滚动区域的
      //_tableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
  }
}
复制代码

###自定义TouchView 若是有另外需求好比要是拖动黄色视图，tableView要是也能滚动的话，那么就须要本身拦截点击事件！！

@implementation TouchView

//这两个方法随便写一个便可，为的是拦截响应链，不让其捕获到触摸事件，这样用户手指点击上面的黄色视图，window分发触摸事件的时候，会认为用户点击的那个点最远的响应视图是 tableView，由于tableView在黄色视图的下方，这样，当滑动黄色视图的时候，tableView也跟着一块儿滚动了啦！！！
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
return NO;
}

//先调用hitTest:withEvent:此方法，再调用pointInside:withEvent:
-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {

   UIView *view = [super hitTest:point withEvent:event];
   if ([view isKindOfClass:[self class]]) {
    
       return nil;
   }
   return nil;
 }

@end
复制代码