iOS Masonry 布局- UIScrollView/Masonry自动布局对UIScrollView的内容自适应

2020年10月13日13:26:37「复习」

控制器中布局一般基础都是以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;
    }

效果图：

标签：mas,self,布局,equalTo,视图,scrollView,UIScrollView,Masonry,make
来源： https://blog.51cto.com/u_4955660/2842831