iOS開發(fā)-自動布局篇：史上最牛的自動布局教學(xué)！

本文我們將提到：

  1. aotulayout（手碼）
  2. VFL
  3. aotulayout（Xib）
  4. Masonry（第三方框架）

是不是很期待呢？那就跟著小編走吧！
本文Demo地址：https://github.com/JinqianChina/aotulayoutDemo.git

一、AutoLayout介紹

UI布局對于iOS開發(fā)者來說并不陌生，在iOS6之前，大家都是通過UI控件的Frame屬性和Autoresizing Mask來進(jìn)行UI布局的。AutoLayout則是蘋果公司在iOS6推出的一種基于約束的，描述性的布局系統(tǒng)。自從AutoLayout問世以來，逐步得到了iOS開發(fā)者們的青睞，尤其是iPhone6機(jī)型尺寸的出現(xiàn)，讓AutoLayout從此走向人生巔峰，迎娶白富美，當(dāng)上UI布局界的老大。_，好了，不扯淡了，下面來看看它的特殊之處。

AutoLayout占據(jù)UI布局的主要領(lǐng)導(dǎo)位置依賴于它的特殊性：

1).基于約束：和以往定義frame的位置和尺寸不同，AutoLayout的位置確定是以所謂相對位置的約束來定義的，比如x坐標(biāo)為superView的中心，y坐標(biāo)為屏幕底部上方10像素等
2).描述性： 約束的定義和各個(gè)view的關(guān)系使用接近自然語言或者可視化語言（稍后會提到）的方法來進(jìn)行描述
3).布局系統(tǒng)：即字面意思，用來負(fù)責(zé)界面的各個(gè)元素的位置。

總而言之，AutoLayout為開發(fā)者提供了一種不同于傳統(tǒng)對于UI元素位置指定的布局方法。以前，不論是在IB里拖放，還是在代碼中寫，每個(gè)UIView都會有自己的frame屬性，來定義其在當(dāng)前視圖中的位置和尺寸。使用AutoLayout的話，就變?yōu)榱耸褂眉s束條件來定義view的位置和尺寸。這樣的最大好處是一舉解決了不同分辨率和屏幕尺寸下view的適配問題，另外也簡化了旋轉(zhuǎn)時(shí)view的位置的定義，原來在底部之上10像素居中的view，不論在旋轉(zhuǎn)屏幕或是更換設(shè)備（iPad或者iPhone5或者以后可能出現(xiàn)的mini iPad）的時(shí)候，始終還在底部之上10像素居中的位置，不會發(fā)生變化。 總的來說：使用約束條件來描述布局，view的frame會依據(jù)這些約束來進(jìn)行計(jì)算。

二、AutoLayout使用原理：

  1. 創(chuàng)建約束，iOS6中新加入了一個(gè)類：NSLayoutConstraint。它的約束滿足這個(gè)公式：

     item1.attribute = multiplier ? item2.attribute + constant

    對應(yīng)的代碼為

     //view_1(紅色)top 距離self.view的top
 NSLayoutConstraint *view_1TopToSuperViewTop = [NSLayoutConstraint constraintWithItem:view_1
                                                                            attribute:NSLayoutAttributeTop
                                                                            relatedBy:NSLayoutRelationEqual
                                                                               toItem:self.view
                                                                            attribute:NSLayoutAttributeTop
                                                                           multiplier:1
                                                                             constant:30];

    這里對應(yīng)的約束是“view_1的頂部（y）＝ self.view的頂部(y)*1 + 30”。

  2. 添加約束，在創(chuàng)建約束之后，需要將其添加到作用的view上。UIView添加約束的實(shí)例方法：

     - (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);
 - (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints NS_AVAILABLE_IOS(6_0);

    用來將約束添加到view。在添加時(shí)唯一要注意的是添加的目標(biāo)view要遵循以下規(guī)則：

    1).對于兩個(gè)同層級view之間的約束關(guān)系，添加到他們的父view上

    Mou icon

    2).對于兩個(gè)不同層級view之間的約束關(guān)系，添加到他們最近的共同父view上

    Mou icon

    3).對于有層次關(guān)系的兩個(gè)view之間的約束關(guān)系，添加到層次較高的父view上

    Mou icon

  3. 刷新約束，可以通過-setNeedsUpdateConstraints和-layoutIfNeeded兩個(gè)方法來刷新約束的改變，使UIView重新布局。

三、AutoLayout的不同使用方式

OK，到這里我們講了一堆理論，相信對AutoLayout對不熟悉的童鞋依然比較迷茫，你必須要進(jìn)行代碼的洗禮，才會對它大徹大悟。好的，那么我們開始上代碼吧！

如圖1：我們需要布局紅、綠、藍(lán)三個(gè)view位置如圖所示，他們距離父視圖邊距以及相互之間的距離都為30px，紅色view和綠色view寬度相等，并且三個(gè)view的高度相等。并且在橫屏?xí)r，他們的位置還是一樣保持不變。

Mou icon
Mou icon
Mou icon

如果用傳統(tǒng)布局方式利用Frame屬性，則需要分情況來判斷并改變控件Frame的值以達(dá)到適應(yīng)屏幕的尺寸。下面來看看AutoLayout自動布局的實(shí)現(xiàn)方法：

  1. AutoLayout（系統(tǒng)手碼）

     - (void)viewDidLoad {
 [super viewDidLoad];
 
 /*
  * 需求
  *
  * 我們需要布局紅(view_1)、綠(view_2)、藍(lán)(view_3)三個(gè)view位置如圖所示，
  * 他們距離父視圖邊距以及相互之間的距離都為30px，紅色view和綠色view寬度相等，
  * 并且三個(gè)view的高度相等。并且在橫屏?xí)r，他們的位置還是一樣保持不變。
  *
  */
 
 //1.首先，創(chuàng)建視圖控件，添加到self.view上
 
 UIView *view_1 = [[UIView alloc] init];
 view_1.backgroundColor = [UIColor redColor];
 [self.view addSubview:view_1];
 UIView *view_2 = [[UIView alloc] init];
 view_2.backgroundColor = [UIColor greenColor];
 [self.view addSubview:view_2];
 UIView *view_3 = [[UIView alloc] init];
 view_3.backgroundColor = [UIColor blueColor];
 [self.view addSubview:view_3];
 
 //2.然后，記得要把AutoresizingMask布局關(guān)掉
 view_1.translatesAutoresizingMaskIntoConstraints = NO;
 view_2.translatesAutoresizingMaskIntoConstraints = NO;
 view_3.translatesAutoresizingMaskIntoConstraints = NO;
 
 //3.接著，添加約束，先添加邊距約束，再添加寬高約束（個(gè)人習(xí)慣）
 /*
  * 添加約束 公式：item1.attribute = multiplier ? item2.attribute + constant
  */
 
 //view_1(紅色)top 距離self.view的top
 NSLayoutConstraint *view_1TopToSuperViewTop = [NSLayoutConstraint constraintWithItem:view_1
                                                                            attribute:NSLayoutAttributeTop
                                                                            relatedBy:NSLayoutRelationEqual
                                                                               toItem:self.view
                                                                            attribute:NSLayoutAttributeTop
                                                                           multiplier:1
                                                                             constant:30];
 //view_1(紅色)left 距離self.view的left
 NSLayoutConstraint *view_1LeftToSuperViewLeft = [NSLayoutConstraint constraintWithItem:view_1
                                                                              attribute:NSLayoutAttributeLeft
                                                                              relatedBy:NSLayoutRelationEqual
                                                                                 toItem:self.view
                                                                              attribute:NSLayoutAttributeLeft
                                                                             multiplier:1
                                                                               constant:30];
 //view_1(紅色)right 距離view_2(綠色)的left
 NSLayoutConstraint *view_1RightToview_2Left = [NSLayoutConstraint constraintWithItem:view_2
                                                                            attribute:NSLayoutAttributeLeft
                                                                            relatedBy:NSLayoutRelationEqual
                                                                               toItem:view_1
                                                                            attribute:NSLayoutAttributeRight
                                                                           multiplier:1
                                                                             constant:30];
 //view_1(紅色)bottom 距離view_3(藍(lán)色)的top
 NSLayoutConstraint *view_1BottomToview_3Top = [NSLayoutConstraint constraintWithItem:view_1
                                                                            attribute:NSLayoutAttributeBottom
                                                                            relatedBy:NSLayoutRelationEqual
                                                                               toItem:view_3
                                                                            attribute:NSLayoutAttributeTop
                                                                           multiplier:1
                                                                             constant:- 30];
 
 //view_2(綠色)right 距離self.view的right
 NSLayoutConstraint *view_2RightToSuperViewRight = [NSLayoutConstraint constraintWithItem:view_2
                                                                                attribute:NSLayoutAttributeRight
                                                                                relatedBy:NSLayoutRelationEqual
                                                                                   toItem:self.view
                                                                                attribute:NSLayoutAttributeRight
                                                                               multiplier:1
                                                                                 constant:- 30];
 
 //view_2(綠色)centerY 和 view_1(紅色)的centerY 一致
 NSLayoutConstraint *view_2CenterYToView_1CenterY = [NSLayoutConstraint constraintWithItem:view_2
                                                                                 attribute:NSLayoutAttributeCenterY
                                                                                 relatedBy:NSLayoutRelationEqual
                                                                                    toItem:view_1
                                                                                 attribute:NSLayoutAttributeCenterY
                                                                                multiplier:1
                                                                                  constant:0];
 
 //view_3(藍(lán)色)left 距離 self.view left
 NSLayoutConstraint *view_3LeftToSuperViewLeft = [NSLayoutConstraint constraintWithItem:view_3
                                                                              attribute:NSLayoutAttributeLeft
                                                                              relatedBy:NSLayoutRelationEqual
                                                                                 toItem:self.view
                                                                              attribute:NSLayoutAttributeLeft
                                                                             multiplier:1
                                                                               constant:30];
 
 //view_3(藍(lán)色)right 距離 self.view right
 NSLayoutConstraint *view_3RightToSuperViewRight = [NSLayoutConstraint constraintWithItem:view_3
                                                                                attribute:NSLayoutAttributeRight
                                                                                relatedBy:NSLayoutRelationEqual
                                                                                   toItem:self.view
                                                                                attribute:NSLayoutAttributeRight
                                                                               multiplier:1
                                                                                 constant:- 30];
 
 //view_3(藍(lán)色)Bottom 距離 self.view bottom
 NSLayoutConstraint *view_3BottomToSuperViewBottom = [NSLayoutConstraint constraintWithItem:view_3
                                                                                  attribute:NSLayoutAttributeBottom
                                                                                  relatedBy:NSLayoutRelationEqual
                                                                                     toItem:self.view
                                                                                  attribute:NSLayoutAttributeBottom
                                                                                 multiplier:1
                                                                                   constant:- 30];
 
 //view_1(紅色)width 和view_2(綠色)的width相等
 NSLayoutConstraint *view_1WidthToview_2Width = [NSLayoutConstraint constraintWithItem:view_2
                                                                             attribute:NSLayoutAttributeWidth
                                                                             relatedBy:NSLayoutRelationEqual
                                                                                toItem:view_1
                                                                             attribute:NSLayoutAttributeWidth
                                                                            multiplier:1
                                                                              constant:0];
 
 //view_1(紅色)height 和view_2(綠色)的height相等
 NSLayoutConstraint *view_1HeightToview_2Height = [NSLayoutConstraint constraintWithItem:view_2
                                                                               attribute:NSLayoutAttributeHeight
                                                                               relatedBy:NSLayoutRelationEqual
                                                                                  toItem:view_1
                                                                               attribute:NSLayoutAttributeHeight
                                                                              multiplier:1
                                                                                constant:0];
 
 //view_1(紅色)height 和 view_3(藍(lán)色)的height相等
 NSLayoutConstraint *view_1HeightToview_3Height = [NSLayoutConstraint constraintWithItem:view_3
                                                                               attribute:NSLayoutAttributeHeight
                                                                               relatedBy:NSLayoutRelationEqual
                                                                                  toItem:view_1
                                                                               attribute:NSLayoutAttributeHeight
                                                                              multiplier:1
                                                                                constant:0];
 
 //添加約束，因?yàn)関iew_1、2、3是同層次關(guān)系，且他們公有的父視圖都是self.view，所以這里把約束都添加到self.view上即可
 [self.view addConstraints:@[view_1TopToSuperViewTop,view_1LeftToSuperViewLeft,view_1RightToview_2Left,view_2RightToSuperViewRight,view_1WidthToview_2Width,view_1BottomToview_3Top,view_2CenterYToView_1CenterY,view_3LeftToSuperViewLeft,view_3RightToSuperViewRight,view_3BottomToSuperViewBottom,view_1HeightToview_2Height,view_1HeightToview_3Height]];
 
 [self.view layoutIfNeeded];
 }

    看到這里，相信大家要哭了吧，為毛就寫這三個(gè)視圖要這么麻煩，沒錯(cuò)，小編這里就是用來惡心你的，哈哈！其實(shí)，我去研究它的時(shí)候，也是被惡心的要死，沒辦法，為了幫助大家對AutoLayout進(jìn)行深入理解，小編也是拼了（ps：其實(shí)我在項(xiàng)目中基本不用這個(gè)系統(tǒng)手碼的）。還好，蘋果還給我們提供了一種可視化自然語言用于自動布局的約束：VFL（Visual Format Language），簡化了添加約束。

  2. VFL約束

     - (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view from its nib.
 /*
  * 需求
  *
  * 我們需要布局紅(view_1)、綠(view_2)、藍(lán)(view_3)三個(gè)view位置如圖所示，
  * 他們距離父視圖邊距以及相互之間的距離都為30px，紅色view和綠色view寬度相等，
  * 并且三個(gè)view的高度相等。并且在橫屏?xí)r，他們的位置還是一樣保持不變。
  *
  */
 
 //1.首先，創(chuàng)建視圖控件，添加到self.view上
 
 UIView *view_1 = [[UIView alloc] init];
 view_1.backgroundColor = [UIColor redColor];
 [self.view addSubview:view_1];
 UIView *view_2 = [[UIView alloc] init];
 view_2.backgroundColor = [UIColor greenColor];
 [self.view addSubview:view_2];
 UIView *view_3 = [[UIView alloc] init];
 view_3.backgroundColor = [UIColor blueColor];
 [self.view addSubview:view_3];
 
 //2.然后，記得要把AutoresizingMask布局關(guān)掉
 view_1.translatesAutoresizingMaskIntoConstraints = NO;
 view_2.translatesAutoresizingMaskIntoConstraints = NO;
 view_3.translatesAutoresizingMaskIntoConstraints = NO;
 
 //3.接著，添加約束
 
 // 間距
 NSNumber *margin = @(30);
 NSNumber *spacing = @(30);
 NSDictionary *views = NSDictionaryOfVariableBindings(view_1,view_2,view_3);
 
 // 添加水平方向的約束1
 NSString *vfl = @"H:|-margin-[view_1]-spacing-[view_2(==view_1)]-margin-|";
 NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin,spacing);
 NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
 [self.view addConstraints:constraints];
 
 // 添加水平方向的約束2
 NSString *vfl1 = @"H:|-margin-[view_3]-margin-|";
 NSDictionary *mertrics1 = NSDictionaryOfVariableBindings(margin,spacing);
 
 NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:kNilOptions metrics:mertrics1 views:views];
 [self.view addConstraints:constraints1];
 
 // 添加豎直方向的約束
 NSString *vfl2 = @"V:|-margin-[view_1]-spacing-[view_3(==view_1)]-margin-|";
 NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, spacing);
 NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
 [self.view addConstraints:constraints2];
 }

    看了VFL語言約束，是不是瞬間感覺高大上了許多，按照我們所想，依次寫出約束VFL語句即可。這樣雖然比系統(tǒng)手碼方便多了，但是仍然需要寫很多代碼，小編下面要告訴你的是，不用寫一行約束代碼就能完成上面約束需求，那就是Xib可視化添加約束，下面來看看吧！

  3. Xib可視化添加約束

    (1)首先，先拖拽三個(gè)UIview視圖，如圖。注意：這里我們只是暫時(shí)大致擺了一下位置，還沒有添加約束。

    Mou icon

    (2)view_1紅色視圖添加約束，如圖，添加上和左距離父視圖都是30px

    Mou icon

    (3)view_2綠色視圖添加約束，如圖，添加左和右分別距離view_1和父視圖的距離都是30px

    Mou icon

    (4)view_2添加約束，如圖，直接點(diǎn)擊view_2拖拽到view_1上，然后選擇Center Vertically、Equal Widths和Equal Heights，則添加了view_2約束：豎直方向上中心和view_1一致、寬度和高度也和view_1相等

    Mou icon
    Mou icon

    (5)view_3藍(lán)色視圖添加約束，如圖，添加左、下、右距離父視圖的值都為30，上距離view_1的距離為30，并且高度和view_1相等

    Mou icon

    (7)如圖，約束已經(jīng)添加完成，點(diǎn)擊左側(cè)的黃色警告補(bǔ)全視圖差值

    Mou icon

    (8)如圖，則是我們布局完成后的Xib，運(yùn)行效果就是開頭那個(gè)GIF圖效果，是不是很炫酷！

    Mou icon
    Mou icon

    到這里，是不是感覺很神奇了呢，不用一行代碼，就可以完成上述那么多代碼實(shí)現(xiàn)的效果。至此，Aotulayout布局已經(jīng)基本介紹完了，對了，還有一個(gè)第三方庫Masonry。

  4. Masonry第三方庫

    Masonry是一個(gè)輕量級的布局框架，擁有自己的描述語法，采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝自動布局，簡潔明了 并具有高可讀性，而且同時(shí)支持iOS和Max OS X。

    下面簡單說明一下Masonry：

    先來看一段官方的sample code來認(rèn)識一下Masonry

     [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(superview).with.insets(padding);
 }];

    我們看到block里面的那句話: make edges equalTo superview with insets。這里通過鏈?zhǔn)降淖匀徽Z言，就把view1給autolayout設(shè)置好了，看著是不是挺簡單的？更符合我們編程的思想。

    再來看一看它的屬性：

     @property (nonatomic, strong, readonly) MASViewAttribute *left;
 @property (nonatomic, strong, readonly) MASViewAttribute *top;
 @property (nonatomic, strong, readonly) MASViewAttribute *right;
 @property (nonatomic, strong, readonly) MASViewAttribute *bottom;
 @property (nonatomic, strong, readonly) MASViewAttribute *leading;
 @property (nonatomic, strong, readonly) MASViewAttribute *trailing;
 @property (nonatomic, strong, readonly) MASViewAttribute *width;
 @property (nonatomic, strong, readonly) MASViewAttribute *height;
 @property (nonatomic, strong, readonly) MASViewAttribute *centerX;
 @property (nonatomic, strong, readonly) MASViewAttribute *centerY;
 @property (nonatomic, strong, readonly) MASViewAttribute *baseline;
 @property (nonatomic, strong, readonly) MASViewAttribute *(^attribute)(NSLayoutAttribute attr);
 
 #if TARGET_OS_IPHONE
 
 @property (nonatomic, strong, readonly) MASViewAttribute *leftMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *rightMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *topMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *bottomMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *leadingMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *trailingMargin;
 @property (nonatomic, strong, readonly) MASViewAttribute *centerXWithinMargins;
 @property (nonatomic, strong, readonly) MASViewAttribute *centerYWithinMargins;

    是不是覺得很眼熟？沒錯(cuò)，它和我們系統(tǒng)的NSLayoutConstraint類下的NSLayoutAttribute枚舉一致，這樣就不難理解了，Masonry其實(shí)就是把我們系統(tǒng)的NSLayoutConstraint類等Aotulayout布局相關(guān)進(jìn)行了封裝，曝露出比較簡單易懂（鏈?zhǔn)降淖匀徽Z言）的Aotulayout接口，方便廣大iOS開發(fā)者使用。

     typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
 NSLayoutAttributeLeft = 1,
 NSLayoutAttributeRight,
 NSLayoutAttributeTop,
 NSLayoutAttributeBottom,
 NSLayoutAttributeLeading,
 NSLayoutAttributeTrailing,
 NSLayoutAttributeWidth,
 NSLayoutAttributeHeight,
 NSLayoutAttributeCenterX,
 NSLayoutAttributeCenterY,
 NSLayoutAttributeBaseline,
 NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
 NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
 
 NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
 
 NSLayoutAttributeNotAnAttribute = 0
 };

    好了，簡單說明之后，讓我們更實(shí)際的來些代碼吧！同樣是上面的需求哦！come on
    首先，要導(dǎo)入Masonry庫文件，這里要打一下廣告了，Masonry 源碼地址：https://github.com/Masonry/Masonry 你可以直接下載，然后將文件拖入工程，也可以使用cocoapods導(dǎo)入，如果不明白cocoapods怎么用的，可以看一下小編的一篇關(guān)于cocoapods的介紹:http://www.lxweimin.com/p/c23eeb43438b

    OK，看看Masonry神奇的代碼吧！

     - (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view from its nib.
 /*
  * 需求
  *
  * 我們需要布局紅(view_1)、綠(view_2)、藍(lán)(view_3)三個(gè)view位置如圖所示，
  * 他們距離父視圖邊距以及相互之間的距離都為30px，紅色view和綠色view寬度相等，
  * 并且三個(gè)view的高度相等。并且在橫屏?xí)r，他們的位置還是一樣保持不變。
  *
  */
 
 //1.首先，創(chuàng)建視圖控件，添加到self.view上
 
 UIView *view_1 = [[UIView alloc] init];
 view_1.backgroundColor = [UIColor redColor];
 [self.view addSubview:view_1];
 UIView *view_2 = [[UIView alloc] init];
 view_2.backgroundColor = [UIColor greenColor];
 [self.view addSubview:view_2];
 UIView *view_3 = [[UIView alloc] init];
 view_3.backgroundColor = [UIColor blueColor];
 [self.view addSubview:view_3];
 
 //2.然后，記得要把AutoresizingMask布局關(guān)掉
 view_1.translatesAutoresizingMaskIntoConstraints = NO;
 view_2.translatesAutoresizingMaskIntoConstraints = NO;
 view_3.translatesAutoresizingMaskIntoConstraints = NO;
 
 //3.接著，添加約束
 
 __weak __typeof(self) weakSelf = self;//這里用一個(gè)弱引用來表示self，用于下面的Block中

 //先確定view_1的約束
 [view_1 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.top.equalTo(weakSelf.view.mas_top).with.offset(30); //view_1的上，距離self.view是30px
     make.left.equalTo(weakSelf.view.mas_left).with.offset(30); //view_1de左，距離self.view是30px
 }];
 
 //然后確定view_2的約束
 [view_2 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.centerY.equalTo(view_1.mas_centerY).with.offset(0); //view2 Y方向上的中心線和view_1相等
     make.left.equalTo(view_1.mas_right).with.offset(30); //view2 的左距離view_1的右距離為30px
     make.right.equalTo(weakSelf.view.mas_right).with.offset(-30); //view_2的右距離self.view30px
     make.width.equalTo(view_1); //view_2的寬度和view_1相等
     make.height.equalTo(view_1); //view_2的高度和view_1相等
 }];
 
 //最后確定view_3的約束
 [view_3 mas_makeConstraints:^(MASConstraintMaker *make) {
     make.top.equalTo(view_1.mas_bottom).with.offset(30); //view_3的上距離view_1的底部 30px
     make.left.equalTo(weakSelf.view.mas_left).with.offset(30); //view_3的左距離self.view 30px
     make.bottom.equalTo(weakSelf.view.mas_bottom).with.offset(30);//view_3的底部距離self.view 30px
     make.right.equalTo(weakSelf.view.mas_right).with.offset(-30); //view_3的右距離self.view 30px
     make.height.equalTo(view_1);//view_3的高度和view_1相等
 }];
 }

    運(yùn)行效果就是上面的GIF圖，Masonry雖然也寫了不少代碼，但是他看起來比較簡單易懂，在實(shí)戰(zhàn)項(xiàng)目中，我們可以用Masonry作為Xib的輔助工具使用，利用代碼處理一些動態(tài)的約束。

    最后說明一下，在Masonry中能夠添加autolayout約束有三個(gè)函數(shù)：

     - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
 - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
 /*
 mas_makeConstraints 只負(fù)責(zé)新增約束 Autolayout不能同時(shí)存在兩條針對于同一對象的約束 否則會報(bào)錯(cuò) 
 mas_updateConstraints 針對上面的情況 會更新在block中出現(xiàn)的約束 不會導(dǎo)致出現(xiàn)兩個(gè)相同約束的情況
 mas_remakeConstraints 則會清除之前的所有約束 僅保留最新的約束
 三種函數(shù)善加利用 就可以應(yīng)對各種情況了
 */

喜歡的童鞋，動一下小手點(diǎn)擊喜歡和關(guān)注喔！小編在這里附上以上四種自動布局Demo：https://github.com/JinqianChina/aotulayoutDemo.git

參考文章：
http://www.cocoachina.com/ios/20141219/10702.html Masonry介紹與使用實(shí)踐：快速上手Autolayout

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容