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自动调整,使此图形大小完全包覆父物件,此模式可能会超出空间调整比例 |
下面就演示一下各种调整模式下的情况:
- Width Controls Height:基于 Width 为基准,依据比例改变 Height

当 Width 改变时,Height 会依比例改变:

- Height Controls Width:基于 Height 为基准,依据比例改变 Width

当 Height 改变时,Width 会依比例改变:

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

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

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

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

Content Size Fitter 与 Aspect Ratio Fitter 的区别:
- Content Size Fitter 是通过子物件自动进行调整大小
- Aspect Ratio Fitter 是通过**数值(宽高比)**进行调整