×

1. Understanding Auto Layout(理解自动布局)@Auto Layout Guide(自动布局指南)

96
fever105
2017.09.13 16:35* 字数 1871

翻译@Auto Layout Guide(自动布局指南)


Getting Started(新手上路)

Understanding Auto Layout(理解自动布局)

自动布局(Auto Layout)基于约束,动态计算视图结构中所有视图的尺寸和位置。例如,约束一个按钮(button),使其水平对齐一张图片(image view);且按钮上边(top)总是位于图片视图下边(bottom)下方8pt(point)的地方。图片的尺寸或位置发生变化,按钮的位置也会相应调整。

这种以约束为基础的布局方式,允许我们创造可以动态响应内外部变化的用户界面。

External Changes(外部变化)

外部变化源自父视图(superview)尺寸或形状的改变。每次变化,都需要更新视布局,以达到最佳显示效果。常见的外部变化来源如下:

  • 用户缩放窗口(window)(OS X)。
  • 在iPad上,用户进入或离开分屏视图(Split View)(iOS)。
  • 设备旋转(iOS)。
  • 通话或录音时,屏幕上方指示条的出现和消失(iOS)。
  • 适配不同尺寸类别(size class)。
  • 适配不同屏幕尺寸。

上述改变大多发生在运行时,要求app能够动态响应。剩下的,例如适配不同屏幕尺寸,意味着app需要主动适应不同的显示环境。自适应界面可以确保app在iPhone 4S,iPhone 6 Plus甚至iPad上显示正常,即使屏幕大小不会在运行时改变。此外,自动布局也是iPad上支持滑动和分屏视图的关键所在。

Internal Changes(内部变化)

内部变化源自界面改变引起的视图或控件尺寸的变化。

常见的内部变化来源如下:

  • app展示的内容变化。
  • app支持国际化(Internalization)。
  • app支持动态字体(Dynamic Type)(iOS)。

app内容变化时,新内容所需的布局很可能与旧的不同,常见于展示文字或图片时。例如,每篇新闻长短不一,需要不断根据文本调整布局。类似的,拼图软件必须能够处理不同尺寸,不同比例的图片。

国际化是指配置app,使其能够适应不同语言,地区,文化的过程。支持国际化的app必须考虑上述因素对布局的影响,从而正确显示内容。

国际化对布局的影响主要有三点。其一,翻译后,标签(label)的内容会改变,所需的空间也会改变。例如,表达同一个意思,德语通常比英语长,而日语最短。

其二,使用同一门语言,不同地区使用不同格式表示日期和数字。虽然,相较于不同语言,这种变化不起眼,但界面仍然需要调整。

其三,改变语言不止影响文字大小,也会影响文字的阅读方向。不同语言的阅读方向。例如,英语从左至右,而阿拉伯语和希伯来语都是从右至左。总之,界面元素的排布需要和阅读方向吻合。如果使用英语时按钮位于右下角,那么使用阿拉伯语时它就应该在左下角。

最后,对于iOS app来说,如果支持动态字体,则用户可以改变app字体大小。文本元素的尺寸会因此发生变化。如果用户在运行时改变字体大小,app的布局必须响应。

Auto Layout Versus Frame-Based Layout(自动布局 vs. frame布局)

(译者:frame这个词我就不翻译了🤔)

布局一个界面的元素的方式主要有三种。frame布局,自动缩放(auto resizing)以及自动布局。

以前,布局时,需要为视图结构中每个视图设定frame。frame定义了视图尺寸及其在父视图坐标系中的位置。

图1

为了精确,我们必须计算每个视图的frame。布局一旦发生变化,相关frame都需要重新计算。

从诸多方面看,frame布局是最为灵活和强大的,足以应对任何改变。然而,随之而来的,是我们必须手动管理所有视图的frame,结果就是即便是一个简单界面,也需要花费许多精力去设计,调试和维护。其难度会随着界面复杂度增加成倍上升。

自动缩放的出现在一定程度上减轻了我们的负担。自动缩放规定父视图的frame变化时,视图的frame如何应对。如此一来,简化了布局响应外部变化所需的工作。

然而,自动缩放支持的布局关系很有限。面对复杂界面,我们经常需要通过代码调整自动缩放掩码。此外,它仅响应外部变化,对于内部变化却无能为力。

相比之下,自动缩放仅仅是frame布局基础上的优化,自动布局却代表着一种全新的布局设计范式。frame的概念不复存在,我们要思考的,是视图之间的关系。

自动布局通过约束创建界面。约束一般代表两个视图之间的关系。自动布局根据约束计算视图的位置和尺寸。因此,界面布局可以动态响应或外部变化。

图2

通过约束定义视图行为,这背后的逻辑与面向过程以及面向对象编程大相径庭。幸运的是,掌握自动布局和掌握其他编程技能并无不同。分为两个步骤:首先我们必须理解约束所代表的逻辑,然后熟练使用相关API。在学习其他编程技能的过程中,我们不断重复上述步骤。自动布局也不例外。

接下来,本文会帮助大家逐步掌握自动布局。章节:Auto Layout Without Constraints(不使用约束的自动布局)讲解一个基于自动布局的高级抽象界面元素,其大大简化了特定场景下自动布局的使用。章节:Anatomy of a Constraint(约束详解)为理解和使用自动布局提供了理论支持。章节:Working with Constraints in Interface Builder(通过界面编辑器创建约束)讲解可视化的约束设计工具。章节: Programmatically Creating Constraints(代码创建约束)和章节:Auto Layout Cookbook(自动布局使用手册)细致解释相关API。最后,章节:Auto Layout Cookbook(自动布局使用手册)列举多个复杂程度各异的自动布局范例,以供研究和参考。而章节:Debugging Auto Layout(调试自动布局)为调试自动布局提供思路和工具。

Web note ad 1