美文网首页iOS技术点iOS控件封装UI基础
巧妙实现悬浮tableviewHeaderView方法

巧妙实现悬浮tableviewHeaderView方法

作者: Lonely__M | 来源:发表于2015-05-27 15:17 被阅读40356次

    效果图如下:

    红色区域为headerView

    核心思路

    将自定义的headerView放在tabView 的上面,而不是作为tableView.tableHeaderView(即headerView和tableView平级,都添加到viewController的view上),然后设置tableView的contentInset为合适的值,在tableView滑动的时候,动态改变view的位置或者大小,使这个headerView看起来就像是有了悬浮功能的tableView.tableHeaderView。

    核心代码如下:

    mainTable = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
    mainTable.delegate = self;
    mainTable.dataSource = self;
    mainTable.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);
    mainTable.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:mainTable];
    
    //添加监听,动态观察tableview的contentOffset的改变
    [mainTable addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
    
    tableData = @[@"12",@"werd",@"sdfgd",@"fs"];
    
    headerView = [[MyView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200)];
    headerView.backgroundColor =[UIColor redColor];
    [self.view addSubview:headerView];
    

    实现KVC回调方法

    #pragma mark KVC 回调
    //本例设置headerView的最大高度为200,最小为64
    (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
    {
    if ([keyPath isEqualToString:@"contentOffset"])
    {
        CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];
        if (offset.y <= 0 && -offset.y >= 64) {
            
            CGRect newFrame = CGRectMake(0, 0, self.view.frame.size.width, -offset.y);
            headerView.frame = newFrame;
            if (-offset.y <=200)
            {
                mainTable.contentInset = UIEdgeInsetsMake(-offset.y, 0, 0, 0);
            }
        } else {
            CGRect newFrame = CGRectMake(0, 0, self.view.frame.size.width, 64);
            headerView.frame = newFrame;
            mainTable.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
        }
    }
    }
    

    tip

    值得注意的是,headerView继承自MyView,如果不继承MyView的话,当滑动headerView的时候,tableView不会移动,因为headerView覆盖在tableVIew上层

    MyView继承了UIView,改写了hitTest方法,代码如下:

    #import "MyView.h"
     @implementation MyView
    
    
    //hitTest的作用:当在一个view上添加一个屏蔽罩,但又不影响对下面   view的操作,也就是可以透过屏蔽罩对下面的view进行操作,这个函数就很好用了。
    hitTest的用法:将下面的函数添加到UIView的子类中,也就是屏蔽罩类中即可。
    
    
    (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
    {
    UIView *result = [super hitTest:point withEvent:event];
    if (result == self) {
        return nil;
    } else {
        return result;
    }
    }
    
    @end
    

    至此,完成悬浮tableHeaderView,特此记录,与君共勉。

    Tip


    学习的路上总是曲折的,每个人都是从菜鸟过来的,遇到问题总是希望能够与他人沟通交流,而在各种群里问了问题就石沉大海,所以想建一个技术交流为主的群,遇到的问题可以记录下来分享给他人,方便了自己,也造就了他人,不管怎样,记录点滴,但愿与君共勉

    *QQ群号:527377492 *

    Paste_Image.png

    相关文章

      网友评论

      • 喵喵退后:往上滑的时候卡的特别严重真不知道博主是怎么实现的
      • 喵喵退后:代码都一样,滑动的时候卡顿的不行跟博主展示的不一样啊
      • ShiyongTan:群主, 请问有demo吗? 发个demo看看咯.
      • FallPine:博主,我在headerView中有点击事件,如果实现hitTest这个方法的话,点击事件就无法响应了。请问一下,有没有既能实现点击事件,有能滚动的方法啊???
      • 徽Se头像:介个要实现吸顶效果,应该怎么改呀
      • 泪无痕521:监听代理方法就可以了 不用这么麻烦
      • 草原野马:看这个界面还加刷新了MJ的。会被挡住,怎么可以不被挡住。
      • binj:swift中监听后,改变headerview的高度,fram改变成功,但是界面上控件没有发生高度变化
      • a1b13f42acb5:博主,这里描述有一个地方是错的,“实现KVC回调方法” 改为“实现KVO回调方法”
      • follow_er:方法有很多 但是这个感觉挺麻烦的 ,有没有更简单的思路呢?
      • onehao16:swift版本 怎么处理呢 我试了一下 监听哪里headView为空还没有进进入界面就挂了
      • _格调:频繁改动contentInset 会有卡顿
      • 4accece9b0f6:试试效果~
      • 小時間光:MyView类是对系统的UIView做扩展吗?
      • 3f6f183e1fa3:你好,请问一下:我的headerView也是继承自MyView,但是滑动headerView的时候,tableView还是不会移动,这是怎么回事呢?我的tableview是在Storyboard里面添加的,然后headerView是动态添加的,跟这个有关系么?
        3f6f183e1fa3:@Lonely__ 我重写过了,没有用呃
        Lonely__M:@liangjie_0000 重写MyView的方法,文章中有提到
      • 639b9930d1cc:你好 有没有完整的demo呀 可以看看吗
      • 474dcc96aa88:如果tableHeaderView中有张可以点击查看大图的UIImageView,在这个UIImageView上拖动是无法正常滚动后面的UITbaleView的,因为事件被UIImageView拦截了
      • 9ca89407f2e6:收藏了
      • 三十一_iOS:好东西!!!

      本文标题:巧妙实现悬浮tableviewHeaderView方法

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