Masonry佈局框架的使用

Masonry是一個輕量級的佈局框架 擁有本身的描述語法 採用更優雅的鏈式語法封裝自動佈局 簡潔明瞭 並具備高可讀性。比咱們使用自動佈局，繁瑣的約束條件，好用多了。下面咱們來學學masonry的使用方法。

    首先咱們要下載Masonry源碼。源碼地址以下：

https://github.com/Masonry/Masonry

將源碼下載下來後，能夠直接編譯過使用的。

而後將源碼中的Masonry和Headers目錄下的文件拷貝到咱們的工程中，並添加進項目中。並在項目的編譯設置中的header search paths 選項中增長$(SRCROOT)/Headers 和$(SRCROOT)/Masonry

 

而後在咱們的項目預編譯文件中增長

#import "Masonry.h"

而後咱們就可使用masonry的語句來設置咱們的界面了。下面咱們開始吧。

Masonry 支持的經常使用屬性以下：

@property (nonatomic, strong, readonly) MASConstraint *left;

@property (nonatomic, strong, readonly) MASConstraint *top;

@property (nonatomic, strong, readonly) MASConstraint *right;

@property (nonatomic, strong, readonly) MASConstraint *bottom;

@property (nonatomic, strong, readonly) MASConstraint *leading;

@property (nonatomic, strong, readonly) MASConstraint *trailing;

@property (nonatomic, strong, readonly) MASConstraint *width;

@property (nonatomic, strong, readonly) MASConstraint *height;

@property (nonatomic, strong, readonly) MASConstraint *centerX;

@property (nonatomic, strong, readonly) MASConstraint *centerY;

@property (nonatomic, strong, readonly) MASConstraint *baseline;

 

這些屬性與NSLayoutAttrubute的對照表以下：

 

·       首先在Masonry中可以添加autolayout約束有三個函數

• - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

• - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

• - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

• mas_makeConstraints 只負責新增約束 Autolayout不能同時存在兩條針對於同一對象的約束 不然會報錯

• mas_updateConstraints 針對上面的狀況 會更新在block中出現的約束 不會致使出現兩個相同約束的狀況

• mas_remakeConstraints 則會清除以前的全部約束 僅保留最新的約束

 

• 三種函數善加利用 就能夠應對各類狀況了

一個小例子：

    //今後之後基本能夠拋棄CGRectMake了

    UIView *sv = [UIView new];

    //在作autoLayout以前 必定要先將view添加到superview上 不然會報錯

    [self.view addSubview:sv];

    //mas_makeConstraints就是Masonry的autolayout添加函數 將所需的約束添加到block中行了

    [sv mas_makeConstraints:^(MASConstraintMaker *make) {

  //將sv居中(很容易理解吧?)

        make.center.equalTo(ws.view);

        //將size設置成(300,300)

        make.size.mas_equalTo(CGSizeMake(300, 300));

}];

equalTo 和 mas_equalTo的區別在哪裏呢? 其實 mas_equalTo是一個MACRO,比較的是值，equalTo比較的是view。

小例子二：

    UIView *sv1 = [UIView new];

    sv1.backgroundColor = [UIColor redColor];

    [sv addSubview:sv1];

    [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

    }];

 

    UIView *sv2 = [UIView new];

    UIView *sv3 = [UIView new];

    sv2.backgroundColor = [UIColor greenColor];

    sv3.backgroundColor = [UIColor blueColor];

    [sv addSubview:sv2];

    [sv addSubview:sv3];

    int padding1 = 10;

    [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerY.mas_equalTo(sv.mas_centerY);

        make.left.equalTo(sv.mas_left).with.offset(padding1);

        make.right.equalTo(sv3.mas_left).with.offset(-padding1);

        make.height.mas_equalTo(@150);

        make.width.equalTo(sv3);

    }];

    [sv3 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerY.mas_equalTo(sv.mas_centerY);

        make.left.equalTo(sv2.mas_right).with.offset(padding1);

        make.right.equalTo(sv.mas_right).with.offset(-padding1);

        make.height.mas_equalTo(@150);

        make.width.equalTo(sv2);

    }];

效果以下：

例子三：

[self.mobileView mas_makeConstraints:^(MASConstraintMaker *make){

   

        make.left.equalTo(self.view.mas_left).with.offset(0);

        make.right.equalTo(self.view.mas_right).with.offset(0);

        make.top.equalTo(self.view.mas_top).with.offset(MobileView_To_Top);

        make.height.mas_equalTo(@Height_of_MobileView);

        make.width.equalTo(self.view);

     

    }];

   

   

    [self.tipLabel mas_makeConstraints:^(MASConstraintMaker *make){

       

        make.left.equalTo(self.view.mas_left).with.offset(0);

        make.right.equalTo(self.view.mas_right).with.offset(0);

        make.top.equalTo(self.view.mas_top).with.offset(Tiplabel_To_Top);

        make.height.mas_equalTo(@Height_of_TipLabel);

        make.width.equalTo(self.view);

       

    }];

   

    [self.nextButton mas_makeConstraints:^(MASConstraintMaker *make){

       

        make.left.equalTo(self.view.mas_left).with.offset(NextButton_To_Left);

        make.right.equalTo(self.view.mas_right).with.offset(-NextButton_To_Left);

        make.top.equalTo(self.view.mas_top).with.offset(NextButton_To_Top);

        make.height.mas_equalTo(@Height_of_NextButton);

    }];

 

注意在xib或者storyboard中使用masonry框架相關方法的時候要將use Auto layout選項去掉，不然會不起做用。