Masonry

Masonry

• Masonry是公認很是簡潔優美的一款Autolayout框架
• 我推薦你們重點學習這個框架
• 我會把Autolayout的思惟融合這個框架一塊兒講解

  Masonry的使用

• 想要使用第三方Masonry要麼要去GitHub上下載原代碼下來拖進項目中，要麼就直接使用cocoapods，pod search Masonry，下載最新版
• cocoapods的使用不是本文討論的範圍，你們能夠百度一下哈，安裝很是簡單

  Masonry的講解

• 由於以前的一篇關於VFL的文章我自我感受寫的不是太好，其實主要緣由是VFL的約束建立很是宏觀，若是既要照顧語法講解，又要照顧約束理解，反而介紹會使文章增長不少口水話，長而乏味
• Masonry的約束添加思惟其實與蘋果原API的添加思惟是相同的，只是Masonry語法更簡潔，代碼更優美
• 在這裏，爲了融合Autolayout的思想，我依然要說下面幾點
  • Autolayout所倡導的兩個核心詞是約束,參照
  • 而我認爲，Autolayout其實核心思想仍是爲了設置frame
  • 不管咱們如何添加約束，最終仍是爲了肯定其位置與尺寸
  • 因此，Autolayout的關鍵就是如何設置約束，讓空間知足位置,尺寸這兩個必要條件
  • 還有就是，當一個控件的約束已經可以知足上述兩個條件了，就不要再添加多餘的約束了，很容易會照成約束衝突
  • 除非你想設置其餘優先級的約束
  • 優先級會在例子中說明其用處

    例子講解

• 因爲Masonry是重點推薦的，我會分別用三個例子來說訴它

  第一個例子

• 這個例子很簡單，僅僅是爲了向你們介紹Masonry的語法
• 比起文字闡述需求，我不如直接上圖讓你們看得更直接明白
• 實現後的效果是這樣的

 

圖1

• ok,接下來看看怎麼用代碼去實現這個效果

• 先添加四個View

  UIView *redView = [[UIView alloc]init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; UIView *blueView = [[UIView alloc]init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; UIView *yellow = [[UIView alloc]init]; yellow.backgroundColor = [UIColor yellowColor]; [self.view addSubview:yellow]; UIView *green = [[UIView alloc]init]; green.backgroundColor = [UIColor greenColor]; [self.view addSubview:green];

• 建立添加紅色View的約束
  • 先來看看語法
  • Masonry的語法可讀性很是強
  • 因此我不會在這裏死板的一個單詞一個單詞的介紹
  • 你們在寫的時候徹底就能夠像寫句子同樣，而且Masonry添加約束都是mas_makeConstraints這個方法
  • 只須要在塊中寫上想好的約束
  • 好比下面的第一個約束
  • 翻譯過來就是使左邊等於self.view的左邊，間距爲0
  • 而在塊中主語就是調用者，這裏也就是redView
  • 因此使用Masonry，你就想着是用英語在造句就好了，哈哈
  • 還有一點，and與with其實就是get調用者自己，裏面僅僅是return self

[redView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view.mas_left).offset(0);//使左邊等於self.view的左邊，間距爲0 make.top.equalTo(self.view.mas_top).offset(0);//使頂部與self.view的間距爲0 make.width.equalTo(self.view.mas_width).multipliedBy(0.5);//設置寬度爲self.view的一半，multipliedBy是倍數的意思，也就是，使寬度等於self.view寬度的0.5倍 make.height.equalTo(self.view.mas_height).multipliedBy(0.5);//設置高度爲self.view高度的一半 }];

• 上面我已經添加了redView的約束，它已經擁有了寬和高，還有水平方向和垂直方向的位置，也就是frame中的x，y，width，height，都有了
• 因此redView的約束就添加完成了，無需再添加過多的約束
• 其餘的view將要以它爲錨點，來添加約束，肯定自身的位置與尺寸
• 接下來設置blueView的約束
• 你們在看下面代碼以前能夠本身思考，按照圖1中的blueView的效果，咱們應當怎樣添加約束呢？
• 很明顯，只須要與紅色等寬高，而且與紅色左間距爲0，頂部對齊，就能夠了

[blueView mas_makeConstraints:^(MASConstraintMaker *make) { make.width.and.height.equalTo(redView);//使寬高等於redView make.top.equalTo(redView.mas_top);//與redView頂部對齊 make.leading.equalTo(redView.mas_right);//與redView的間距爲0 }];

• 剩下的兩個View的約束我就不過多的闡述了，你們能夠本身先想一下怎麼添加約束，再來看我代碼是怎麼實現的
• 固然，極可能你的想法和個人實現不同，這是很正常的，約束的實現方法有太多了
• 可是萬變不離其宗！必定得保證最終設置完畢後，全部的控件都擁有了位置與尺寸

[yellow mas_makeConstraints:^(MASConstraintMaker *make) { make.leading.equalTo(redView);//與redView左對齊 make.top.equalTo(redView.mas_bottom);//與redView底部間距爲0 make.width.and.height.equalTo(redView);//與redView寬高相等 }]; [green mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(yellow.mas_right);//與yellow右邊間距爲0 make.top.equalTo(blueView.mas_bottom);//與blueView底部間距爲0 make.width.and.height.equalTo(redView);//與redView等寬高 }];

第二個例子

• 這個例子我但願你們能對約束的理念有個更深的理解
• 由於我一路寫下來，一直用的都是固定尺寸的例子，或者是固定位置的例子，我怕誤導你們認爲Autolayout是很是死板的，必須把每一個控件的約束添加到知足位置與尺寸，再去添加其餘控件的約束，這樣纔不會出錯
• 其實不是這樣的，的確，在全部控件添加完約束後，得擁有本身的位置與尺寸，可是有時這兩個必須條件能夠利用相對來知足
• 接下來我就用例子來解釋吧
• 先讓你們看一下效果圖

 

豎屏

 

橫屏

• 正如你們在圖片所看到的，我但願兩個等寬高的紅色方塊可以在屏幕旋轉的時候，間距等比例縮放，它們的相對位置是固定的，絕對位置隨着屏幕的寬改變而改變
• 其餘三個灰色的方塊，它們的寬是不肯定，這就是我想要和你們說的相對概念
• 我並無固定死灰色方塊的寬度，只要求它們與紅色方塊的間距爲0，而且灰色方塊的寬度相等
• 可是紅色方塊的寬度是固定的，灰色方塊就會互相相等的寬度，填充着紅色方塊間的空隙
• 接下來看看代碼是怎麼實現的吧
• 添加View的代碼我就不上了，直接看添加約束的代碼

//代碼中View的順序與圖中從左到右的View的順序一致 //例子中，惟一不肯定的就是灰色View的寬度，咱們先把肯定的約束給一個一個的添加上來 //灰1左間距、高度、垂直位置（由於和紅1底部對齊）是肯定的，添加約束 [gray1 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.mas_equalTo(20); make.leading.equalTo(self.view.mas_leading).offset(0); make.bottom.equalTo(red1.mas_bottom); }]; //紅1，寬高、左間距、底間距是肯定的，添加約束 [red1 mas_makeConstraints:^(MASConstraintMaker *make) { make.width.mas_equalTo(100); make.height.mas_equalTo(50); make.left.equalTo(gray1.mas_right); make.bottom.equalTo(self.view.mas_bottom).offset(-50); }]; //灰2，左間距、高度、垂直位置是肯定的，寬度要與灰1一致，是爲了能均勻填充，添加約束 [gray2 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.and.width.equalTo(gray1); make.leading.equalTo(red1.mas_right); make.bottom.equalTo(red1.mas_bottom); }]; //紅2，寬高、左間距、底間距是肯定的，添加約束 [red2 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.and.width.equalTo(red1); make.leading.equalTo(gray2.mas_right); make.bottom.equalTo(red1.mas_bottom); }]; //灰3，左間距、右間距、高度、垂直位置是肯定的，添加約束 [gray3 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.and.width.equalTo(gray1); make.leading.equalTo(red2.mas_right); make.trailing.equalTo(self.view.mas_right); make.bottom.equalTo(red1.mas_bottom); }];

• 你們看了上面的講解後，會發現三個灰色方塊都沒有設置固定的寬
• 可是它們三個都等寬，紅色方塊又是固定的，那麼在這5個View間距都爲0的狀況下，灰色方塊不就會去擠壓紅色方塊，直到灰色方塊寬度相等，那麼紅色方塊也處在了應有的位置麼
• 這就是我想說的相對，紅色方塊寬度是固定的，那麼水平方向上的間距就須要剩下的三個灰色方塊去填充，當界面橫屏時，三個灰色方塊爲了相對自身寬度要相同，相對紅色邊界，self.view邊界，間距保持爲0，那麼就得犧牲自身寬度的穩定，去維持這些相對的約束
• 但願我這些話能幫助你們更深入的理解約束，更多的東西須要你們去作項目慢慢體會

第三個例子

• 最後這個例子是老例子了，我想給你們看看其實Masonry作動畫也和其餘的Autolayout方法同樣，可是添加約束的代碼卻很是的少，能夠和我以前的另外一篇文章比較一下
• 裏面的約束我就不講解了，看了上面的代碼，下面的約束對你來講確定是小菜一碟
• 約束代碼

UIView *redView = [[UIView alloc]init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; UIView *greenView = [[UIView alloc]init]; greenView.backgroundColor = [UIColor greenColor]; [self.view addSubview:greenView]; UIView *blueView = [[UIView alloc]init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; [redView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view.mas_left).offset(20); make.bottom.equalTo(self.view.mas_bottom).offset(-20); make.width.equalTo(self.view.mas_width).multipliedBy(0.2); make.height.equalTo(self.view.mas_height).multipliedBy(0.2); }]; [greenView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(redView.mas_right).offset(20); make.bottom.equalTo(self.view.mas_bottom).offset(-20); make.width.equalTo(self.view.mas_width).multipliedBy(0.2); make.height.equalTo(self.view.mas_height).multipliedBy(0.2); }]; [blueView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(greenView.mas_right).offset(20); make.bottom.equalTo(self.view.mas_bottom).offset(-20); make.width.equalTo(self.view.mas_width).multipliedBy(0.2); make.height.equalTo(self.view.mas_height).multipliedBy(0.2); make.left.equalTo(redView.mas_right).offset(20).priority(250); }];

• 動畫代碼

[self.greenView removeFromSuperview]; [UIView animateWithDuration:1.0f animations:^{ [self.view layoutIfNeeded]; }];

 

動畫前

 

動畫後

• 好了，Masonry就爲你們講解到這裏,若是對Masonry的使用語法或者是對約束的思想還有什麼不理解，但願您能夠不吝惜的提出來，我但願能把文章作得更通俗易懂，更深入！