在前面博客，我們討論了使用iOS原生的框架代碼來進行autolayout布局。在使用中，我們會發(fā)現(xiàn)，無論是代碼量還是結(jié)構(gòu)的清晰度，都十分不能讓我們滿意，在storyBoard中只需要幾條線就可以搞定的事情，用代碼缺要寫冗余的一大堆。并且有些時候，故事版并不能解決所有問題，某些控件必須我們手寫，這樣的話，我們就不得不進行代碼的autolayout布局，幸運的是，Masonry可以幫助我們輕松愉快的完成這一任務(wù)。
使用代碼進行autolayout布局：http://my.oschina.net/u/2340880/blog 。
這里說的大部分內(nèi)容均來自Masonry和官方gitHub，將其內(nèi)容進行了翻譯和解釋，源地址如下：https://github.com/SnapKit/Masonry。
無論是用storyBoard還是代碼，在設(shè)置控件之間layout關(guān)系的時候，我們都需要設(shè)置控件的位置屬性。在下面的方法中，這個位置屬性就是NSLayoutAttribute對象，他決定的控件對象的參照位置：
在Masonry中，有一系列的屬性與之成對應(yīng)關(guān)系，對照如下：
Masonry在UIView的類別中，有3個全局的操作約束的方法，通過他們我們可以自由的進行autolayout的設(shè)置。
添加約束：
這個方法用于我們在最開始時為控件設(shè)置的約束，在block中進行約束條件的設(shè)置，例如我們創(chuàng)建一個label，將其尺寸設(shè)置為50*50，放在屏幕中間，使用如下代碼：
注意：在添加約束前，必須將視圖添加到其父視圖上。
1 2 3 4 5 6 7 8 9 10 11 12 | - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. UILabel * label = [[UILabel alloc]init]; [self.view addSubview:label]; [label mas_makeConstraints:^(MASConstraintMaker *make) { make.center.equalTo(self.view); make.height.equalTo(@50); make.width.equalTo(@50); }]; label.backgroundColor = [UIColor redColor];} |
效果如下：
更新約束：
當(dāng)我們需要配合布局改變或者動畫效果的時候，我們可能需要將已經(jīng)添加的約束進行更新操作，使用如下的方法：
更新約束的作用在于更新已經(jīng)添加的某些約束，并不會移除掉原有的約束，如果我們需要添加新的約束，可以使用下面的重設(shè)約束的方法。
重設(shè)約束：
在添加具體約束的時候，我們不僅可以將約束值設(shè)置為絕對的相等關(guān)系，也可以設(shè)置一些值域的關(guān)系，在Masonry中，有如下三種：
對于約束的優(yōu)先級，使用如下幾個量：
寫法如下：
1 2 3 4 5 6 7 8 9 10 | - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. label = [[UILabel alloc]init]; [self.view addSubview:label]; [label mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20)); }]; label.backgroundColor = [UIColor redColor];} |
設(shè)置上下左右與其父視圖邊距為20px，效果如下：
位置約束設(shè)置在了屏幕的中間，效果如下：
1 2 3 4 5 6 7 8 9 10 11 12 | [label mas_makeConstraints:^(MASConstraintMaker *make) { make.height.equalTo(@100); make.width.equalTo(label2); make.right.equalTo(label2.mas_left).offset(-100); make.leading.equalTo(self.view.mas_leading).offset(20); make.centerY.equalTo(self.view); }]; [label2 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.equalTo(@100); make.centerY.equalTo(label); make.trailing.equalTo(self.view.mas_trailing).offset(-20); }]; |
設(shè)置了兩個label寬度一致，相距100px,分別距離左右邊距20px，效果如下：
