Masonry学习笔记

作者: 寻心_0a46 | 来源:发表于2019-07-09 23:32 被阅读0次

Masonry是一个轻量级的布局框架, 对AutoLayout 进行了封装,它拥有自己的描述语法(采用更优雅的链式语法封装)来自动布局,具有很好可读性且同时支持iOS和Max OS X等。
第三方库地址：https://github.com/SnapKit/Masonry

Masonry的使用注意点

用mas_makeConstraints的那个view需要在addSubview之后才能用这个方法。
mas_equalTo适用于数值元素，equalTo适用于属性。
方法and和with只是为了可读性，返回自身，可以省略。
iOS中原点在左上角所以注意使用offset时right和bottom用负数。
Masonry 中的block是局部的引用，block内部引用self不会造成循环引用。
使用Masonry不需要设置控件的translatesAutoresizingMaskIntoConstraints属性为NO。
长度关系和位置关系，不能做比例运算

Masonry基础的设置属性与基础API

设置尺寸的属性：

@property (nonatomic, strong, readonly) MASConstraint *width;//宽度
@property (nonatomic, strong, readonly) MASConstraint *height;//高度
@property (nonatomic, strong, readonly) MASConstraint *size;//大小

设置边界的属性：

@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 *edges;//四周，即上下左右

设置中心点的属性

@property (nonatomic, strong, readonly) MASConstraint *center;//中心点
@property (nonatomic, strong, readonly) MASConstraint *centerX;//中心点的X轴
@property (nonatomic, strong, readonly) MASConstraint *centerY;//中心点的Y轴

基础API

//添加约束
- (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;
//相等于，参数是对象类型，一般是视图对象或视图坐标系对象
- (MASConstraint * (^)(id attr))equalTo;
//与equalTo相似，可以传递基础数据类型对象
- (MASConstraint * (^)(id attr))mas_equalTo;
//小于等于，参数是对象类型
- (MASConstraint * (^)(id attr))lessThanOrEqualTo;
//大于等于，参数是对象类型
- (MASConstraint * (^)(id attr))greaterThanOrEqualTo;
//乘以
- (MASConstraint * (^)(CGFloat multiplier))multipliedBy;
//除以
- (MASConstraint * (^)(CGFloat divider))dividedBy;

乘、除的使用，例如：

-(void)setViewConstraints{
    
    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    //例如除的运算是以redView 的centerX的位置除以2后，在x轴的原点右推redView的centerX的位置除以2后得到值
    [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.redView);
        make.centerX.mas_equalTo(self.redView).dividedBy(2);
        make.size.mas_equalTo(CGSizeMake(10, 10));
    }];
}

得到的布局：

屏幕快照 2019-07-09 下午7.28.23.png

设置偏移量的函数

- (void)setOffset:(CGFloat)offset;//设置偏移量,区分正负
- (void)setCenterOffset:(CGPoint)centerOffset;//设置中心点偏移量，区分正负
- (void)setSizeOffset:(CGSize)sizeOffset;//设置大小偏移量，区分正负
- (void)setInsets:(MASEdgeInsets)insets;//设置内边距偏移量，不区分正负

设置内边距时是不区分正负数的，因为Masonry为下、右方向为我们做了取反的操作，例如：

-(void)setViewConstraints{
    
    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    
    [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.redView);
        make.edges.equalTo(self.redView).insets(UIEdgeInsetsMake(20,20,20,20));
    }];
}

得到的布局：

屏幕快照 2019-07-08 下午8.44.57.png

设置约束优先级的函数

//允许你指定一个精确的优先级,数值越大优先级越高.最高1000
- (MASConstraint * (^)(MASLayoutPriority priority))priority;
//等价于 UILayoutPriorityDefaultLow, 优先级值为 250.
- (MASConstraint * (^)(void))priorityLow;
//介于高优先级和低优先级之间,优先级值在 250~750之间.
- (MASConstraint * (^)(void))priorityMedium;
//等价于 UILayoutPriorityDefaultHigh.优先级值为 750
- (MASConstraint * (^)(void))priorityHigh;

在约束冲突的情况下，约束优先级低的约束将被打破。例如：

-(void)setViewConstraints{
    
    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    
    [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.redView).priorityLow();
        make.size.mas_equalTo(CGSizeMake(50, 50));
        make.left.equalTo(self.redView).offset(20).priorityHigh();
        make.top.equalTo(self.redView).offset(5).priorityHigh();
    }];
}

得到的布局是这样的：

屏幕快照 2019-07-08 下午8.35.37.png

当约束发生冲突时，可以使用Masonry提供的宏MASAttachKeys(...)来快速的定位冲突，例如：

MASAttachKeys(self.redView,self.greenView);

未使用宏定位冲突时，控制台的打印:

"<MASLayoutConstraint:0x6000002b3e40 UIView:0x7fc245d04730.height == 100>",
    "<MASLayoutConstraint:0x6000002b40c0 UIView:0x7fc245d019d0.centerY == UIView:0x7fc245d04730.centerY>",
    "<MASLayoutConstraint:0x6000002b4240 UIView:0x7fc245d019d0.height == 50>",
    "<MASLayoutConstraint:0x6000002b4300 UIView:0x7fc245d019d0.top == UIView:0x7fc245d04730.top + 5>"

使用宏定位冲突时，控制台的打印：

"<MASLayoutConstraint:0x600000b5a1c0 UIView:self.redView.height == 100>",
    "<MASLayoutConstraint:0x600000b5a580 UIView:self.greenView.centerY == UIView:self.redView.centerY>",
    "<MASLayoutConstraint:0x600000b5a700 UIView:self.greenView.height == 50>",
    "<MASLayoutConstraint:0x600000b575a0 UIView:self.greenView.top == UIView:self.redView.top + 5>"

水平方向控件间隔固定等间隔，高度自定义，宽度由Masonry计算得出，垂直方向控件间隔固定等间隔，宽度自定义，高度由Masonry计算得出的布局

/**
        axisType        轴线方向
        fixedSpacing    间隔大小
        leadSpacing     头部间隔，水平布局即第一个控件与父视图的左间距，垂直布局，即第一个控件与父视图的上间距
        tailSpacing     尾部间隔，水平布局即最后一个控件与父视图的右间距，垂直布局，即最后个控件与父视图的下间距
*/
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

例如：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建3个视图
    NSMutableArray *array= [[NSMutableArray alloc]init];
    for(int i =0; i < 3; i ++) {
        UIView *view = [UIView new];
        if(i == 0){
            view.backgroundColor = [UIColor redColor];
        }else if(i == 1){
            view.backgroundColor = [UIColor greenColor];
        }else{
            view.backgroundColor = [UIColor yellowColor];
        }
        
        [self.view addSubview:view];
        [array addObject:view];
    }
    
    [array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:5 leadSpacing:5 tailSpacing:5];
    [array mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.view);
        make.height.mas_equalTo(60);
    }];
    
}

得到的布局：

屏幕快照 2019-07-09 下午10.52.45.png

水平方向控件宽度相等，高度自定义，控件间隔由Masonry计算，垂直方向控件高度相等，宽度自定义，控件间隔由Masonry计算得出的布局

/**
     
       axisType        轴线方向
       fixedSpacing    间隔大小
       fixedItemLength  每个控件的固定长度/宽度
       leadSpacing      头部间隔，水平布局即第一个控件与父视图的左间距，垂直布局，即第一个控件与父视图的上间距
       tailSpacing     尾部间隔，水平布局即最后一个控件与父视图的右间距，垂直布局，即最后个控件与父视图的下间距
     
*/
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

例如：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建3个视图
    NSMutableArray *array= [[NSMutableArray alloc]init];
    for(int i =0; i < 3; i ++) {
        UIView *view = [UIView new];
        if(i == 0){
            view.backgroundColor = [UIColor redColor];
        }else if(i == 1){
            view.backgroundColor = [UIColor greenColor];
        }else{
            view.backgroundColor = [UIColor yellowColor];
        }
        
        [self.view addSubview:view];
        [array addObject:view];
    }
    
    [array mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength:70 leadSpacing:200 tailSpacing:200];
    [array mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.width.mas_equalTo(70);
    }];
    
}

得到的布局：

屏幕快照 2019-07-09 下午11.14.16.png

Masonry学习笔记

Masonry的使用注意点

Masonry基础的设置属性与基础API

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读