Masonry的简单使用

一.配置CocoaPods

要使用CocoaPods你必须得在你的MAC上配置CocoaPods，具体配置可以看2021年CocoaPods安装方法。

二.CocoaPods的使用

1.创建一个工程并且在终端中打开。

//cd后面的是你创建的工程在电脑上的地址，你也可以直接把文件拖进去
在终端中输入：$ cd 文件地址

2.进来之后创建Podfile文件。

终端输入：$ touch Podfile

3.打开并编辑Podfile文件。

终端输入：$ vim Podfile

在进入界面后，再按i，下面的"Podsfile" 0L, 0C变成-- INSERT –- ， 就可以开始进行输入了。
输入一下文字：

//MyApp是你自己创建的工程名字
platform :ios, '8.0'
target 'MyApp' do
pod 'Masonry'
end

4.退出Podfile文件。

输入完成后按esc等下面的-- INSERT –-消失后接着输入:wq，最后按回车退出。

5.把库下载到Xcode中（在下载的时候要关闭Xcode）。

终端输入：$ pod install

出现图片中的情况就表明你下载成功了

在以后打开工程文件就可以单击.xcworkspace文件打开了

三.Masonry的使用

1.Masonry简介

Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了，并具有高可读性，而且同时支持 iOS 和 Max OS X。相较与NSLayoutConstraints,masonry更加方便快捷，大量减少适配时间。

2.使用Masonry的注意事项

• 使用Masonry添加约束需要在addSubview方法之后，否则程序会崩。
• 使用时经常会加mas_前缀，如果不想加前缀则在引用Masonry文件前加

//定义这个常量，就可以不用在开发过程中使用mas_前缀
#define MAS_SHORTHAND
//定义这个常量，就可以让Masonry帮我们自动把基础数据类型的数据，自动装箱为对象类型
#define MAS_SHORTHAND_GLOBALS

• equalTo和offset 的区别

make.top.mas_equalTo(10);//顶部等于10
make.top.mas_offset(10);//顶部距离父视图的mas_top有+10个单位，规定向下为正

3.约束的三种方法

//添加新约束
- (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

//更新约束，会覆盖之前的约束
- (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

//完全移除旧约束，添加新约束
- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

4.约束属性

@property (nonatomic, strong, readonly) MASConstraint *left;
@property (nonatomic, strong, readonly) MASConstraint *top;
@property (nonatomic, strong, readonly) MASConstraint *right;
@property (nonatomic, strong, readonly) MASConstraint *bottom;

//首部
@property (nonatomic, strong, readonly) MASConstraint *leading;

//尾部
@property (nonatomic, strong, readonly) MASConstraint *trailing;
@property (nonatomic, strong, readonly) MASConstraint *width;
@property (nonatomic, strong, readonly) MASConstraint *height;
@property (nonatomic, strong, readonly) MASConstraint *centerX;
@property (nonatomic, strong, readonly) MASConstraint *centerY;

//文本基线
@property (nonatomic, strong, readonly) MASConstraint *baseline;

//(top, left, bottom, right)
@property (nonatomic, strong, readonly) MASConstraint *edges;

//(width, height)
@property (nonatomic, strong, readonly) MASConstraint *size;

//(centerX, centerY)
@property (nonatomic, strong, readonly) MASConstraint *center;

5.equalTo和mas_equalTo的区别

先观察源代码

#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))

• mas_equalTo会对参数进行一个MASBoxValue（）操作，可以支持的类型是：NSNumber、 CGPoint、CGSize、UIEdgeInsets。
• equalTo并没有MASBoxValue（）操作，源码的注释上说了equalTo支持的类型是：MASViewAttribute, UIView, NSValue, NSArray。

6.其他使用细节见：iOS开发之Masonry

7.使用Masonry重写照片墙

PhotoViewController.h

#import <UIKit/UIKit.h>
#import "Masonry.h"

@protocol TransitionPhotoDelegate <NSObject>

- (void)changePhoto:(NSMutableArray *)imageArray;

@end

NS_ASSUME_NONNULL_BEGIN

@interface PhotoViewController : UIViewController

@property (nonatomic, strong) UIButton *photoButton;
@property (nonatomic, strong) UIButton *backButton;
@property (nonatomic, strong) UIButton *sureButton;
@property (nonatomic, strong) UIButton *imageButton;
@property (nonatomic, strong) NSMutableArray *imageArray;
@property (nonatomic, strong) UIScrollView* scrollView;
@property (nonatomic, weak) id<TransitionPhotoDelegate> delegate;

@end

NS_ASSUME_NONNULL_END

PhotoViewController.m

#import "PhotoViewController.h"

#define widt [UIScreen mainScreen].bounds.size.width
#define heigh [UIScreen mainScreen].bounds.size.height

@interface PhotoViewController ()

@end

@implementation PhotoViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    [self creatPhoto];
}

- (void)creatPhoto {
    
    self.imageArray = [[NSMutableArray alloc] init];
    self.view.backgroundColor = [UIColor whiteColor];
    
    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, widt, heigh)];
    self.scrollView.contentSize = CGSizeMake(widt, heigh + 110);
    self.scrollView.scrollEnabled = YES;
    self.scrollView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.scrollView];
    
    self.backButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [self.backButton setTitle:@"返回" forState:UIControlStateNormal];
    [self.backButton addTarget:self action:@selector(back:) forControlEvents:UIControlEventTouchUpInside];
    self.backButton.titleLabel.font = [UIFont systemFontOfSize:24];
    [self.view addSubview:self.backButton];
    
    [self.backButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).with.offset(40);
        make.top.equalTo(self.view).with.offset(50);
    }];
    
    self.sureButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [self.sureButton setTitle:@"上传" forState:UIControlStateNormal];
    [self.sureButton addTarget:self action:@selector(sure:) forControlEvents:UIControlEventTouchUpInside];
    self.sureButton.titleLabel.font = [UIFont systemFontOfSize:24];
    [self.view addSubview:self.sureButton];
    
    [self.sureButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.view).with.offset(-40);
        make.top.equalTo(self.view).with.offset(50);
    }];
    
    int sum = 1;
    for (int i = 0; i < 2; i++) {
        for (int j = 0; j < 5; j++) {
            NSString *imageName = [[NSString alloc] initWithFormat:@"1-%d.jpeg", sum];
            
            self.imageButton = [UIButton buttonWithType:UIButtonTypeCustom];
            [self.imageButton setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
            [self.imageButton addTarget:self action:@selector(pressPhoto:) forControlEvents:UIControlEventTouchUpInside];
            self.imageButton.tag = 101 + sum;
            [self.scrollView addSubview:self.imageButton];
            
            [self.imageButton mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(self.scrollView.mas_left).offset(30 + 185 * i);
                make.width.equalTo(@170);
                make.top.equalTo(self.scrollView.mas_top).offset(30 + 185 * j);
                make.height.equalTo(@170);
            }];
            
            sum++;
        }
    }
}

- (void)pressPhoto:(UIButton *)selectButton {
    if (selectButton.tag > 100) {
        UIImage* image = [UIImage imageNamed:@"download.png"];
        UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
        imageView.tag = 1;
        imageView.frame = CGRectMake(150, 10, 16, 16);
        selectButton.tag -= 100;
        [self.imageArray addObject:selectButton];
        [selectButton addSubview:imageView];
    } else {
        for (UIImageView *view in selectButton.subviews) {
            if (view.tag == 1) {
                [view removeFromSuperview];
            }
        }
        [self.imageArray removeObject:selectButton];
        selectButton.tag += 100;
    }
}

- (void)back:(UIButton *)button {
    [self dismissViewControllerAnimated:YES completion:nil];
}

- (void)sure:(UIButton *)button {
    if (_imageArray.count > 0) {
        for (UIButton *button in _imageArray) {
            if (button.tag == 857) {
                [_imageArray removeObject:button];
            }
        }
        UIAlertController* tipView = [UIAlertController alertControllerWithTitle:@"提示" message:@"上传成功" preferredStyle:UIAlertControllerStyleAlert];
        [tipView addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            [self dismissViewControllerAnimated:YES completion:nil];
        }]];
        [self presentViewController:tipView animated:true completion:nil];
        [self.delegate changePhoto:self.imageArray];
        
    } else {
        UIAlertController* warning = [UIAlertController alertControllerWithTitle:@"警告" message:@"您没有选择要上传的图片，请重新选择您需要上传的图片" preferredStyle:UIAlertControllerStyleAlert];
        [warning addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil]];
        
        [self presentViewController:warning animated:YES completion:nil];
    }
}
@end

ViewController.h

#import <UIKit/UIKit.h>
#import "Masonry.h"

@interface ViewController : UIViewController

@property (nonatomic, strong) UIButton *photoButton;
@property (nonatomic, strong) UILabel *quantity;

@end

ViewController.m

#import "ViewController.h"
#import "PhotoViewController.h"

@interface ViewController ()<TransitionPhotoDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self creatView];
}

- (void)creatView {
    self.photoButton = [UIButton buttonWithType:UIButtonTypeCustom];
    self.photoButton.backgroundColor = [UIColor grayColor];
    [self.photoButton setTitle:@"请添加图片" forState:UIControlStateNormal];
    [self.photoButton addTarget:self action:@selector(pressButton:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:self.photoButton];
    [self.photoButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).with.offset(50);
        make.right.equalTo(self.view).with.offset(-100);
        make.top.equalTo(self.view).with.offset(200);
        make.bottom.equalTo(self.view).with.offset(-500);
    }];
}

- (void)pressButton:(UIButton *)button {
    PhotoViewController *photo = [[PhotoViewController alloc] init];
    photo.modalPresentationStyle = UIModalPresentationFullScreen;
    photo.delegate = self;
    [self presentViewController:photo animated:YES completion:nil];
}

- (void)changePhoto:(NSMutableArray *)imageArray {
    if (self.quantity.tag == 1) {
        [self.quantity removeFromSuperview];
    }
    
    UIButton *button = imageArray[0];
    NSString *imageName = [[NSString alloc] initWithFormat:@"1-%ld.jpeg", button.tag - 1];
    NSInteger sum = imageArray.count;
    [self.photoButton setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
    
    NSString* number = [[NSString alloc] initWithFormat:@"%ld", sum];
    self.quantity = [[UILabel alloc] init];
    self.quantity.text = number;
    self.quantity.textColor = [UIColor redColor];
    self.quantity.tag = 1;
    self.quantity.backgroundColor = [UIColor whiteColor];
    self.quantity.frame = CGRectMake(240, 3, 18, 18);
    [self.photoButton addSubview:self.quantity];
}

@end

效果图：

源代码地址：新照片墙