關於Masonry架構(AutoLayout)的用法--面向初學者，masonryautolayout

關於Masonry架構(AutoLayout)的用法--面向初學者，masonryautolayout

      Masonry作為目前較為流行的自動布局第三方架構，簡單易用，大大減少了程式員花在UI布局和螢幕適配的精力與時間。

1 基本用法1.1 案例1：

 

// 首先是view1自動布局

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

    // view1左邊與superView左邊對齊

    make.left.equalTo(superView.mas_left);

 

    // view1右邊與superView右邊對齊.

    make.right.equalTo(superView.mas_right);

    /* 這兩句代碼約束了view1的左邊與右邊，等價於約束了view1的寬

    度,寬度與superView的寬度相等，superView寬度變了，view1寬度也

    更著改變*/

 

    // viewe1上邊於superView上邊對齊

    make.top.equalTo(superView.mas_top); 

 

    // view1高度固定為44,等於一個數時用mas_equalTo();

    make.height.mas_equalTo(44);

 

    /* 到這裡view1布局完成，它的origin(位置：x,y)和size(尺寸：

    width,height)都確定了,實際上就是view1的frame確定了。*/

}];

 

    /* 任意一個UIView的布局都需要確定位置和尺寸：x和y, width和

    height，缺一不可。下面是view2的布局 */

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

    // view2左邊與view1左邊對齊,即x確定，也可以與superView對齊

    make.left.equalTo(view1.mas_left);

 

    // view1寬度固定為90,即width確定。

    make.width.mas_equalTo(90);

 

    // 這裡view2的高度與view1的高度相等,即height確定.

    make.height.equalTo(view1.mas_height); 

 

    // 底邊與superView底邊對齊,結合高度約束，y確定。

    make.bottom.equalTo(superView.mas_bottom); 

}];

/* x,y既可以通過left,top直接確定，也可以通right結合width,bottom

結合height間接確定 ，width和height通過mas_equalTo()直接確定以及

通過equalTo(view)依賴view的寬高間接確定 */

1.2 案例2:

 

 [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

    // 與superView左邊對齊，x確定。

    make.left.equalTo(superView.mas_left);

 

    // 與superView上邊對齊，y確定。

    make.top.equalTo(superView.mas_top); 

    // view1寬度固定為90，width確定。

 

    make.width.mas_equalTo(90);

    // view1高度height未確定。

}];

 

//view2布局，假設雙箭頭( 間距 )為20;

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

    /* view2的左邊與superView左邊+一個數對齊，從這裡換個說法

    ,view2的左邊等於superView的左邊加上一個間距，x確定。*/

    make.left.equalTo(superView.mas_left).offset(20)

 

    // view2的底邊等於superView底邊。

    make.bottom.equalTo(superView.mas_bottom);

 

    // view2的尺寸等於view1的尺寸(高度和寬度)，size(width,height)確定

    make.size.equalTo(view1);

    /* 上面一句等價於make.height.width.equalTo(view1); */

 

    // view2的頂邊等於view1的底邊加上間距，結合高度約束，y確定。

    make.top.equalTo(view1.mas_bottom).offset(20)

 

    /* 四個要素確定，約束完成，view2的寬高度與view1的寬高度相同，

    由於兩者沒有。固定高度，只有固定的間距，故view1和view2的高度

    會隨著superView的高度變化而變化。*/

}];

//囉嗦下座標

 

//view3布局，假設間距為20。

[view3 mas_makeConstraints:^(MASConstraintMaker *make) {

    /* 看出右邊最好確定，右邊等於superView的右邊加上間距 */

    make.right.equalTo(superView.mas_right).offset(-20);

    // 座標計算: 往左-20,往右+20。

 

    // view3的頂邊等於superView頂邊加一個間距

    make.top.equalTo(superView.mas_top).offset(20); //往上-20, 往下+20

 

    // view3的底邊等於superView的底邊加上一個間距。

    make.bottom.equalTo(superView.mas_bottom).offset(-20)

    // 到這裡view3的高度確定，但寬度和x,y都尚未確定

 

    // view3寬度確定後結合right約束x跟著確定

    make.width.mas_equalTo(90);

 

    /* 剩下y未確定,可以看出view3在superView中應該是垂

    直方向上置中,可以直接設定centerY */

    make.centerY.equalTo(superView.mas_centerY);

 

    /* 無論superView高寬怎麼變化，view3始終在垂直方向上置中，

    且緊挨著superView右側，高度會隨著superView變化而變化，當

    然，你也可以直接固定高度，頂邊與底邊就不用在設定了，這樣，

    superView高度變大變小，view3始終那麼高，如何選擇肯定是跟

    UI介面需求有關 */

}];

 

/* 這部分主要介紹了基本用法, top, bottom, left, right, centerY(相應的有

centerX), equalTo(), mas_equalTo(), offset() */ 

2 注意事項2.1 問題

(1)  view 進行布局了但沒有效果

1)  view為空白,相當於給null 指標發送訊息，沒有作用。

2)  布局依賴的UIView(如superView,view2)沒有布局好.(說明：

    make.equalTo(view2),view2為依賴的UIView).

3)  view 本身沒有顯示什麼東西

4)  view 沒有添加到superView

5)  等等。。。。。。。

(2)  約束過多相悖或缺少    

 

(3)程式崩潰，一般是約束依賴的對象(如superView)為空白

2.2 綜合解決方案

設定view的背景以便觀察，輔以View UI Hierarchy觀測.

最直接有效方法是在當前介面的第一個自動布局的view處打上斷點，一行一行往下走( step over )，若直接跳過當前view布局，一般是當前view為空白; 若進去在某一行程式崩潰，一般是當前約束語句依賴的對象為空白。

2.3 細節( 自行忽略 )

規律：邊界:view1與superView對齊,相鄰：view2與view1的左邊、右邊、頂邊或者底邊對齊，中心：centerX，centerY對齊,一個整體內的view與該整體對齊.固定與變化的選擇依UI需求.

一般情況下，布局是在layoutSubViews()或者控制器viewDidLayoutSubViews(),若不是，如：view1在布局約束前未執行[superView addSubViews:view1],程式也會崩潰。