Masonry框架基本使用方法

关注

原创最新推荐文章于 2026-05-24 11:42:55 发布 794 阅读 AI 写同款· GEO 优化 ›

用Linkboy玩转Arduino：3小时搞定智能倒车雷达（附仿真文件下载）本文详细介绍了如何利用Linkboy图形化编程工具，在3小时内快速搭建一个基于Arduino的智能倒车雷达项目。通过仿真环境，初学者无需硬件即可学习超声波测距原理、报警逻辑设计，并完成从虚拟仿真到实体硬件的完整流程。文章提供了清晰的步骤、调试技巧及功能扩展思路，并附有仿真文件，是入门Arduino和智能硬件制作的绝佳实践指南。阅读详情

iPhone-iPhone3GS：window的size固定为（320，480），我们只需要简单计算一下相对位置就好。
iPhone4-iPhone4S：苹果推出了retina屏，但是对于开发人员并没有改变太多，window的size同样没有变化。
iPhone5-iPhone5S：window的size变为（320，568），苹果推出了autoresizingMask适配屏幕。
iPhone6至今：window的width也发生了变化，autoresizingMask不能更好的适配各种各样的屏幕尺寸，随之苹果推出了autolayout来支持复杂的适配。

我们平时总是在xib或storyboard里轻松的添加控件的约束，但是使用代码添加约束是一件非常痛苦的事情。虽然苹果推出了VFL语言简化了代码添加约束的复杂性，但是随之而来的缺点也暴露出来：约束内容使用字符串在编写过程中容易出错，约束功能局限，而且也并不是简化了太多。

Masonry是目前最流行的AutoLayout框架，属于轻量级布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了，具有更高的可读性。可以方便快捷的使用代码添加控件的约束，下面简单介绍一下这个三方框架的使用方法：

配置

点击该链接 https://github.com/SnapKit/Masonry.git 下载
将Masonry文件包拖入项目中，删除包内自带的info.plist文件
demo中对Masonry的引用在.pch文件中
使用Masonry不需要设置约束控件的translatesAutoresizingMaskIntoConstraints属性

简单实现

1.约束控件大小为100x100、位置为父控件的中心点

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.size.mas_equalTo(CGSizeMake(100, 100));
    make.center.mas_equalTo(self.view);
}];

也可以分别约束控件的宽和高、中心点的位置

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.width.mas_equalTo(100);
    make.height.mas_equalTo(100);
    make.centerX.mas_equalTo(self.view);
    make.centerY.mas_equalTo(self.view);
}];

2.约束控件的大小为父控件的一半、约束控件在父控件的右上角，距离父控件右边和顶部均为20

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {        
    make.size.mas_equalTo(self.view).multipliedBy(0.5);
    make.right.mas_equalTo(self.view.mas_right).with.offset(-20);
    make.top.mas_equalTo(self.view.mas_top).with.offset(20);
}];

3.约束控件距离父控件四周距离均为50

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {    
    make.left.mas_equalTo(self.view).offset(50);
    make.right.mas_equalTo(self.view).offset(-50);
    make.top.mas_equalTo(self.view).offset(50);
    make.bottom.mas_equalTo(self.view).offset(-50);
}];

可以简化为

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {    
    make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
}];

4.两个控件互相约束

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {        
    make.left.mas_equalTo(self.view.mas_left).offset(20);
    make.right.mas_equalTo(redView.mas_left).offset(-20);
    make.bottom.mas_equalTo(self.view.mas_bottom).offset(-20);
    make.height.mas_equalTo(50);
}];

[redView mas_makeConstraints:^(MASConstraintMaker *make) {        
    make.right.mas_equalTo(self.view.mas_right).offset(-20);
    make.bottom.mas_equalTo(blueView.mas_bottom);
    make.height.mas_equalTo(blueView.mas_height);
    make.width.mas_equalTo(blueView.mas_width);
}];

总结

约束的类型：
- 尺寸：width、height、size
- 边界：left、leading、right、training、top、bottom
- 中心点：center、centerX、centerY
- 边界：deges
mas_equalTo 和 equalTo 区别
- mas_equalTo 对参数进行包装
- equalTo 不会对参数进行包装
mas_width 和 width 区别
- width是make对象的一个属性，对宽度进行约束
- mas_width是一个属性值，当做mas_equalTo的参数，表示某个控件的宽度属性
with和and仅仅是为了提高可读性，可有可无