UITableView的headerView悬停解决方案

UITableView的section headerView悬停解决方案

tableHeaderView默认是不会悬停的

一. 我们先从tableview的Plain和Grouped模式开始说起

1.1 把 UITableView 的 style 属性设置为 Plain 

1.1.1 tableview的section header在滚动时会默认悬停在界面顶端

1.2 设置为 Grouped

1.2.1 section header都会随着scrollview滚动

1.2.1 但是每组的头部和尾部都会留一个空白条

二. 悬停一部分

2.1 Plain模式下, 怎么让第一个section悬停, 后面都不悬停. 

2.1.1 有一个最笨且代码重用性很差的一个方式是: 我们只分一组, 来解决这个问题

2.2 Plain模式下, 怎么让所有的section都不悬停

2.2.1 性能很差的一个方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGFloat sectionHeaderHeight =50;

    if (scrollView.contentOffset.y<=sectionHeaderHeight&&scrollView.contentOffset.y>=0) {

        scrollView.contentInset =UIEdgeInsetsMake(-scrollView.contentOffset.y,0,0,0);

    } else if (scrollView.contentOffset.y>=sectionHeaderHeight) {

        scrollView.contentInset =UIEdgeInsetsMake(-sectionHeaderHeight,0,0,0);

    }

}

2.2 悬停一部分

本篇文章让中间蓝色部分进行悬停,悬停到100的地方

             

    UIView *view = [[UIViewalloc]initWithFrame:CGRectMake(0,0,375,150)];

    [self.viewaddSubview:view];

    view.backgroundColor = [UIColorgrayColor];

    

    UIView *view1 = [[UIViewalloc]initWithFrame:CGRectMake(0,0,375,50)];

    [view addSubview:view1];

    view1.backgroundColor = [UIColorredColor];

    

    UIView *view2 = [[UIViewalloc]initWithFrame:CGRectMake(0,50,375,50)];

    [view addSubview:view2];

    view2.backgroundColor = [UIColorblackColor];

    self.view2 = view2;

    

    UIView *view3 = [[UIViewalloc]initWithFrame:CGRectMake(0,100,375,50)];

    [view addSubview:view3];

    view3.backgroundColor = [UIColororangeColor];

    tableview.tableHeaderView = view;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    if (scrollView.contentOffset.y >=50) {

        self.view2.y = scrollView.contentOffset.y;

    } else {

        self.view2.y =50;

    }

}

上面的做法貌似可以实现悬停的效果了, 但只是貌似, 人生啊 ...

这种方式的悬停有些小遗憾, 会导致以下两种问题. 原因是: 由于tableView.tableHeaderView的层级关系造成的

1. 如果tableview是分组显示的, section 就会覆盖这个悬停

2. 点击事件就失效了

-------------终极解决方案 1----------------------

为了简单, 方便, 快速的实现这个效果, 我们可以添加直接把要悬浮的控件添加到self.view上面, 和tableView在同一个层级上, 然后控制悬停. 就看了.

    UIView *view = [[UIViewalloc]initWithFrame:CGRectMake(0,0,375,150)];

    [self.viewaddSubview:view];

    view.backgroundColor = [UIColorgrayColor];

    

    UIView *view1 = [[UIViewalloc]initWithFrame:CGRectMake(0,0,375,50)];

    [view addSubview:view1];

    view1.backgroundColor = [UIColorredColor];

    

    UIView *view2 = [[UIViewalloc]initWithFrame:CGRectMake(0,50,375,50)];

    [self.view addSubview:view2];

    view2.backgroundColor = [UIColorblackColor];

    self.view2 = view2;

    

    UIView *view3 = [[UIViewalloc]initWithFrame:CGRectMake(0,100,375,50)];

    [view addSubview:view3];

    view3.backgroundColor = [UIColororangeColor];

    tableview.tableHeaderView = view;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    if (scrollView.contentOffset.y >=50) {

        self.view2.y =0;

    } else{  

        self.view2.y =50-scrollView.contentOffset.y;

    }

}

-------------终极解决方案 2----------------------

    UIView *view4 = [[UIViewalloc]initWithFrame:CGRectMake(0,50,375,50)];

    [self.viewaddSubview:view4];

    view4.backgroundColor = [UIColorblueColor];

    self.view4 = view4;

    view4.hidden = YES;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    if (scrollView.contentOffset.y >=50) {   

        self.view4.hidden =NO;

    } else{    

        self.view4.hidden =YES;

    }

}

// 拉伸顶部的一种取巧的方法

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {

    if (scrollView.contentOffset.y < -(headViewH+navBgH)) {

        

        self.viewNavBg.y = scrollView.contentOffset.y;

        self.viewNavBg.height = -(headViewH+scrollView.contentOffset.y);

    } else {

        

        self.viewNavBg.y = -(headViewH+navBgH);

        self.viewNavBg.height =navBgH;

    }

}

// tableview 自己问题

这些做法完成之后, 有时候tableview的顶部会多余一个白条, 这个白条怎么也不会消失. 这个很多时候都是tableview这个控件的bug导致的

设置方法:

1. - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {

    

    return 0.1;

}

2. - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{

    

    return 0.1;

}

3. self.tableview.tableHeaderView = [[UIViewalloc]initWithFrame:CGRectMake(0,0,WIDTH,0.01)];

4. 如果 tableview 设置为 UITableViewStylePlain 模式, sectionHeader和sectionFooter的高度有一个最高值, 超过这个最高值之后, tableview的头部或尾部就会覆盖cell列表.

解决方法: 设置为 UITableViewStyleGrouped就ok, 但不知道这个原因是由什么引起的

设置tableview被遮挡 神器 , 别问我是怎么知道的.

    self.automaticallyAdjustsScrollViewInsets=NO;

    self.edgesForExtendedLayout=UIRectEdgeNone;

    self.edgesForExtendedLayout =UIRectEdgeNone;