Masonry API 详解

Masonry 基本用法

添加：mas_makeConstraints()-添加约束
更新：mas_updateConstraints()-更新约束
删除：mas_remakeConstraints()-有些时候修改约束没有用就用这个
----------
距左：make.left.equalTo(self.view).with.offset(10);
距右：make.right.equalTo(self.view).with.offset(-10);
距上：make.top.equalTo(self.view).with.offset(10);
距下：make.bottom.equalTo(self.view).with.offset(-10);
居中：make.center.equalTo(self.view)
总合：make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))
垂直居中：make.centerY.equalTo(self.view)
水平居中：make.centerX.equalTo(self.view)

width() 和 mas_width()区别？

width():用来表示宽度，例如代表view的宽度
mas_width():用来获取宽度的值。和上面的区别在于，一个代表某个坐标系对象，一个用来获取坐标系对象的值

mas_equalTo和equalTo区别？

mas_equalTo 比equalTo多了类型转换操作，一般来说，大多数时候两个方法都是通用的，但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理，使用equalTo。特别是多个属性时，必须使用equalTo,例如 make.left.and.right.equalTo(self.view);

修正

• offset（位移）修正
• multipliedBy（倍率）修正

比例

-*宽是父视图的 1：3
make.width.mas_equalTo(superView).multipliedBy(1.00/3);
-*高是父视图的 1：4
make.height.mas_equalTo(superView).multipliedBy(0.25);

宽高合并写法

-*宽
make.width.mas_equalTo(60);
-*高
make.height.mas_equalTo(60);
-*总合
make.size.mas_equalTo(CGSizeMake(50, 100));

取值范围

-*大于等于
greaterThanOrEqualTo();
-*小于等于
lessThanOrEqualTo();
-*为宽(高)设置范围例如：200 ≤ width ≤ 400
make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400);

优先级

priority -允许你设置一个非常准确的的约束优先级（0-1000）值越大优先级越高
make.left.mas_equalTo(20).priority(700);
priorityHigh   -高
priorityMedium -中
priorityLow    -低

不想添加mas_前缀，还想使用常量值设置约束

需要在导入Masonry头文件前，设置宏定义MAS_SHORTHAND_GLOBALS，至于为什么，去Masonry代码中搜索一下MAS_SHORTHAND_GLOBALS便知。

等宽、等间距布局view

等宽、等间距布局view

//.等宽、等间距布局view
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor blueColor];
[self.view addSubview:view1];

UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor redColor];
[self.view addSubview:view2];

UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor greenColor];
[self.view addSubview:view3];
self.array = @[view1,view2,view3];

//横向
- (void)getHorizontalone
{
    //方法一,array 的 mas_distributeViewsAlongAxis
    /**
     *  多个控件固定间隔的等间隔排列，变化的是控件的长度或者宽度值
     *
     *  @param axisType        轴线方向
     *  @param fixedSpacing    间隔大小
     *  @param leadSpacing     头部间隔
     *  @param tailSpacing     尾部间隔
     */
    //    MASAxisTypeHorizontal  水平
    //    MASAxisTypeVertical    垂直
    
    [self.array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal
                           withFixedSpacing:5
                                leadSpacing:5
                                tailSpacing:5];
    [self.array mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(60);//设置距离顶部的约束
        make.height.mas_offset(100);//设置高
    }];
}

设置宽度间距动态

设置宽度间距动态效果图

//在红色View里面放三个正方形蓝色View, 宽度均为30, 间隙一样大
    NSMutableArray *blueViews = [NSMutableArray array];
    for (NSInteger i = 0; i < 3; i++) {
        UIView *blueView = [[UIView alloc] init];
        blueView.backgroundColor = [UIColor blueColor];
        [redView addSubview:blueView];
        [blueViews addObject:blueView];
    }
    CGFloat padding2 = (300 - 3 * 30) / 4;
    [blueViews mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:30 leadSpacing:padding2 tailSpacing:padding2];
    [blueViews mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(redView);
        UIView *blueView = (UIView *)blueViews[0];
        make.height.mas_equalTo(blueView.mas_width);
    }];

等间距但宽度不同

等间距但宽度不同

//在红色View里面放三个大小不一样的绿色正方形, 间隙等大, masonry并没提供相关方法
    NSMutableArray *greenViews = [NSMutableArray array];
    for (NSInteger i = 0; i < 3; i++) {
        UIView *greenView = [[UIView alloc] init];
        greenView.backgroundColor = [UIColor greenColor];
        [redView addSubview:greenView];
        [greenViews addObject:greenView];
        [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.bottom.equalTo(redView).offset(-10);
            make.width.mas_equalTo(i*20 + 20);
            make.height.mas_equalTo(greenView.mas_width);
        }];
    }
    [redView distributeSpacingHorizontallyWith:greenViews];![1570070848-5b02319e39712_articlex.png](https://upload-images.jianshu.io/upload_images/305755-3f8844cd93cdc72f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Masonry 注意事项

• 使用mas_makeConstraints方法的元素必须事先添加到父元素中，例如[self.view addSubview:view];
• 注意 with和 width 不要写混，报错不易查找
• with和and方法其实没有做任何操作，方法只是返回对象本身，这两个方法的左右完全是为了方法写的时候的可读性 。