前言

相信很多同學都遇到這麼一個問題：在storyboard上如何使用scrollview自動根據內容的增長而自動使其contentSize而變化，以使之可滾動。或者如何使用純程式碼實現scrollview上使新增的控制元件在超出顯示螢幕時可滾動，也就是根據內容自動計算出其contentSize的問題。

在這裡，將使用storyboard和Masonry純程式碼實現scrollview自動佈局。如果有說得不正確的地方，歡迎指出!

說明：本人向來不使用xib或者storyboard開發，幾乎都是使用純程式碼的autolayout，也就是使用Masonry。不管是使用Swift開發或者是Objective-C

開發，都會基於Masonry或SnapKit寫一套控制元件，以簡化開發。

ScrollView Autolayout

我們實現下面的效果圖：

第一步：新增UIScrollView並佈局約束為點滿整個self.view

點選右下角的第二個小圖示，新增約束如下圖：

設定UIScrollView的上、下、左、右與self.view的上、下、左、右都一致，相當於點滿了整個self.view。

注意：Constraints to margin儘量不要勾選，也就是是否使用margin的意思。如果學習過HTML，應該更容易理解。在HTML中有margin、padding，對於一個盒（Box），除了content外，還有padding、margin。其中padding是與內容的間隔，而margin是與外部的間隔。在這裡，如果勾選了，就會相差8個畫素。個人在使用中都會去掉這個勾選。

第二步：新增紅色的標籤(redLabel)

首先設定這個標籤的相關前景色、背景色、numberOfLines=0，新增文字等，然後選中這個標籤，像上面第一步中的圖片指示，點選右下角小圖示，在彈出框中新增約束。

新增約束為：左、上、右與self.view的左、上、右相等，內容會自動換行，高度會自動得到。這裡可以使左、上與UIScrollView的左、上相等，但是不能使用右（trailing）不能等於UIScrollView的右（trailing）。

注意：在使用佈局子控制元件到UIScrollView上時，由於UIScrollView的right是不確定的，因為UIScrollView

有contentSize，即內容的寬和內容的高。

第三步：新增綠色標籤(blueLabel)

與第二步差不多，新增前景色等，新增約束為：使blueLabel的leading和width分別等於redLabel的leading和width，再使blueLabel的top等於redLabel的bottom再加上20（間隔）。

第四步：新增圖片（imgView）

新增圖片很簡單，設定約束為：width和height值都設定為250，top為blueLabel的bottom再加上20，然後設定水平居中就可以了。看下圖：

第五步：新增白色標籤（whiteLabel）

與第三步差不多，只是top為imgView的bottom再加上20就可以了。

第六步：新增紅色按鈕

按鈕顏色等配置就不說了，只說如何新增約束。這裡需要注意一點，需要設定bottom，以確定scrollview的contentSize.height。新增約束為：leading、trailing、bottom分別與scrollview的leading、trailing、bottom+20相等，再設定其height、top就可以了。這裡使button的bottom=scrollview.bottom，也就可以確定scrollview的contentSize.height了.

平分佈局

下面我們來實現下面的佈局，使控制元件平分顯示。

第一行：如何平分這兩個控制元件使其等寬、等高、間隔20，與self.view的左、右間隔10畫素。

• 首先，同時選中這兩個控制元件，先新增下面的約束：設定這兩個控制元件Equal widths,Equal heights。
• 設定左邊的控制元件的約束為：leading為10，height為80，trailing為右邊控制元件的leading-20，top為0.
• 設定右邊的控制元件的約束為：trailing為-10，top=左邊控制元件的top就可以實現了。

注意：這裡設定左邊的控制元件的trailing為右邊控制元件的leading，再減去20個畫素（間隔），這樣才能確定其寬。

第二行：如何三等分顯示，使中間兩個間隔都為20，外邊兩個與邊界的間隔都為10

• 首先，同時選中這三個控制元件，新增約束：等寬、等高。
• 設定button3的top距離上方控制元件的底部20畫素，再設定button4、button5的top都與button3的top一致。設定button3的leading為10，trailing為button4的leading-20.
• 設定button4的trailing為button5的leading-20
• 設定button5的trailing為-10

第三行：如何將兩個控制元件的高度等分

第三行中左邊是一個圖片，右邊是兩個按鈕，一上一下且等寬等高，中間間隔10畫素。

• 首先，固定左邊的圖片，設定約束：寬、高都為250，leading為10，top為20.
• 將button6和button7設定為等寬、等高
• 設定button6的leading為10，trailing為-10，top為左邊圖片的top
• 設定button7的leading和trailing都為button6的leading和trailing
• 最後，同時選中button6和button7，按住ctrl，拖向左邊的圖片，設定AspectRadio，設定其比例為40：100，這樣每個按鈕的高度就是圖片的高度的40%。當然這裡我們也可以直接設定button7的bottom=左邊的圖片的bottom，這樣也可以達到目的。

基於Masonry的Autolayout

下面我們給self.view上放一個點滿的scrollview:

UIScrollView *scrollView = [[UIScrollView alloc] init];
[self.view addSubview:scrollView];

然後，我們放一個說明標籤，具體說明看程式碼註釋：

// 放一個說明標籤
UILabel *tipLabel = [[UILabel alloc] init];
tipLabel.backgroundColor = [UIColor redColor];
tipLabel.numberOfLines = 0;
tipLabel.textColor = [UIColor whiteColor];
tipLabel.textAlignment = NSTextAlignmentLeft;
[scrollView addSubview:tipLabel];
[tipLabel mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.top.mas_equalTo(10);
  // 注意：這裡直接使用weakSelf.view，相當於weakSelf.view.mas_right
  // 另外：由於要與weakSelf.view.mas_right距離10畫素，因此這裡值為-10。
  make.right.mas_equalTo(weakSelf.view).offset(-10);
}];
tipLabel.text = @"這個標籤是使用Masonry完成的純程式碼自動佈局。這個標籤的約束新增方式為：使左、上與父檢視的左、上分別相等，使右邊與self.view的右邊的相距-10，就可以確定其寬。這裡不能使用使右等於scrollview的右，因為scrollview是可以滾動的，其右是不確定的。";

接下來，在tipLabel下面又放一個標籤，具體說明看程式碼註釋：

UILabel *codeLabel = [[UILabel alloc] init];
codeLabel.backgroundColor = [UIColor redColor];
codeLabel.numberOfLines = 0;
codeLabel.textColor = [UIColor whiteColor];
codeLabel.textAlignment = NSTextAlignmentLeft;
[scrollView addSubview:codeLabel];
[codeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
  // 使與tipLabel的左、右分別對齊 ，也就確定了寬
  make.left.right.mas_equalTo(tipLabel);

  make.top.mas_equalTo(tipLabel.mas_bottom).offset(40);
  // 注意：這裡直接使用weakSelf.view，相當於weakSelf.view.mas_right
  // 另外：由於要與weakSelf.view.mas_right距離10畫素，因此這裡值為-10。
}];
codeLabel.text = @"本標籤的約束新增方式為：使左、右與上面的標籤的左、右分別對齊，由此就可確定左、右和寬，再使頂部top等於上面的標籤的bottom再加上40個畫素。\n歡迎掃一掃我的微信公眾號二維碼，關注公眾號，或者直接搜尋iOSDevShares。若想加QQ群，請加：324400294";

下面我們在上面的標籤之下，放一個圖片。對於圖片，如果圖片本身大小是正好合適的，那麼我們可以使用sizeToFit方法來生成適應，但是我們圖片過大或者過小，那麼我們可以在約束中指定為固定的大小：

UIImageView *codeImageView = [[UIImageView alloc] init];
codeImageView.image = [UIImage imageNamed:@"微信公眾號.jpg"];
[scrollView addSubview:codeImageView];
[codeImageView mas_makeConstraints:^(MASConstraintMaker *make) {
  make.centerX.equalTo(weakSelf.view);
  make.top.mas_equalTo(codeLabel.mas_bottom).offset(20);
  make.size.mas_equalTo(CGSizeMake(250, 250));
}];

// 由於圖片過大，需要限制。如果是圖片剛好，可以不設定大小的約束，使用下面的方式。
//  [codeImageView sizeToFit];

使用程式碼又是如何平分控制元件的呢？下面看看這兩個標籤，其內容是可變的，不知道哪個的內容多，但是其寬是一樣的，只是高度會隨內容而動態變化。

// 平分兩個控制元件
UILabel *avgLabel1 = [[UILabel alloc] init];
avgLabel1.backgroundColor = [UIColor redColor];
avgLabel1.numberOfLines = 0;
avgLabel1.textColor = [UIColor whiteColor];
avgLabel1.textAlignment = NSTextAlignmentCenter;
[scrollView addSubview:avgLabel1];
avgLabel1.text = @"本控制元件的約束新增方式為：使left與父檢視的left相距10畫素，使top=上面的圖片的bottom再加40畫素，使right=右邊這個標籤的left再減去20個畫素（間隔），使height=80。";

UILabel *avgLabel2 = [[UILabel alloc] init];
avgLabel2.backgroundColor = [UIColor redColor];
avgLabel2.numberOfLines = 0;
avgLabel2.textColor = [UIColor whiteColor];
avgLabel2.textAlignment = NSTextAlignmentCenter;
[scrollView addSubview:avgLabel2];
avgLabel2.text = @"本控制元件的約束新增方式為：使right=self.view的right再減去10畫素，然後再設定寬、top都與左右的檢視一樣，就可以實現水平平分了。本控制元件的約束新增方式為：使right=self.view的right再減去10畫素，然後再設定寬、top都與左右的檢視一樣，就可以實現水平平分了。";

[avgLabel1 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.mas_equalTo(10);
  make.top.mas_equalTo(codeImageView.mas_bottom).offset(40);
  make.right.mas_equalTo(avgLabel2.mas_left).offset(-20);
}];
[avgLabel2 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.right.mas_equalTo(weakSelf.view.mas_right).offset(-10);
  make.width.top.mas_equalTo(avgLabel1);
}]

最後，看看我們是如何使scrollview隨內容而變化，也就是可以滾動。另外，上面的兩個控制元件是等寬的，但是其高都是不定的，到底以哪個的bottom作為scrollView的bottom呢？這裡使用了很巧妙的方法。

// 使用edges使點滿整個self.view
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
  make.edges.equalTo(weakSelf.view);

  // 如果這兩個標籤的內容都是不確定的，也就是不確定哪個的內容更多，那麼可以這麼設定。
  // 這樣就可以保證使用內容最多的標籤作為scrollview的contentSize參考。
  // 用於確定scrollview的contentSize.height
  make.bottom.mas_greaterThanOrEqualTo(avgLabel1.mas_bottom).offset(40);
  make.bottom.mas_greaterThanOrEqualTo(avgLabel2.mas_bottom).offset(40);
}];

原始碼

公眾號搜尋「iOS開發技術分享」快速關注微訊號：iOSDevShares QQ群：324400294