IOS控件布局之Masonry布局框架

时间:2022-02-11 17:39:45

前言:

回想起2013年做iOS开发的时候,那时候并没有采用手写布局代码的方式,而是采用xib文件来编写,如果使用纯代码方式是基于window的size(320,480)计算出一个相对位置进行布局,那个时候windows的size是固定不变的,随着iphone5的发布,windows的size(320,568)也发生了变化,而采用autoresizingMask的方式进行适配,到后来iphone 6之后windows size的宽度也随之变化,开始抛弃autoresizingMask改用autolayout了,使用autolayout进行适配我也是最近重新做iOS开发才接触的,公司使用Masonry框架进行布局适配。所以学习使用这个布局框架对我来说至关重要,它大大提高了开发效率而且最近使用起来很多语法和Android有很大的相似之处。

什么是Masonry?

Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局、简洁明了、 并具有高可读性、 而且同时支持 iOS 和 Max OS X。

如何使用?

1.)引入头文件

我这里是在全局引用pch文件中引用的

#import "Masonry.h"

2.)基本语法

Masonry提供的属性

  • @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;//文本基线

Masonry提供了三个函数方法

  • - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block; //新增约束
  • - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;//更新约束
  • - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;//清楚之前的所有约束,只会保留最新的约束

我们根据不同的使用场景来选择使用不同的函数方法。

3.)具体举例

比如一个往父控件中添加一个上下左右与父控件间距为50的子视图

添加约束

    UIView *tempView=[[UIView alloc]init];
tempView.backgroundColor=[UIColor greenColor];
[self.view addSubview:tempView]; [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo();
make.right.mas_equalTo(-);
make.top.mas_equalTo();
make.bottom.mas_equalTo(-);
}];

等价于

    UIView *tempView=[[UIView alloc]init];
tempView.backgroundColor=[UIColor greenColor];
[self.view addSubview:tempView]; [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset();
make.right.equalTo(self.view.mas_right).offset(-);
make.top.equalTo(self.view.mas_top).offset();
make.bottom.equalTo(self.view.mas_bottom).offset(-);
}];

也可以简化为下面这种

    UIView *tempView=[[UIView alloc]init];
tempView.backgroundColor=[UIColor greenColor];
[self.view addSubview:tempView]; [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(UIEdgeInsetsMake(, , , ));
}];

又等价于

    UIView *tempView=[[UIView alloc]init];
tempView.backgroundColor=[UIColor greenColor];
[self.view addSubview:tempView]; [tempView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(, , , ));
}];

更新约束

    [tempView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo();
make.right.mas_equalTo(-);
make.top.mas_equalTo();
make.bottom.mas_equalTo(-);
}];

清除之前的约束保留最新的

    [tempView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo();
make.right.mas_equalTo(-);
make.top.mas_equalTo();
make.bottom.mas_equalTo(-);
}];

特别注意:

声明约束必须在视图添加到父试图上面之后调用。

4.)mas_equalTo与equalTo

上面的举例中分别使用了mas_equalTo和equalTo达到了同样的效果,我在刚开始使用Masonry的时候很容易混淆他们两个,今天特意分析一下他们的区别。mas_equalTo是一个MACRO,比较的是值,equalTo比较的是id类型。

总结:

简单记录一下Masonry布局框架的使用。

IOS控件布局之Masonry布局框架的更多相关文章

  1. DevExpress控件GridControl中的布局详解 【转】

    DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28|  分类: devexpress |  标签:devexpress  |举报|字号 订阅   ...

  2. 【Android】15.0 UI开发(六)——列表控件RecyclerView的网格布局排列实现

    1.0 列表控件RecyclerView的网格布局排列实现,关键词GridLayoutManager. LinearLayoutManager 实现顺序布局 GridLayoutManager 实现网 ...

  3. 【Android】14.0 UI开发(五)——列表控件RecyclerView的瀑布布局排列实现

    1.0 列表控件RecyclerView的瀑布布局排列实现,关键词StaggeredGridLayoutManager LinearLayoutManager 实现顺序布局 GridLayoutMan ...

  4. 设计一个 iOS 控件

    转载自:http://blog.csdn.net/zhangao0086/article/details/45622875 代码的等级:可编译.可运行.可测试.可读.可维护.可复用 前言 一个控件从外 ...

  5. iOS控件之UIResponder类

    iOS控件之UIResponder类 在iOS中UIResponder类是专门用来响应用户的操作处理各种事件的,我们知道UIApplication.UIView.UIViewController这几个 ...

  6. iOS控件——UIView的viewWithTag:(int)findTag方法描述

    UIView拥有一个viewWithTag:(int)findTag方法,调用方式为[MyView viewWithTag:整形数字]该方法返回tag == findTag的控件.ios控件中允许多个 ...

  7. ios学习笔记图片+图片解释(c语言 oc语言 ios控件 ios小项目 ios小功能 swift都有而且笔记完整喔)

    下面是目录其中ios文件夹包括了大部分ios控件的介绍和演示,swift的时完整版,可以学习完swift(这个看的是swift刚出来一周的视频截图,可能有点赶,但是完整),c语言和oc语言的也可以完整 ...

  8. flutter控件之ListView滚动布局

    ListView即滚动列表控件,能将子控件组成可滚动的列表.当你需要排列的子控件超出容器大小,就需要用到滚动块. import 'package:flutter/material.dart'; cla ...

  9. 【Android】13.0 UI开发(四)——列表控件RecyclerView的横向布局排列实现

    1.0 新建项目,由于ListView的局限性,RecyclerView是一种很好取代ListView的控件,可以灵活实现多种布局. 2.0 新建项目RecyclerviewTest,目录如下: 3. ...

随机推荐

  1. [译]Introducing ASP.NET vNext and MVC 6

    原文:http://www.infoq.com/news/2014/05/ASP.NET-vNext?utm_source=tuicool Part of the ASP.NET vNext init ...

  2. 工欲善其事必先利其器——dreamweaver

    1.内置了一个webkit内核,所以实时视图与chrome浏览器效果一样. 2.DW中主浏览器的快捷键是f12,所以可以f12快速打开浏览器. 3.DW中首选项无法恢复到默认值. 4.有用首选项 5. ...

  3. Spring3 MVC DispatcherServlet 配置问题

    1. Spring MVC 是通过servlet来进行转发的,一般在web.xml中配置如下: <servlet> <servlet-name>dispatcher</s ...

  4. Eclipse CDT开发环境搭建及问题记录(Windows)

    这两天在整Eclipse,在此记录过程中遇到的一些问题. 1.安装JDK,配置系统路径: 2.下载Eclipse 直接访问Eclipse官网(https://www.eclipse.org/downl ...

  5. 重新学习Java的开始~

    安装jdk的步骤及解释已经在这篇文章中详细阐述了,如下: http://www.cnblogs.com/godtrue/p/4338323.html 1.如何安装库源文件--摘自coreJava 库源 ...

  6. gulp使用详解

    前面整理了 gulp使用入门,本节介绍相关的压缩 1.压缩js文件 步骤同基础步骤,相关可以看入门篇 npm install gulp-uglify --save-dev 引入js压缩库 gulpfi ...

  7. C&plus;&plus;知识回顾之&lowbar;&lowbar;stdcall、&lowbar;&lowbar;cdcel和&lowbar;&lowbar;fastcall三者的区别

    __stdcall.__cdecl和__fastcall是三种函数调用协议,函数调用协议会影响函数参数的入栈方式.栈内数据的清除方式.编译器函数名的修饰规则等. 调用协议常用场合 __stdcall: ...

  8. python 函数返回值笔记

    今天学习python时候学习到闭包和柯里化 感觉看概念时候不好理解,自己写下大概就明白点了 柯里化如下 定义一个加法函数 def add(x, y): return x + y 这是没有柯里化之前的函 ...

  9. 《快学Scala》第四章 映射与元组

  10. poj 2796 Feel Good 单调队列

    Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8753   Accepted: 2367 Case Ti ...