iOS常用第三方庫之Masonry

一、前言

關于蘋果的布局一直是我比較糾結的問題，是寫代碼來控制布局，還是使用storyboard來控制布局呢？以前我個人開發(fā)的時候很少使用代碼去寫約束，因為太麻煩了。所以最終選擇的都是AutoLayout進行布局，然后拖線設置約束。不過好多公司進行iOS開發(fā)的時候都會去動態(tài)的修改約束，而且有的會使用約束去創(chuàng)建一些動畫，所以不太去用storyboard進行開發(fā)（還有就是使用storyboard幾個人合作的時候比較麻煩）。反倒更多的是寫代碼開發(fā)看起來更加的高效。所以好多開發(fā)者都開始去使用Masonry。它是一個封裝的第三方類庫，作用就是來簡化開發(fā)者寫布局約束。

二、“安裝”Masonry

因為它是一個第三方的類庫，我們可以從這里下載，然后解壓將Masonry那個文件夾拖入自己的項目文件夾下即可。

三、開始使用Masonry

我們在使用它的時候，最好在AppDelegate.m的

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions；

方法中去自定義加載自己的控制器。例如我寫的時候就是這樣：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

self.window.backgroundColor = [UIColor whiteColor];

UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];

self.window.rootViewController = nav;

[self.window makeKeyAndVisible];

return YES;

}

直接加載的我自己寫的ViewController。（建議把系統(tǒng)自帶的Main.stoaryboard刪除掉，如果運行報錯自己修改，問題不大）。

先來一個不用Masonry寫的最簡單的布局：（目的是在視圖中添加一個視圖）

- (void)viewDidLoad {

[super viewDidLoad];

self.title? = @"Basic View";

UIView *view1 = [[UIView alloc] init];

view1.translatesAutoresizingMaskIntoConstraints = NO;

view1.backgroundColor = [UIColor greenColor];

[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(74, 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],

]];

}

運行效果如下：

這就是我們用系統(tǒng)的NSLayoutConstraint寫的一個view，然后將這個view加載到根view中。現(xiàn)在我們用Masonry來實現(xiàn)和上邊一樣的效果：

第一步、導入類庫

#import "Masonry.h"

然后修改代碼如下：

- (void)viewDidLoad {

[super viewDidLoad];

self.title? = @"Basic View";

UIView *superview = self.view;

UIView *view1 = [[UIView alloc] init];

view1.translatesAutoresizingMaskIntoConstraints = NO;

view1.backgroundColor = [UIColor greenColor];

[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(74, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(superview.mas_top).offset(padding.top);

make.left.equalTo(superview.mas_left).offset(padding.left);

make.bottom.equalTo(superview.mas_bottom).offset(-padding.bottom);

make.right.equalTo(superview.mas_right).offset(-padding.right);

}];

}

上面的效果和原來用NSLayoutConstraint實現(xiàn)的效果是一樣的，所以就不再貼圖。

我們可以看到，我們使用的一個mas_makConstrints塊來進行約束設置。view1指代的就是要添加約束的view（也可以是button，label等等）。然后make的top，left,bottom,right就相當于view1的上下左右，然后equalTo（）括號內的就是相對的view，然后offset是偏移量。

還可以更簡單的實現(xiàn)：

- (void)viewDidLoad {

[super viewDidLoad];

self.title? = @"Basic View";

UIView *superview = self.view;

UIView *view1 = [[UIView alloc] init];

view1.translatesAutoresizingMaskIntoConstraints = NO;

view1.backgroundColor = [UIColor greenColor];

[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(74, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(superview).with.insets(padding);

}];

//? ? [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

//? ? ? ? make.top.equalTo(superview.mas_top).offset(padding.top);

//? ? ? ? make.left.equalTo(superview.mas_left).offset(padding.left);

//? ? ? ? make.bottom.equalTo(superview.mas_bottom).offset(-padding.bottom);

//? ? ? ? make.right.equalTo(superview.mas_right).offset(-padding.right);

//? ? }];

}

以上的三種方式都是實現(xiàn)上邊圖種的效果。

MASViewAttributeNSLayoutAttribute

view.mas_leftNSLayoutAttributeLeft

view.mas_rightNSLayoutAttributeRight

view.mas_topNSLayoutAttributeTop

view.mas_bottomNSLayoutAttributeBottom

view.mas_leadingNSLayoutAttributeLeading

view.mas_trailingNSLayoutAttributeTrailing

view.mas_widthNSLayoutAttributeWidth

view.mas_heightNSLayoutAttributeHeight

view.mas_centerXNSLayoutAttributeCenterX

view.mas_centerYNSLayoutAttributeCenterY

view.mas_baselineNSLayoutAttributeBaseline

以上的屬性對應相應的NSLayoutAttribute。

下面就來看它的使用吧。（先上效果圖，然后再上代碼）

使用一、簡單的三個視圖的布局

這個時我直接自定義了一個ZGBasicView視圖，然后添加到了ViewController中。

關鍵代碼如下：

//

//? ZGBasicView.m

//? MasonryDemo

//

//? Created by zhanggui on 15/10/26.

//? Copyright ? 2015年 zhanggui. All rights reserved.

//

#import "ZGBasicView.h"

#import "View+MASShorthandAdditions.h"

@implementation ZGBasicView

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

}

*/

- (id)init {

self = [super init];

if (!self) {

return nil;

}

//? ? ? ? self.translatesAutoresizingMaskIntoConstraints = YES;

//紅色視圖

UIView *redView = [UIView new];

redView.backgroundColor = [UIColor redColor];

redView.layer.borderColor = [UIColor blackColor].CGColor;

redView.layer.borderWidth = 2;

[self addSubview:redView];

//綠色視圖

UIView *greenView = [[UIView alloc] init];

greenView.backgroundColor = [UIColor greenColor];

greenView.layer.borderColor = [UIColor blackColor].CGColor;

greenView.layer.borderWidth = 2;

[self addSubview:greenView];

//藍色視圖

UIView *blueView = [[UIView alloc] init];

blueView.backgroundColor = [UIColor blueColor];

blueView.layer.borderWidth = 2;

blueView.layer.borderColor = [UIColor blackColor].CGColor;

[self addSubview:blueView];

int padding = 10;

UIView *superview = self;

//with is semantic and option

[redView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(superview.mas_top).offset(padding); //with with

make.left.equalTo(greenView.mas_right).offset(padding); //without with

make.bottom.equalTo(blueView.mas_top).offset(-padding);

make.right.equalTo(superview.mas_right).offset(-padding);

make.width.equalTo(greenView.mas_width);

make.height.equalTo(@[greenView, blueView]); //can pass array of views

}];

[greenView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(superview.mas_top).offset(padding);

make.left.equalTo(superview.mas_left).offset(padding);

make.bottom.equalTo(blueView.mas_top).offset(-padding);

make.right.equalTo(redView.mas_left).offset(-padding);

make.width.equalTo(redView.mas_width);

make.height.equalTo(redView.mas_height);

//? ? ? ? ? ? make.height.equalTo(blueView.mas_height);

}];

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(greenView.mas_bottom).offset(padding);

make.left.equalTo(superview.mas_left).offset(padding);

make.bottom.equalTo(superview.mas_bottom).offset(-padding);

make.right.equalTo(superview.mas_right).offset(-padding);

make.height.equalTo(greenView.mas_height); //can pass array of attributes

}];

return self;

}

@end

三個視圖之間的關系。

場景二、更新視圖

效果圖如下：

實現(xiàn)代碼如下：（這里也是自定義了一個View,然后將這個view加入到了根視圖中）

//

//? UpdateConstraintsView.m

//? MasonryDemo

//

//? Created by zhanggui on 15/10/26.

//? Copyright ? 2015年 zhanggui. All rights reserved.

//

#import "UpdateConstraintsView.h"

#import "Masonry.h"

@interface UpdateConstraintsView ()

@property (nonatomic,strong)UIButton *myButton;

@property (nonatomic,assign)CGSize buttonSize;

@end

@implementation UpdateConstraintsView

- (id)init {

self = [super init];

if (self) {

self.myButton = [UIButton buttonWithType:UIButtonTypeSystem];

[self.myButton setTitle:@"更新約束" forState:UIControlStateNormal];

self.myButton.layer.borderColor = [UIColor blackColor].CGColor;

self.myButton.layer.borderWidth = 2;

[self.myButton addTarget:self action:@selector(changeAction:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:self.myButton];

self.buttonSize = CGSizeMake(100, 100);

}

return self;

}

/**

Returns whether the receiver depends on the constraint-based layout system.

YES if the view must be in a window using constraint-based layout to function properly, NO otherwise.

*/

+ (BOOL)requiresConstraintBasedLayout {

return YES;

}

/**

Updates constraints for the view.

Custom views that set up constraints themselves should do so by overriding this method. When your custom view notes that a change has been made to the view that invalidates one of its constraints, it should immediately remove that constraint, and then call setNeedsUpdateConstraints to note that constraints need to be updated. Before layout is performed, your implementation of updateConstraints will be invoked, allowing you to verify that all necessary constraints for your content are in place at a time when your custom view’s properties are not changing.

You must not invalidate any constraints as part of your constraint update phase. You also must not invoke a layout or drawing phase as part of constraint updating.

Important:Important

Call [super updateConstraints] as the final step in your implementation.

蘋果推薦在這個方法里面添加或者更新約束

*/

- (void)updateConstraints {

[self.myButton mas_updateConstraints:^(MASConstraintMaker *make) {

make.center.equalTo(self);

make.width.equalTo(@(self.buttonSize.width)).priorityLow();? //設置優(yōu)先級以及width

make.height.equalTo(@(self.buttonSize.height)).priorityLow();

//設置myButton的大小小于等于自身view的大小

make.width.lessThanOrEqualTo(self);

make.height.lessThanOrEqualTo(self);

}];

[super updateConstraints];

}

- (void)changeAction:(UIButton *)button {

self.buttonSize = CGSizeMake(self.buttonSize.width*1.2, self.buttonSize.height*1.2);

//告訴約束他們需要更新

[self setNeedsUpdateConstraints];

//update constraints now

[self updateConstraintsIfNeeded];

//設置更新大小動畫

[UIView animateWithDuration:0.5 animations:^{

/**

Lays out the subviews immediately.

Use this method to force the layout of subviews before drawing. Using the view that receives the message as the root view, this method lays out the view subtree starting at the root.

*/

[self layoutIfNeeded];

}];

}

@end

這里主要使用了mas_updateConstraints：方法

場景三、讓約束復原

實現(xiàn)代碼如下：

//

//? ReBackConstraintsView.m

//? MasonryDemo

//可以恢復原來的約束

//? Created by zhanggui on 15/10/26.

//? Copyright ? 2015年 zhanggui. All rights reserved.

//

#import "ReBackConstraintsView.h"

#import "Masonry.h"

@interface ReBackConstraintsView ()

@property (nonatomic,strong)UIButton *myButton;

@property (nonatomic,assign)BOOL isAtTop;

@end

@implementation ReBackConstraintsView

- (id)init {

self = [super init];

if (self) {

self.myButton = [UIButton buttonWithType:UIButtonTypeSystem];;

[self.myButton setTitle:@"Move Me!" forState:UIControlStateNormal];

self.myButton.layer.borderColor = UIColor.greenColor.CGColor;

self.myButton.layer.borderWidth = 3;

[self.myButton addTarget:self action:@selector(moveAction:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:self.myButton];

self.isAtTop = YES;

}

return self;

}

+ (BOOL)requiresConstraintBasedLayout {

return YES;

}

- (void)updateConstraints {

[self.myButton mas_remakeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(@(100));

make.height.equalTo(@(100));

if (self.isAtTop) {

make.left.equalTo(self.mas_left).offset(10);

make.top.equalTo(self.mas_top).offset(10);

}else {

make.bottom.equalTo(self.mas_bottom).offset(-10);

make.right.equalTo(self.mas_right).offset(-10);

}

}];

[super updateConstraints];

}

- (void)moveAction:(UIButton *)myButton {

self.isAtTop = !self.isAtTop;

//告訴約束他們需要更新

[self setNeedsUpdateConstraints];

//立刻更新視圖約束

[self updateConstraintsIfNeeded];

[UIView animateWithDuration:0.3 animations:^{

[self layoutIfNeeded];

}];

}

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

}

*/

@end

這里主要使用了mas_remakeConstraints:方法。

場景四、兩個視圖的嵌套

實現(xiàn)代碼：

//

//? NestConstraintsView.m

//? MasonryDemo

//

//? Created by zhanggui on 15/10/26.

//? Copyright ? 2015年 zhanggui. All rights reserved.

//

#import "NestConstraintsView.h"

#import "Masonry.h"

@implementation NestConstraintsView

- (id)init {

self = [super init];

if (self) {

UIView *bigView = [[UIView alloc] init];

bigView.backgroundColor = [UIColor blackColor];

[self addSubview:bigView];

UIView *smallView = [[UIView alloc] init];

smallView.backgroundColor = [UIColor redColor];

[self addSubview:smallView];

[bigView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(self).offset(20);

make.left.equalTo(self).offset(20);

make.bottom.equalTo(self).offset(-20);

make.right.equalTo(self).offset(-20);

}];

[smallView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(bigView.mas_top).offset(40);

make.left.equalTo(bigView.mas_left).offset(40);

make.bottom.equalTo(bigView.mas_bottom).offset(-40);

make.right.equalTo(bigView.mas_right).offset(-40);

}];

}

return self;

}

@end

這里和第一個場景一樣，都是最基本的實現(xiàn)約束的添加，只不過相對參照物不同。

場景五、多個view一起布局（以組為單位布局）

效果：

實現(xiàn)代碼：

//

//? GroupButtonView.m

//? MasonryDemo

//

//? Created by zhanggui on 15/10/26.

//? Copyright ? 2015年 zhanggui. All rights reserved.

//

#import "GroupButtonView.h"

#import "Masonry.h"

@implementation GroupButtonView

- (instancetype)init {

self? = [super init];

if (self) {

NSArray *strArr = @[@"10",@"20",@"50",@"100",@"200",@"300"];

NSMutableArray *mutableArr = [[NSMutableArray alloc] initWithCapacity:6];

for (int i=0; i<3; i++) {

UIButton *button = [[UIButton alloc] init];

[button setTitle:strArr[i] forState:UIControlStateNormal];

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

button.layer.borderColor = [UIColor blackColor].CGColor;

[button addTarget:self action:@selector(show:) forControlEvents:UIControlEventTouchUpInside];

button.layer.borderWidth = 2;

[self addSubview:button];

[mutableArr addObject:button];

}

[mutableArr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:20 tailSpacing:20];

[mutableArr mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(@120);

make.height.equalTo(@75);

}];

/**

*? -----------------------

*/

NSMutableArray *marr = [NSMutableArray new];

for (int i=3; i<6; i++) {

UIButton *button = [[UIButton alloc] init];

[button setTitle:strArr[i] forState:UIControlStateNormal];

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

button.layer.borderColor = [UIColor blackColor].CGColor;

[button addTarget:self action:@selector(show:) forControlEvents:UIControlEventTouchUpInside];

button.layer.borderWidth = 2;

[self addSubview:button];

[marr addObject:button];

}

[marr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:20 tailSpacing:20];

[marr mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(@200);

make.height.equalTo(@75);

}];

}

return self;

}

- (void)show:(UIButton *)button

{

NSLog(@"%@",button.titleLabel.text);

}

@end

在這里，我們主要就是用到了mas_distributeViewsAlongAxis:...這個方法，來萬曾一組視圖的布局。

場景六、自己寫的一個簡單的登錄界面

效果如下：

代碼如下：

//

//? ViewController.m

//? MasonryDemo

//

//? Created by zhanggui on 15/10/8.

//? Copyright ? 2015年 zhanggui. All rights reserved.

//

#import "ViewController.h"

#import "Masonry.h"

#import "ZGBasicView.h"

#import "UpdateConstraintsView.h"

#import "ReBackConstraintsView.h"

#import "NestConstraintsView.h"

#import "GroupButtonView.h"

#import "LoginView.h"

#import "ArrayView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.title? = @"登錄";

[self loginView];

//? ? [self addArrayView];

}

- (void)loginView {

LoginView *loginView = [[LoginView alloc] init];

self.view = loginView;

//? ? loginView.frame = self.view.frame;

//? ? [self.view addSubview:loginView];

}

- (void)addArrayView {

ArrayView *arrView = [[ArrayView alloc] init];

self.view = arrView;

}

- (void)groupButtonView {

GroupButtonView *nestView = [[GroupButtonView alloc] init];

nestView.frame = self.view.frame;

//? ? self.view = nestView;

[self.view addSubview:nestView];

}

- (void)nestConstraintsView {

NestConstraintsView *nestView = [[NestConstraintsView alloc] init];

self.view = nestView;

}

- (void)reBackConstraints {

ReBackConstraintsView *rebackView = [[ReBackConstraintsView alloc] init];

self.view = rebackView;

}

- (void)updateConstraintsView {

UpdateConstraintsView *updateView = [[UpdateConstraintsView alloc] init];

self.view = updateView;

}

- (void)simpleView {

ZGBasicView *basicView = [[ZGBasicView alloc] init];

//? ? [self.view addSubview:basicView];

self.view = basicView;

}

- (void)firstSimpleView {

UIView *superview = self.view;

UIView *view1 = [[UIView alloc] init];

view1.translatesAutoresizingMaskIntoConstraints = NO;

view1.backgroundColor = [UIColor greenColor];

[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(74, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(superview).with.insets(padding);

}];

//? ? [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

//? ? ? ? make.top.equalTo(superview.mas_top).offset(padding.top);

//? ? ? ? make.left.equalTo(superview.mas_left).offset(padding.left);

//? ? ? ? make.bottom.equalTo(superview.mas_bottom).offset(-padding.bottom);

//? ? ? ? make.right.equalTo(superview.mas_right).offset(-padding.right);

//? ? }];

}

@end

大家可以簡單的看一下，寫的比較簡單，應該很容易理解的。（橫屏的距離上邊的高度沒有處理太好，將就著看吧）

簡單就介紹這么多了。

附：

1、源碼下載地址：http://pan.baidu.com/s/1o6083G2

2、Masonry Git地址：https://github.com/SnapKit/Masonry

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、先做一個比較 使用系統(tǒng)自帶的方法 使用 masonry 實現(xiàn)同樣效果，代碼進行比較： 第一種方法： 第二種方法...
    magic_pill閱讀 1,702評論 1贊 4
  • （一）Masonry介紹 Masonry是一個輕量級的布局框架 擁有自己的描述語法 采用更優(yōu)雅的鏈式語法封裝自動布...
    木易林1閱讀 2,390評論 0贊 3
  • Masonry是一個輕量級的布局框架，擁有自己的描述語法，采用更優(yōu)雅的鏈式語法封裝自動布局，簡潔明了并具有高可讀性...
    3dcc6cf93bb5閱讀 1,828評論 0贊 1
  • iOS_autoLayout_Masonry 概述 Masonry是一個輕量級的布局框架與更好的包裝AutoLay...
    指尖的跳動閱讀 1,195評論 1贊 4
  • 這僅僅是個一虛構故事！ 紅狐領著三個孩子向這座城市唯一的動物生態(tài)園區(qū)走去。這大過年的，園區(qū)還是那樣擁擠，排著長長的...
    廣羽三妞閱讀 267評論 1贊 1