iOS Masonry学习

学习笔记

• mas_makeConstraints是给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。添加过约束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正。
• mas_remakeConstraints() 移除之前的约束，重新添加新的约束
• mas_updateConstraints() 更新约束

1. equalTo() 与 mas_equalTo()
   • equalTo() 参数是对象类型，一般是视图对象或者mas_width这样的坐标系对象
   • mas_equalTo() 和上面功能相同，参数可以传递基础数据类型对象，可以理解为比上面的API更强大
2. width() 与mas_width()
   • width() 用来表示宽度，例如代表view的宽度
   • mas_width() 用来获取宽度的值。和上面的区别在于，一个代表某个坐标系对象，一个用来获取坐标系对象的值

注意：

1. 使用 mas_makeConstraints方法的元素必须事先添加到父元素的中，例如[self.view addSubview:view];
2. masequalTo 和 equalTo 区别：mas_equalTo 比 equalTo多了类型转换操作，一般来说，大多数时候两个方法都是 通用的，但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理，使用equalTo。特别是多个属性时，必须使用equalTo,例如make.left.and.right.equalTo(self.view);
3. 注意到方法with和and,这连个方法其实没有做任何操作，方法只是返回对象本身，这这个方法的左右完全是为了方法写的时候的可读性 。
   make.left.and.right.equalTo(self.view);和make.left.right.equalTo(self.view);是完全一样的，但是明显的加了and方法的语句可读性更好点。

应用实例 – 照片墙

第一次写share时的照片墙使用了 UICollectionView，这次用Masonry重新写了一遍

• 在"SceneDelegate.m"中

#import "ViewController.h"

@interface SceneDelegate ()

@end

@implementation SceneDelegate

- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
    self.window = [[UIWindow alloc] initWithWindowScene:scene];
    [self.window makeKeyAndVisible];
    
    ViewController *viewController = [[ViewController alloc] init];
    
    //设置导航栏
    UINavigationController *viewNav = [[UINavigationController alloc] initWithRootViewController:viewController];
    self.window.rootViewController = viewNav;

• 在"ViewController.m"中

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];
    self.navigationItem.title = @"最近项目";
  
    _tableView = [[UITableView alloc] init];
    [self.view addSubview:_tableView];
    //使用Masonry对tableView的大小进行约束
    [_tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    
    //注册自定义cell
    [_tableView registerClass:[PicTableViewCell class] forCellReuseIdentifier:@"111"];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    PicTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"111" forIndexPath:indexPath];
    NSString *onePicStr = [NSString stringWithFormat:@"person%ld-1.JPG", indexPath.row];
    cell.picImageView01.image = [UIImage imageNamed:onePicStr];
    NSString *twoPicStr = [NSString stringWithFormat:@"person%ld-2.JPG", indexPath.row];
    cell.picImageView02.image = [UIImage imageNamed:twoPicStr];
    NSString *threePicStr = [NSString stringWithFormat:@"person%ld-3.JPG", indexPath.row];
    cell.picImageView03.image = [UIImage imageNamed:threePicStr];
    return cell;
}

- (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 3;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 141;
}

• 在"PicTableViewCell.h"中

#import 

NS_ASSUME_NONNULL_BEGIN

@interface PicTableViewCell : UITableViewCell

@property (nonatomic, strong) UIImageView *picImageView01;
@property (nonatomic, strong) UIImageView *picImageView02;
@property (nonatomic, strong) UIImageView *picImageView03;

@end

• 在"PicTableViewCell.m"中

#import "PicTableViewCell.h"
#import 


@implementation PicTableViewCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    
    _picImageView01 = [[UIImageView alloc] init];
    [self.contentView addSubview:_picImageView01];
    
    _picImageView02 = [[UIImageView alloc] init];
    [self.contentView addSubview:_picImageView02];
    
    _picImageView03 = [[UIImageView alloc] init];
    [self.contentView addSubview:_picImageView03];
    
    
    return self;
}

- (void)layoutSubviews {
    [_picImageView01 mas_makeConstraints:^(MASConstraintMaker *make) {
    	//设置第一张图片距tableView的cell左边缘与上边缘的距离
        make.left.equalTo(@10);
        make.top.equalTo(@8);
        make.width.equalTo(self.contentView.mas_width).dividedBy(3.3);
        make.height.equalTo(self.contentView.mas_height).multipliedBy(0.9);
    }];
    
    [_picImageView02 mas_makeConstraints:^(MASConstraintMaker *make) {
		//通过前一个照片的最右端对下一个照片的位置进行约束      
        make.left.equalTo(self.picImageView01.mas_right).offset(7);
        //与第一个照片的高宽保持一致
        make.top.equalTo(self.picImageView01);
        make.width.equalTo(self.picImageView01);
        make.height.equalTo(self.picImageView01);
    }];
    
    [_picImageView03 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.picImageView02.mas_right).offset(7);
        make.top.equalTo(self.picImageView01);
        make.width.equalTo(self.picImageView01);
        make.height.equalTo(self.picImageView01);
    }];
}

通过Masonry来进行布局可以使视图在不同的模拟机上的位置基本保持相同

• 在iPhone8上的运行结果
  

• 在iPhone11上的运行结果