iOS ScrollView子视图/TableView 类似se

作者: Zhui_Do | 来源:发表于2017-05-05 16:08 被阅读414次

最近发现有很多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都会崩溃,说没有共同的父视图,所以没办法用约束去实现,不然用约束是最合适的,暂时还没想到给其他的参考,如果有想到的不吝赐教。

相关文章

网友评论

本文标题:iOS ScrollView子视图/TableView 类似se

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