http://www.reibang.com/p/f6cf9ef451d9

<pre>

本文我們將提到：

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).描述性： 約束的定義和各個view的關(guān)系使用接近自然語言或者可視化語言（稍后會提到）的方法來進(jìn)行描述
3).布局系統(tǒng)：即字面意思攻泼，用來負(fù)責(zé)界面的各個元素的位置。

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

二俱笛、AutoLayout使用原理：

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

    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添加約束的實例方法：

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

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

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

   image

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

   image

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

   image

3. 刷新約束蜕便，可以通過-setNeedsUpdateConstraints和-layoutIfNeeded兩個方法來刷新約束的改變劫恒，使UIView重新布局。

三轿腺、AutoLayout的不同使用方式

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

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

image

image

image

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

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

    - (void)viewDidLoad {
    [super viewDidLoad];
   
    /*
     * 需求
     *
     * 我們需要布局紅(view_1)栖茉、綠(view_2)篮绿、藍(lán)(view_3)三個view位置如圖所示，
     * 他們距離父視圖邊距以及相互之間的距離都為30px吕漂，紅色view和綠色view寬度相等亲配，
     * 并且三個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.接著，添加約束混滔，先添加邊距約束洒疚，再添加寬高約束（個人習(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];
   
    //添加約束，因為view_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];
    }
   

   看到這里肺魁，相信大家要哭了吧，為毛就寫這三個視圖要這么麻煩隔节，沒錯鹅经，小編這里就是用來惡心你的，哈哈怎诫！其實瘾晃，我去研究它的時候，也是被惡心的要死幻妓，沒辦法蹦误，為了幫助大家對AutoLayout進(jìn)行深入理解，小編也是拼了（ps：其實我在項目中基本不用這個系統(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)三個view位置如圖所示，
     * 他們距離父視圖邊距以及相互之間的距離都為30px玄窝，紅色view和綠色view寬度相等牵寺，
     * 并且三個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)首先藤树，先拖拽三個UIview視圖，如圖拓萌。注意：這里我們只是暫時大致擺了一下位置岁钓，還沒有添加約束。

   image

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

   image

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

   image

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

   image
   image

   (5)view_3藍(lán)色視圖添加約束劣挫，如圖册养，添加左东帅、下压固、右距離父視圖的值都為30，上距離view_1的距離為30靠闭，并且高度和view_1相等

   image

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

   image

   (8)如圖愧膀，則是我們布局完成后的Xib拦键，運行效果就是開頭那個GIF圖效果，是不是很炫酷檩淋！

   image
   image

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

4. Masonry第三方庫

   Masonry是一個輕量級的布局框架浙炼，擁有自己的描述語法份氧，采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝自動布局，簡潔明了 并具有高可讀性弯屈，而且同時支持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;
   

   是不是覺得很眼熟店归？沒錯，它和我們系統(tǒng)的NSLayoutConstraint類下的NSLayoutAttribute枚舉一致酪我，這樣就不難理解了消痛，Masonry其實就是把我們系統(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
    };
   

   好了逞带，簡單說明之后，讓我們更實際的來些代碼吧纱新！同樣是上面的需求哦展氓！come on
   首先，要導(dǎo)入Masonry庫文件脸爱，這里要打一下廣告了遇汞，Masonry 源碼地址：https://github.com/Masonry/Masonry 你可以直接下載，然后將文件拖入工程簿废，也可以使用cocoapods導(dǎo)入空入，如果不明白cocoapods怎么用的，可以看一下小編的一篇關(guān)于cocoapods的介紹:http://www.reibang.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)三個view位置如圖所示埋凯，
     * 他們距離父視圖邊距以及相互之間的距離都為30px，紅色view和綠色view寬度相等扫尖，
     * 并且三個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;//這里用一個弱引用來表示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相等
    }];
    }
   

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

   最后說明一下胞皱，在Masonry中能夠添加autolayout約束有三個函數(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不能同時存在兩條針對于同一對象的約束 否則會報錯 
    mas_updateConstraints 針對上面的情況 會更新在block中出現(xiàn)的約束 不會導(dǎo)致出現(xiàn)兩個相同約束的情況
    mas_remakeConstraints 則會清除之前的所有約束 僅保留最新的約束
    三種函數(shù)善加利用 就可以應(yīng)對各種情況了
    */
   

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

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