Unity 系列 -- UI 引擎之自动布局

UGUI 有很多的自动布局组件，如下：

Layout Element 自动布局组件
Horizontal Layout Group 水平布局组件
Vertical Layout Group 垂直布局组件
Grid Layout Group 网格布局组件
Content Size Fitter 内容大小适配器
Aspect Ratio Fitter 宽高比适配器

Layout Element 自动布局组件

属性

属性	介绍
Min Width	最小宽度
Min Height	最小高度
Preferred Width	优先宽度
Preferred Height	优先高度
Flexible Width	弹性宽度
Flexible Height	弹性高度
Layout Priority	布局优先

Layout Element 组件对子对象的分配原则如下：

首先分配 Min Width、Min Height

如果还有足够空间，分配 Preferred Width、Preferred Height

如果还有额外空间，分配 Flexible Width、Flexible Height

实例

将 Layout Element 组件的属性值设置如下：

首先分配 Min Width (300，红色部分)
如果还有足够空间，分配 Preferred Width (300~500，绿色部分)
如果还有额外空间，分配 Flexible Width ：1 (500~700，蓝色部分)

值得注意的是 Flexible，他是代表著整个大小的比例，如果 Layout 下有2个物体，分别给 Flexible 设定为 0.3 与 0.7，那比例就会变成下图：

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

Horizontal Layout Group 水平布局组件

属性

属性	说明
Padding	填充内部空间
Spacing	每个元素间隔
Child Alignment	当没有填满全部空间时，子物件对齐位置
Child Controls Size	按照子控件大小填满空间
Child Force Expand	强制控制子控件填满空间

实例

新建一个场景，新建一个Canvas，在Canvas添加一个空对象命名为Layout Controllers。
给空对象添加Horizontal Layout Group组件："AddConpent→Layout → Horizontal Layout Group"
Layout Controllers下建立5个 Button(子物件)，完成后如下，当大小改变时会自动分配子物件大小：

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

将 Padding 数值调整如图，可以看出内边距

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

给5个Button添加 Layout Element 组件，然后将它们的父物体身上的 Horizontal Layout Group 组件的 Child Force Expand Width 属性取消勾选，不强制子物件填满额外空间，而是透过 Layout Element 手动设定。
将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、设置 Min Width 为 20，空间足够的情况下，将会分配剩下的 Preferred Size (20~100 空间)，效果如下：

继续将第一个 button 设置 Flexible Width 为 1，效果如下：

如果不单让第一个 button 宽度填满剩余空间，而是让所有子游戏对象填满 ，则将 Horizontal Layout Group 的 Child Force Expand Width 勾选，效果如下：

Vertical Layout Group 垂直布局组件

效果同 Horizontal Layout Group 组件，只不过参考轴是水平轴和垂直轴的区别

Grid Layout Group 网格布局组件

属性	说明
Padding	填充内部空间
Cell Size	每个元素的宽度和高度
Spacing	每个元素间隔，上下间隔，左右间隔
Start Corner	开始排列的角落(位置)，又分为 "左上"、"右上"、"左下"、"右下"
Start Axis	开始排列的轴，"水平" 或是 "垂直" 排列
Child Alignment	当没有填满全部空间时，子物件对齐位置
Constraint	排列限制

下面就演示一下各个参数的效果：

Cell Size设置每个元素的宽度和高度

Start Corner：开始排列的角落(分别为"左上"、"右上"、"左下"、"右下")

Start Axis：开始排列的轴，"水平" 或是 "垂直" 排列

Content Size Fitter 内容大小适配器

首先，看一下这个组件的属性：

这个组件控制着父物体的自身的大小，大小取决于子物体，或者是设定的大小比例。

属性	介绍
Horizontal Fit	水平适应调整
Vertical Fit	垂直适应调整

Horizontal、Vertical Fit有三个参数：

参数	介绍
None	不调整
Min Size	根据子物件的 Min Width大小进行调整
Preferred Size	根据子物件的 Preferred 大小进行调整

接下来，通过一个实例来演示这个组件的用法：

如果我们现在有一个需求，必需要让 "父物件大小" 根据 "子物件大小" 进行缩放，完成如下：

新建场景，新建一个Canvas，Canvas下新增空物体，给空物体增加Horizontal Layout Group组件。这时如果增加 Button(子物件)，上面有提到，Horizontal Layout Group 会根据子物件的 Layout Element 进行分配子物件大小，而不会修改父物件本身的大小，如下所示：

父物件下增加 Button(子物件 )，并增加 Layout Element 组件 ，Min Width 调整为 100。
父物件增加 Content Size Fitter 组件 ，Horizontal Fit 调整为 Min Size，透过子物件 Min Width 调整父物件本身大小。

此时如果 Button 复制增加，父物件本身的大小也会跟着改变，如下所示：

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

通过上面实例，我们首先使用 Horizontal Layout Group 排列子物件，并在子物件增加 Layout Element 设置Min Width。

最后通过 Content Size Fitter 取得子物件 Layout Element 设定父物件大小。

至此父物件大小就会根据子物件大小进行缩放。

Aspect Ratio Fitter 宽高比适配器

首先，我们来看一下Aspect Ratio Fitter 长宽比装配组件的属性：

属性介绍：

属性	介绍
Aspect Mode	调整模式
Aspect Ratio	比例，此数值为宽/高

调整模式介绍：

调整模式	介绍
None	不调整
Width Controls Height	基于 Width 为基准，依据比例改变 Height
Height Controls Width	基于 Height 为基准，依据比例改变 Width
Fit In Parent	依据比例将宽高、位置、anchors自动调整，使此图形大小在父物件中完全贴齐，此模式可能不会包覆所有空间调整比例
Envelope Parent	依据比例将宽高、位置、anchors自动调整，使此图形大小完全包覆父物件，此模式可能会超出空间调整比例