iOS 自動佈局框架 – Masonry 詳解

發表於2017-01-10

目前iOS開發中大多數頁面都已經開始使用Interface Builder的方式進行UI開發了,但是在一些變化比較複雜的頁面,還是需要通過程式碼來進行UI開發的。而且有很多比較老的專案,本身就還在採用純程式碼的方式進行開發。

而現在iPhoneiPad螢幕尺寸越來越多,雖然開發者只需要根據螢幕點進行開發,而不需要基於畫素點進行UI開發。但如果在專案中根據不同螢幕尺寸進行各種判斷,寫死座標的話,這樣開發起來是很吃力的。

所以一般用純程式碼開發UI的話,一般都是配合一些自動化佈局的框架進行螢幕適配。蘋果為我們提供的適配框架有:VFLUIViewAutoresizingAuto LayoutSize Classes等。

其中Auto Layout是使用頻率最高的佈局框架,但是其也有弊端。就是在使用UILayoutConstraint的時候,會發現程式碼量很多,而且大多都是重複性的程式碼,以至於好多人都不想用這個框架。

後來Github上的出現了基於UILayoutConstraint封裝的第三方佈局框架MasonryMasonry使用起來非常方便,本篇文章就詳細講一下Masonry的使用。


iOS 自動佈局框架 – Masonry 詳解

佔點陣圖

Masonry介紹

這篇文章只是簡單介紹Masonry,以及Masonry的使用,並且會舉一些例子出來。但並不會涉及到Masonry的內部實現,以後會專門寫篇文章來介紹其內部實現原理,包括順便講一下鏈式語法。

什麼是Masonry

Masonry是一個對系統NSLayoutConstraint進行封裝的第三方自動佈局框架,採用鏈式程式設計的方式提供給開發者API。系統AutoLayout支援的操作,Masonry都支援,相比系統API功能來說,Masonry是有過之而無不及。

Masonry採取了鏈式程式設計的方式,程式碼理解起來非常清晰易懂,而且寫完之後程式碼量看起來非常少。之前用NSLayoutConstraint寫很多程式碼才能實現的佈局,用Masonry最少一行程式碼就可以搞定。下面看到Masonry的程式碼就會發現,太簡單易懂了。

Masonry是同時支援MaciOS兩個平臺的,在這兩個平臺上都可以使用Masonry進行自動佈局。我們可以從MASUtilities.h檔案中,看到下面的定義,這就是Masonry通過巨集定義的方式,區分兩個平臺獨有的一些關鍵字。

Github地址:
https://github.com/SnapKit/Masonry

整合方式

Masonry支援CocoaPods,可以直接通過podfile檔案進行整合,需要在CocoaPods中新增下面程式碼:

Masonry學習建議

UI開發中,純程式碼和Interface Builder我都是用過的,在開發過程中也積累了一些經驗。對於初學者學習純程式碼AutoLayout,我建議還是先學會Interface Builder方式的AutoLayout,領悟蘋果對自動佈局的規則和思想,然後再把這套思想巢狀在純程式碼上。這樣學習起來更好入手,也可以避免踩好多坑。

在專案中設定的AutoLayout約束,起到對檢視佈局的標記作用。設定好約束之後,程式執行過程中建立檢視時,會根據設定好的約束計算frame,並渲染到檢視上。

所以在純程式碼情況下,檢視設定的約束是否正確,要以執行之後顯示的結果和列印的log為準。

Masonry中的坑

在使用Masonry進行約束時,有一些是需要注意的。

  1. 在使用Masonry新增約束之前,需要在addSubview之後才能使用,否則會導致崩潰。
  2. 在新增約束時初學者經常會出現一些錯誤,約束出現問題的原因一般就是兩種:約束衝突和缺少約束。對於這兩種問題,可以通過除錯和log排查。
  3. 之前使用Interface Builder新增約束,如果約束有錯誤直接就可以看出來,並且會以紅色或者黃色警告體現出來。而Masonry則不會直觀的體現出來,而是以執行過程中崩潰或者列印異常log體現,所以這也是手寫程式碼進行AutoLayout的一個缺點。
    這個問題只能通過多敲程式碼,積攢純程式碼進行AutoLayout的經驗,慢慢就用起來越來越得心應手了。

Masonry基礎使用

Masonry基礎API

Auto Boxing

上面例如equalTo或者width這樣的,有時候需要涉及到使用mas_字首,這在開發中需要注意作區分。
如果在當前類引入#import "Masonry.h"之前,用下面兩種巨集定義宣告一下,就不需要區分mas_字首。

修飾語句

Masonry為了讓程式碼使用和閱讀更容易理解,所以直接通過點語法就可以呼叫,還新增了andwith兩個方法。這兩個方法內部實際上什麼都沒幹,只是在內部將self直接返回,功能就是為了更加方便閱讀,對程式碼執行沒有實際作用。
例如下面的例子:

其內部程式碼實現,實際上就是直接將self返回。

更新約束和佈局

關於更新約束佈局相關的API,主要用以下四個API

關於UIView重新佈局相關的API,主要用以下三個API

Masonry示例程式碼

常用方法

設定內邊距

通過insets簡化設定內邊距的方式

更新約束

大於等於和小於等於某個值的約束

textLabel只需要設定一個屬性即可

使用基礎資料型別當做引數

設定約束優先順序

設定約束比例

小練習

子檢視等高練習

子檢視垂直居中練習

UITableView動態Cell高度

iOS UI開發過程中,UITableView的動態Cell高度一直都是個問題。實現這樣的需求,實現方式有很多種,只是實現起來複雜程度和效能的區別。

在不考慮效能的情況下,tableView動態Cell高度,可以採取估算高度的方式。如果通過估算高度的方式實現的話,無論是純程式碼還是Interface Builder,都只需要兩行程式碼就可以完成Cell自動高度適配。

實現方式:
需要設定tableViewrowHeight屬性,這裡設定為自動高度,告訴系統Cell的高度是不固定的,需要系統幫我們進行計算。然後設定tableViewestimatedRowHeight屬性,設定一個估計的高度。(我這裡用的代理方法,實際上都一樣)

原理:
這樣的話,在tableView被建立之後,系統會根據estimatedRowHeight屬性設定的值,為tableView設定一個估計的值。然後在Cell顯示的時候再獲取Cell的高度,並重新整理tableViewcontentSize

UIScrollView自動佈局

之前聽很多人說過UIScrollView很麻煩,然而我並沒有感覺到有多麻煩(並非裝逼)。我感覺說麻煩的人可能根本就沒試過吧,只是覺得很麻煩而已。
我這裡就講一下兩種進行UIScrollView自動佈局的方案,並且會講一下自動佈局的技巧,只要掌握技巧,佈局其實很簡單。

佈局小技巧:
UIScrollView新增的約束是定義其frame,設定contentSize是定義其內部大小。UIScrollView進行addSubview操作,都是將其子檢視新增到contentView上。
所以,新增到UIScrollView上的子檢視,對UIScrollView新增的約束都是作用於contentView上的。只需要按照這樣的思路給UIScrollView設定約束,就可以掌握設定約束的技巧了。

提前設定contentSize

自動contentSize

上面的例子是提前設定好UIScrollViewcontentSize的內部size,然後直接向裡面addSubview。但是這有個要求就是,需要提前知道contentSize的大小,不然沒法設定。
這個例子中將會展示動態改變contentSize的大小,內部檢視有多少contentSize就自動擴充到多大。

這種方式的實現,主要是依賴於建立一個containerView內容檢視,並新增到UIScrollView上作為子檢視。UIScrollView原來的子檢視都新增到containerView上,並且和這個檢視設定約束。
因為對UIScrollView進行addSubview操作的時候,本質上是往其contentView上新增。也就是containerView的父檢視是contentView,通過containerView撐起contentView檢視的大小,以此來實現動態改變contentSize

相關文章