Masonry 使用纯代码画面

Posted 2020-10-28 懒猫口米

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Masonry 使用纯代码画面相关的知识，希望对你有一定的参考价值。

Masonry 是一个很方便的框架, 用来给控件做约束.
它的语法很直观, 就跟一句英语没什么区别.

Masonry 简单认识

Masonry 支持的约束 :
MASConstraintMaker.h文件中

/**
 * The following properties return a new MASViewConstraint
 *  with the first item set to the makers associated view and the appropriate MASViewAttribute
 */
@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;

name	用中国话说
left	左侧
top	上侧
right	右侧
bottom	下侧
leading	首侧
trailing	尾侧
width	宽度
height	高度
centerX	X方向中点
centerY	Y方向中点
baseline	基线

导入到工程

直接在github上下载, 然后把Masonry文件夹拖拽到工程中.
使用cocoapods

github地址 : https://github.com/Masonry/Masonry
懒得去的话 : git clone https://github.com/SnapKit/Masonry.git

使用

练习1: 使一个控件居中

导入 Masonry.h 头文件.

- (void)createView {
    
    // typeof 一个weak引用的self, 方便在block中使用
    __weak typeof(self) weakSelf = self;
    
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view];
    // 这里要注意, 使用masonry的时候, 要先把控件加到父视图上, 再进行约束
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        // 设置view居中
        make.center.equalTo(weakSelf.view);
        // 设置size
        make.size.mas_equalTo(CGSizeMake(200, 200));
    }];
}

如果在添加父视图之前进行约束, 就会得到这个异常 :
Terminating app due to uncaught exception ‘NSInternalInconsistencyException‘, reason: ‘couldn‘t find a common superview for <UIView: 0x7f92cb61c400; frame = (0 0; 0 0); layer = <CALayer: 0x7f92cb60f6d0>> and <UIView: 0x7f92cb60c8b0; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f92cb609740>>‘

Note. 定义一个weakSelf MACRO
#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self;

所谓的链式语法这里还不是太明显 ...
一个 block 指定一个控件的 frame. 在任何设备上都好用, 这就是 Masonry 的作用.

效果如下 : (话说这图也太大了)

center

Masonry 中给控件设置约束的3个函数

上面用到了 mas_makeConstraints: 这个方法, 从名字可以看出来这是为控件设置约束用的方法, 这样的方法:

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

mas_makeConstraints: 只负责新增约束, Autolayout不能同时存在两条针对于同一对象的约束, 否则会报错.
mas_updateConstraints: 针对上面的情况, 会更新在block中出现的约束, 不会导致出现两个相同约束的情况.
mas_remakeConstraints: 则会清除之前的所有约束, 仅保留最新的约束.

mas_equalTo

#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
#define MASBoxValue(value) _MASBoxValue(@encode(__typeof__((value))), (value))

mas_equelTo() 括号里放具体的数字或者边界(top, left ...)
equelTo() 括号里放对象(view, 约束什么的)

_MASBoxValue()是一个C函数, 功能如下:

/**
 *  Given a scalar or struct value, wraps it in NSValue
 *  Based on EXPObjectify: https://github.com/specta/expecta
 */

练习2: 在一个控件中布局其他控件(单个)

在刚才的view中, 添加一个view, 使这个view居中, 大小略小.

    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor blackColor];
    [view addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(view).with.offset(10);
        make.bottom.equalTo(view).with.offset(-10);
        make.left.equalTo(view).with.offset(10);
        make.right.equalTo(view).with.offset(-10);
    }];

这里使用Masonry设置约束有几种方式, 可以设置top bottom left right, 也可以使用如下设置:

    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

这里链式语法就能够体现出来了, 就和一个英文句子一样, 约束好了一个view.
上面那种, 是用绝对的距离, 也就是坐标点的差. 下面这种, 利用了系统的UIEdge是对上左下右进行设置, 是相对距离. 其中的差别就是体现在参数的正负上.
这里有个很有意思的地方: with和and

- (MASConstraint *)with {
    return self;
}
- (MASConstraint *)and {
    return self;
}

这两个函数, 就是为了配合链式语法写的. 使用的时候有没有都是一样的.

练习3: 在一个控件中布局其他控件(两个)

要求: 在一个view中, 约束两个view, 大小一致, 并排居中.

    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor whiteColor];
    [view1 addSubview:view2];
    
    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor whiteColor];
    [view1 addSubview:view3];
    
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(view1.mas_centerY);
        make.left.equalTo(view1).with.offset(10);
        make.right.equalTo(view3.mas_left).with.offset(-10);
        make.height.mas_equalTo(@100);
        make.width.equalTo(view3);
    }];
    
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(view1.mas_centerY);
        make.left.equalTo(view2.mas_right).with.offset(10);
        make.right.equalTo(view1).with.offset(-10);
        make.height.mas_equalTo(@100);
        make.width.equalTo(view2);
    }];

效果如下图: