Unity UGUI 原理篇（五）：Auto Layout 自动布局

Window 7

Unity 5.2.4

Auto Layout System 是基于 Rect Transform Layout System 之上的系统，自动调整一个或多个的元素大小、位置、间格，又分为 Layout Controllers(父物件) 与 Layout Elements(子物件) 两部分，一个简单的 Auto Layout 架构如下 (此处介绍理论，实作留到后面)

Layout Element (子物件)

点选UI后，可以在 Inspector 最下方切换为 Layout Properties 看到资讯

Layout Controllers 透过不同的佈局方式，取得 Layout Element size 分配子物件，基本原则如下

首先分配 Minimum Size

如果还有足够空间，分配 Preferred Size

如果还有额外空间，分配 Flexible Size

从以下图片可以看出图片宽度的增长方式 (此处介绍理论，实作留到后面)

首先分配 Minimum Size (300，红色部分)

如果还有足够空间，分配 Preferred Size (300~500，绿色部分)

如果还有额外空间，分配 Flexible Size：1 (500~700，蓝色部分)

比较特别的是 Flexible，他是代表著整个大小的比例，如果 Layout 下有2个物体，分别给 Flexible 设定为 0.3 与 0.7，那比例就会变成下图 (3:7)

另外要注意的是，Text、Image Component 会根据内容大小自动分配 Preferred Size

Layout Controllers (父物件)

Layout Group

不会控制 Layout Controllers (父物件)自身大小，而是控制子物件大小与位置，在大多数情况下，根据每个元素的 minimum、preferred、flexible 大小分配适当的空间，layout group 之间也可以嵌套，又分为 Horizontal(水平)、Vertical(垂直)、Grid(格状) 3种

Horizontal Layout Group

水平方向(Width) 排列子物件

组件位置：Unity Menu Item → Component → Layout → Horizontal Layout Group

Padding：填充内部空间

Spacing：每个元素间格

Child Alignment：当没有填满全部空间时，子物件对齐位置

Child Force Expand：强制控制子物件填满空间

透过实例理解各参数：

A.开新 Scene

Unity Menu Item → File → New Scene

B.新增一个 Canvas

Unity Menu Item → GameObject → UI → Canvas

C.Canvas 下新增空物件，做为 Layout Controllers (以下简称父物件)

D.父物件增加 Horizontal Layout Group Component

Unity Menu Item → Component → Layout → Horizontal Layout Group

E.父物件下建立5个 Button(子物件)，完成后如下，当大小改变时会自动分配子物件大小

F.此时在 Button 的 Rect Transform Component 就不能进行调整，因为我们已经透过 Horizontal Layout Group 进行分配空间，在 Rect Transform 会显示目前被哪个 Layout Group 控制

G.将 Padding 数值调整如图，可以看出填充区域

H.将 Spacing 数值调整如图，可以看出元素区间

I.接下来我们将5个 Button 增加 Layout Element Component 覆盖预设大小，用于手动设定每个元素的大小

组件位置：Unity Menu Item → Component → Layout → Layout Element

J.此时将 Horizontal Layout Group 的 Child Force Expand Width 取消勾选，不强制子物件填满额外空间，而是透过 Layout Element 手动设定

K.这裡使用几种不同的设定，来理解 Horizontal Layout Group 是怎麽取得 Layout Element size 分配子物件

■ 复习一下子物件大小分配方式，如果不清楚请回去上面 Layout Elements 部分

首先分配 Minimum Size

如果还有足够空间，分配 Preferred Size

如果还有额外空间，分配 Flexible Size

■ 将5个 Button 的 Layout Element Min Width 分别改为 20、30、40、50、60，此时可以看出每个 Button 宽度分佈，改变父物件大小时子物件大小并不会改变，因为只有分配 Min Width，并不会分配额外有效空间

此时改变 Horizontal Layout Group 的 Child Alignment，可以看出元素对齐

父物件 Layout Properties Min Width = 5个按钮宽(20 30 40 50 60=200) Spacing(40) Padding Left、Right(20) = 260

■ 现在将第1个 Button 的 Layout Element 数值调整如图

这边设定 Preferred Width 为 100

1.首先分配 Minimum Size(20)

2.空间足够的情况下，将会分配剩下的 Preferred Size (20~100 空间)，如下所示

■ 现在将第1个 Button 的 Layout Element 数值调整如图

这边设定 Flexible Width 为 1

1.首先分配 Minimum Size(20)

2.如果还有足够空间，将会分配剩下的 Preferred Size (20~100 空间)

3.如果还有额外空间，分配剩下 Flexible Size，如下所示

■ 现在将 Horizontal Layout Group 的 Child Force Expand Width 勾选，让子物件强制填满

1.首先分配 Minimum Size(20)

2.如果还有足够空间，将会分配剩下的 Preferred Size (20~100 空间)

3.如果还有额外空间，分配剩下元素 Flexible Size 与 Child Force Expand Width

结论：

上面我们看到，所有元素会先被分配 Minimum Size，接下来还有足够空间，将会分配剩下的 Preferred Size，最后才是 Flexible Size 与 Child Force Expand Width

至此我们了解到 Horizontal Layout Group 是怎麽取得 Layout Element size 分配子物件

垂直方向(Height) 排列子物件，与 Horizontal Layout Group 只差在水平或是垂直，这边不在赘述

组件位置：Unity Menu Item → Component → Layout → Vertical Layout Group

网格方式排列子物件

组件位置：Unity Menu Item → Component → Layout → Grid Layout Group

Padding：填充内部空间

Cell Size：每个元素的宽高

Spacing：每个元素间格

Start Corner：开始排列的角落(位置)，又分为 “左上”、”右上”、”左下”、”右下”，请仔细看元素数字

Start Axis：”水平” 或是 “垂直” 排列，请仔细看元素数字

Child Alignment：当没有填满全部空间时，子物件对齐位置

Constraint：排列限制

Flexible：自动根据大小弹性排列

Fixed Column Count：限制排列 “行数(直)”

Fixed Row Count：限制排列 “列数(横)”

控制著 Layout Controllers 自身大小，大小取决于子物件，或是设定的大小比例，又分为 Content Size Fitter 与 Aspect Ratio Fitter

Content Size Fitter

控制著 Layout Controllers (父物件)自身大小，大小取决于子物件的 Minimum 或是 Preferred 大小，能透过 Pivot 改变缩放方向

组件位置：Unity Menu Item → Component → Layout → Content Size Fitter

Horizontal、Vertical Fit：水平、垂直 适应调整

None 不调整

Min Size 根据子物件的 Minimum 大小进行调整

Preferred Size 根据子物件的 Preferred 大小进行调整

透过实例理解：

如果我们现在有一个需求，必需要让 “父物件大小” 根据 “子物件大小” 进行缩放，完成如下 (方便明显看出父物件大小，增加黑色外框)

A.开新 Scene

Unity Menu Item → File → New Scene

B.新增一个 Canvas

Unity Menu Item → GameObject → UI → Canvas

C.Canvas 下新增空物件，做为 Layout Controllers (以下简称父物件)

D.父物件增加 Horizontal Layout Group Component

Unity Menu Item → Component → Layout → Horizontal Layout Group

这时如果增加 Button(子物件)，上面有提到，Horizontal Layout Group 会根据子物件的 Layout Element 进行分配子物件大小，而不会修改父物件本身的大小，如下所示 (方便明显看出父物件大小，增加黑色外框)

E.父物件下增加 Button(子物件)，并增加 Layout Element Component 覆盖预设大小，Minimum Width 调整为 100

组件位置：Unity Menu Item → Component → Layout → Layout Element

F.父物件增加 Content Size Fitter Component，Horizontal Fit 调整为 Min Size，透过子物件 Minimum Width 调整父物件本身大小 (Horizontal 方向其实就是取得子物件 Width)

G.此时如果 Button 複製增加，父物件本身的大小也会跟著改变，如下所示

H.调整父物件的 pivot，可以控制缩放方向，如下所示

I.通过上面实例，我们首先使用 Horizontal Layout Group 排列子物件，并在子物件增加 Layout Element 覆盖预设大小，最后透过 Content Size Fitter 取得子物件 Layout Element 设定父物件大小，至此父物件大小就会根据子物件大小进行缩放

控制著 Layout Controllers 自身大小，按照物件宽高比调整大小，能透过 pivot 改变缩放方向

组件位置：Unity Menu Item → Component → Layout → Aspect Ratio Fitter

Aspect Mode：调整模式

None：不调整

Width Controls Height：

基于 Width 为基准，依据比例改变 Height

当 Width 改变时，Height 会依比例改变

Height Controls Width：

基于 Height 为基准，依据比例改变 Width

当 Height 改变时，Width 会依比例改变

Fit In Parent：依据比例将 宽高、位置、anchors自动调整，使此图形大小在父物件中完全贴齐，此模式可能不会包覆所有空间

调整比例 (方便明显看出父物件增加黑底)

调整父物件大小，物体会依据比例贴齐父物件

Envelope Parent：依据比例将 宽高、位置、anchors自动调整，使此图形大小完全包覆父物件，此模式可能会超出空间

调整比例 (方便明显看出父物件增加黑框)

调整父物件大小，物体会依据比例包覆父物件

Aspect Ratio：比例，此数值为 宽/高

差别：

Content Size Fitter 是透过子物件自动进行调整大小

Aspect Ratio Fitter 是透过数值(宽高比)进行调整

后记

Auto Layout System 可以快速、方便的排列多个 UI，当大小改变时会自动调整内容，也能应用在多层崁套下，在日后调整与修改上也是非常方便与直觉，是 UI 系统中必学的功能之一 !!