自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

iOS自動布局框架 – Masonry詳解

作者：佚名
移動開發(fā) iOS
一般用純代碼開發(fā)UI的話，一般都是配合一些自動化布局的框架進(jìn)行屏幕適配。蘋果為我們提供的適配框架有：VFL、UIViewAutoresizing、Auto Layout、Size Classes等。后來Github上的出現(xiàn)了基于UILayoutConstraint封裝的第三方布局框架Masonry，Masonry使用起來非常方便，本篇文章就詳細(xì)講一下Masonry的使用

目前iOS開發(fā)中大多數(shù)頁面都已經(jīng)開始使用Interface Builder的方式進(jìn)行UI開發(fā)了，但是在一些變化比較復(fù)雜的頁面，還是需要通過代碼來進(jìn)行UI開發(fā)的。而且有很多比較老的項目，本身就還在采用純代碼的方式進(jìn)行開發(fā)。

而現(xiàn)在iPhone和iPad屏幕尺寸越來越多，雖然開發(fā)者只需要根據(jù)屏幕點進(jìn)行開發(fā)，而不需要基于像素點進(jìn)行UI開發(fā)。但如果在項目中根據(jù)不同屏幕尺寸進(jìn)行各種判斷，寫死坐標(biāo)的話，這樣開發(fā)起來是很吃力的。

所以一般用純代碼開發(fā)UI的話，一般都是配合一些自動化布局的框架進(jìn)行屏幕適配。蘋果為我們提供的適配框架有：VFL、UIViewAutoresizing、Auto Layout、Size Classes等。

其中Auto Layout是使用頻率最高的布局框架，但是其也有弊端。就是在使用UILayoutConstraint的時候，會發(fā)現(xiàn)代碼量很多，而且大多都是重復(fù)性的代碼，以至于好多人都不想用這個框架。

后來Github上的出現(xiàn)了基于UILayoutConstraint封裝的第三方布局框架Masonry，Masonry使用起來非常方便，本篇文章就詳細(xì)講一下Masonry的使用。 

 

 

[[182259]] 

Masonry介紹

這篇文章只是簡單介紹Masonry，以及Masonry的使用，并且會舉一些例子出來。但并不會涉及到Masonry的內(nèi)部實現(xiàn)，以后會專門寫篇文章來介紹其內(nèi)部實現(xiàn)原理，包括順便講一下鏈?zhǔn)秸Z法。

什么是Masonry

Masonry是一個對系統(tǒng)NSLayoutConstraint進(jìn)行封裝的第三方自動布局框架，采用鏈?zhǔn)骄幊痰姆绞教峁┙o開發(fā)者API。系統(tǒng)AutoLayout支持的操作，Masonry都支持，相比系統(tǒng)API功能來說，Masonry是有過之而無不及。

Masonry采取了鏈?zhǔn)骄幊痰姆绞剑a理解起來非常清晰易懂，而且寫完之后代碼量看起來非常少。之前用NSLayoutConstraint寫很多代碼才能實現(xiàn)的布局，用Masonry最少一行代碼就可以搞定。下面看到Masonry的代碼就會發(fā)現(xiàn)，太簡單易懂了。

Masonry是同時支持Mac和iOS兩個平臺的，在這兩個平臺上都可以使用Masonry進(jìn)行自動布局。我們可以從MASUtilities.h文件中，看到下面的定義，這就是Masonry通過宏定義的方式，區(qū)分兩個平臺獨有的一些關(guān)鍵字。

  1. #if TARGET_OS_IPHONE     
  2.     #import 
  3.     #define MAS_VIEW UIView 
  4.     #define MASEdgeInsets UIEdgeInsets 
  5. #elif TARGET_OS_MAC 
  6.     #import 
  7.     #define MAS_VIEW NSView 
  8.     #define MASEdgeInsets NSEdgeInsets 
  9. #endif  

Github地址：

https://github.com/SnapKit/Masonry

集成方式

Masonry支持CocoaPods，可以直接通過podfile文件進(jìn)行集成，需要在CocoaPods中添加下面代碼：

  1. pod 'Masonry' 

Masonry學(xué)習(xí)建議

在UI開發(fā)中，純代碼和Interface Builder我都是用過的，在開發(fā)過程中也積累了一些經(jīng)驗。對于初學(xué)者學(xué)習(xí)純代碼AutoLayout，我建議還是先學(xué)會Interface Builder方式的AutoLayout，領(lǐng)悟蘋果對自動布局的規(guī)則和思想，然后再把這套思想嵌套在純代碼上。這樣學(xué)習(xí)起來更好入手，也可以避免踩好多坑。

在項目中設(shè)置的AutoLayout約束，起到對視圖布局的標(biāo)記作用。設(shè)置好約束之后，程序運行過程中創(chuàng)建視圖時，會根據(jù)設(shè)置好的約束計算frame，并渲染到視圖上。

所以在純代碼情況下，視圖設(shè)置的約束是否正確，要以運行之后顯示的結(jié)果和打印的log為準(zhǔn)。

Masonry中的坑

在使用Masonry進(jìn)行約束時，有一些是需要注意的。

  1. 在使用Masonry添加約束之前，需要在addSubview之后才能使用，否則會導(dǎo)致崩潰。
  2. 在添加約束時初學(xué)者經(jīng)常會出現(xiàn)一些錯誤，約束出現(xiàn)問題的原因一般就是兩種：約束沖突和缺少約束。對于這兩種問題，可以通過調(diào)試和log排查。
  3. 之前使用Interface Builder添加約束，如果約束有錯誤直接就可以看出來，并且會以紅色或者黃色警告體現(xiàn)出來。而Masonry則不會直觀的體現(xiàn)出來，而是以運行過程中崩潰或者打印異常log體現(xiàn)，所以這也是手寫代碼進(jìn)行AutoLayout的一個缺點。

這個問題只能通過多敲代碼，積攢純代碼進(jìn)行AutoLayout的經(jīng)驗，慢慢就用起來越來越得心應(yīng)手了。

Masonry基礎(chǔ)使用

Masonry基礎(chǔ)API

  1. mas_makeConstraints()    添加約束 
  2. mas_remakeConstraints()  移除之前的約束，重新添加新的約束 
  3. mas_updateConstraints()  更新約束 
  4.   
  5. equalTo()       參數(shù)是對象類型，一般是視圖對象或者mas_width這樣的坐標(biāo)系對象 
  6. mas_equalTo()   和上面功能相同，參數(shù)可以傳遞基礎(chǔ)數(shù)據(jù)類型對象，可以理解為比上面的API更強(qiáng)大 
  7.   
  8. width()         用來表示寬度，例如代表view的寬度 
  9. mas_width()     用來獲取寬度的值。和上面的區(qū)別在于，一個代表某個坐標(biāo)系對象，一個用來獲取坐標(biāo)系對象的值  

Auto Boxing

上面例如equalTo或者width這樣的，有時候需要涉及到使用mas_前綴，這在開發(fā)中需要注意作區(qū)分。

如果在當(dāng)前類引入#import "Masonry.h"之前，用下面兩種宏定義聲明一下，就不需要區(qū)分mas_前綴。

  1. // 定義這個常量，就可以不用在開發(fā)過程中使用"mas_"前綴。 
  2. #define MAS_SHORTHAND 
  3. // 定義這個常量，就可以讓Masonry幫我們自動把基礎(chǔ)數(shù)據(jù)類型的數(shù)據(jù)，自動裝箱為對象類型。 
  4. #define MAS_SHORTHAND_GLOBALS  

修飾語句

Masonry為了讓代碼使用和閱讀更容易理解，所以直接通過點語法就可以調(diào)用，還添加了and和with兩個方法。這兩個方法內(nèi)部實際上什么都沒干，只是在內(nèi)部將self直接返回，功能就是為了更加方便閱讀，對代碼執(zhí)行沒有實際作用。

例如下面的例子：

  1. make.top.and.bottom.equalTo(self.containerView).with.offset(padding); 

其內(nèi)部代碼實現(xiàn)，實際上就是直接將self返回。

  1. - (MASConstraint *)with { 
  2.     return self; 
  3. }  

更新約束和布局

關(guān)于更新約束布局相關(guān)的API，主要用以下四個API：

  1. - (void)updateConstraintsIfNeeded  調(diào)用此方法，如果有標(biāo)記為需要重新布局的約束，則立即進(jìn)行重新布局，內(nèi)部會調(diào)用updateConstraints方法 
  2. - (void)updateConstraints          重寫此方法，內(nèi)部實現(xiàn)自定義布局過程 
  3. - (BOOL)needsUpdateConstraints     當(dāng)前是否需要重新布局，內(nèi)部會判斷當(dāng)前有沒有被標(biāo)記的約束 
  4. - (void)setNeedsUpdateConstraints  標(biāo)記需要進(jìn)行重新布局  

關(guān)于UIView重新布局相關(guān)的API，主要用以下三個API：

  1. - (void)setNeedsLayout  標(biāo)記為需要重新布局 
  2. - (void)layoutIfNeeded  查看當(dāng)前視圖是否被標(biāo)記需要重新布局，有則在內(nèi)部調(diào)用layoutSubviews方法進(jìn)行重新布局 
  3. - (void)layoutSubviews  重寫當(dāng)前方法，在內(nèi)部完成重新布局操作  

Masonry示例代碼

Masonry本質(zhì)上就是對系統(tǒng)AutoLayout進(jìn)行的封裝，包括里面很多的API，都是對系統(tǒng)API進(jìn)行了一次二次包裝。

  1. Masonry本質(zhì)上就是對系統(tǒng)AutoLayout進(jìn)行的封裝，包括里面很多的API，都是對系統(tǒng)API進(jìn)行了一次二次包裝。 
  2. typedef NS_OPTIONS(NSInteger, MASAttribute) { 
  3.     MASAttributeLeft = 1 << NSLayoutAttributeLeft, 
  4.     MASAttributeRight = 1 << NSLayoutAttributeRight, 
  5.     MASAttributeTop = 1 << NSLayoutAttributeTop, 
  6.     MASAttributeBottom = 1 << NSLayoutAttributeBottom, 
  7.     MASAttributeLeading = 1 << NSLayoutAttributeLeading, 
  8.     MASAttributeTrailing = 1 << NSLayoutAttributeTrailing, 
  9.     MASAttributeWidth = 1 << NSLayoutAttributeWidth, 
  10.     MASAttributeHeight = 1 << NSLayoutAttributeHeight, 
  11.     MASAttributeCenterX = 1 << NSLayoutAttributeCenterX, 
  12.     MASAttributeCenterY = 1 << NSLayoutAttributeCenterY, 
  13.     MASAttributeBaseline = 1 << NSLayoutAttributeBaseline, 
  14. };  

常用方法

設(shè)置內(nèi)邊距

  1. /** 
  2. 設(shè)置yellow視圖和self.view等大，并且有10的內(nèi)邊距。 
  3. 注意根據(jù)UIView的坐標(biāo)系，下面right和bottom進(jìn)行了取反。所以不能寫成下面這樣，否則right、bottom這兩個方向會出現(xiàn)問題。 
  4. make.edges.equalTo(self.view).with.offset(10); 
  5.   
  6. 除了下面例子中的offset()方法，還有針對不同坐標(biāo)系的centerOffset()、sizeOffset()、valueOffset()之類的方法。 
  7. */ 
  8. [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) { 
  9.     make.left.equalTo(self.view).with.offset(10); 
  10.     make.top.equalTo(self.view).with.offset(10); 
  11.     make.right.equalTo(self.view).with.offset(-10); 
  12.     make.bottom.equalTo(self.view).with.offset(-10); 
  13. }];  

通過insets簡化設(shè)置內(nèi)邊距的方式

  1. // 下面的方法和上面例子等價，區(qū)別在于使用insets()方法。 
  2. [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) { 
  3.     // 下、右不需要寫負(fù)號，insets方法中已經(jīng)為我們做了取反的操作了。 
  4.     make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10)); 
  5. }];  

更新約束

  1. // 設(shè)置greenView的center和size，這樣就可以達(dá)到簡單進(jìn)行約束的目的 
  2. [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) { 
  3.     make.center.equalTo(self.view); 
  4.     // 這里通過mas_equalTo給size設(shè)置了基礎(chǔ)數(shù)據(jù)類型的參數(shù)，參數(shù)為CGSize的結(jié)構(gòu)體 
  5.     make.size.mas_equalTo(CGSizeMake(300, 300)); 
  6. }]; 
  7.   
  8. // 為了更清楚的看出約束變化的效果，在顯示兩秒后更新約束。 
  9. dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ 
  10.     [self.greenView mas_updateConstraints:^(MASConstraintMaker *make) { 
  11.         make.centerX.equalTo(self.view).offset(100); 
  12.         make.size.mas_equalTo(CGSizeMake(100, 100)); 
  13.     }]; 
  14. });  

大于等于和小于等于某個值的約束

  1. [self.textLabel mas_makeConstraints:^(MASConstraintMaker *make) { 
  2.     make.center.equalTo(self.view); 
  3.     // 設(shè)置寬度小于等于200 
  4.     make.width.lessThanOrEqualTo(@200); 
  5.     // 設(shè)置高度大于等于10 
  6.     make.height.greaterThanOrEqualTo(@(10)); 
  7. }]; 
  8.   
  9. self.textLabel.text = @"這是測試的字符串。能看到1、2、3個步驟，第一步當(dāng)然是上傳照片了，要上傳正面近照哦。上傳后，網(wǎng)站會自動識別你的面部，如果覺得識別的不準(zhǔn)，你還可以手動修改一下。左邊可以看到16項修改參數(shù)，最上面是整體修改，你也可以根據(jù)自己的意愿單獨修改某項，將鼠標(biāo)放到選項上面，右邊的預(yù)覽圖會顯示相應(yīng)的位置。"; 

 textLabel只需要設(shè)置一個屬性即可

  1. self.textLabel.numberOfLines = 0; 

使用基礎(chǔ)數(shù)據(jù)類型當(dāng)做參數(shù)

  1. /** 
  2. 如果想使用基礎(chǔ)數(shù)據(jù)類型當(dāng)做參數(shù)，Masonry為我們提供了"mas_xx"格式的宏定義。 
  3. 這些宏定義會將傳入的基礎(chǔ)數(shù)據(jù)類型轉(zhuǎn)換為NSNumber類型，這個過程叫做封箱(Auto Boxing)。 
  4.   
  5. "mas_xx"開頭的宏定義，內(nèi)部都是通過MASBoxValue()函數(shù)實現(xiàn)的。 
  6. 這樣的宏定義主要有四個，分別是mas_equalTo()、mas_offset()和大于等于、小于等于四個。 
  7. */ 
  8. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 
  9.     make.center.equalTo(self.view); 
  10.     make.width.mas_equalTo(100); 
  11.     make.height.mas_equalTo(100); 
  12. }]; 

 設(shè)置約束優(yōu)先級

  1. /** 
  2. Masonry為我們提供了三個默認(rèn)的方法，priorityLow()、priorityMedium()、priorityHigh()，這三個方法內(nèi)部對應(yīng)著不同的默認(rèn)優(yōu)先級。 
  3. 除了這三個方法，我們也可以自己設(shè)置優(yōu)先級的值，可以通過priority()方法來設(shè)置。 
  4. */ 
  5. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 
  6.     make.center.equalTo(self.view); 
  7.     make.width.equalTo(self.view).priorityLow(); 
  8.     make.width.mas_equalTo(20).priorityHigh(); 
  9.     make.height.equalTo(self.view).priority(200); 
  10.     make.height.mas_equalTo(100).priority(1000); 
  11. }]; 
  12.  
  13. Masonry也幫我們定義好了一些默認(rèn)的優(yōu)先級常量，分別對應(yīng)著不同的數(shù)值，優(yōu)先級最大數(shù)值是1000。 
  14. static const MASLayoutPriority MASLayoutPriorityRequired = UILayoutPriorityRequired; 
  15. static const MASLayoutPriority MASLayoutPriorityDefaultHigh = UILayoutPriorityDefaultHigh; 
  16. static const MASLayoutPriority MASLayoutPriorityDefaultMedium = 500; 
  17. static const MASLayoutPriority MASLayoutPriorityDefaultLow = UILayoutPriorityDefaultLow; 
  18. static const MASLayoutPriority MASLayoutPriorityFittingSizeLevel = UILayoutPriorityFittingSizeLevel; 

 設(shè)置約束比例

  1. // 設(shè)置當(dāng)前約束值乘以多少，例如這個例子是redView的寬度是self.view寬度的0.2倍。 
  2. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 
  3.     make.center.equalTo(self.view); 
  4.     make.height.mas_equalTo(30); 
  5.     make.width.equalTo(self.view).multipliedBy(0.2); 
  6. }]; 

 小練習(xí)

子視圖等高練習(xí)

  1. /** 
  2. 下面的例子是通過給equalTo()方法傳入一個數(shù)組，設(shè)置數(shù)組中子視圖及當(dāng)前make對應(yīng)的視圖之間等高。 
  3.   
  4. 需要注意的是，下面block中設(shè)置邊距的時候，應(yīng)該用insets來設(shè)置，而不是用offset。 
  5. 因為用offset設(shè)置right和bottom的邊距時，這兩個值應(yīng)該是負(fù)數(shù)，所以如果通過offset來統(tǒng)一設(shè)置值會有問題。 
  6. */ 
  7. CGFloat padding = LXZViewPadding; 
  8. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 
  9.     make.left.right.top.equalTo(self.view).insets(UIEdgeInsetsMake(padding, padding, 0, padding)); 
  10.     make.bottom.equalTo(self.blueView.mas_top).offset(-padding); 
  11. }]; 
  12.   
  13. [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) { 
  14.     make.left.right.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, 0, padding)); 
  15.     make.bottom.equalTo(self.yellowView.mas_top).offset(-padding); 
  16. }]; 
  17.   
  18. /** 
  19. 下面設(shè)置make.height的數(shù)組是關(guān)鍵，通過這個數(shù)組可以設(shè)置這三個視圖高度相等。其他例如寬度之類的，也是類似的方式。 
  20. */ 
  21. [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) { 
  22.     make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, padding, padding)); 
  23.     make.height.equalTo(@[self.blueView, self.redView]); 
  24. }]; 

 子視圖垂直居中練習(xí)

  1. /** 
  2. 要求：(這個例子是在其他人博客里看到的，然后按照要求自己寫了下面這段代碼) 
  3. 兩個視圖相對于父視圖垂直居中，并且兩個視圖以及父視圖之間的邊距均為10，高度為150，兩個視圖寬度相等。 
  4. */ 
  5. CGFloat padding = 10.f; 
  6. [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) { 
  7.     make.centerY.equalTo(self.view); 
  8.     make.left.equalTo(self.view).mas_offset(padding); 
  9.     make.right.equalTo(self.redView.mas_left).mas_offset(-padding); 
  10.     make.width.equalTo(self.redView); 
  11.     make.height.mas_equalTo(150); 
  12. }]; 
  13.   
  14. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 
  15.     make.centerY.equalTo(self.view); 
  16.     make.right.equalTo(self.view).mas_offset(-padding); 
  17.     make.width.equalTo(self.blueView); 
  18.     make.height.mas_equalTo(150); 
  19. }]; 

 UITableView動態(tài)Cell高度

在iOS UI開發(fā)過程中，UITableView的動態(tài)Cell高度一直都是個問題。實現(xiàn)這樣的需求，實現(xiàn)方式有很多種，只是實現(xiàn)起來復(fù)雜程度和性能的區(qū)別。

在不考慮性能的情況下，tableView動態(tài)Cell高度，可以采取估算高度的方式。如果通過估算高度的方式實現(xiàn)的話，無論是純代碼還是Interface Builder，都只需要兩行代碼就可以完成Cell自動高度適配。

實現(xiàn)方式：

需要設(shè)置tableView的rowHeight屬性，這里設(shè)置為自動高度，告訴系統(tǒng)Cell的高度是不固定的，需要系統(tǒng)幫我們進(jìn)行計算。然后設(shè)置tableView的estimatedRowHeight屬性，設(shè)置一個估計的高度。(我這里用的代理方法，實際上都一樣)

原理：

這樣的話，在tableView被創(chuàng)建之后，系統(tǒng)會根據(jù)estimatedRowHeight屬性設(shè)置的值，為tableView設(shè)置一個估計的值。然后在Cell顯示的時候再獲取Cell的高度，并刷新tableView的contentSize。

  1. - (void)tableViewConstraints { 
  2.     [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) { 
  3.         make.edges.equalTo(self.view); 
  4.     }]; 
  5. } 
  6.   
  7. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
  8.     return self.dataList.count; 
  9. } 
  10.   
  11. - (MasonryTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
  12.     MasonryTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:LXZTableViewCellIdentifier]; 
  13.     [cell reloadViewWithText:self.dataList[indexPath.row]]; 
  14.     return cell; 
  15. } 
  16.   
  17. // 需要注意的是，這個代理方法和直接返回當(dāng)前Cell高度的代理方法并不一樣。 
  18. // 這個代理方法會將當(dāng)前所有Cell的高度都預(yù)估出來，而不是只計算顯示的Cell，所以這種方式對性能消耗還是很大的。 
  19. // 所以通過設(shè)置estimatedRowHeight屬性的方式，和這種代理方法的方式，最后性能消耗都是一樣的。 
  20. - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath { 
  21.     return 50.f; 
  22. } 
  23.   
  24. - (UITableView *)tableView { 
  25.     if (!_tableView) { 
  26.         _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain]; 
  27.         _tableView.delegate = self; 
  28.         _tableView.dataSource = self; 
  29.         // 設(shè)置tableView自動高度 
  30.         _tableView.rowHeight = UITableViewAutomaticDimension; 
  31.         [_tableView registerClass:[MasonryTableViewCell class] forCellReuseIdentifier:LXZTableViewCellIdentifier]; 
  32.         [self.view addSubview:_tableView]; 
  33.     } 
  34.     return _tableView; 
  35. } 

 UIScrollView自動布局

之前聽很多人說過UIScrollView很麻煩，然而我并沒有感覺到有多麻煩(并非裝逼)。我感覺說麻煩的人可能根本就沒試過吧，只是覺得很麻煩而已。

我這里就講一下兩種進(jìn)行UIScrollView自動布局的方案，并且會講一下自動布局的技巧，只要掌握技巧，布局其實很簡單。

布局小技巧：

給UIScrollView添加的約束是定義其frame，設(shè)置contentSize是定義其內(nèi)部大小。UIScrollView進(jìn)行addSubview操作，都是將其子視圖添加到contentView上。

所以，添加到UIScrollView上的子視圖，對UIScrollView添加的約束都是作用于contentView上的。只需要按照這樣的思路給UIScrollView設(shè)置約束，就可以掌握設(shè)置約束的技巧了。

提前設(shè)置contentSize

  1. // 提前設(shè)置好UIScrollView的contentSize，并設(shè)置UIScrollView自身的約束 
  2. self.scrollView.contentSize = CGSizeMake(1000, 1000); 
  3. [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) { 
  4.     make.edges.equalTo(self.view); 
  5. }]; 
  6.   
  7. // 雖然redView的get方法內(nèi)部已經(jīng)執(zhí)行過addSubview操作，但是UIView始終以最后一次添加的父視圖為準(zhǔn)，也就是redView始終是在最后一次添加的父視圖上。 
  8. [self.scrollView addSubview:self.redView]; 
  9. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 
  10.     make.left.top.equalTo(self.scrollView); 
  11.     make.width.height.mas_equalTo(200); 
  12. }]; 
  13.   
  14. [self.scrollView addSubview:self.blueView]; 
  15. [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) { 
  16.     make.left.equalTo(self.redView.mas_right); 
  17.     make.top.equalTo(self.scrollView); 
  18.     make.width.height.equalTo(self.redView); 
  19. }]; 
  20.   
  21. [self.scrollView addSubview:self.greenView]; 
  22. [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) { 
  23.     make.left.equalTo(self.scrollView); 
  24.     make.top.equalTo(self.redView.mas_bottom); 
  25.     make.width.height.equalTo(self.redView); 
  26. }]; 

 自動contentSize

上面的例子是提前設(shè)置好UIScrollView的contentSize的內(nèi)部size，然后直接向里面addSubview。但是這有個要求就是，需要提前知道contentSize的大小，不然沒法設(shè)置。

這個例子中將會展示動態(tài)改變contentSize的大小，內(nèi)部視圖有多少contentSize就自動擴(kuò)充到多大。

這種方式的實現(xiàn)，主要是依賴于創(chuàng)建一個containerView內(nèi)容視圖，并添加到UIScrollView上作為子視圖。UIScrollView原來的子視圖都添加到containerView上，并且和這個視圖設(shè)置約束。

因為對UIScrollView進(jìn)行addSubview操作的時候，本質(zhì)上是往其contentView上添加。也就是containerView的父視圖是contentView，通過containerView撐起contentView視圖的大小，以此來實現(xiàn)動態(tài)改變contentSize。 

  1. // 在進(jìn)行約束的時候，要對containerView的上下左右都添加和子視圖的約束，以便確認(rèn)containerView的邊界區(qū)域。 
  2. [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) { 
  3.     make.edges.equalTo(self.view); 
  4. }]; 
  5.   
  6. CGFloat padding = LXZViewPadding; 
  7. [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) { 
  8.     make.edges.equalTo(self.scrollView).insets(UIEdgeInsetsMake(padding, padding, padding, padding)); 
  9. }]; 
  10.   
  11. [self.containerView addSubview:self.greenView]; 
  12. [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) { 
  13.     make.top.left.equalTo(self.containerView).offset(padding); 
  14.     make.size.mas_equalTo(CGSizeMake(250, 250)); 
  15. }]; 
  16.   
  17. [self.containerView addSubview:self.redView]; 
  18. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 
  19.     make.top.equalTo(self.containerView).offset(padding); 
  20.     make.left.equalTo(self.greenView.mas_right).offset(padding); 
  21.     make.size.equalTo(self.greenView); 
  22.     make.right.equalTo(self.containerView).offset(-padding); 
  23. }]; 
  24.   
  25. [self.containerView addSubview:self.yellowView]; 
  26. [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) { 
  27.     make.left.equalTo(self.containerView).offset(padding); 
  28.     make.top.equalTo(self.greenView.mas_bottom).offset(padding); 
  29.     make.size.equalTo(self.greenView); 
  30.     make.bottom.equalTo(self.containerView).offset(-padding); 
  31. }];  
責(zé)任編輯：龐桂玉 來源： iOS大全
iOS布局框架Masonry
相關(guān)推薦

2015-06-24 10:17:24

UI流式布局

2010-08-27 09:11:27

Python單元測試

2018-05-10 15:54:39

2022-04-27 08:17:07

OCMock單元測試集成

2024-08-19 14:01:00

2011-05-31 09:36:46

Android 布局屬性

2010-05-28 08:52:18

SVN項目

2011-06-24 16:27:41

QML UI

2023-10-30 09:18:28

CSSColumns布局

2012-08-23 10:07:47

Word 2013

2010-08-16 16:27:42

DIV布局屬性

2012-08-22 10:37:07

Word 2013Office 2013

2021-04-25 06:12:19

Java內(nèi)存布局JVM

2011-04-22 11:01:36

框架布局界面設(shè)計Android

2016-03-18 09:36:13

ios基礎(chǔ)框架

2012-06-01 11:10:07

iOS基本框架圖示

2010-09-02 13:39:51

CSS

2015-11-05 11:20:45

cocoaios

2022-02-16 09:01:13

iOSS開發(fā)XCode

2009-08-11 17:29:53

.NET遠(yuǎn)程處理框架
點贊
收藏

51CTO技術(shù)棧公眾號