iOS界面佈局之四——使用第三方庫Masonry進行autolayout佈局

iOS界面佈局之四——使用第三方庫Masonry進行autolayout佈局

1、引言

        在前面博客，咱們討論了使用iOS原生的框架代碼來進行autolayout佈局。在使用中，咱們會發現，不管是代碼量仍是結構的清晰度，都十分不能讓咱們滿意，在storyBoard中只須要幾條線就能夠搞定的事情，用代碼缺要寫冗餘的一大堆。而且有些時候，故事版並不能解決全部問題，某些控件必須咱們手寫，這樣的話，咱們就不得不進行代碼的autolayout佈局，幸運的是，Masonry能夠幫助咱們輕鬆愉快的完成這一任務。

使用代碼進行autolayout佈局：http://my.oschina.net/u/2340880/blog 。

2、使用Masonry

        這裏說的大部份內容均來自Masonry和官方gitHub，將其內容進行了翻譯和解釋，源地址以下：https://github.com/SnapKit/Masonry。

一、佈局的控件屬性對照

        不管是用storyBoard仍是代碼，在設置控件之間layout關係的時候，咱們都須要設置控件的位置屬性。在下面的方法中，這個位置屬性就是NSLayoutAttribute對象，他決定的控件對象的參照位置：

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 
                                            relatedBy:(NSLayoutRelation)relation 
                                            toItem:(nullable id)view2 
                                            attribute:(NSLayoutAttribute)attr2 
                                            multiplier:(CGFloat)multiplier constant:(CGFloat)c;

在Masonry中，有一系列的屬性與之成對應關係，對照以下：

二、3個方法讓你玩轉Masonry約束操做

        Masonry在UIView的類別中，有3個全局的操做約束的方法，經過他們咱們能夠自由的進行autolayout的設置。

添加約束：

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

這個方法用於咱們在最開始時爲控件設置的約束，在block中進行約束條件的設置，例如咱們建立一個label，將其尺寸設置爲50*50，放在屏幕中間，使用以下代碼：

注意：在添加約束前，必須將視圖添加到其父視圖上。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UILabel * label = [[UILabel alloc]init];
    [self.view addSubview:label];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.height.equalTo(@50);
        make.width.equalTo(@50);
    }];
    label.backgroundColor = [UIColor redColor];
}

效果以下：

更新約束：

當咱們須要配合佈局改變或者動畫效果的時候，咱們可能須要將已經添加的約束進行更新操做，使用以下的方法：

[label mas_updateConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@100);
        make.width.equalTo(@100);
    }];

更新約束的做用在於更新已經添加的某些約束，並不會移除掉原有的約束，若是咱們須要添加新的約束，可使用下面的重設約束的方法。

重設約束：

[label mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(10);
        make.top.equalTo(self.view.mas_top).offset(100);
        make.height.equalTo(@100);
        make.width.equalTo(@100);
    }];

三、約束值相關

        在添加具體約束的時候，咱們不只能夠將約束值設置爲絕對的相等關係，也能夠設置一些值域的關係，在Masonry中，有以下三種：

//絕對相等
- (MASConstraint * (^)(id attr))equalTo;
//大於等於
- (MASConstraint * (^)(id attr))greaterThanOrEqualTo;
//小於等於
- (MASConstraint * (^)(id attr))lessThanOrEqualTo;

對於約束的優先級，使用以下幾個量：

//手動設置一個優先級參數
- (MASConstraint * (^)(MASLayoutPriority priority))priority;
//優先級低
- (MASConstraint * (^)())priorityLow;
//優先級中等
- (MASConstraint * (^)())priorityMedium;
//優先級高
- (MASConstraint * (^)())priorityHigh;

寫法以下：

[label mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(10);
        make.top.equalTo(self.view.mas_top).offset(100);
        make.height.equalTo(@100).priority(1000);
        make.width.equalTo(@100).priorityHigh();
    }];

3、Masonry設置約束的幾個示例

一、設置視圖與其父視圖的邊距約束

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    label = [[UILabel alloc]init];
    [self.view addSubview:label];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));
    }];
    label.backgroundColor = [UIColor redColor];
}

設置上下左右與其父視圖邊距爲20px，效果以下：

 

二、約束控件的尺寸爲固定值

[label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@200);
        make.width.equalTo(@200);
        make.center.equalTo(self.view);
    }];

位置約束設置在了屏幕的中間，效果以下：

三、約束控件之間的尺寸

  [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@100);
        make.width.equalTo(label2);
        make.right.equalTo(label2.mas_left).offset(-100);
        make.leading.equalTo(self.view.mas_leading).offset(20);
        make.centerY.equalTo(self.view);
    }];
    [label2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@100);
        make.centerY.equalTo(label);
        make.trailing.equalTo(self.view.mas_trailing).offset(-20);
    }];

設置了兩個label寬度一致，相距100px,分別距離左右邊距20px，效果以下：

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592