iOS ScrollView子视图/TableView 类似secotionHead滑动至顶部时悬停在顶部实现方法(美团外卖附近商家筛选框悬停效果)

最近发现有很多App的tableView或者scrollView在滑动过程中,当某视图滑动到顶部时,会悬停在顶部,所以想了一下实现方法scrollView和tableView各想到连个实现方式。(如果效果图不动,可以右键图片在新窗口中打开)


美团效果.gif
效果图.gif

一、ScrollView实现顶部悬停

1.设置约束
添加约束用的是Masonry。
masonry里有一个属性priority,这个属性用来设置约束的等级或者可以说是优先级,autolayout里面也有这个属性。

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor= [UIColor whiteColor];
    
    self.navigationController.navigationBar.translucent = NO;
    
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:(CGRectMake(0, 0, DZHWidth, DZHHeight))];
    [self.view addSubview:scrollView];
    scrollView.contentSize = CGSizeMake(0, 2*DZHHeight);
    
    UIView *view1 = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, DZHWidth, 100))];
    view1.backgroundColor = [UIColor grayColor];
    [scrollView addSubview:view1];
    
    UIView *view2 = [[UIView alloc] initWithFrame:(CGRectMake(0, 102, DZHWidth, 100))];
    view2.backgroundColor = [UIColor grayColor];
    [scrollView addSubview:view2];
    
    UIView *view3 = [[UIView alloc] initWithFrame:(CGRectMake(0, 204, DZHWidth, 100))];
    view3.backgroundColor = [UIColor grayColor];
    [scrollView addSubview:view3];
    
    UIView *view4 = [[UIView alloc] initWithFrame:(CGRectMake(0, 306, DZHWidth, 100))];
    view4.backgroundColor = [UIColor grayColor];
    [scrollView addSubview:view4];
    
    UIView *view5 = [[UIView alloc] initWithFrame:(CGRectMake(0, 408, DZHWidth, 100))];
    view5.backgroundColor = [UIColor purpleColor];
    [scrollView addSubview:view5];
    [view5 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.greaterThanOrEqualTo(self.view.mas_top).priority(1000);
        make.top.equalTo(view4.mas_bottom).offset(2).priority(500);
        make.size.mas_equalTo(CGSizeMake(DZHWidth, 100));
        make.left.equalTo(self.view);
    }];
    
    UIView *view6 = [[UIView alloc] initWithFrame:(CGRectMake(0, 510, DZHWidth, 100))];
    view6.backgroundColor = [UIColor grayColor];
    [scrollView addSubview:view6];
    
    UIView *view7 = [[UIView alloc] initWithFrame:(CGRectMake(0, 612, DZHWidth, 100))];
    view7.backgroundColor = [UIColor grayColor];
    [scrollView addSubview:view7];
    
    UIView *view8 = [[UIView alloc] initWithFrame:(CGRectMake(0, 714, DZHWidth, 100))];
    view8.backgroundColor = [UIColor grayColor];
    [scrollView addSubview:view8];
    
    [scrollView bringSubviewToFront:view5];
    
}

这里view5 这个view设置为悬停

  [view5 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.greaterThanOrEqualTo(self.view.mas_top).priority(1000);
        make.top.equalTo(view4.mas_bottom).offset(2).priority(500);
        make.size.mas_equalTo(CGSizeMake(DZHWidth, 100));
        make.left.equalTo(self.view);
    }];

主要是为view5添加两个距上的约束,一个是top距离view4优先级低,另一个是设置view5添加一个距离self.view的约束,让view5距离self.view的距离不小于零,这样就达到了想要的效果。
2.第二种方法是在scrollView的代理中监听

    UIView *view5 = [[UIView alloc] initWithFrame:(CGRectMake(0, 408, DZHWidth, 100))];
    self.view5 = view5;
    view5.backgroundColor = [UIColor redColor];
    [scrollView addSubview:view5];
    
    self.view5SubView = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, DZHWidth, 100))];
    self.view5SubView.backgroundColor = [UIColor purpleColor];
    [self.view5 addSubview:self.view5SubView];
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  
    CGPoint point = [self.view5.superview convertPoint:self.view5.frame.origin toView:self.view];
    NSLog(@"----|%lf",point.y);
    
    if (point.y<0) {
        self.view5SubView.frame = CGRectMake(0, 0, DZHWidth, 100);
        [self.view addSubview:self.view5SubView];
    }
    else{
        self.view5SubView.frame = CGRectMake(0, 0, DZHWidth, 100);
        [self.view5 addSubview:self.view5SubView];
    }
  
}

实现思路主要是在代理里中监听view5的frame.origin相对self.view中的坐标。
这里如果想实现悬停悬停的不能是view5,因为view5的位置要用来判断,所以需要将想要悬停的视图需要加在view5上,view5SubView才是真正悬停的视图,如果当前view5在self.view中的位置<0则把view5SubView贴到self.view上,大于0时再贴回view5上。也可以实现悬停效果。

二、tableview实现悬停效果.

1.tableview本身sectionHead就有悬停效果,UITableView的Style为Plain时sectionHead本身就有有一个悬停效果,通过这样的方法搞来搞去总能实现。
2.第二种方法就是通过scrollView悬停的第二种方法,通过监听headview在self .view的相对位置来决定head view的子视图是贴在self.view上还是head view上.

另外:本来想着在tableview上也用约束去实现悬停,但是测试尝试把make.top.greaterThanOrEqualTo(self.view.mas_top).priority(1000);设置为self.view和tableview都会崩溃,说没有共同的父视图,所以没办法用约束去实现,不然用约束是最合适的,暂时还没想到给其他的参考,如果有想到的不吝赐教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 207,113评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,644评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,340评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,449评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,445评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,166评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,442评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,105评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,601评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,066评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,161评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,792评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,351评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,352评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,584评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,618评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,916评论 2 344

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,033评论 4 62
  • 大概孤独是常态,熬过去就好了!
    卡尔加里路阅读 133评论 0 0
  • 贺斯喆 秃鹤,原名陆鹤。是油麻地小学的一名小学生,因为是个十足的小秃子,同学们都叫他秃鹤,在他之前,从来都没有觉得...
    金盏菊2017阅读 977评论 0 1
  • 菜刀没了
    赵荣阅读 197评论 0 0
  • 知识卡片:62/365 以前的实践:慕课的课程大纲规划 首先与老师交流沟通,了解老师现有的知识体系,应用头脑风暴/...
    Cedric_Wang阅读 899评论 4 1