美文网首页
iOS Masonry布局（一）

iOS Masonry布局（一）

作者: FieryDragon | 来源:发表于2020-02-08 22:36 被阅读0次

Masonry是项目中常见的自动布局库，采用链式语法封装。

常见布局方法

1.添加约束

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

2.更新约束

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

3.删除以前的约束，重新约束

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

添加约束前需将试图添加到父试图，否则将引起崩溃

等间距布局
/**
 *  distribute with fixed spacing
 *
 *  @param axisType     横向排列或竖行排列
 *  @param fixedSpacing 视图间隔大小
 *  @param leadSpacing  第一个视图距边缘间隔大小
 *  @param tailSpacing  最后一个视图距边缘间隔大小
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
                    withFixedSpacing:(CGFloat)fixedSpacing
                         leadSpacing:(CGFloat)leadSpacing
                         tailSpacing:(CGFloat)tailSpacing

示例：

    NSArray *arrays = @[redView,blueView,yellowView,brownView];
    
    [arrays mas_distributeViewsAlongAxis:MASAxisTypeHorizontal
                        withFixedSpacing:10.f
                             leadSpacing:30.f
                             tailSpacing:30.f];
    [arrays mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(150.f);
        make.height.mas_equalTo(50.f);
    }];
等间距.png
等宽布局
/**
 *  distribute with fixed item size
 *
 *  @param axisType        横向排列或竖行排列
 *  @param fixedItemLength 视图宽或高
 *  @param leadSpacing     第一个视图距边缘间隔大小
 *  @param tailSpacing     最后一个视图距边缘间隔大小
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

示例：

    [arrays mas_distributeViewsAlongAxis:MASAxisTypeHorizontal
                     withFixedItemLength:75.f
                             leadSpacing:30.f
                             tailSpacing:30.f];
    [arrays mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(150.f);
        make.height.mas_equalTo(50.f);
    }];
等宽.png
间隔布局 - offset

offset常用于设置两个视图边缘的间隔，同时可以在布局完成后动态的改动视图间的间隔大小。

示例：视图左侧相距页面左边缘20像素。

@property (nonatomic, strong) MASConstraint *redViewLeftConstraint;

#pragma mark - 布局
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        _redViewLeftConstraint = make.left.equalTo(self.view.mas_left).offset(20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
左布局.png

改变视图左间距（此时间距值会直接覆盖上次设置的间隔大小，不会累加）。

    _redViewLeftConstraint.offset(100.f);
offset.png

示例：视图右侧相距页面右边缘20像素。

@property (nonatomic, strong) MASConstraint *redViewRightConstraint;

#pragma mark - 布局
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        _redViewRightConstraint = make.right.equalTo(self.view.mas_right).offset(-20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
右布局.png

改变视图间距

    _redViewRightConstraint.offset(-100.f);
offsetR.png

结论：第二个视图相对第一个视图右移时offset(正数)，第二个视图相对第一个视图左移时offset(负数)。

equalTo与mas_equalTo区别

equalTo(value)等于value值。

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
    redView.text = @"redViewredView";
redViewredView.png 
    redView.text = @"redViewredViewredViewredView";
redViewredViewredViewredView.png

如图所示：视图宽度固定180像素，不会因内容的改变而改变。

  • 区别
#define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
#define mas_greaterThanOrEqualTo(...)    greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
#define mas_lessThanOrEqualTo(...)       lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

#define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))

mas_equalTo只是对其参数进行了一个BOX(装箱) 操作，目前支持的类型：数值类型（NSNumber）、 点（CGPoint）、大小（CGSize）、边距（UIEdgeInsets），而equalTo这个方法不会对参数进行包装。

lessThanOrEqualTo

lessThanOrEqualTo(value)少于或等于value值，常用于内容可能动态改变情况。

示例：宽度少于等于180像素。

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.width.mas_lessThanOrEqualTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
    redView.text = @"redView";
redView.png 
    redView.text = @"redViewredViewredView";
redViewredViewredView.png

如图所示，视图宽度会随着内容动态改变，但是最大不超过180像素，超出内容省略展示。

示例：此处红色视图右边缘距父视图右边缘间隔大于20像素，但是上节中介绍第二个视图相对第一个视图左移时offset(负数)，故此处使用lessThanOrEqualTo。

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.right.lessThanOrEqualTo(self.view.mas_right).offset(-20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
    redView.text = @"redViewredView";
lessThanOrEqualTo.png
greaterThanOrEqualTo

greaterThanOrEqualTo(value)大于或等于value值。

示例：宽度大于等于180像素。

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.width.mas_greaterThanOrEqualTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
    redView.text = @"redView";
greaterThanOrEqualTo.png 
    redView.text = @"redViewredViewredViewredViewredView";
redViewredViewredViewredViewredView.png

如图所示：宽度随着文字的内容改变，但即使文字较少时宽度也不会小于180像素。

比例布局 - multipliedBy、dividedBy

multipliedBy：属性表示约束值为约束对象的乘因数。
dividedBy：属性表示约束值为约束对象的除因数。

示例：红色视图宽180高90，蓝色视图宽180高为宽度的0.5倍数。

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.right.equalTo(self.view.mas_right).offset(-20.f);;
        make.width.mas_equalTo(180.f);
        make.height.equalTo(blueView.mas_width).multipliedBy(0.5);
    }];
multipliedBy.png

通过图片可知两个视图高度相同，而蓝色视图0.5倍宽度的高度值正是90。

快速定位约束冲突视图 - mas_key

Masonry可以通过给视图控件设置key值来区分不同的控件，方便出现约束冲突时快速定位到有约束冲突的视图。
示例：

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.right.equalTo(self.view.mas_right).offset(-20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];

控制台会提示约束冲突日志如下：

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<MASLayoutConstraint:0x6000036ea580 UIView:0x7fcbfe4022f0.left == UIView:0x7fcbfe607e10.left + 20>",
    "<MASLayoutConstraint:0x6000036ea5e0 UIView:0x7fcbfe4022f0.right == UIView:0x7fcbfe607e10.right - 20>",
    "<MASLayoutConstraint:0x6000036e9ec0 UIView:0x7fcbfe4022f0.width == 180>",
    "<NSLayoutConstraint:0x6000031caad0 UIView:0x7fcbfe607e10.width == 414>"
)

Will attempt to recover by breaking constraint 
<MASLayoutConstraint:0x6000036e9ec0 UIView:0x7fcbfe4022f0.width == 180>

当应用中布局比较多或者布局比较相似时想快速准确定位到有冲突的视图比较困难。

    redView.mas_key = @"redViewKey";
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.right.equalTo(self.view.mas_right).offset(-20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<MASLayoutConstraint:0x6000001ec6c0 UIView:redViewKey.left == UIView:0x7fe3b6602b00.left + 20>",
    "<MASLayoutConstraint:0x6000001ec1e0 UIView:redViewKey.right == UIView:0x7fe3b6602b00.right - 20>",
    "<MASLayoutConstraint:0x6000001ec720 UIView:redViewKey.width == 180>",
    "<NSLayoutConstraint:0x6000006d0910 UIView:0x7fe3b6602b00.width == 414>"
)

Will attempt to recover by breaking constraint 
<MASLayoutConstraint:0x6000001ec720 UIView:redViewKey.width == 180>

对比设置mas_key前后的冲突日志可以发现，设置后日志会直接显示冲突视图的key值（UIView:redViewKey.right == ...），这样我们就能快速准确的定位到约束冲突视图。

优先级 - priority

每个约束都有一个优先级，优先级的范围是1 ~ 1000，默认创建的约束优先级是MASLayoutPriorityRequired(1000)。
作用：优先实现优先级高的设置，发生冲突时，放弃优先级低的设置。

常见优先级设置：

  • .priority() 设定一个明确的优先级的值。
  • .priorityHigh() 无参数，使用预设的MASLayoutPriorityDefaultHigh(750)值。
  • .priorityMedium()，使用默认的MASLayoutPriorityDefaultMedium(500)值。
  • .priorityLow()，使用默认的MASLayoutPriorityDefaultLow(250)值。

如上节中约束冲突可以通过设置优先级解决:

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f).priorityHigh();
        make.right.equalTo(self.view.mas_right).offset(-20.f).priority(740);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
优先级.png

priorityHigh()优先级高于priority(740)，故make.left.equalTo(self.view.mas_left).offset(20.f).priorityHigh()生效，结果如图所示。

单个约束的生效与删除 - uninstall、install

install:约束生效。
uninstall:约束删除。
示例：

@property (nonatomic, strong) MASConstraint *redViewLeftConstraint;
@property (nonatomic, strong) MASConstraint *redViewRightConstraint;

#pragma mark - 布局
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        _redViewLeftConstraint = make.left.equalTo(self.view.mas_left).offset(20.f).priorityHigh();
        _redViewRightConstraint = make.right.equalTo(self.view.mas_right).offset(-20.f).priority(740);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];

#pragma mark - 更改约束
[_redViewLeftConstraint uninstall];
[_redViewRightConstraint install];
install.png

如图所示：使用install、uninstall更改约束后，视图变为距右边缘20像素。

提高可读性 - with、and
- (MASConstraint *)with {
    return self;
}

- (MASConstraint *)and {
    return self;
}

查看方法代码可知两个方法没有做任何操作，只是返回对象本身，两个方法的作用是为了提高可读性。

动画
    _redViewRightConstraint.offset(-100.f);
    
    //告知需要更新约束，但不会立刻开始，系统然后调用updateConstraints
    [self.view setNeedsUpdateConstraints];
    //告知立刻更新约束，系统立即调用updateConstraints
    [self.view  updateConstraintsIfNeeded];
    [UIView animateWithDuration:0.4 animations:^{
        //告知页面立刻刷新，系统立即调用updateConstraints
        [self.view  layoutIfNeeded];
    }];
推荐写法
  • 添加/更新约束在这个方法（updateConstraints）内
- (void)updateConstraints {
    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.width.mas_equalTo(180.f);
        make.height.mas_equalTo(90.f);
    }];
    [super updateConstraints];
}
  • 设置requiresConstraintBasedLayout为YES
+ (BOOL)requiresConstraintBasedLayout {
    return YES;
}
注意

使用Masonry不需要设置控件的translatesAutoresizingMaskIntoConstraints属性为NO;
防止block中的循环引用，使用弱引用（这是错误观点），在这里block是局部的引用，block内部引用self不会造成循环引用的
__weak typeof (self) weakSelf = self;（没必要的写法）

相关文章

  • 适配

    Masonry iOS自动布局框架-Masonry详解

  • iOS 常用布局方式之Masonry

    级别： ★☆☆☆☆标签：「iOS Masonry」「iOS 自动布局」「Masonry」作者： Xs·H审校： ...

  • App架构方方面面

    布局 揭秘 iOS 布局 Masonry源码解析 自动布局&绝对布局autolayoutautolayout 动画...

  • Third Party

    A：推荐使用 B：修改使用 C：参考使用 自动布局Masonry(A)iOS自动布局框架-Masonry详解SDA...

  • masonry 源码解读

    ios 手写布局的几种方式 Frame AutoLayout VFL Masonry ios 布局的几种方式 1....

  • Masonry使用总结

    Masonry使用总结 一、Masonry简介 Masonry是一个轻量级的布局框架，适用于iOS以及OS X。它...

  • Masonry分析

    iOS 源代码分析----Masonry Masonry是OC自动布局的框架，简化了AutoLayout的写法。 ...

  • Masonry源码分析

    Masonry是iOS在控件布局中经常使用的一个轻量级框架，Masonry让NSLayoutConstraint使...

  • iOS开发之Masonry框架-源码解析

    Masonry是iOS在控件布局中经常使用的一个轻量级框架。Masonry让NSLayoutConstraint使...

  • Masonry框架解读

    Masonry是iOS在控件布局中经常使用的一个轻量级框架，Masonry让NSLayoutConstraint使...

网友评论

      本文标题：iOS Masonry布局（一）

      本文链接：https://www.haomeiwen.com/subject/ukrethtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|iOS Masonry布局（一）|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！