AutoLayout 浅析动画


1.AutoLayout相关的几个易混淆的方法

setNeedsLayout
layoutIfNeeded
layoutSubViews
setNeedsUpdateConstraints
updateConstraitsIfNeed
updateConstraints

子视图在界面上的显示大概经过了:更新约束-通过约束依赖关系得到具体的frame-展示到界面。上面几个是和autolayout相关的方法,有必要大概了解一下这些方法具体是怎么用的以及在什么情况下触发。

1.[layoutView setNeedsUpdateConstraints]:告诉layoutView需要更新约束,在下次计算或者更新约束会更新约束
2.[layoutView updateConstraintsIfNeeded]:告诉layoutView立即更新约束,
3.updateConstraints:系统更新约束的实际方法

总结上面的3点就是,setNeedsUpdateConstraints确保了在将来某一时刻调用updateConstraintsIfNeeded之后会接着调用updateConstraints,从而达到更新view的约束的目的。但是要注意的是,如果仅仅单独调用2,不一定能够保证会调用updateConstraints,因为如果view上的约束是没有变动的且没有标记需要update的,这时就不会调用updateConstraints

4.[layoutView setNeedsLayout]:告诉layoutView页面需要更新,但不立即执行
5.[layoutView layoutIfNeeded]:告诉layoutView页面布局立即更新
6.layoutSubviews:系统重写布局的实际方法

总结以上3点,setNeedsLayout确保了在将来某个时刻通过调用layoutIfNeeded之后会调用系统的layoutSubviews,从而重写对view重新布局。同样的如果单独调用5,不一定能够保证调用layoutSubviews。[注:笔者写了个demo发现,调用setNeedsLayout会直接调用layoutSubviews]。如果想要每次都能立即更新布局,那就要把两个方法一起用,同样也适用于1和2。

系统调用layoutSubViews时,就会调用updateConstraintsIfNeeded,通过更新约束,用superView到subView的层次顺序,来计算frame,反向确定布局。

stackoverflow上有关于上面几个方法的深入解答并分享了作者的实用经验:

  • 如果仅想要立即改变约束,调用setNeedsLayout
  • 如果改变view的一些属性(如offsets)可能会导致布局的改变,那么调用setNeedsUpdateConstraints,更多的时候后面需要加setNeedsLayout
  • 如果想要立即改变布局,如会形成新的frame,那么需要在调用layoutIfNeeded

2.AutoLayout与动画

###[UIView animateWithDuration]方法

传统的动画主要是通过计算frame来进行动画,在autolayout下,主要是利用约束,动画的本质实际上是从一种约束状态变成另一种约束状态,从而来达到动画的目的。

这个例子的Demo在这里。

ViewController.h文件中:

@property (weak, nonatomic) IBOutlet UIView *animateView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftConstraint;

通过改变leftConstraint的值来实现具体的平移动画,具体代码如下:

self.leftConstraint.constant = 200;[UIView animateWithDuration:2 animations:^{[self.view layoutIfNeeded];
}];

对于这类简单动画,只需要在animation的block中调用layoutIfNeeded即可,从经验来看,只要调用这个方法即可。

使用Masonry写动画

如果你厌倦了苹果官方的NSLayoutConstraint的繁杂写法以及VFL的奇怪语法,那么Masonry是个不错的选择。

Masonry的官方介绍,它是一个轻量级的布局框架,拥有自己的描述语法,采用优雅的链式语法封装自动布局,更加简单的添加和更新约束,提供了友好的属性和Debug功能,支持iOS和Mac,最重要的是大大提高了可读性。

目前Masonry处于维护状态(bugfix),原因是它的开发人员考虑到越来越多的人会用swift,所以开发人员更专注开发其swift版本–SnpaKit。这篇文章仍然用Masonry。

用cocoaPods引用Masonry:

pod 'Masonry'

Masonry提供了非常优雅的属性和方法:

属性:MASViewAttribute

Masonry提供的属性及其对应的NSLayoutAttribute关系如下:

MASViewAttribute NSLayoutAttribute
view.mas_left NSLayoutAttributeLeft
view.mas_right NSLayoutAttributeRight
view.mas_top NSLayoutAttributeTop
view.mas_bottom NSLayoutAttributeBottom
view.mas_leading NSLayoutAttributeLeading
view.mas_trailing NSLayoutAttributeTrailing
view.mas_width NSLayoutAttributeWidth
view.mas_height NSLayoutAttributeHeight
view.mas_centerX NSLayoutAttributeCenterX
view.mas_centerY NSLayoutAttributeCenterY
view.mas_baseline NSLayoutAttributeBaseline

我们可以很方便的获得到属性。

常见用法示例(引自官方文档)

edges

//让当前view的top bottom left right和view2完全一样,表现为和view2大小一样
make.edges.equalTo(view2);// 让当前view进行这样的约束:top = superview.top + 5, left = superview.left + 10,bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size

//让当前view的size相对于titleLabel的size要greater than or equal to  
make.size.greaterThanOrEqualTo(titleLabel)// 让当前view进行约束:width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

center

// 当前view的中心点和button1相等
make.center.equalTo(button1)// 当前view约束:centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

还可以将属性连起来写:

// 左右低对superview对齐,高和otherView对齐
make.left.right.and.bottom.equalTo(superview); //接近于自然语言了
make.top.equalTo(otherView);

三个方法

1.mas_makeConstraints

给view添加约束的方法,

[masView mas_makeConstraints:^(MASConstraintMaker *make) {make.leading.equalTo(self.view).offset(20);make.top.equalTo(self.view).offset(200);make.width.offset(80);make.height.offset(80);
}];

2.mas_updateConstraints
更新约束的方法,如果view已经使用了mas_makeConstraints这个方法后,在更新约束时需使用这个方法。

3.mas_remakeConstraints
重新添加约束,它是先将view上的约束全部uninstall掉,然后添加约束。

比较友好的Debug(引自官方文档)

在添加约束的时候避免不了的会遇到约束错误,苹果原生的报错真的很不友好,让人看不懂,如下:

Unable to simultaneously satisfy constraints.....blah blah blah....
("<NSLayoutConstraint:0x7189ac0 V:[UILabel:0x7186980(>=5000)]>","<NSAutoresizingMaskLayoutConstraint:0x839ea20 h=--& v=--& V:[MASExampleDebuggingView:0x7186560(416)]>","<NSLayoutConstraint:0x7189c70 UILabel:0x7186980.bottom == MASExampleDebuggingView:0x7186560.bottom - 10>","<NSLayoutConstraint:0x7189560 V:|-(1)-[UILabel:0x7186980]   (Names: '|':MASExampleDebuggingView:0x7186560 )>"
)Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x7189ac0 V:[UILabel:0x7186980(>=5000)]>

UILabel:0x7186980可能也会非上一点时间找具体的Label是哪个。

Masonry重写了NSLayoutConstraint的(NSString *)description的方法,使得一起看起来较为友好了:

Unable to simultaneously satisfy constraints......blah blah blah....
("<NSAutoresizingMaskLayoutConstraint:0x8887740 MASExampleDebuggingView:superview.height == 416>","<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>","<MASLayoutConstraint:BottomConstraint UILabel:messageLabel.bottom == MASExampleDebuggingView:superview.bottom - 10>","<MASLayoutConstraint:ConflictingConstraint[0] UILabel:messageLabel.top == MASExampleDebuggingView:superview.top + 1>"
)Will attempt to recover by breaking constraint
<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>

可以具体是UILabel:messageLabel.height出了问题。

具体Demo

ViewController.m中,先对masView进行约束:

masView = [UIView new];
masView.backgroundColor = [UIColor redColor];
[self.view addSubview:masView];
[masView mas_makeConstraints:^(MASConstraintMaker *make) {make.leading.equalTo(self.view).offset(20);//距离self.view左侧20make.top.equalTo(self.view).offset(200);//距离self.view顶部200make.width.offset(80);//宽度80make.height.offset(80);//高度80
}];

动画的实现代码:

[masView mas_updateConstraints:^(MASConstraintMaker *make) {make.width.and.height.offset(100);make.leading.equalTo(self.view).offset(100);
}];[UIView animateWithDuration:3 animations:^{[self.view layoutIfNeeded];
}];

先用mas_updateConstraints更新masView的约束,然后调用animateWithDuration方法。

通过用masonry实现的动画可读性更高,利于维护,且能实现比较多的动画效果。

3.实际经验

实践出真知,需要通过实际项目来进行实践验证。我也总结项目过程中的一些实际经验:

  • 不能有任何一个约束的warning。对于约束的warning是要引起最够重视的,我们发现在iOS8下约束的warning没有引起crash,但是在iOS6上却crash。这个原因应该是苹果开发autolayout的历史变迁所致。所以当我们发现约束有warning的时候一定要改正确,项目中保证0warning。
  • 复杂页面的约束出现较多约束错误时,可以先清掉所有的约束,重新加约束。有时候发现约束越改越混乱,不如清掉所有的约束重新理清思路加约束。
  • 动画不一定非要是约束动画。我们知道autolayout到最终都是转化为对应的frame,所以frame是关键点。当一个视图(superView)布局好了之后,它的subView实际上仍然可以用传统的frame进行动画,不一定非要写约束。但是这个方法是不倡导的,既然用了约束就该将约束进行到底。
  • 牺牲了部分的效率。约束在转化为具体的frame过程中必然会产生性能上的问题,我们发现在iPhone4的iOS6上面表现的效果并不是很好,但是随着硬件的越来越强大,这个性能问题最终会被忽略掉的。

对于一般应用类的app上的动画效果,使用上述方法已经足够。方法最够的简单,需要理解的是其中的约束思想。文中用到的demo已经上传到这里。

通过这三篇关于AutoLayout的介绍文章,相信足以解决AutoLayout这个问题了。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397823.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 转为静态html,Vue CLI 3使用:HTML和静态资源(五)

HTMLpublic/index.html 文件是一个会被 html-webpack-plugin 处理的模板。构建中&#xff0c;各种资源路径会被注入解析。可以使用 lodash template 语法插入内容。用来做不转义插值&#xff1b;用来做 HTML 转义插值&#xff1b;用来描述 JavaScript 流程控制。除了被 html-we…

animate css3 应用的借鉴,一个同事写的JS

$("#banner").height($(window).height()-125);$(window).resize(function(){ $("#banner").height($(window).height()-125);}); //首页幻灯$(".indeximgs:first").show();var i0;$(".leftbut").click(function(){$(".indexim…

从html导出带样式的excel,Jquery导出带样式的Excel

工作中做导出的时候&#xff0c;需要导出自定义的表格或嫌弃导出的Excel格式太难看了。需要设置颜色、字号大小、加粗、合并单元格等等。特性&#xff1a;支持过滤 某个位置支持过滤 img 标签支持过滤 a 标签支持过滤 input 标签支持包含 行内样式。HTML页面&#xff1a;HTML页…

elementui from表单提交_elementui upload与form一起提交

学生基本信息管理操作中&#xff0c;有照片&#xff0c;可以上传也可以不上传&#xff0c;在表单界面可以修改照片&#xff0c;el-upload控件可以带额外参数提交&#xff0c;jquery的post模拟不了成表单带文件提交的方式&#xff0c;因此&#xff0c;判断如果有上传文件时&…

information_schema.character_sets 学习

information_schema.character_sets 表用于查看字符集的详细信息 1、character_sets 常用列说明&#xff1a; 1、character_set_name&#xff1a;    字符集名 2、default_collate_name&#xff1a;    默认排序规则   3、description&#xff1a;         …

asp.net mvc 用Redis实现分布式集群共享Session。

1、这两天研究Redis搞分布式session问题&#xff0c;网上找的资料都是用ServiceStack.Redis来实现的&#xff0c;但是在做性能测试的时候发现最新的v4版本有限制每小时候最多请求6000次&#xff0c;因为官网开始商业化要收费了&#xff0c;好坑爹的说&#xff0c;还好我前期弄了…

如何用计算机求和,求和计算器

求和计算器您可以使用此求和计算器快速计算预定范围内某个表达式的序列之和。如何使用求和计算器输入总和的表达式输入上限和下限提供表达式中使用的变量的详细信息单击“计算”按钮生成结果。求和Σ符号计算器k ∑n 0变量:nixyzabc 103740支持的运算符常量和函数算术运算符加“…

Zookeeper概述、特点、数据模型

Zookeeper1.Zookeeper概述Zookeeper是一个工具&#xff0c;可以实现集群中的分布式协调服务。所谓的分布式协调服务&#xff0c;就是在集群的节点中进行可靠的消息传递&#xff0c;来协调集群的工作。Zookeeper之所以能够实现分布式协调服务&#xff0c;靠的就是它能够保证分布…

云计算机创意名,有创意的道路名字推荐,分享一些好听有内涵的路名

提到龙岗板块&#xff0c;“风向”一直飘忽不定。原本地铁4号线今年通车&#xff0c;但是因为五象火车站的规划建设&#xff0c;暂时未开通;机场线已经敲定&#xff0c;然而没有龙岗的份…… [本文来自&#xff1a;www.777y.com]虽然机场线暂时无缘(可以期待下)&#xff0c;但是…

250W电源带i7+GTX1080?

电源的科学: Q1&#xff1a;电源的额定功率是什么&#xff1f;峰值功率又是什么&#xff1f;A1&#xff1a;电源的额定功率就是电源正常工作时的功率&#xff0c;它的值为用电器的额定电压乘以额定电流。而峰值功率指的是电源短时间内能达到的最大功率&#xff0c; 一般情况下电…

uml里的extend和include_用例图中包含(include)扩展(extend)和泛化(generalization)关系详解...

标签&#xff1a;uml用例图是解决用户需求的图&#xff0c;画好用例图一定要理清用例之间的关系。用例之间有三种关系&#xff1a;包含(include)扩展(extend)和泛化(generalization)。下面介绍三者的相同点和不同点以便区分&#xff1a;相同点&#xff1a; 三者都是从现有的用例…

数据库的数据类型及运算符

一、数据类型 1、整数类形&#xff1a; &#xff08;重点记忆&#xff0c;常用&#xff09;有符号整形&#xff1a;int--每个int类型的数据按4个字节存储&#xff0c;其中1位表示整数值的正负号&#xff0c;其他31位表示整数值长度和大小&#xff1b; 大整形&#xff1a;bigint…

浙江大学计算机博士很难复试专业课,浙江大学计算机学院2020年博士研究生招生复试公告...

一、复试资格通过计算机学院博士生材料初审的考生获得复试资格&#xff0c;名单见附件。二、复试内容和成绩组成博士研究生的复试内容主要包括对考生思想政治素质和品德、学术水平考核。1&#xff0e; 思想政治素质和道德品质考核思想政治素质和品德考核是博士研究生招生复试的…

推荐几款热门的敏捷开发工具

不知道有多少企业在很好的应用敏捷模式&#xff1b; 在今天的文章中&#xff0c;我们将一同了解更多有趣、高效且面向敏捷的项目管理工具。 Atlassian Jira/ Jira Agile   Atlassian的Jira是一款热门工具&#xff0c;用于追踪产品开发、帮助团队组织问题、分配工作并保证团队…

语言语法糖_【c#】几种常用语法糖

语法糖&#xff08;syntactic sugar&#xff09;是由英国计算机科学家Peter J. Landin发明的术语&#xff0c;指计算机语言中添加的某种语法。这种语法不影响语言的功能&#xff0c;但更方便使用。在开发中使用语法糖能够让程序变得更短&#xff0c;使看起来更美观些~空检查pub…

CodeForces 696B Puzzles

思维&#xff0c;简单树$dp$。 首先计算出每一个子树包含多少个节点&#xff0c;记为$f[i]$。然后就可以从$root$开始推出所有节点的期望了。 现在已知$fa$节点的答案为$ans[fa]$&#xff0c;假设要计算$fa$的一个儿子$v$的期望&#xff0c;那么$ans[v]ans[fa]1.0(f[fa]-f[v]-1…

2018清华计算机类专业录取分数线,清华大学2018年各省录取分数线及各专业录取分数线 - 高教网...

【一批录取分数线】港澳台联招&#xff1a;630分安徽&#xff1a;理科689分&#xff1b;文科675分&#xff1b;理科定向683分北京&#xff1a;理科694分&#xff1b;文科677分福建&#xff1a;理科681分&#xff1b;文科650分甘肃&#xff1a;理科652分&#xff1b;文科637分广…

ASP.NET 对类进行XML序列化和反序列化

1 序列化方法 public void SerializeObject<T>(string Xmlname,T t){XmlSerializer ser new XmlSerializer(typeof(T));TextWriter writer new StreamWriter(Xmlname);ser.Serialize(writer, t);//要序列化的对象writer.Close();} 2 序列化方法的使用 NodeConfigInfo n…

python100内3整除while_python-循环语句-习题及答案-for-while

for 变量 in range(起始&#xff0c;终止&#xff0c;步长):循环体变量 起始while 终止条件(bool):循环体步长break continue1. 盈盈为了考验令狐冲夺冠的决心&#xff0c;要他说一百遍“我能行&#xff01;”# for i in range(0,100,1):# print("我能行")2.本金100…

怎么用计算机连接电视,电脑怎么连接电视 详细步骤【图文】

现在一般的LED电视机都有连接电脑的功能&#xff0c;如何让电脑连接电视&#xff0c;让电视的大屏幕成为电脑的显示器呢?下面给大家说明电脑连接电视详细步骤!电脑连接电视步骤&#xff1a;1 电脑连接电视所需的接口及连接线我们先来介绍一下&#xff0c;电视上需要的接口&…