我們?cè)趇OS開(kāi)發(fā)中，一定會(huì)牽扯到我們的布局的開(kāi)發(fā)。一般的來(lái)講，布局分為三種方式。
- 第一種，就是我們直接在StoryBoard里面“畫(huà)出”我們的布局，這種所見(jiàn)即所得的方式，是蘋果公司推薦開(kāi)發(fā)者的方
式，所以，在我們最新的XCode里面創(chuàng)建的項(xiàng)目，都會(huì)默認(rèn)包含一個(gè)叫做Main.storyboard的文件，在這個(gè)文件上面，我們就可以畫(huà)出我們自己的布局。甚至有時(shí)候我們都可以讓我們的美工給我們做出Storyboard文件。例如下圖。
- 第二種方式就是我們的xib，或者叫nib文件，這種方式也是一種圖像化的布局方式。只是我們的布局是和每個(gè)View Controller對(duì)應(yīng)的。所以，這種方式比我們的Storyboard更加靈活，做起來(lái)也比較輕量，沒(méi)有Storyboard中的場(chǎng)景的概念，也可以根據(jù)你自己的需求選擇需要?jiǎng)?chuàng)建nib文件的類。如下：
- 第三種，就是通過(guò)手寫代碼來(lái)實(shí)現(xiàn)我們的UI界面。這種方式在移動(dòng)開(kāi)發(fā)剛興起時(shí)，比較流行，因?yàn)橛腥苏f(shuō)通過(guò)手寫的代碼，比你在Storyboard或者是xib中做的界面，加載起來(lái)要快，因?yàn)槲覀兊乃?jiàn)即所得的界面，還是要在運(yùn)行的時(shí)候，轉(zhuǎn)換成本地的代碼。而隨著現(xiàn)在蘋果公司對(duì)于Interface builder的慢慢優(yōu)化，我們使用手寫UI的性能優(yōu)勢(shì)已經(jīng)越來(lái)越小了。我們今天仍然有很多公司使用手寫UI，主要是因?yàn)檫z留的代碼問(wèn)題，還有團(tuán)隊(duì)協(xié)作的方便性。在手寫代碼的時(shí)候，我們經(jīng)常會(huì)發(fā)現(xiàn)一個(gè)簡(jiǎn)單的界面，會(huì)有很多代碼需要編寫，尤其是我們UI組件之間的Layout constraits。
Masonry是什么
剛才說(shuō)了，我們的手寫UI，不可避免的面對(duì)一個(gè)問(wèn)題，我們的UI可能會(huì)在不同的環(huán)境下有不同的顯示效果，所以，我們要讓我們寫出的界面能夠在各種不同的設(shè)備上顯示正確。我們?cè)趇OS上解決這個(gè)問(wèn)題，是通過(guò)給不同的組件上添加各種各樣的約束。約束非常好理解。例如，我們有這么一個(gè)樣式。
如果我們想在我們的屏幕上寫這么一個(gè)布局。我們可能就要做一些約束，保證這個(gè)界面能夠在不同的手機(jī)上顯示，例如：
- 讓綠色的左邊和上邊的邊界和父視圖一樣，流出15個(gè)像素的邊界
- 讓綠色的高度和藍(lán)色的高度一樣
- 讓綠色的寬度和紅色的一樣
...
等等
同理，我們的紅色快和藍(lán)色塊也有相應(yīng)的約束需要添加，當(dāng)我們確定好我們所需要的所有約束，然后就可以使用Masonry來(lái)幫我們寫這些約束了，那么我們不用Masonry不行么？
為什么要用Masonry?
如果要實(shí)現(xiàn)上面的這些約束，我們iOS里面自帶了一個(gè)類，叫做NSLayoutConstraints，通過(guò)這個(gè)類相關(guān)的API，我們可以讓我們的視圖對(duì)象創(chuàng)建相應(yīng)的約束，例如，我們有一個(gè)非常簡(jiǎn)單的需求，想在視圖里面創(chuàng)建一個(gè)子視圖，我們子視圖的Rect上下左右比外面的視圖都要少10dp。那么，使用NSLayoutConstraints,我們的代碼大概是這個(gè)樣子的。
UIView *superview = self;
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[superview addConstraints:@[
//view1 constraints
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:padding.top],
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:padding.left],
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-padding.bottom],
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeRight
multiplier:1
constant:-padding.right],
]];
就會(huì)產(chǎn)生這么一大坨代碼，而這還只是一個(gè)最簡(jiǎn)單的例子，如果說(shuō)你的UI里面有很多的子視圖，他們之間有各種關(guān)系，那么，你的代碼如果這樣寫下去，基本就沒(méi)人能讀得懂了。
不過(guò)沒(méi)關(guān)系，我們不是有Masonry么，看看在Masonry中是如何處理這個(gè)約束的。
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
make.left.equalTo(superview.mas_left).with.offset(padding.left);
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];
或者更短：
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superview).with.insets(padding);
}];
是不是清爽多了，他的寫法也很清晰，其實(shí)就是通過(guò)block來(lái)實(shí)現(xiàn)我們的約束，你的每一個(gè)view就是block里面的make,然后他有很多屬性，比如說(shuō)top.left.right.bottom，centerX, centerY等等，然后，你使用一個(gè)equalTo來(lái)和其他視圖建立約束，然后在每個(gè)視圖上有一些屬性，類似于mas_top，就可以使用上了。是不是很爽啊。
樣例
例如，我們現(xiàn)在需要寫一個(gè)tableview cell，這個(gè)cell是包含四個(gè)按鈕，每個(gè)按鈕中間有個(gè)Image view，然后每個(gè)Image view正下方有個(gè)label，如圖所示：
我們就可以通過(guò)如下方式來(lái)寫cell:
// DRDiscoverCategoryCell.h
#import <UIKit/UIKit.h>
@interface DRDiscoverCategoryCell : UITableViewCell
@end
// DRDiscoverCategoryCell.m
#import "DRDiscoverCategoryCell.h"
@implementation DRDiscoverCategoryCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.contentView.backgroundColor = [SLColor backgroundColor];
self.selectionStyle = UITableViewCellSelectionStyleNone;
CGFloat buttonWidth = [UIScreen mainScreen].bounds.size.width / 4;
for (int i = 0 ; i < 4; i++) {
UIButton *mainButton = [[UIButton alloc] initWithFrame:CGRectMake(i * buttonWidth, 0, buttonWidth, 80)];
mainButton.backgroundColor = [SLColor c9Color];
UIImage *image =
[UIImage imageWithData:
[NSData dataWithContentsOfURL:
[NSURL URLWithString:@"http://forum-dev.dianrong.com/static/image/discover/icon-finance.png"]]];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[mainButton addSubview:imageView];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(mainButton);
make.centerY.equalTo(mainButton.mas_centerY).offset(-10);
make.width.height.equalTo(@45);
}];
UILabel *categoryTitleLabel = [[UILabel alloc] init];
categoryTitleLabel.text = @"點(diǎn)融黑幫";
categoryTitleLabel.font = [UIFont systemFontOfSize:11];
categoryTitleLabel.textAlignment = NSTextAlignmentCenter;
[mainButton addSubview:categoryTitleLabel];
[categoryTitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(mainButton);
make.width.equalTo(@45);
make.top.equalTo(imageView.mas_bottom).offset(5);
}];
[self.contentView addSubview:mainButton];
}
}
return self;
}
@end
是不是很簡(jiǎn)單啊，如果在使用Masonry的過(guò)程中有什么問(wèn)題，請(qǐng)歡迎隨時(shí)和我交流。我的微信公眾賬號(hào)：馬哥水果派， 可以掃描下面的二維碼。
