Masonry框架基本使用方法

原创 2016年08月29日 16:03:28
  • 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仅仅是为了提高可读性,可有可无

版权声明:本文为博主原创文章,未经博主允许不得转载。

Masonry的基本使用方法

项目中需要使用到masonry进行适配,简单记录一下学习中的问题。 使用masonry首先需要导入masonry,masonry github地址如下:masonry下载地址:Swift 版:htt...

8.Masonry的使用方法

Masonry 使用步骤添加Masonry文件夹的所有源代码到项目中 添加2个宏、导入主头文件 只要添加了这个宏'#define MAS_SHORTHAND',就不用带mas_前缀 只要添加了这个宏...

流式布局的使用方法--Masonry

http://www.jq22.com/demo/masonry/ 范例 css部分 body { background-color: #c7cad0; } .post_box { bac...

XUtils3框架的基本使用方法(一)

XUtils3框架的基本使用方法今天给大家带来XUtils3的基本介绍,本文章的案例都是基于XUtils3的3.1.14版本进行的演示。相信大家对这个框架也都了解过,下面简单介绍下XUtils3的一些...

Tensorflow框架基本使用方法

本文是学习整理笔记。tensoflow基本运算模型tensorFlow通过Graph和Session来定义运行的模型和训练,这在复杂的模型和分布式训练上有非常大好处import tensorflow ...
  • cymy001
  • cymy001
  • 2017年12月05日 03:35
  • 11

XUtils===XUtils3框架的基本使用方法

转载自:http://blog.csdn.NET/a1002450926/article/details/50341173 今天给大家带来XUtils3的基本介绍,本文章的案例都是基于XUt...

[iOS]iOS AutoLayout框架Masonry介绍及其基本使用

前言:什么是AutoLayout? 个人对iOS AutoLayout的理解,觉得它就是相对布局,就像Android中的RelativeLayout,每一个View的摆放位置是由其他View所确定的...

XUtils===XUtils3框架的基本使用方法(一)

转载自:http://blog.csdn.net/a1002450926/article/details/50341173 今天给大家带来XUtils3的基本介绍,本文章的案例都是基于XUtils...
  • rankun1
  • rankun1
  • 2016年08月20日 11:16
  • 1174

Volley===Volley框架的基本使用方法

现在开发app,可以说离不开网络操作,今天给大家介绍一下android网络框架volley的使用方法。 volley简介 Volley主页 https://android.googleso...

XUtils===XUtils3框架的基本使用方法(一)

转载自:http://blog.csdn.net/a1002450926/article/details/50341173 今天给大家带来XUtils3的基本介绍,本文章的案例都是基于XUtils3...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Masonry框架基本使用方法
举报原因:
原因补充:

(最多只允许输入30个字)