Masonry的布局框架，具有自己的個性，它使用更優雅的鏈語法來封裝自動布局，它簡潔易讀，那么iOS App開發中Masonry布局框架的基本用法解析大家了解嗎？一起跟著武林技術頻道小編來了解吧！
Masonry使用講解:
mas_makeConstraints 是給view添加約束，約束有幾種，分別是邊距，寬，高，左上右下距離，基準線。添加過約束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正。
語法一般是 make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍數和位移修正。
注意點1： 使用 mas_makeConstraints方法的元素必須事先添加到父元素的中，例如[self.view addSubview:view];
注意點2： masequalTo 和 equalTo 區別：masequalTo 比equalTo多了類型轉換操作，一般來說，大多數時候兩個方法都是 通用的，但是對于數值元素使用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方法的語句可讀性 更好點。
下面帶著例子來看一下基礎用法，假設我們現在的需求是：
1.我們現在只能確定我們控件的寬高以及左右的邊距，需要對上下進行自動適應。
2.假設我們現在有四個控件，需要布局的界面是這個樣子的
豎屏效果：
橫屏效果：
第一步：在我們的控制器中導入Masonry所需要的文件
第二步：在控制器中添加以下三個占位視圖并設置顏色
?
?
第三步：開始分別給三個占位視圖添加約束
?
?
?
??? }];
??? //下面的約束主要設置下面的與中間視圖的約束以及本身左邊距的約束
??? [bottomView makeConstraints:^(MASConstraintMaker *make) {
??????? make.left.bottom.equalTo(self.view).offset(0);
??????? make.top.equalTo(centerView.bottom).offset(150);
??? }];
到了，這里。我們的三個占位視圖已經基本完成了。那么讓我們運行一下看下效果：
?
?
?
?
由此我們發現中間空出的部分正好就是我們控件所需的位置了，那么下面我們就開始進行對控件的布局了。首先還是添加需要的左邊的控件
?
??? //然后對這兩個控件進行布局
??? [imageView1 makeConstraints:^(MASConstraintMaker *make) {
??????? //分別設置起寬高
?????? make.width.height.equalTo(150);
??????? //左邊的邊距
?????? make.left.equalTo(self.view).offset(0);
?????? //設置其與上面占位視圖和下面占位視圖的間距
?????? 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);
??? }];
代碼到了這里左邊的控件約束基本布局完成了，讓我們來看一下運行的效果吧。
?
?
?
?
到了這里我們就可以對右邊的控件進行布局了?；谥暗慕涷炍覀兙蜁l現右邊的約束只需要添加本身的寬、高和右邊邊距以及基于左邊控件的centerY值就足夠了。好了，我們開始吧。
?
??? //該控件與左邊的控件的關聯
??? [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);
??? }];
到了這里基本上是大功告成了，到了這里只需要要把三個占位視圖的背景顏色設置為透明就好了。
?
?
運行效果如圖：
?
?
?
這里我們基本上鏈接了基本占位符視圖的介紹。通過聯系，您可能會發現向Storyboary添加約束和通過編碼進行智能布局都是基于與父控件或其他控件的關聯。
新聞熱點
疑難解答
