关于Masonry框架(AutoLayout)的用法--面向初学者
Masonry作为目前较为流行的自动布局第三方框架,简单易用,大大减少了程序员花在UI布局和屏幕适配的精力与时间。
1 基本用法
1.1 事例1:
图1-1
// 首先是view1自动布局
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
// view1左边与superView左边对齐
make.left.equalTo(superView.mas_left);
// view1右边与superView右边对齐.
make.right.equalTo(superView.mas_right);
/* 这两句代码约束了view1的左边与右边,等价于约束了view1的宽
度,宽度与superView的宽度相等,superView宽度变了,view1宽度也
更着改变*/
// viewe1上边于superView上边对齐
make.top.equalTo(superView.mas_top);
// view1高度固定为44,等于一个数时用mas_equalTo();
make.height.mas_equalTo(44);
/* 到这里view1布局完成,它的origin(位置:x,y)和size(尺寸:
width,height)都确定了,实际上就是view1的frame确定了。*/
}];
/* 任意一个UIView的布局都需要确定位置和尺寸:x和y, width和
height,缺一不可。下面是view2的布局 */
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
// view2左边与view1左边对齐,即x确定,也可以与superView对齐
make.left.equalTo(view1.mas_left);
// view1宽度固定为90,即width确定。
make.width.mas_equalTo(90);
// 这里view2的高度与view1的高度相等,即height确定.
make.height.equalTo(view1.mas_height);
// 底边与superView底边对齐,结合高度约束,y确定。
make.bottom.equalTo(superView.mas_bottom);
}];
/* x,y既可以通过left,top直接确定,也可以通right结合width,bottom
结合height间接确定 ,width和height通过mas_equalTo()直接确定以及
通过equalTo(view)依赖view的宽高间接确定 */
1.2 事例2:
图1-2
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 与superView左边对齐,x确定。
make.left.equalTo(superView.mas_left);
// 与superView上边对齐,y确定。
make.top.equalTo(superView.mas_top);
// view1宽度固定为90,width确定。
make.width.mas_equalTo(90);
// view1高度height未确定。
}];
//view2布局,假设双箭头( 间距 )为20;
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
/* view2的左边与superView左边+一个数对齐,从这里换个说法
,view2的左边等于superView的左边加上一个间距,x确定。*/
make.left.equalTo(superView.mas_left).offset(20)
// view2的底边等于superView底边。
make.bottom.equalTo(superView.mas_bottom);
// view2的尺寸等于view1的尺寸(高度和宽度),size(width,height)确定
make.size.equalTo(view1);
/* 上面一句等价于make.height.width.equalTo(view1); */
// view2的顶边等于view1的底边加上间距,结合高度约束,y确定。
make.top.equalTo(view1.mas_bottom).offset(20)
/* 四个要素确定,约束完成,view2的宽高度与view1的宽高度相同,
由于两者没有。固定高度,只有固定的间距,故view1和view2的高度
会随着superView的高度变化而变化。*/
}];
//啰嗦下坐标
图1-3
//view3布局,假设间距为20。
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
/* 从图中看出右边最好确定,右边等于superView的右边加上间距 */
make.right.equalTo(superView.mas_right).offset(-20);
// 坐标计算: 往左-20,往右+20。
// view3的顶边等于superView顶边加一个间距
make.top.equalTo(superView.mas_top).offset(20); //往上-20, 往下+20
// view3的底边等于superView的底边加上一个间距。
make.bottom.equalTo(superView.mas_bottom).offset(-20)
// 到这里view3的高度确定,但宽度和x,y都尚未确定
// view3宽度确定后结合right约束x跟着确定
make.width.mas_equalTo(90);
/* 剩下y未确定,从图中可以看出view3在superView中应该是垂
直方向上居中,可以直接设置centerY */
make.centerY.equalTo(superView.mas_centerY);
/* 无论superView高宽怎么变化,view3始终在垂直方向上居中,
且紧挨着superView右侧,高度会随着superView变化而变化,当
然,你也可以直接固定高度,顶边与底边就不用在设置了,这样,
superView高度变大变小,view3始终那么高,如何选择肯定是跟
UI界面需求有关 */
}];
/* 这部分主要介绍了基本用法, top, bottom, left, right, centerY(相应的有
centerX), equalTo(), mas_equalTo(), offset() */
2 注意事项
2.1 问题
(1) view 进行布局了但没有效果
1) view为空,相当于给空指针发送消息,没有作用。
2) 布局依赖的UIView(如superView,view2)没有布局好.(说明:
make.equalTo(view2),view2为依赖的UIView).
3) view 本身没有显示什么东西
4) view 没有添加到superView
5) 等等。。。。。。。
(2) 约束过多相悖或缺少
Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
(3)程序崩溃,一般是约束依赖的对象(如superView)为空
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'attempting to add unsupported attribute: (null)';
2.2 综合解决方法
设置view的背景以便观察,辅以View UI Hierarchy观测.
最直接有效的方法是在当前界面的第一个自动布局的view处打上断点,一行一行往下走( step over ),若直接跳过当前view布局,一般是当前view为空; 若进去在某一行程序崩溃,一般是当前约束语句依赖的对象为空。
2.3 细节( 自行忽略 )
规律:边界:view1与superView对齐,相邻:view2与view1的左边、右边、顶边或者底边对齐,中心:centerX,centerY对齐,一个整体内的view与该整体对齐.固定与变化的选择依UI需求.
一般情况下,布局是在layoutSubViews()或者控制器viewDidLayoutSubViews(),若不是,如:view1在布局约束前未执行[superView addSubViews:view1],程序也会崩溃。
有些view,如UILabel没有约束高度而设置了numerOfLines = 0时UILabel的高度会随着内容的多少而变化。
关于Masonry框架(AutoLayout)的用法--面向初学者的更多相关文章
- iOS学习——布局利器Masonry框架源码深度剖析
iOS开发过程中很大一部分内容就是界面布局和跳转,iOS的布局方式也经历了 显式坐标定位方式 --> autoresizingMask --> iOS 6.0推出的自动布局(Auto La ...
- iOS:在tableView中通过Masonry使用autolayout在iOS7系统出现约束崩溃
一.出现崩溃情景: 给tableView创建一个头视图,也即tableHeaderView,然后使用Masonry并切换到iOS7/7.1系统给tableHeaderView中的所有子视图添加约束,此 ...
- iOS开发之Masonry框架源码深度解析
Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...
- Masonry框架源码深度解析
Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...
- iOS开发之Masonry框架源码解析
Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...
- 如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇)(1) - 目录
昨天发表了<如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor>后,大家十分热情,几个小时内就收到了不少问题,包括: 对于ui自动化测试这方 ...
- scrapy框架中Spiders用法
scrapy框架中Spiders用法 Spider类定义了如何爬去某个网站,包括爬取的动作以及如何从网页内容中提取结构化的数据 总的来说spider就是定义爬取的动作以及分析某个网页 工作流程分析 以 ...
- Masonry UIScrollView autolayout 的一个奇特的问题
事情是这样的.... 我一个工程里 一直使用的 masonry 做autolayout,有个gesturerReconizer的bug,找了很久,发现很奇怪一个现象: 我的某个view 是这样的 |- ...
- 线程框架Executor的用法举例
java5线程框架Executor的用法举例 Executor 是 java5 下的一个多任务并发执行框架(Doug Lea),可以建立一个类似数据库连接池的线程池来执行任务.这个框架主要由三个接口和 ...
随机推荐
- 转载 8天掌握EF的Code First开发之Entity Framework介绍
转载原地址: http://www.cnblogs.com/farb/p/IntroductionToEF.html Entity Framework概要 Entity Framework是微软的O ...
- FreeModbus 精简版本(Only RTU) for M128 (Modbus Slave)
1.硬件连接: M128 PD3 INT3/TXD1 ---> PC 232COM Pin 2 PD2 INT2/RXD1 ---> PC 232COM Pin 3 GND ...
- 追MM与Java的23种设计模式
1.Factory:追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德基就是生产鸡翅 ...
- Asp.net中使用资源文件实现网站多语言
首先需要新建一个ASP.NET Web Application.然后右键项目文件Add->Add ASP.NET Folder->App-GlobalResources. 新建好资源文件夹 ...
- 作为平台的Windows PowerShell(一)
除了作为一种脚本语言外,Windows PowerShell被多种应用程序使用.这是因为Windows PowerShell引擎可以被托管在一个应用程序内部.这篇博文和下一篇博文将会处理在C#应用程序 ...
- POJ 3080 Blue Jeans (KMP)
求出公共子序列 要求最长 字典序最小 枚举第一串的所有子串 然后对每一个串做KMP.找到目标子串 学会了 strncpy函数的使用 我已可入灵魂 #include <iostre ...
- Nginx + Tomcat + Session
分别下载 tomcat http://archive.apache.org/dist/tomcat/tomcat-7/v7.0.22/bin/apache-tomcat-7.0.22.tar.gz n ...
- 在Struts2中使用ValueStack、ActionContext、ServletContext、request、session等 .
笔者不知道该用哪个词来形容ValueStack.ActionContext等可以在Struts2中用来存放数据的类.这些类使用的范围不同,得到的方法也不同,下面就来一一介绍. 声明:本文参考Strut ...
- JVMInternals--reference
This article explains the internal architecture of the Java Virtual Machine (JVM). The following dia ...
- 16% off MPPS V16 ECU tuning tool for EDC15 EDC16 EDC17
EOBD2.FR is offering 16% discount off the latest MPPS V16 ECU chip tuning tool. The device is now so ...