IOS开发中利用Masonry自动布局ScrollView

Masonry是我们平时做开发中用的比较多的自动布局库，对于普通的视图布局，一般其都很容易实现，但对于ScrollView，UITableView以及UICollectionView这种滚动视图，则需要一些技巧

在UITableView自动（手动）混合计算高度这边文章中，介绍过如何对UITableView进行自动布局，其主要注意这么几点：

要求

tableView外部设置：

self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 44;

子View布局需要放置在Cell的contentView上面
子view负责支撑起contentView的大小
如代码：

     [self.contentView addSubview:_contentLabel];
     [self.contentView addSubview:_headerImage];
        // 约束可以直接放在创建的地方
        // 不要放在layoutSubviews 或 updateConstraints方法里
        [_headerImage mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.contentView).offset(10);
            make.top.equalTo(self.contentView).offset(20);
            make.height.width.equalTo(@50);
        }];
        
        [_contentLabel mas_updateConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(_headerImage.mas_bottom).offset(5);
            make.left.right.equalTo(self.contentView);
            // 这一步是关键 让cell知道最底部在哪儿, 然后算出自身高度
            make.bottom.equalTo(self.contentView);
        }];

比较关键的一步是垂直方向从上到下，最后一个视图的bottom要设置的和contentView的大小一致，这样才能达到自动布局的效果。

因为tableView的cell自带了contentView这个视图，其大小和cell的大小一样，所以我们只需要想办法支撑起contentView的高度即可达到自动布局的效果，但对于ScrollView，其并没有为我们提供contentView，那要如何自动布局呢？

我们平时在使用UIScrollView的时候，必须得给一个固定的contentsize才能实现滚动效果，那是因为UIScrollview内部实现原理是依托于已知contentsize去实现的，具体可以文献3中的scrollView原理。在使用masonry为scrollview布局时，需要在其上自定义add一个contentView子容器视图，通过这个子视图的尺寸去撑起scrollview，这样scrollview就有了具体的contentsize。

//布局scrollview
   UIScrollView  *myScrollView = [[UIScrollView alloc] init];
    [self.view addSubview:myScrollView];
    myScrollView.backgroundColor = [UIColor whiteColor];
    [myScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_equalTo(strongSelf.view);
    }];
//布局contentView
    contentView = [[UIView alloc] init];
    [myScrollView addSubview:contentView];
    contentView.backgroundColor = [UIColor whiteColor];
    [contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        //注意点1
        make.edges.mas_equalTo(myScrollView);
      //垂直方向，宽度必须指定
        make.width.mas_equalTo(myScrollView);
    }];

这里注意的点：

contentView相对scrollView的布局设置必须给出明确的说明，如注意点1，这里设置的是和scrollView的大小一致
必须给出明确的宽度，且要大于0，否则不能展示。
子视图可以参照tableView自动布局，只要支撑起contentView的高度即可。

案例

利用Masonry来实现一个自动布局的滚动视图

效果如下：

滚动效果.gif

//创建ScrollView
    self.mainScrollView = [[UIScrollView alloc] init];
    [self.view addSubview:self.mainScrollView];
    [self.mainScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
    UIView *contentView = [[UIView alloc] init];
    contentView.backgroundColor = [UIColor whiteColor];
    [self.mainScrollView addSubview:contentView];
//创建子容器
 [contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.mainScrollView).inset(15.f);
        make.left.equalTo(self.mainScrollView).inset(15.f);
        make.right.equalTo(self.mainScrollView).inset(15.f);
        make.width.mas_equalTo(self.view.bounds.size.width - 30.f);
        make.bottom.equalTo(self.mainScrollView).inset(15.f);
        make.height.greaterThanOrEqualTo(@0);
    }];
  //生成View
    NSMutableArray *labelViews = [NSMutableArray arrayWithCapacity:1];
    for (int i = 0; i < 20; i++) {
        UILabel *label = [[UILabel alloc] init];
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = [self RandomColor];
        label.backgroundColor = [self getRandomBackgroundColor];
        label.text = [NSString stringWithFormat:@"我是Label,索引值为:%d",i+1];
        label.font = [UIFont boldSystemFontOfSize:16.f];
        [contentView addSubview:label];
        [labelViews addObject:label];
    }
    //布局子视图
    UILabel *prev = nil;
    for (int i = 0; i < labelViews.count; i++) {
        if (!prev) {
            [labelViews[i] mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.left.right.equalTo(contentView);
                make.height.mas_equalTo(100);
            }];
        } else {
            [labelViews[i] mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(prev.mas_bottom);
                make.left.right.equalTo(prev);
                make.height.mas_equalTo(100);
                if (i == labelViews.count - 1) {
                    make.bottom.equalTo(contentView.mas_bottom);
                }
            }];
        }
        prev = labelViews[i];
    }

demo地址：https://github.com/UCliwenbin/MasonryForScrollView.git

IOS开发中利用Masonry自动布局ScrollView

要求

案例

参考文档