美文网首页iOS干货iOS tableview
iOS UIScrollView/Masonry自动布局对UIS

iOS UIScrollView/Masonry自动布局对UIS

作者: 那月无痕 | 来源:发表于2021-01-06 17:23 被阅读0次

    控制器中布局一般基础都是以UIscrollview为底部视图进行绘制的,方便我们进行屏幕适配。

    在使用masonry布局的时候如何让UIscrollview自动计算内容高度,实现contentsize自适应。

    第一步,添加UIscrollview到self.view上,并设置约束等于父视图,设置宽度。

        self.scrollView = [UIScrollView new];
        self.scrollView.backgroundColor = [UIColor grayColor];
        [self.view addSubview:self.scrollView];
        [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.view).offset(100);
            make.left.right.equalTo(self.view);
            make.bottom.equalTo(self.view);
        }];
    

    第二步,使用容器视图添加到UIscrollview上,所有的子视图布局在这个容器视图上。

        self.contentView = [UIView new];
        [self.scrollView addSubview:self.contentView];
        [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self.scrollView);
            make.width.equalTo(self.scrollView);
        }];
    

    第三部,设置布局的最底部的视图,容器视图的bottom等于最后一个视图的bottom

        [self.contentView addSubview:self.labTitle01];
        [self.contentView addSubview:self.labTitle02];
        [self.contentView addSubview:self.labTitle03];
        [self.labTitle01 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.contentView.mas_top).offset(10);
            make.width.mas_equalTo(kScreenWidth-20);
            make.centerX.equalTo(self.contentView);
        }];
        [self.labTitle02 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.labTitle01.mas_bottom).offset(10);
            make.width.mas_equalTo(kScreenWidth-20);
            make.centerX.equalTo(self.contentView);
        }];
        [self.labTitle03 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.labTitle02.mas_bottom).offset(10);
            make.width.mas_equalTo(kScreenWidth-20);
            make.centerX.equalTo(self.contentView);
        }];
    
        //第三部,设置布局的最底部的视图,容器视图的bottom等于最后一个视图的bottom
      [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.bottom.equalTo(self.labTitle03.mas_bottom).offset(30);
        }];
    

    UIScrollView使用Masonry布局最大的难点在于如何让子视图追随ScrollView滑动。
    目前使用最广泛的解决方式是为滑动视图添加一个过渡视图,之后将所有的子视图添加到过渡视图上,然后分别设置过渡视图与滑动视图约束(注:竖向滑动时,需将过渡视图的宽度固定;横向滑动时,需将过渡视图的高度固定)、过渡视图与第一个子视图边缘约束、过渡视图与最后一个子视图边缘约束。

    本示例以垂直滑动为例:

       UIScrollView *scrollView = [[UIScrollView alloc] init];
        scrollView.showsVerticalScrollIndicator = NO;
        scrollView.showsHorizontalScrollIndicator = NO;
        scrollView.backgroundColor = [UIColor redColor];
        
        UIView *containerView = [[UIView alloc] init];
        containerView.backgroundColor = [UIColor yellowColor];
        
        [self.view addSubview:scrollView];
        [scrollView addSubview:containerView];
        
        [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self.view);
        }];
        [containerView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(scrollView);
            make.width.equalTo(scrollView.mas_width);
        }];
        
        UIView *lastView;
        NSInteger viewsNumber = 20;
        
        for (int i = 0; i<viewsNumber; i++) {
            UIView *view= [[UIView alloc] init];
            view.backgroundColor = [UIColor colorWithRed:(arc4random()%255)/255.0 green:(arc4random()%255)/255.0 blue:(arc4random()%255)/255.0 alpha:1.f];
            [containerView addSubview:view];
            [view mas_makeConstraints:^(MASConstraintMaker *make) {
                if (0 == i) {
                    //第一个视图
                    make.top.equalTo(containerView.mas_top);
                }else {
                    make.top.equalTo(lastView.mas_bottom);
                }
                make.left.equalTo(containerView.mas_left);
                make.right.equalTo(containerView.mas_right);
                make.height.mas_equalTo(66.f);
                if (viewsNumber == i+1) {
                    //最后一个视图
                    make.bottom.equalTo(containerView.mas_bottom);
                }
                
            }];
            lastView = view;
        }
    
    

    效果图:

    image

    相关文章

      网友评论

        本文标题:iOS UIScrollView/Masonry自动布局对UIS

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