iOS tableView的headerView超出边界显示
2018-06-01 本文已影响372人
Maj_sunshine
从最终效果说去，就为了整个下图的效果
正常.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);
