等間距布局從0開始說一下masonry的使用

以下將從幾個方面說一下如何使用masonry

怎樣新增約束才能滿足乙個view, 及masonry的基本使用

如何使用masonry等間隙排布幾個view

更新約束動畫

scrolview如何布局

tableviewcell高度動態變化

先直接上圖, 最終要實現這樣乙個布局

這裡一共三部分, 最上面黃色的中間藍色的都是用了masonry提供的方法, 適用於等大小的view等間距布局, 最下面的綠色view是自己自己封裝的分類, 適用於不等大view的等間距布局, 來自於這邊經典的文章masonry介紹與使用實踐：快速上手autolayout

接下來分別說一下這三部分

//在紅色view裡面放三個正方形view, 等間距為10
nsinteger padding = 10;
uiview *yellowview1 = [[uiview alloc] init];
yellowview1.backgroundcolor = [uicolor yellowcolor];
[redview addsubview:yellowview1];
uiview *yellowview2 = [[uiview alloc] init];
yellowview2.backgroundcolor = [uicolor yellowcolor];
[redview addsubview:yellowview2];
uiview *yellowview3 = [[uiview alloc] init];
yellowview3.backgroundcolor = [uicolor yellowcolor];
[redview addsubview:yellowview3];
[@[yellowview1, yellowview2, yellowview3] mas_distributeviewsalongaxis:masaxistypehorizontal withfixedspacing:padding leadspacing:padding tailspacing:padding];
[@[yellowview1, yellowview2, yellowview3] mas_makeconstraints:^(masconstraintmaker *make) ];

masonry提供了這樣乙個方法:

/**
* 確定間距等間距布局
* * @param axistype 布局方向
* @param fixedspacing 兩個item之間的間距(最左面的item和左邊, 最右邊item和右邊都不是這個)
* @param leadspacing 第乙個item到父檢視邊距
* @param tailspacing 最後乙個item到父檢視邊距
*/- (void)mas_distributeviewsalongaxis:(masaxistype)axistype withfixedspacing:(cgfloat)fixedspacing leadspacing:(cgfloat)leadspacing tailspacing:(cgfloat)tailspacing;

所以也就知道了, 將fixedspacing, leadspacing, tailspacing都賦值同乙個間距, 陣列內的的view就會自動計算出寬度, 完成水平方向的布局.

要注意的是, 這個方法僅僅完成了水平方向的布局, 如果想確定這幾個view的位置, 還需要指定豎直方向位置和高度, 這裡可以用陣列直接呼叫mas_makeconstraints:^(masconstraintmaker *make){}完成布局.

//在紅色view裡面放三個正方形藍色view, 寬度均為30, 間隙一樣大
nsmutablearray *blueviews = [nsmutablearray array];
for (nsinteger i = 0; i < 3; i++) 
cgfloat padding2 = (300 - 3 * 30) / 4;
[blueviews mas_distributeviewsalongaxis:masaxistypehorizontal withfixeditemlength:30 leadspacing:padding2 tailspacing:padding2];
[blueviews mas_makeconstraints:^(masconstraintmaker *make) ];

這裡用到了masonry提供的另乙個方法, 和上乙個方法基本完全一樣

/**
* distribute with fixed item size
* * @param axistype 布局方向 
* @param fixeditemlength 每個item的布局方向的長度
* @param leadspacing 第乙個item到父檢視邊距
* @param tailspacing 最後乙個item到父檢視邊距
*/- (void)mas_distributeviewsalongaxis:(masaxistype)axistype withfixeditemlength:(cgfloat)fixeditemlength leadspacing:(cgfloat)leadspacing tailspacing:(cgfloat)tailspacing;

區別就是這裡除了布局方向, 第乙個和最後乙個view的邊距, 這裡需要指定的是每個item的長度, 自動計算間隙, 所以這個要實現等間距, 其實是要通過item的數量, 以及父檢視的寬度先計算出間距, 然後賦值給, leadspacing和tailspacing, 比如cgfloat padding2 = (300 - 3 * 30) / 4;這裡的300就是父檢視的寬度, 30是指定的每個item的寬度, 這樣計算好就可以保證, leadspacing, tailspacing, 和item之間的間距相同, 實現布局.

同樣這個方法完成了水平方向的布局, 還需要完成豎直方向的布局.

//在紅色view裡面放三個大小不一樣的綠色正方形, 間隙等大, masonry並沒提供相關方法
nsmutablearray *greenviews = [nsmutablearray array];
for (nsinteger i = 0; i < 3; i++) ];
}[redview distributespacinghorizontallywith:greenviews];

首先在for迴圈內 , 完成了底部位置, 寬, 高的布局, 還缺少水平方向的位置, 即還要確定每個view的x, 這裡用到了乙個uiview的分類

- (void) distributespacinghorizontallywith:(nsarray*)views;

這個分類直接用的里脊串的一篇文章中的**, 就不貼出**了, 簡單說一下原理, 如圖所示:

paste_image.png

實現原理就是在view中建立greenviews.count + 1個佔位的view(藍色), 之後通過布局, 使佔位view與要布局的view依次排開, 左右間距為0, 同時要約束所有的佔位view寬度相等, 這樣看來, 這些佔位view的寬度, 就是greenviews的間距, 也就可以實現等間距布局了.

至此, 我所知道的三種等間距布局方式就說完了, 具體**見

等間距布局從0開始說一下masonry的使用

從0開始的技術美術之路（一）

從0開始一步一步部署walle

從0開始學習介面自動化測試（一）

等間距布局 從0開始說一下masonry的使用

從0開始的技術美術之路（一）

從0開始一步一步部署walle

從0開始學習介面自動化測試（一）

相關推薦

等間距布局從0開始說一下masonry的使用