Auto Layout

Understanding Auto Layout

Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. For example, you can constrain a button so that it is horizontally centered with an Image view and so that the button’s top edge always remains 8 points below the image’s bottom. If the image view’s size or position changes, the button’s position automatically adjusts to match.

自动布局动态计算视图层次结构中所有视图的大小和位置，基于这些视图的约束。例如，您可以限制一个按钮，使其水平居中的图像视图，使按钮的顶部边缘始终保持8点低于图像的底部。如果图像视图的大小或位置发生变化，按钮的位置会自动调整以匹配。

 

This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes.

这种基于约束的设计方法允许你建立用户界面，动态响应内部和外部的变化。

External Changes

External changes occur when the size or shape of your superview changes. With each change, you must update the layout of your view hierarchy to best use the available space. Here are some common sources of external change:

外部的变化发生在你的视图的尺寸或形状的变化。每次更改时，必须更新视图层次结构的布局，以便最好地使用可用空间。以下是一些外部变化的常见来源：

• The user resizes the window (OS X).在“用户窗口resizes（x）

• The user enters or leaves Split View on an iPad (iOS).在用户进入或离开一个分裂的观点对iPad（IOS）。

• The device rotates (iOS).该器件rotates（IOS）。

• The active call and audio recording bars appear or disappear (iOS).有源appear呼叫和音频记录的酒吧或消失（IOS）。

• You want to support different size classes.你想支持不同大小的类。

• You want to support different screen sizes.你要支持不同的屏幕尺寸。

Most of these changes can occur at runtime, and they require a dynamic response from your app. Others, like support for different screen sizes, represent the app adapting to different environments. Even through the screen size won’t typically change at runtime, creating an adaptive interface lets your app run equally well on an iPhone 4S, an iPhone 6 Plus, or even an iPad. Auto Layout is also a key component for supporting Slide Over and Split Views on the iPad.

这些变化可能发生在运行时，他们需要从您的应用程序的动态响应。其他，如支持不同的屏幕尺寸，代表应用程序适应不同的环境。即使通过屏幕大小通常不会在运行时改变，创建一个自适应接口，让你的应用程序同样运行在iPhone 4S，iPhone 6 Plus，甚至是iPad。自动布局也是支持幻灯片和分割视图在iPad上的一个重要组成部分。

 

Internal Changes

Internal changes occur when the size of the views or controls in your user interface change.

Here are some common sources of internal change:

当用户界面中的视图或控件的大小发生变化时，将发生内部更改。以下是一些内部变化的常见来源：

• The content displayed by the app changes.应用程序显示的内容变化。

• The app supports internationalization.应用程序支持国际化

• The app supports Dynamic Type (iOS).应用程序支持动态类型（IOS）。

When your app’s content changes, the new content may require a different layout than the old. This commonly occurs in apps that display text or images. For example, a news app needs to adjust its layout based on the size of the individual news articles. Similarly, a photo collage must handle a wide range of image sizes and aspect ratios.

当应用程序的内容发生变化时，新内容可能需要比旧内容不同的布局。这通常发生在显示文本或图像的应用程序中。例如，新闻应用程序需要根据个人新闻文章的大小来调整版面。同样，照片拼贴必须处理宽范围的图像大小和纵横比。

Internationalization is the process of making your app able to adapt to different languages, regions, and cultures. The layout of an internationalized app must take these differences into account and appear correctly in all the languages and regions that the app supports.

国际化是使你的应用程序能够适应不同的语言，区域和文化的过程。国际化应用程序的布局必须考虑这些差异，并在应用程序支持的所有语言和区域中正确显示。

Internationalization has three main effects on layout. First, when you translate your user interface into a different language, the labels require a different amount of space. German, for example, typically requires considerably more space than English. Japanese frequently requires much less.

国际化对布局有三大影响。首先，当你将你的用户界面翻译成不同的语言时，标签需要不同的空间。德语，例如，通常需要相当大的空间比英语。日语经常需要少得多。

Second, the format used to represent dates and numbers can change from region to region, even if the language does not change. Although these changes are typically more subtle than the language changes, the user interface still needs to adapt to the slight variation in size.

第二，用于表示日期和数字的格式可以从区域到区域进行更改，即使语言不改变。虽然这些变化通常比语言的变化更微妙，用户界面仍然需要适应大小略有变化。

Third, changing the language can affect not just the size of the text, but the organization of the layout as well. Different languages use different layout directions. English, for example, uses a left-to-right layout direction, and Arabic and Hebrew use a right-to-left layout direction. In general, the order of the user interface elements should match the layout direction. If a button is in the bottom-right corner of the view in English, it should be in the bottom left in Arabic.

第三、语言的变化不仅会影响文字的大小，而且会影响组织的布局。不同的语言使用不同的布局方向。例如，英语使用左到右的布局方向，阿拉伯语和希伯来语使用从右到左的布局方向。一般来说，用户界面元素的顺序应该与布局方向相匹配。如果一个按钮在英语的右下角，它应该在左边的阿拉伯语。

Finally, if your iOS app supports dynamic type, the user can change the font size used in your app. This can change both the height and the width of any textual elements in your user interface. If the user changes the font size while your app is running, both the fonts and the layout must adapt.

最后，如果您的iOS应用程序支持动态类型，用户可以更改应用程序中使用的字体大小。这可以改变用户界面中任何文本元素的高度和宽度。如果用户在应用程序运行时更改字体大小，字体和布局必须适应。

Auto Layout Versus Frame-Based Layout

There are three main approaches to laying out a user interface. You can programmatically lay out the user interface, you can use autoresizing masks to automate some of the responses to external change, or you can use Auto Layout.

有三种主要的方法来创建用户界面。您可以通过编程方式奠定了用户界面，您可以使用自动调整尺寸的面具，自动化的一些应对外部环境的变化，或者你可以使用自动布局。

Traditionally, apps laid out their user interface by programmatically setting the frame for each view in a view hierarchy. The frame defined the view’s origin, height, and width in the superview’s coordinate system.

传统上，应用程序通过编程设置视图层次结构中的每个视图的框架来排列用户界面。框架定义视图的原点，高度，和父视图的坐标系统的宽度。

To lay out your user interface, you had to calculate the size and position for every view in your view hierarchy. Then, if a change occurred, you had to recalculate the frame for all the effected views.

要设置用户界面，必须计算视图层次结构中每个视图的大小和位置。然后，如果发生变化，你不得不重新计算所有受影响的观点框架。

In many ways, programmatically defining a view’s frame provides the most flexibility and power. When a change occurs, you can literally make any change you want. Yet because you must also manage all the changes yourself, laying out a simple user interface requires a considerable amount of effort to design, debug, and maintain. Creating a truly adaptive user interface increases the difficulty by an order of magnitude.

在许多方面，以编程方式定义视图的框架提供了最大的灵活性和功率。当变化发生时，你可以随便做任何你想要的改变。然而，因为你自己也必须管理所有的变化，制定一个简单的用户界面需要大量的努力，设计，调试和维护。创建一个真正的自适应用户界面增加了一个数量级的难度。

You can use autoresizing masks to help alleviate some of this effort. An autoresizing mask defines how a view’s frame changes when its superview’s frame changes. This simplifies the creation of layouts that adapt to external changes. 

你可以使用自动调整尺寸的面具来帮助减轻一些这方面的努力。一种自动调整尺寸的面具定义视图的框架的变化时，它的父视图框架的变化。这简化了创建适应外部变化的布局。

However, autoresizing masks support a relatively small subset of possible layouts. For complex user interfaces, you typically need to augment the autoresizing masks with your own programmatic changes. Additionally, autoresizing masks adapt only to external changes. They do not support internal changes.

然而，自动调整尺寸的面具支持可能的布局中相对较小的一部分。对于复杂的用户界面，通常需要增加自己的纲领性的变化自动调整尺寸的面具。此外，自动调整尺寸的面具只适应外部变化。他们不支持内部变化。

Although autoresizing masks are just an iterative improvement on programmatic layouts, Auto Layout represents an entirely new paradigm. Instead of thinking about a view’s frame, you think about its relationships.

虽然都只是纲领性的布局调整尺寸的面具的迭代改进，自动布局是一种全新的范式。而不是考虑一个视图的框架，你认为它的关系。

Auto Layout defines your user interface using a series of constraints. Constraints typically represent a relationship between two views. Auto Layout then calculates the size and location of each view based on these constraints. This produces layouts that dynamically respond to both internal and external changes.

自动布局使用一系列约束来定义用户界面。约束通常表示两个视图之间的关系。然后根据这些约束计算每个视图的大小和位置。这会产生布局，动态响应内部和外部的变化。

The logic used to design a set of constraints to create specific behaviors is very different from the logic used to write procedural or object-oriented code. Fortunately, mastering Auto Layout is no different from mastering any other programming task. There are two basic steps: First you need to understand the logic behind constraint-based layouts, and then you need to learn the API. You’ve successfully performed these steps when learning other programming tasks. Auto Layout is no exception.

用于设计一组约束来创建特定行为的逻辑与编写程序或面向对象代码的逻辑非常不同。幸运的是，掌握自动布局与掌握其他编程任务没有什么不同。有两个基本步骤：首先你需要了解基于约束的布局背后的逻辑，然后你需要学习API。在学习其他编程任务时，您已经成功地执行了这些步骤。自动布局也不例外。

The rest of this guide is designed to help ease your transition to Auto Layout. The Auto Layout Without Constraints chapter describes a high-level abstraction that simplifies the creation of Auto Layout backed user interfaces. The Anatomy of a Constraint chapter provides the background theory you need to understand to successfully interact with Auto Layout on your own. Working with Constraints in Interface Builder describes the tools for designing Auto Layout, and the Programmatically Creating Constraints and Auto Layout Cookbookchapters describe the API in detail. Finally, the Auto Layout Cookbook presents a wide range of sample layouts of varying levels of complexity, you can study and use in your own projects, and Debugging Auto Layout offers advice and tools for fixing things if anything goes wrong.

本指南的其余部分旨在帮助您轻松过渡到自动布局。无约束的自动布局描述了一个高级抽象，它简化了自动布局支持的用户界面的创建。一个约束章的解剖提供了背景理论，您需要了解成功地与您自己的自动布局互动。在界面生成器约束工作描述工具来设计自动布局，并以编程方式创建约束和自动布局cookbookchapters详细描述的API。最后，自动布局食谱提供了各种各样的复杂程度的样品布局，你可以学习和使用自己的项目，调试自动布局提供建议和工具，如果有什么错误的东西修复。