iOS常用第三方庫之Masonry

2019-11-14 18:04:42

字體：大中小

來源：轉載

供稿：網友

一、前言

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

二、“安裝”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。（建議把系統自帶的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],                                                                ]];}

運行效果如下：

這就是我們用系統的NSLayoutConstraint寫的一個view，然后將這個view加載到根view中?，F在我們用Masonry來實現和上邊一樣的效果：

第一步、導入類庫

#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實現的效果是一樣的，所以就不再貼圖。

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

還可以更簡單的實現：

- (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);//    }];}

以上的三種方式都是實現上邊圖種的效果。

MASViewAttribute	NSLayoutAttribute
view.mas_left	NSLayoutAttributeLeft
view.mas_right	NSLayoutAttributeRight
view.mas_top	NSLayoutAttributeTop
view.mas_bottom	NSLayoutAttributeBottom
view.mas_leading	NSLayoutAttributeLeading
view.mas_trailing	NSLayoutAttributeTrailing
view.mas_width	NSLayoutAttributeWidth
view.mas_height	NSLayoutAttributeHeight
view.mas_centerX	NSLayoutAttributeCenterX
view.mas_centerY	NSLayoutAttributeCenterY
view.mas_baseline	NSLayoutAttributeBaseline

以上的屬性對應相應的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

三個視圖之間的關系。

場景二、更新視圖

效果圖如下：

實現代碼如下：（這里也是自定義了一個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();  //設置優先級以及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：方法

場景三、讓約束復原

實現代碼如下：

////  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:方法。

場景四、兩個視圖的嵌套

實現代碼：

////  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

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

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

效果：

實現代碼：

////  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