一行核心代码做出类似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
    
      *)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复制代码