【iOS】Masonry学习

news2024/12/25 9:22:32

Masonry学习

前言
NSLayoutConstraint
Masonry学习
- mas_equalTo和equalTo
- Masonry的优先级
- Masorny的其他写法
Masonry的使用练习

前言

Masonry是一个轻量级的布局框架。通过链式调用的方式来描述布局，是排版代码更加简洁易读。masonry支持iOS和Mac OS X。相比原生的NSLayoutConstraint，提高了使用容易度和代码的可阅读程度。Masonry使用了链式语法，

NSLayoutConstraint

使用原生的NSLayoutConstraint进行布局时，十分冗杂麻烦，这里给出一个例子进行演示。

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    UIView* iview = [[UIView alloc] init];
    iview.backgroundColor = [UIColor redColor];
    iview.translatesAutoresizingMaskIntoConstraints = NO;
    
    [self.view addSubview:iview];
    
    [self.view addConstraints:@[
            [NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:0.5 constant:40],
            [NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:40],
            [NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-40],
            [NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-40],
            
    ]];
    
}

在这个例子中使用了+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c这个方法，下面讲解一下这个方法的使用。

+ (instancetype)constraintWithItem:(id)view1 //指定了第一个视图,也就是要应用约束的视图。
attribute:(NSLayoutAttribute)attr1 //指定了要应用于第一个视图的属性,比如 NSLayoutAttributeLeft、NSLayoutAttributeTop 等。
relatedBy:(NSLayoutRelation)relation //指定了约束的关系,可以是 NSLayoutRelationEqual、NSLayoutRelationGreatherThanOrEqual 或 NSLayoutRelationLessThanOrEqual。
toItem:(nullable id)view2 //指定了第二个视图,也就是第一个视图要相对于哪个视图进行约束。如果为 nil，则表示约束是相对于父视图进行的。
attribute:(NSLayoutAttribute)attr2 //指定了第二个视图的属性,用于与第一个视图的属性进行约束。
multiplier:(CGFloat)multiplier //指定了第一个视图的属性和第二个视图的属性之间的乘数关系。例如,如果设置为 2.0，则表示第一个视图的属性是第二个视图的属性的 2 倍。（不太理解这个的意思）
constant:(CGFloat)c//指定了常量偏移量,用于调整约束的位置或大小

由上面这个例子可以看出，在使用传统的api约束时十分麻烦，故而学习使用Masorny进行约束，简化步骤。

Masonry学习

下面先给出一个对照的表格，后期可以使用进行参考。

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

使用MASConstraintMaker实现和上面例子一样的约束：

    _view1 = [[UIView alloc] init];
    _view1.backgroundColor = [UIColor greenColor];
    [self.view addSubview:_view1];
    
    [_view1 mas_makeConstraints:^(MASConstraintMaker *make) {            
        make.left.mas_equalTo(40);
        make.top.mas_equalTo(40);
        make.bottom.mas_equalTo(-40);
        make.right.mas_equalTo(-40);
    }];

不难看出，代码量减少了很多，masonry会自动添加约束到合适的视图，也会为你调用view1.translatesAutoresizingMaskIntoConstraints = NO。

mas_equalTo和equalTo

首先可以确定的是这两者是等价的，其中mas_equalTo支持的类型，除了NSNumber支持的那些数值类型之外就只支持CGPoint、CGSize、UIEdgeInsets，而equalTo支持的类型为id。

make.right.mas_equalTo(-40)
make.right.equalTo(@-40);

实际使用中两者的效果是相同的。可以参考这篇博客Mansory之一：mas_equalTo和equalTo区别与使用。

Masonry的优先级

priority：允许你指定一个确切的优先级。
priorityHigh：同UILayoutPriorityDefaultHigh。
priorityMedium：介于高和低之间的优先级。
priorityLow：同UILayoutPriorityDefaultLow。
优先级可以追加到约束链的末尾，下面给出一个例子：

make.bottom.mas_equalTo(-40).with.priorityHigh();
make.right.mas_equalTo(-40).with.priorityLow();

Masorny的其他写法

[_view1 mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.left.mas_equalTo(self.view).mas_offset(40);
        make.top.mas_equalTo(self.view).mas_offset(40);
        make.bottom.mas_equalTo(self.view).mas_offset(-40);
        make.right.mas_equalTo(self.view).mas_offset(-40);
    }];

在这种写法中，先指定了相对于约束的视图，而后对现在的视图进行约束。在使用前文中使用的写法时，要注意先对视图添加到父视图中，系统会自动对父视图进行约束视图，否则会出现报错，由于没有父视图。

Masonry的使用练习

在这里插入图片描述

这里举出了一个由父视图位置移动而影响子视图的例子，通过点击按钮更新view1的位置，从而由他对按钮的约束来影响按钮的位置。

-(void) press {
    if(_btn.selected == NO) {
        [_view1 mas_updateConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(self.view).mas_offset(40);
            make.top.mas_equalTo(self.view).mas_offset(100);
            make.bottom.mas_equalTo(self.view).mas_offset(-40);
            make.right.mas_equalTo(self.view).mas_offset(-40);
        }];
        _btn.selected = YES;
    } else {
        [_view1 mas_updateConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(self.view).mas_offset(40);
            make.top.mas_equalTo(self.view).mas_offset(40);
            make.bottom.mas_equalTo(self.view).mas_offset(-40);
            make.right.mas_equalTo(self.view).mas_offset(-40);
        }];
        _btn.selected = NO;
    }
}