Auto Layout

自動布局

The Rect Transform layout system is flexible enough to handle a lot of different types of layouts and it also allows placing elements in a complete freeform fashion. However, sometimes something a bit more structured can be needed.

Rect Transfrom 布局系統足夠靈活來處理各種不同的布局，而且它允許你把元素完全自由地放置。然而，有時候需要一些更結構化的東西。

The auto layout system provides ways to place elements in nested layout groups such as horizontal groups, vertical groups, or grids. It also allows elements to automatically be sized accoring to the contained content. For example a button can be dynamically resized to exactly fit its text content plus some padding.

自動布局系統提供了把元素放到嵌套的布局組(比如水平布局組、垂直布局組、網格)中的方法。它同樣允許元素自動根據內容的大小來確定自己的大小。比如按鈕可以動態地改變自己的大小，完全貼合他的文字內容加上邊距的大小。

The auto layout system is a system built on top of the basic Rect Transform layout system. It can optionally be used on some or all elements.

自動布局系統是在基礎的Rect Transform布局系統地基礎上搭建的。它可以選擇性地被全部或部分元素使用。

Understanding Layout Elements

理解布局元素

The auto layout system is based on a concept of?layout elements?and?layout controllers. A layout element is an Game Object with a Rect Transform and optionally other components as well. The layout element has certain knowledge about which size it should have. Layout elements don’t directly set their own size, but other components that function as layout controllers can use the information they provide in order to calculate a size to use for them.

自動布局系統基于布局元素和布局控制器的概念，一個布局元素是一個帶有Rect Transform的GameObject，也可以帶有其它組件。布局元素一定知道它自己應該有多大。布局元素不會直接設置自己的大小，但是其他功能像布局控制器一樣的組件可以使用他們提供的信息來計算出他們的大小。

A layout element has properties that defines its own:

• Minimum width
• Minimum height
• Preferred width
• Preferred height
• Flexible width
• Flexible height

布局元素有它自己定義的屬性

• 最小寬度
• 最小高度
• 首選寬度
• 首選高度
• 靈活寬度
• 靈活高度

Examples of layout controller components that use the information provided by layout elements are?Content Size Fitter?and the various?Layout Group?components. The basic principles for how layout elements in a layout group are sized is as follows:

• First minimum sizes are allocated.
• If there is sufficient available space, preferred sizes are allocated.
• If there is additional available space, flexible size is allocated.

?

布局控制器組件使用布局元素提供的信息的例子是，各種各樣的Layout Group(布局組)和內容尺寸適配。布局元素在布局組中如何確定尺寸的基本原則如下：

• 首先申請最小的尺寸
• 如果這里有足夠的可用空間，那么就申請首選尺寸
• 如果還有額外的可用空間，那么就申請靈活尺寸

Any Game Object with a Rect Transform on it can function as a layout element. They will by default have minimum, preferred, and flexible sizes of 0. Certain components will change these layout properties when added to the Game Object.

The Image and Text components are two examples of components that provide layout element properties. They change the preferred width and height to match the sprite or text content.

所有有Rect Transform的Game Object可以被當做layout element（布局元素）來使用。他們默認的最小、首選、靈活尺寸都是0。某些組件在添加到Game Object上的時候會改變這些布局屬性。

Image和Text組件式兩個組件提供布局元素屬性的例子。他們改變首選寬度和高度來匹配精靈和文字的內容。

Layout Element Component

布局元素組件

If you want to override the minimum, preferred, or flexible size, you can do that by adding a Layout Element component to the Game Object.

如果你想重寫最小、首選、靈活尺寸，你可以添加一個?Layout Element component（布局元素組件）到Game Object

The Layout Element component lets you override the values for one or more of the layout properties. Enable the checkbox for a property you want to override and then specify the value you want to override with.

布局元素組件讓你可以覆蓋一個或多個布局屬性的值。勾選你想要覆蓋的屬性的復選框，然后指定你想要覆蓋的值

See the reference page for?Layout Element?for more information.

更多信息可以看Layout Element的介紹頁面

Understanding Layout Controllers

理解布局控制器

Layout controllers are components that control the sizes and possibly positions of one or more layout elements, meaning Game Objects with Rect Transforms on. A layout controller may control its?own layout element?(the same Game Object it is on itself) or it may control?child layout elements.

A component that functions as a layout controller may also itself function as a layout element at the same time.

布局控制器是一個可以控制一個或多個布局元素的尺寸或者大小的組件。一個布局控制器可能控制它自己GameObject上的布局元素（就是控制它自己腳本所在的節點），或者子節點的布局元素。

一個有布局控制器功能的組件也可能同時有布局元素的功能。

Content Size Fitter

內容尺寸適配器

The Content Size Fitter functions as a layout controller that controls the size of its own layout element. The simplest way to see the auto layout system in action is to add a Content Size Fitter component to a Game Object with a Text component.

Content Size Fitter是一個控制自身布局元素尺寸的布局控制器。如果想看看自動布局系統的行為，最簡單的方法是將一個Content Size Fitter組件添加到包含Text組件的游戲對象中。

If you set either the Horizontal Fit or Vertical Fit to Preferred, the Rect Transform will adjust its width and/or height to fit the Text content.

如果你設置水平和垂直適配到首選，Rect Transform會調整它的寬度和高度適配文本內容

See the reference page for?Content Size Fitter?for more information.

更多信息可以看Content Size Fitter的介紹頁面

Aspect Ratio Fitter

長寬比適配器

The Aspect Ratio Fitter functions as a layout controller that controls the size of its own layout element.

長寬比適配器是一個控制自身布局元素尺寸的布局控制器。

It can adjust the height to fit the width or vice versa, or it can make the element fit inside its parent or envelope its parent. The Aspect Ratio Fitter does not take layout information into account such as minimum size and preferred size.

它可以調整高度以適應寬度，反之亦然，或者它可以適應到父節點內或者包裹父節點。長寬比適配器不會考慮到布局信息，比如最小尺寸和首選尺寸。

See the reference page for?Aspect Ratio Fitter?for more information.

更多信息可以看Aspect Ratio Fitter的介紹頁面

Layout Groups

布局組

A layout group functions as a layout controller that controls the sizes and positions of its child layout elements. For example, a Horizontal Layout Group places its children next to each other, and a Grid Layout Group places its children in a grid.

布局組作為布局控制器控制子布局元素的尺寸和位置。例如，水平布局組把它的孩子一個挨著一個排列，網格布局組把它的子節點放到網格中。

A layout group doesn’t control its own size. Instead it functions as a layout element itself which may be controlled by other layout controllers or be set manually.

布局組不會控制自己的尺寸。相反，它作為布局元素本身，可以由其他布局控制器控制或手動設置。

Whatever size a layout group is allocated, it will in most cases try to allocate an appropriate amount of space for each of its child layout elements based on the minimum, preferred, and flexible sizes they reported. Layout groups can also be nested arbitrarily this way.

無論布局組分配了多少大小，在大多數情況下它會基于子布局元素提供的最小、首選、靈活尺寸來為它們分配適當的空間。布局組也可以這樣任意嵌套。

See the reference pages for?Horizontal Layout Group,?Vertical Layout Group?and?Grid Layout Group?for more information.

更多信息可以看Horizontal Layout Group，Vertical Layout Group和Grid Layout Group的介紹頁面

Driven Rect Transform properties

Since a layout controller in the auto layout system can automatically control the sizes and placement of certain UI elements, those sizes and positions should not be manually edited at the same time through the Inspector or Scene View. Such changed values would just get reset by the layout controller on the next layout calculation anyway.

因為自動布局系統的布局控制器能夠自動調整某些UI元素的尺寸和位置，所以這些尺寸和位置不應在Inspector或場景視圖中手動修改。布局控制器在下一次布局計算中就會重新這些修改過的值（所以手動修改是沒有用的）

The Rect Transform has a concept of?driven properties?to address this. For example, a Content Size Fitter which has the Horizontal Fit property set to Minimum or Preferred will drive the width of the Rect Transform on the same Game Object. The width will appear as read-only and a small info box at the top of the Rect Transform will inform that one or more properties are driven by Conten Size Fitter.

Rect Transform由driven properties（屬性驅動）來達到此效果。例如，把Content Size Fitter的Horizontal Fit屬性設置為Minimum或Preferred會驅動自身GameObject上Rect Transform的寬度。寬度會顯示為只讀，Rect Transform頂部的小信息窗會標識一個或多個屬性被Content Size Fitter驅動

The driven Rect Transforms properties have other reasons beside preventing manual editing. A layout can be changed just by changing the resolution or size of the Game View. This in turn can change the size or placement of layout elements, which changes the values of driven properties. But it wouldn’t be desirable that the Scene is marked as having unsaved changes just because the Game View was resized. To prevent this, the values of driven properties are not saved as part of the Scene and changes to them do not mark the scene as changed.

這些被驅動的Rect Transform中的屬性除了防止被手動修改還有別的原因，調整Game視圖的分辨率或尺寸布局就會改變，這些反過來會改變布局元素的尺寸和位置，這就會改變被驅動的屬性值。但是因為Game視圖大小改變就會導致Scene被標記為未保存，這不是我們想要的。為了防止這種情況發生，驅動屬性的值不會保存為Scene的一部分，對其進行更改不會將Scene標記為已更改。

Technical Details

技術細節

The auto layout system comes with certain components built-in, but it is also possible to create new components that controls layouts in custom ways. This is done by having a component implement specific interfaces which are recognized by the auto layout system.

自動布局系統附帶了一些內置組件，但是也可以創建以自定義方式控制布局的新組件。這是通過讓一個組件實現可被自動布局系統識別的特定接口來完成的。

Layout Interfaces

布局接口

A component is treated as a layout element by the auto layout system if it implements the interface?ILayoutElement.

如果一個組件實現了ILayoutElement接口，他會被自動布局系統當做布局元素

A component is expected to drive the Rect Transforms of its children if it implements the interface?ILayoutGroup.

如果一個組件實現了接口ILayoutGroup，那么它將會驅動子組件的RectTransform

A component is expected to drive its own RectTransform if it implements the interface?ILayoutSelfController.

如果一個組件實現了接口ILayoutSelfController，那么它將會驅動它自己的RectTransform

Layout Calculations

布局計算

The auto layout system evaluates and executes layouts in the following order:

自動布局系統按以下順序評估和執行布局：

The minimum, preferred, and flexible widths of layout elements are calculated by calling CalculateLayoutInputHorizontal on ILayoutElement components. This is performed in bottom-up order, where children are calculated before their parents, such that the parents may take the information in their children into account in their own calculations.

The effective widths of layout elements are calculated and set by calling SetLayoutHorizontal on ILayoutController components. This is performed in top-down order, where children are calculated after their parents, since allocation of child widths needs to be based on the full width available in the parent. After this step the Rect Transforms of the layout elements have their new widths.

The minimum, preferred, and flexible heights of layout elements are calculated by calling CalculateLayoutInputVertical on ILayoutElement components. This is performed in bottom-up order, where children are calculated before their parents, such that the parents may take the information in their children into account in their own calculations.

The effective heights of layout elements are calculated and set by calling SetLayoutVertical on ILayoutController components. This is performed in top-down order, where children are calculated after their parents, since allocation of child heights needs to be based on the full height available in the parent. After this step the Rect Transforms of the layout elements have their new heights.

通過調用ILayoutElement組件上的CalculateLayoutInputHorizontal來計算布局元素的最小、首選、靈活寬度。這是從下至上執行的。孩子節點在父親節點之前計算，這樣父親節點可以在自己的計算中考慮到孩子節點的信息。

通過調用ILayoutController組件的SetLayoutHorizontal來計算和設置布局元素的有效寬度，這是自上而下執行的，子節點在父親節點之后計算，因為子節點寬度的分配需要基于父親節點可用的全部寬度。在這一步之后，布局元素的Rect Transform就有了新的寬度。

通過調用ILayoutElement組件上的CalculateLayoutInputVertical來計算布局元素的最小、首選、靈活高度。這是從下至上執行的。孩子節點在父親節點之前計算，這樣父親節點可以在自己的計算中考慮到孩子節點的信息。

通過調用ILayoutController組件的SetLayoutVertical?來計算和設置布局元素的有效高度，這是自上而下執行的，子節點在父親節點之后計算，因為子節點寬度的分配需要基于父親節點可用的全部高度。在這一步之后，布局元素的Rect Transform就有了新的高度。

As can be seen from the above, the auto layout system evaluates widths first and then evaluates heights afterwards. Thus, calculated heights may depend on widths, but calculated widths can never depend on heights.

就像上面看到的一樣，自動布局系統先評估寬度再評估高度。因此，計算高度可能基于寬度，但是計算寬度不能基于高度。

Triggering Layout Rebuild

觸發布局重建

When a property on a component changes which can cause the current layout to no longer be valid, a layout recalculation is needed. This can be triggered using the call:

當組件上的某個屬性發生變化，可能導致當前布局不再有效時，需要重新計算布局。 這可以通過調用下面的函數觸發：

LayoutRebuilder.MarkLayoutForRebuild (transform as RectTransform);

The rebuild will not happen immediately, but at the end of the current frame, just before rendering happens. The reason it is not immediate is that this would cause layouts to be potentially rebuild many times during the same frame, which would be bad for performance.

重建不會立即發生，而是在當前幀結束時，即將發生渲染之前。 它不是直接重建的原因是這會導致布局在同一幀期間可能重建多次，這會對性能不利。

Guidelines for when a rebuild should be triggered:

應該觸發重建的準則:

• In setters for properties that can change the layout.
• In these callbacks:
• OnEnable
• OnDisable
• OnRectTransformDimensionsChange
• OnValidate (only needed in the editor, not at runtime)
• OnDidApplyAnimationProperties

• 在可以改變布局的屬性的setter中
• 在這些回調中:
• OnEnable
• OnDisable
• OnRectTransformDimensionsChange //尺寸變了
• OnValidate (only needed in the editor, not at runtime 只在編輯器需要，運行時不需要)
• OnDidApplyAnimationProperties

轉載于:https://www.cnblogs.com/SolarWings/p/7819708.html

總結

以上是生活随笔為你收集整理的Unity2017.1官方UGUI文档翻译——Auto Layout的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。