AutoLayout(自动布局)入门
这是WWDC2012笔记系列中的一篇,完整的笔记列表可以参看这里。如果您是首次来到本站,也许您会有兴趣通过RSS的方式订阅本站。 AutoLayout在去年的WWDC上被引入Cocoa,而在今年的WWDC上,Apple不惜花费了三个Session的前所未见的篇幅来详细地向开发者讲解AutoLayout在iOS上的应用,是由起原因的:iPhone5的屏幕将变为4寸,开发者即将面临为不同尺寸屏幕进行应用适配的工作。Android平台开发中最令人诟病的适配工作的厄运现在似乎也将降临在iOS开发者的头上。基于这样的情况,Apple大力推广使用AutoLayout的方法来进行UI布局,以一举消除适配的烦恼。AutoLayout将是自Interface Builder和StoryBoard之后UI制作上又一次重要的变化,也必然是之后iOS开发的趋势,因此这个专题很值得学习。 AutoLayout是什么?使用一句Apple的官方定义的话 AutoLayout是一种基于约束的,描述性的布局系统。 Auto Layout Is a Constraint-Based, Descriptive Layout System. 关键词:
总而言之,AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前,不论是在IB里拖放,还是在代码中写,每个UIView都会有自己的frame属性,来定义其在当前视图中的位置和尺寸。使用AutoLayout的话,就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题,另外也简化了旋转时view的位置的定义,原来在底部之上10像素居中的view,不论在旋转屏幕或是更换设备(iPad或者iPhone5或者以后可能出现的mini 使用约束条件来描述布局,view的frame会依据这些约束来进行计算 Describe the layout with constraints, and frames are calculated automatically. AutoLayout和Autoresizing Mask的区别Autoresizing Mask是我们的老朋友了…如果你以前一直是代码写UI的话,你肯定写过UIViewAutoresizingFlexibleWidth之类的枚举;如果你以前用IB比较多的话,一定注意到过每个view的size inspector中都有一个红色线条的Autoresizing的指示器和相应的动画缩放的示意图,这就是Autoresizing Mask。在iOS6之前,关于屏幕旋转的适配和iPhone,iPad屏幕的自动适配,基本都是由Autoresizing Mask来完成的。但是随着大家对iOS
总结
AutoLayout基本使用方法Interface Builder最简单的使用方法是在IB中直接拖。在IB中任意一个view的File inspector下面,都有Use Autolayout的选择框(没有的同学可以考虑升级一下Xcode了=。=),钩上,然后按照平常那样拖控件就可以了。拖动控件后在左边的view hierarchy栏中会出现Constraints一向,其中就是所有的约束条件。 手动使用API添加约束创建iOS6中新加入了一个类:NSLayoutConstraint,一个形如这样的约束
对应的代码为
这对应的约束是“button的底部(y) = superview的底部 -10”。 添加在创建约束之后,需要将其添加到作用的view上。UIView(当然NSView也一样)加入了一个新的实例方法:
用来将约束添加到view。在添加时唯一要注意的是添加的目标view要遵循以下规则:
刷新可以通过-setNeedsUpdateConstraints和-layoutIfNeeded两个方法来刷新约束的改变,使UIView重新布局。这和CoreGraphic的-setNeedsDisplay一套东西是一样的~ Visual Format Language 可视格式语言UIKit团队这次相当有爱,估计他们自己也觉得新加约束的API名字太长了,因此他们发明了一种新的方式来描述约束条件,十分有趣。这种语言是对视觉描述的一种抽象,大概过程看起来是这样的: accept按钮在cancel按钮右侧默认间距处
其中viewsDictionary是绑定了view的名字和对象的字典,对于这个例子可以用以下方法得到对应的字典:
生成的字典为
当然,不嫌累的话自己手写也未尝不可。现在字典啊数组啊写法相对简化了很多了,因此也不复杂。关于Objective-C的新语法,可以参考我之前的一篇WWDC 2012笔记:WWDC 2012 Session笔记——405 Modern Objective-C。
容易出现的错误因为涉及约束问题,因此约束模型下的所有可能出现的问题这里都会出现,具体来说包括两种:
布局不能确定指的是给出的约束条件无法唯一确定一种布局,也即约束条件不足,无法得到唯一的布局结果。这种情况一般添加一些必要的约束或者调整优先级可以解决。无法满足约束的问题来源是有约束条件互相冲突,因此无法同时满足,需要删掉一些约束。两种错误在出现时均会导致布局的不稳定和错误,Ambiguous可以被容忍并且选择一种可行布局呈现在UI上,Unsatisfiable的话会无法得到UI布局并报错。 对于不能确定的布局,可以通过调试时暂停程序,在debugger中输入
来检查是否存在Ambiguous Layout以及存在的位置,来帮助添加条件。另外还有一些检查方法,来查看view的约束和约束状态:
布局动画动画是UI体验的重要部分,更改布局以后的动画也非常关键。说到动画,Core Animation又立功了..自从CA出现以后,所有的动画效果都非常cheap,在auto layout中情况也和collection view里一样,很简单(可以参考WWDC
如果对block不熟悉的话,可以看看我很早时候写的一篇block的文章。 |
AutoLayout(自动布局)入门的更多相关文章
- iOS6 自动布局 入门–Auto Layout(转)
iOS6 自动布局 入门–Auto Layout(转) 标签: 杂谈 目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会 ...
- iOS回顾笔记(06) -- AutoLayout从入门到精通
iOS回顾笔记(06) -- AutoLayout从入门到精通 随着iOS设备屏幕尺寸的增多,当下无论是纯代码开发还是Xib/StoryBoard开发,自动布局已经是必备的开发技能了. 我使用自动布局 ...
- AutoLayout(自动布局)
1. iOS两种自适应布局方式:(修正说明:) -AutoLayout(自动布局) + SizeClasses(尺寸类别) -Autoresizing (自动调整尺寸/弹簧式调整尺寸) 前者 Auto ...
- iOS AutoLayout自动布局&Masonry介绍与使用实践
Masonry介绍与使用实践:快速上手Autolayout http://www.cnblogs.com/xiaofeixiang/p/5127825.html http://www.cocoachi ...
- iOS:Autolayout自动布局实例
Autolayout自动布局实例即可以用故事板布局,也可以用纯代码创建,各有各的优点:用故事板布局,比较方便,而且直观,可以很直白的看到视图布局后的变化:采用代码布局,虽然代码比较多,有些麻烦,但是可 ...
- iOS6 自动布局 入门–Auto Layout
目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会发生了-对于iPhone与iPad IOS6 带来了一个非常了不起的特征: ...
- AutoLayout自动布局
原文转自http://www.cnblogs.com/xjf125/p/4895978.html 目录: 一.什么是AutoLayout? 二.创建autoLayout的方法 三.VFL语言 ...
- 轻量级应用开发之(06)Autolayout自动布局1
一 什么是Autolayout Autolayout是一种“自动布局”技术,专门用来布局UI界面的. 自IOS7 (Xcode 5)开始,Autolayout的开发效率得到很大的提高. 苹果官方也推荐 ...
- AutoLayout自动布局之VFL语言代码实现(一个神奇的语言)
一.什么是VFL语言?为什么要VFL语言? VFL全称是Visual Format Language,翻译过来是“可视化格式语言” VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言 ...
- AutoLayout自动布局,NSLayoutConstraint 视图约束使用
一.方法 NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:<#(id)#> attribut ...
随机推荐
- 论文阅读笔记:《Interconnected Question Generation with Coreference Alignment and Conversion Flow Modeling》
论文阅读:<Interconnected Question Generation with Coreference Alignment and Conversion Flow Modeling& ...
- ZF、TP、CI等各种框架的区别
(原标题:面试常见问题之ZF.TP.CI等框架的区别 http://blog.163.com/m13341159039_1/blog/static/245953061201522092212820/) ...
- DOM——节点操作
节点操作 var body = document.body; var div = document.createElement('div'); body.appendChild(div); va ...
- Dart编程布尔值
Dart为布尔数据类型提供内置支持.Dart中的布尔数据类型仅支持两个值true和false.关键字bool用于表示DART中的布尔值. 在dart中声明布尔变量的语法如下所示 bool var_na ...
- Dart编程变量
变量是"存储器中的命名空间",用于存储值.换句话说,它作为程序中值的容器.变量名称称为标识符.以下是标识符的命名规则 - 标识符不能是关键字. 标识符可以包含字母和数字. 标识符不 ...
- AnalyticDB for PostgreSQL 6.0 新特性介绍
阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务 ...
- [JZOJ 5697] 农场
题目大意:将 n 个数 ai分成若干连续的段,使得每段的和都相等,求最多可以分成多少段. 思路: 考虑ai的和为sum,那么每一段的和就是约数. 对于每一个d,考虑其是否合法. 1e6之内用桶统计不会 ...
- 7.RabbitMQ RFC同步调用
RabbitMQ RFC同步调用是使用了两个异步调用完成的,生产者调用消费者的同时,自己也作为消费者等待某一队列的返回消息,消费者接受到生产者的消息同时,也作为消息发送者发送一消息给生产者.参考下图: ...
- JVM虚拟机瓜分内存原则
操作系统分配给每个进程的内存是有限制的,例如32位的Windows限制为2GB.虚拟机提供了参数来控制java堆和方法区(非堆)这两部分内存的最大值.则剩余的内存为2GB(操作系统限制)减去Xmx(最 ...
- LOJ #113. 最大异或和 (线性基)
题目链接:#113. 最大异或和 题目描述 这是一道模板题. 给由 \(n\) 个数组成的一个可重集 \(S\),每次给定一个数 \(k\),求一个集合 \(T \subseteq S\),使得集合 ...