快捷導(dǎo)航

iOS App開發(fā)中Masonry布局框架的基本用法解析

更新時間：2016年03月19日 09:18:30 作者：曉風(fēng)沐晨

這篇文章主要介紹了iOS App開發(fā)中Masonry布局框架的基本用法解析,Masonry支持iOS和OSX的Auto Layout,在GitHub上的人氣很高,需要的朋友可以參考下

Masonry是一個輕量級的布局框架，擁有自己的描述語法，采用更優(yōu)雅的鏈式語法封裝自動布局，簡潔明了并具有高可讀性，而且同時支持 iOS 和 Max OS X。Masonry是一個用代碼寫iOS或OS界面的庫，可以代替Auto layout。Masonry的github地址：https://github.com/SnapKit/Masonry

Masonry使用講解:

mas_makeConstraints 是給view添加約束，約束有幾種，分別是邊距，寬，高，左上右下距離，基準線。添加過約束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正。

語法一般是 make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍數(shù)和位移修正。

注意點1：使用 mas_makeConstraints方法的元素必須事先添加到父元素的中，例如[self.view addSubview:view];

注意點2： masequalTo 和 equalTo 區(qū)別：masequalTo 比equalTo多了類型轉(zhuǎn)換操作，一般來說，大多數(shù)時候兩個方法都是通用的，但是對于數(shù)值元素使用mas_equalTo。對于對象或是多個屬性的處理，使用equalTo。特別是多個屬性時，必須使用equalTo,例如 make.left.and.right.equalTo(self.view);

注意點3: 注意到方法with和and,這連個方法其實沒有做任何操作，方法只是返回對象本身，這這個方法的左右完全是為了方法寫的時候的可讀性。make.left.and.right.equalTo(self.view);和make.left.right.equalTo(self.view);是完全一樣的，但是明顯的加了and方法的語句可讀性更好點。

下面帶著例子來看一下基礎(chǔ)用法，假設(shè)我們現(xiàn)在的需求是：

1.我們現(xiàn)在只能確定我們控件的寬高以及左右的邊距，需要對上下進行自動適應(yīng)。
2.假設(shè)我們現(xiàn)在有四個控件，需要布局的界面是這個樣子的

豎屏效果：

201631991509026.jpg (459×773)

橫屏效果：

201631991533698.jpg (751×481)

第一步：在我們的控制器中導(dǎo)入Masonry所需要的文件

復(fù)制代碼代碼如下:

#define MAS_SHORTHAND

#define MAS_SHORTHAND_GLOBALS

#import "Masonry.h"

第二步：在控制器中添加以下三個占位視圖并設(shè)置顏色

復(fù)制代碼代碼如下:

    //上面的占位視圖

    UIView *topView = UIView.new;

    topView.backgroundColor = [UIColor redColor];

    [self.view addSubview:topView];

    //中間的占位視圖

    UIView *centerView = UIView.new;

    centerView.backgroundColor = [UIColor grayColor];

    [self.view addSubview:centerView];

    //下面的占位視圖

    UIView *bottomView = UIView.new;

    bottomView.backgroundColor = [UIColor blackColor];

    [self.view addSubview:bottomView];

第三步：開始分別給三個占位視圖添加約束

復(fù)制代碼代碼如下:

    //給上面的占位視圖添加約束
    [topView makeConstraints:^(MASConstraintMaker *make) {       //頭部及左邊距分別為0
        make.top.left.equalTo(self.view).offset(0);
        //三個占位視圖的高度等高
        make.height.equalTo(@[centerView,bottomView]);
        //設(shè)置top視圖的高度
        make.width.equalTo(100);
    }];
    //中間視圖的需要添加以下約束，高度、左邊以及與上方占位視圖的關(guān)系
     [centerView makeConstraints:^(MASConstraintMaker *make) {
        //左邊的約束
        make.left.equalTo(self.view).offset(0);
        //設(shè)置三個占位視圖等高
        make.width.equalTo(@[topView,bottomView]);
        //設(shè)置中間占位視圖與上方視圖的關(guān)聯(lián)約束
        make.top.equalTo(topView.bottom).offset(150);

    }];
    //下面的約束主要設(shè)置下面的與中間視圖的約束以及本身左邊距的約束
    [bottomView makeConstraints:^(MASConstraintMaker *make) {
        make.left.bottom.equalTo(self.view).offset(0);
        make.top.equalTo(centerView.bottom).offset(150);

}];

到了，這里。我們的三個占位視圖已經(jīng)基本完成了。那么讓我們運行一下看下效果：

201631991554091.png (369×666)

由此我們發(fā)現(xiàn)中間空出的部分正好就是我們控件所需的位置了，那么下面我們就開始進行對控件的布局了。首先還是添加需要的左邊的控件

復(fù)制代碼代碼如下:

     UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
    [self.view addSubview:imageView1];
    UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
    [self.view addSubview:imageView2];

//然后對這兩個控件進行布局

    [imageView1 makeConstraints:^(MASConstraintMaker *make) {
        //分別設(shè)置起寬高
       make.width.height.equalTo(150);
        //左邊的邊距
       make.left.equalTo(self.view).offset(0);
       //設(shè)置其與上面占位視圖和下面占位視圖的間距
       make.top.equalTo(topView.bottom).offset(0);
       make.bottom.equalTo(centerView.top).offset(0);
    //控件2同上。
    [imageView2 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.left.equalTo(self.view).offset(0);
        make.top.equalTo(centerView.bottom).offset(0);
        make.bottom.equalTo(bottomView.top).offset(0);

}];

代碼到了這里左邊的控件約束基本布局完成了，讓我們來看一下運行的效果吧。

201631991611343.png (374×666)

到了這里我們就可以對右邊的控件進行布局了?；谥暗慕?jīng)驗我們就會發(fā)現(xiàn)右邊的約束只需要添加本身的寬、高和右邊邊距以及基于左邊控件的centerY值就足夠了。好了，我們開始吧。

復(fù)制代碼代碼如下:

    UIImageView *imageView3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
    [self.view addSubview:imageView3];
    UIImageView *imageView4 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
    [self.view addSubview:imageView4];

    //該控件與左邊的控件的關(guān)聯(lián)
    [imageView3 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.right.equalTo(self.view).offset(0);
        make.centerY.equalTo(imageView1);

    }];
    //同上
    [imageView4 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.right.equalTo(self.view).offset(0);
        make.centerY.equalTo(imageView2);

}];

到了這里基本上是大功告成了，到了這里只需要要把三個占位視圖的背景顏色設(shè)置為透明就好了。

復(fù)制代碼代碼如下:

    //另外兩個也是

  bottomView.backgroundColor = [UIColor clearColor];

運行效果如圖：

201631991629336.gif (445×457)

到了這里我們基本上就把基本的占位視圖的介紹了聯(lián)系完了。通過聯(lián)系你可能會發(fā)現(xiàn)，無論是在StoryBoary上添加約束還是通過編碼進行的智能布局都是基于對父控件或者對其他控件進行的關(guān)聯(lián)。當然了如果你對AutoLayout的編碼布局的話就可能就會覺得Masonry真的是好用的爆了。當然了，這么強大的Masonry，提供的功能也是很多的，這些就要靠大家來探索了，嘿嘿。

您可能感興趣的文章: