IOS開發(fā)中利用Masonry自動布局ScrollView

Masonry是我們平時做開發(fā)中用的比較多的自動布局庫争剿，對于普通的視圖布局，一般其都很容易實現(xiàn)，但對于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];
        // 約束可以直接放在創(chuàng)建的地方
        // 不要放在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才能實現(xiàn)滾動效果退腥，那是因為UIScrollview內(nèi)部實現(xiàn)原理是依托于已知contentsize去實現(xiàn)的超营，具體可以文獻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來實現(xiàn)一個自動布局的滾動視圖

效果如下：

滾動效果.gif

//創(chuàng)建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];
//創(chuàng)建子容器
 [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開發(fā)中利用Masonry自動布局ScrollView

要求

案例

參考文檔