自动布局会根据在你的视图(view)层级中所有视图的约束(constraints),动态的计算视图的尺寸与位置.例如,你可以为一个按钮(button)设置约束,使其相对于一个图片视图(Image view)水平居中,然后,此按钮的上部边缘一直与图片的下部边缘保持8点(points)的距离.如果图片视图的尺寸或位置改变了,按钮的位置会相对自动调整.
此种基于约束(constraint-based)的设计方法允许你创建一个可以同时响应内部与外部变化用户界面.
1.外部改变
外部改变发生于你的上级视图的尺寸与形状发生改变的时候.每次改变发生的时候,你必须更新你的视图层级来充分使用可用的空间.以下为通常会引起外部改变的因素:
· 用户改变窗口尺寸(OS X).
· 用户进入或退出iPad上的分屏视图(Split View)(iOS).
· 设备旋转(iOS).
· 通话条和录音条的出现消失(iOS).
· 你想要支持不同的尺寸类(size classes).
· 你想要支持不同的屏幕尺寸.
这些改变大部分是在运行(runtime)的时候发生的,并且需要来自你的应用(app)的动态响应.其他的改变,例如支持不同的屏幕尺寸,相当于应用适应不同的环境.即使应用在运行的时候一直不会改变屏幕尺寸,也要创建一个可以让你的应用可以同时运行在iPhone 4S,iPhone6 Plus,或者甚至iPad上的界面.自动布局同样是一个为iPad的Slide over与分屏视图提供支持的关键组件.
2.内部改变
内部改变发生于用户界面中的视图尺寸或控制发生改变的时候.
以下为通常会引起内部改变的因素:
· 应用的内容改变.
· 应用支持国际化(internationalization).
· 应用支持动态类型(iOS)
当你的应用的内容改变的时候,新内容相对于旧的会需要一个不同的布局.这种情况发生于应用需要展示文本(text)或图片的时候.例如,一个新闻类应用需要根据单独的新闻文章的尺寸调整其布局.类似的,一个图片拼贴应用必须要处理图片尺寸与比例.
国际化是使你的应用可以适应不同语言地区与文化的过程.一个国际化的应用必须考虑到这些差异,并且正确展示其所支持的语言与地区.
国际化对于布局主要有三种影响.第一,当你将你的用户界面翻译成不同的语言时,标签(labels)需要不同大小的空间.例如,德语通常需要比英语更多的空间,日语通常需要更少.
第二,即使语言没有改变,不同地区用于展示日期与数字的格式不同.尽管这些改变通常比不同语言的改变更小,但是用户界面依然需要适用于这些在尺寸上轻微变化.
第三,改变语言不仅会影响文本的尺寸,也会影响布局的组织.不同的语言会使用不同的布局方向.例如,英语采用从左到右的布局方向,而阿拉伯语和希伯来语采用从右到左的布局方向.通常情况下,用户界面的元素顺序应该符合布局方向.如果在英文环境下一个按钮在视图的右下角,那么在阿拉伯环境下应该在左下角.
最后,如果你的iOS与应用支持动态类型,用户可以改变你应用中字体大小.这种操作会同时改变用户界面文字类元素(elements)的高度和宽度.如果在你的应用运行期间改变了字体大小,字体与布局要同时进行调整以适应这种改变.
3.自动布局vs.基于边界(Frame-Based)的布局
用户界面的主要布局方式有三种.你可以通过程序(programmatically)布局用户界面,你可以使用自动尺寸罩(autoresizing masks)自动响应外部改变,或者你可以使用自动布局.
传统上,应用会以程序的方式设定在视图层级中的每个视图的边框,然后展示出其用户界面.边界在上级视图的坐标系中定义视图的原点高度,宽度.
为了展示出用户界面,你必须为你视图层级中的每个视图计算出尺寸与位置.然后,如果改变发生,你必须要为所有受影响的视图重新计算边界.
在很多情况下,程序定义试图边界很强大很灵活.当改变发生,你可以做出任何改变.然而,因为你必须自己管理所有的改变,布局一个简单的用户界面需要大量的工作去设计,debug,维护.创建一个使用的用户界面的难度,会以指数级的方式增加.
你可以使用自动尺寸罩帮助减轻一些工作量.一个自动尺寸罩定义了当上级视图改变时一个视图的边界如何改变.这种方法简化了创建需要适应外部变化的布局.
然而,自动尺寸罩能够支持的布局较少.对于复杂的用户界面,你通常需要用你的程序上的改变增加自动尺寸罩.此外自动尺寸罩只适用于外部改变.他们不支持内部改变.
尽管自动尺寸罩仅仅是一种程序布局上的迭代提升(iterative improvement),自动布局代表了一种全新的范式.你需要考虑视图的关系,而不是边界.
自动布局使用一系列约束定义你的用户界面.约束通常代表了两个视图之间的关系.然后自动布局基于这些约束计算每个视图的尺寸与位置.然后使得布局自动响应内外部的改变.
layout_constraints_2x.png
设计一系列约束来创建具体行为的逻辑,与程序化的或面向对象的代码逻辑非常不同.幸运的是,应用自动布局,与应用任何其他编程任务没有不同.有两个基本的步骤:第一理解在基于约束的布局的背后的逻辑,然后你需要学习API.在你学习其他程序任务时,已经成功实现了这些步骤.自动布局也不例外.
本指导的余下部分可以让你易于掌握自动布局."无约束自动布局"一章描述的是一种高度抽象的方法用于简化创建自动布局支持的用户界面."约束解剖"一章为理解与应用自动布局提供了背景理论."在用户界面中使用约束"一章描述了设计自动布局的工具,"程序创建约束"和"自动布局菜谱"描述了API的细节.最后,"自动布局菜单"展示了很多不同复杂度的自动布局的事例.你可以学习,并且应用在自己的项目中,"Debugging自动布局"为修复出现的问题提供建议.
网友评论