美文网首页iOS技术点iOS新手学习
iOS tableView的headerView超出边界显示

iOS tableView的headerView超出边界显示

作者: Maj_sunshine | 来源:发表于2018-06-01 10:10 被阅读372次
从最终效果说去,就为了整个下图的效果
正常.jpeg

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

方案1

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

方案2

  • tableView上添加蓝色子视图,插入到tableView的最下层。
[self.tableView insertSubview:self.headerView atIndex:0];
  • 设置tableViewcontentView的显示偏移位置。_topHeightself.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的子视图查找最合适的视图,先遍历tableViewtableView可以接受时间并且触摸点在tableView视图上,tableView成为了最合适的view,无法继续遍历headerView。遍历tableView子视图,触摸点不在tableView子视图上,所以tableView是最合适的View。

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

1 让headerView跟着tableView一起滚动,那么headerViewtableView的位置都是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);

至此,就可以tableViewheaderView超出边界显示并响应。

相关文章

网友评论

    本文标题:iOS tableView的headerView超出边界显示

    本文链接:https://www.haomeiwen.com/subject/bouqsftx.html