現(xiàn)在可視化編程成為一種熱流，大大的減少了我們程序開發(fā)的時(shí)間，提高了我開發(fā)的效率。但是作為一個(gè)程序員，我們不但要會(huì)新的知識，還要去學(xué)習(xí)舊的東西。如果我們?nèi)チ斯窘邮值氖抢铣绦騿T寫的，他沒有用可視化，而是用了純了代碼約束，那么我們該如何去做？所以在這里我向大家簡單的演示一下 Masonry 的使用，因?yàn)?Masonry 是大部分公司經(jīng)常用到的一個(gè)純代碼約束第三方，它是對 NSLayoutConstraint 進(jìn)行了分裝，就好比 FMDB 是對 Sqlite 的封裝，方便了程序員的使用

首先我們需要使用 cocoapods 去 pod search masonry

pod 'Masonry', '~> 0.6.3'

#######import <Masonry/Masonry.h>

1、簡單視圖創(chuàng)建

    UIView *view1 = [[UIView alloc]init];
    view1.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

        // 設(shè)置view1的大小
        make.size.mas_equalTo(CGSizeMake(100, 100));
        //設(shè)置view1的中心點(diǎn)
        make.center.equalTo(self.view);
    }];

效果圖1

這里我們需要注意一個(gè)地方，在創(chuàng)建視圖的時(shí)候我們并不需要給它 frame ，直接 init 即可，直接將其添加到視圖上，然后在對其進(jìn)行約束設(shè)置。再次強(qiáng)調(diào)?。?！先添加視圖，再對其進(jìn)行約束。約束用到 mas_makeConstraints 這個(gè)方法

2、邊距設(shè)置

在 collectionView 的 Item 中，我們經(jīng)常會(huì)設(shè)置 item 的EdgeInsets，那么 Masonry 也給我們提供了去設(shè)置邊距的方法，我們一起來看一下

 UIView *view2 = [[UIView alloc]init];
    view2.backgroundColor = [UIColor redColor];
    [view1 addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {

        // 設(shè)置view2距離view1的邊距
        make.edges.mas_equalTo(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

效果圖2

3、綜合

說了這么多，有人會(huì)說我寫的都不在重點(diǎn)上，我們經(jīng)常用到的約束都是距離某個(gè)view的上下左右多少，那么我們來綜合演示一下

  UIView *view3 = [[UIView alloc]init];
    view3.backgroundColor = [UIColor redColor];
    [self.view addSubview:view3];
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {

        // 設(shè)置view3的大小
        make.size.mas_equalTo(CGSizeMake(300, 200));
        // 設(shè)置view3的中心
        make.center.equalTo(self.view);
    }];

    UIView *view4 = [[UIView alloc]init];
    view4.backgroundColor = [UIColor blueColor];
    [view3 addSubview:view4];
    [view4 mas_makeConstraints:^(MASConstraintMaker *make) {

        // view4和view3在一條水平線上
        make.centerY.equalTo(view3.mas_centerY);
        // view4的左邊距離view3的左邊10
        make.left.equalTo(view3.mas_left).with.offset(10);
        // view4的右邊距離view3的中心點(diǎn)10
        make.right.equalTo(view3.mas_centerX).with.offset(-10);
        // view4的頂部距離view3的頂部10
        make.top.equalTo(view3.mas_top).with.offset(10);
        // view4的底部距離view3的底部10
        make.bottom.mas_equalTo(view3.mas_bottom).with.offset(-10);

    }];

    UIView *view5 = [[UIView alloc]init];
    view5.backgroundColor = [UIColor yellowColor];
    [view3 addSubview:view5];
    [view5 mas_makeConstraints:^(MASConstraintMaker *make) {

        // view5和view3在一條水平線上
        make.centerY.equalTo(view3.mas_centerY);
        // view5的右邊邊距離view3的右邊10
        make.right.equalTo(view3.mas_right).with.offset(-10);
        // view5的左邊距離view3的中心點(diǎn)10
        make.left.equalTo(view3.mas_centerX).with.offset(10);
        // view5的頂部距離view3的頂部10
        make.top.equalTo(view3.mas_top).with.offset(10);
        // view5的底部距離view3的底部10
        make.bottom.mas_equalTo(view3.mas_bottom).with.offset(-10);
    }];

在這里為什么距離還有負(fù)的呢？這塊一個(gè)點(diǎn)：我們iOS坐標(biāo)系中上左為正，下右為負(fù)

效果圖3