iOS tableView的headerView超出边界显示

从最终效果说去，就为了整个下图的效果

正常.jpeg

可以看出下方tableView 的cell覆盖了头部视图

方案1

1 用tableView的tableHeaderView的方式来写蓝色视图，tableHeaderView和cell位置是分开的，这个直接pass。

方案2

• 在tableView上添加蓝色子视图，插入到tableView的最下层。

[self.tableView insertSubview:self.headerView atIndex:0];

• 设置tableView的contentView的显示偏移位置。_topHeight是self.headerView的高度

self.tableView.contentInset = UIEdgeInsetsMake(_topHeight, 0, 0, 0);

• headerView添加渐变色，layer高度为_topHeight + 15。15为cell超出的高度。

// 底部渐变
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0, 0, kScreenWidth, self.height + 15);
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);
    gradientLayer.colors = @[(__bridge id)kGetColor(0, 183, 238, 1).CGColor,
                             (__bridge id)kAppNaigationColor.CGColor];
    gradientLayer.locations = @[@0,@1];
    [self.layer insertSublayer:gradientLayer atIndex:0];

• 一切都很自然，在我的手机运行一下效果出来了很满意。
  but 我的手机版本是iOS 10.3.1，在iOS11手机上一看，窝草。

  
  不正常.jpeg

cell超出的部分不见了！WTF!!!!

运行我的手机，打开视图层级如下，我的是正常的。头部视图在cell的下方。

屏幕快照 2018-05-31 下午2.29.00.png

然而在iOS11手机上，头部视图跑到了最上层

屏幕快照 2018-05-31 下午1.41.40.png

让我都怀疑

[self.tableView insertSubview:self.headerView atIndex:0];

是假的了。

so，此路不通。

方案3

由方案2产生了方案3，不能再tableView上插入子视图，那我在self.view上插入头部视图，这总是在tableView图层下方吧。结果是成功了，如图

屏幕快照 2018-05-31 下午4.31.22.png 终于是这样子的了 正常.jpeg

但是又产生了新的问题，

tableView在上方，那么下面headerView上所有子视图的事件包括左右滑动的滚动视图都将被拦截。

• 解决思路：我们看图层可以看出

self.view上添加了两个子图层，headerView先添加在下，tableView后添加在上，在调用

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event 

时候，遍历self.view的子视图查找最合适的视图，先遍历tableView，tableView可以接受时间并且触摸点在tableView视图上，tableView成为了最合适的view，无法继续遍历headerView。遍历tableView子视图，触摸点不在tableView子视图上，所以tableView是最合适的View。

• 解决，所以，产生了一个解决方法，在点击tableView区域的时，如果点击的区域不仅在tableView上还在headerView上，则hitTest:withEvent:方法return nil ，tableView不是合适的view，那就会遍历headerView，让headerView成为最合适的view进行相应。

1 让headerView跟着tableView一起滚动，那么headerView在tableView的位置都是contentInset偏移的位置，那么点击时，point.y都是<0。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 头部视图
    if (scrollView.contentOffset.y > -_topHeight) {
        _headerView.frame = CGRectMake(0, -(scrollView.contentOffset.y + _topHeight), kScreenWidth, _topHeight);
    } else {
        _headerView.frame = CGRectMake(0, 0, kScreenWidth, -scrollView.contentOffset.y);
    }
}

2 创建一个类，继承UITableView，当point.y<0说明在tableView的偏移区域，就是headerView的区域。

#import "SWHonorTableView.h"

@implementation SWHonorTableView

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    UIView *view = [super hitTest:point withEvent:event];
    if (point.y < 0) {
        return nil;
    }
    return view;
}

@end

这里的前提是设置了

self.tableView.contentInset = UIEdgeInsetsMake(_topHeight, 0, 0, 0);

至此，就可以tableView的headerView超出边界显示并响应。