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

效果图：