[TOC=2]
自动布局根据放置在这些视图上的约束,动态计算视图层次结构中所有视图的大小和位置。 例如,可以约束一个按钮,使其与图像视图水平居中,并使按钮的上边缘始终保持低于图像底部8个点。 如果图像视图的大小或位置发生变化,按钮的位置会自动调整为匹配。
这种基于约束的设计方法允许构建动态响应内部和外部变化的用户界面。
## 外部变化
当父视图的大小或形状发生变化时,会发生外部变化。对于每个更改,必须更新视图层次结构的布局,以最大限度使用可用空间。以下是一些常见的外部变化来源:
* 用户调整窗口大小(OS X)。
* 用户在 iPad 上输入或离开分割视图(iOS)。
* 设备旋转(iOS)。
* 来电和录音条出现或消失(iOS)。
* 想支持不同 size classes 。
* 想支持不同的屏幕尺寸。
这些更改大部分可以在运行时发生,并且需要来自应用程序的动态响应。 其他的,如支持不同的屏幕尺寸,代表应用程序适应不同的环境。 即使屏幕尺寸在运行时通常不会改变,创建自适应界面可让您的应用程序在 iPhone 4S,iPhone 6 Plus 甚至 iPad 上同样运行。 自动布局也是支持 iPad 上的 Slide Over and Split Views 的关键组件。
## 内部变化
当用户界面中视图或控件的大小发生更改时,会发生内部更改。
以下是内部变化的一些常见来源:
* 应用程序显示的内容发生变化。
* 该应用支持国际化。
* 该应用程序支持动态类型(iOS)。
当应用内容发生变化时,新内容可能需要与旧内容不同的布局。 这通常发生在显示文本或图像的应用程序中。 例如,新闻应用需要根据单个新闻报道的大小来调整其布局。 同样,照片拼贴必须处理各种图像尺寸和宽高比。
国际化是让应用能够适应不同语言,地区和文化的过程。 国际化应用程序的布局必须考虑到这些差异,并在应用程序支持的所有语言和区域中正确显示。
国际化对布局有三个主要影响:
首先,当将用户界面翻译成其他语言时,文本标签需要不同的空间量。 例如,德语通常需要比英语更多的空间。 日语通常要求少得多。
其次,即使语言不变,用于表示日期和数字的格式也可能因地区而异。 虽然这些变化通常比语言变化更微妙,但用户界面仍然需要适应大小的微小变化。
第三,改变语言不仅会影响文本的大小,还会影响布局的组织。 不同的语言使用不同的布局方向 例如,英语使用从左到右的布局方向,阿拉伯语和希伯来语使用从右到左的布局方向。 通常,用户界面元素的顺序应与布局方向相匹配。 如果按钮位于英文视图的右下角,则应位于左下方的阿拉伯语中。
最后,如果 iOS 应用支持动态类型,用户可以更改应用中使用的字体大小。 这可以改变用户界面中任何文本元素的高度和宽度。 如果用户在应用程序运行时更改字体大小,则字体和布局必须适应。
## 自动布局与基于框架的布局
有三种主要的布局用户界面的方法。 可以以编程方式布局用户界面,可以使用 autoresizing masks 来自动化对外部更改的某些响应,也可以使用自动布局。
传统上,应用通过以编程方式为视图层次结构中的每个视图设置框架来布置其用户界面。 该框架在父视图坐标系中定义视图的原点,高度和宽度。
![](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/Art/layout_views_2x.png =288x370)
为了布局用户界面,必须计算视图层次结构中每个视图的大小和位置。 然后,如果发生更改,则必须重新计算所有受影响视图的帧。
在很多方面,以编程方式定义视图的框架提供了最大的灵活性和强大功能。 发生变化时,可以根据需要进行任何更改。 但是,由于必须自己管理所有更改,因此,设计一个简单的用户界面需要花费大量的精力进行设计,调试和维护。 创建一个真正的自适应用户界面将难度提高一个数量级。
可以使用 autoresizing masks 来帮助缓解一些此类工作。 autoresizing masks 定义视图的框架在父视图的框架更改时如何更改。 这简化了适应外部变化的布局的创建。
但是, autoresizing masks 支持可能布局的相对较小的子集。 对于复杂的用户界面,通常需要使用自己的程序化更改来增强 autoresizing masks 。 另外, autoresizing masks 仅适用于外部更改。 他们不支持内部更改。
尽管 autoresizing masks 只是对程序化布局的反复改进,但自动布局代表了一种全新的范例。 不要考虑视图的框架,而是考虑其关系。
自动布局使用一系列约束来定义用户界面。约束通常表示两个视图之间的关系。然后,自动布局根据这些约束计算每个视图的大小和位置。这将生成动态响应内部和外部更改的布局。
![](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/Art/layout_constraints_2x.png =288x370)
用于设计一组约束来创建特定行为的逻辑与用于编写过程式或面向对象代码的逻辑非常不同。幸运的是,掌握自动布局与掌握任何其他编程任务无异。有两个基本步骤:首先,需要了解基于约束的布局背后的逻辑,然后需要了解 API 。学习其他编程任务时,已经成功执行了这些步骤。 自动布局也不例外。
本指南的其余部分旨在帮助你轻松过渡到自动布局。
* [The Auto Layout Without Constraints](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutWithoutConstraints.html#//apple_ref/doc/uid/TP40010853-CH8-SW1) 章节描述了一个高级抽象,它简化了 Auto Layout 支持的用户界面的创建。
* [The Anatomy of a Constraint](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW1) 章节提供了需要理解的背景理论,以便自己成功地与自动布局进行交互。
* [Working with Constraints in Interface Builder](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraintsinInterfaceBuidler.html#//apple_ref/doc/uid/TP40010853-CH10-SW1) 章节描述了用于设计自动布局的工具
* [Programmatically Creating Constraints](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html#//apple_ref/doc/uid/TP40010853-CH16-SW1) 和 [Auto Layout Cookbook](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH3-SW1) 章节详细描述了API 。
* [Auto Layout Cookbook](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH3-SW1) 提供了各种复杂程度的样本布局,可以在自己的项目中学习和使用
* 如果出现任何问题,[Debugging Auto Layout](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/TypesofErrors.html#//apple_ref/doc/uid/TP40010853-CH22-SW1) 会提供建议和工具来修复事情。
> 原文地址
> [Understanding Auto Layout](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1)