UGUI学习笔记（四）自动布局

港控/mmm° 2023-09-27 07:29 15阅读 0赞

## 一、水平布局组与垂直布局组 ##

当父物体挂载了「Horizontal Layout Group」水平布局组或「Vertical Layout Group」垂直布局组时，其下的子元素就会按照指定的规则进行排列。这里以水平布局组为例进行讲解

*  **Padding**：子元素与布局组边缘的间距
 *  **Spacing**：子元素之间的间距
 *  **Child Alignment**：子元素的对齐方式
 *  **Reverse Arrangement**：反向排列
 *  **Control Child Size**：布局组是否控制子元素的大小
 *  **Use Child Scale**：是否将子元素的缩放考虑在内（如下图中红色块x轴为1.5倍缩放）
 *  **Child Force Expand**：是否要强制子布局元素扩展以填充额外的可用空间

![4eec832656d031bb315fde4f70672224.gif][]

## 二、网格布局组 ##

「Grid Layout Group」网格布局组，相当于把前两个布局组结合起来，将子元素放到网格中。

*  **Padding**：子元素与布局组边缘的间距
 *  **Cell Size**：网格大小
 *  **Spacing**：子元素之间的间距
 *  **Start Corner**：第一个元素所在的角
 *  **Start Axis**：横向或纵向排列
 *  **Child Alignment**：子元素的对齐方式
 *  **Constraint**：约束每行/列的元素数量

![70e96383b475e7730541038372f49103.gif][]

## 三、Layout Element ##

「Layout Element」布局元素是用来配合上面几种布局组使用的，用来规定特定的子元素的特定属性。

*  **Ignore Layout**：启用后，布局系统将忽略此子元素
 *  **Min Width/Height**：设定子元素的最小宽/高度
 *  **Preferred Width/Height**：设置子元素的偏好宽/高度。如果没有设置「Flexible Width/Height」将会按照这个选项展示，但不会小于「Min Width/Height」
 *  **Flexible Width/Height**：该子元素相对于其他同级元素该选项的占比。不会小于「Preferred Width/Height」和「Min Width/Height」

![be7506db0cf185ec2635023fde419388.gif][]

需要注意的是，如果父元素的布局组设置了「Child Force Expand」选项，则其优先级会高于「Layout Element」的属性。比如「Child Force Expand」控制的子元素宽度为200，如果该子元素的「Layout Element」设置的「Preferred Width」为100，则实际仍会以200展示。

## 四、宽高比适配器 ##

「Aspect Ratio Fitter」宽高比适配器，可以用来控制自身布局元素的大小。它可以调整宽度来适应高度或反之。

*  **Aspect Mode**：外观模式。包括「Width Controls Height」根据宽度自动调整高度、「Height Controls Width」根据高度自动调整宽度、「Fit In Parent」保持在父物体内、「 Envelope Parent」保持覆盖父物体
 *  **Aspect Ratio**：宽高比

![dd1d93436eb21065a31482143515d0d8.gif][]

## 五、内容大小适配器 ##

「Content Size Fitter」内容大小适配器充当布局控制器，可用于控制其自身布局元素的大小。大小由游戏对象上布局元素组件（如Image、Text、Layout Element等）提供的最小大小或偏好大小确定。

*  **Horizontal/Vertical Fit**：设置宽度/高度根据什么条件适应。包括「Unconstrained」不根据布局元素伸展、「Min Size」根据最小值伸展、「Preferred Size」根据偏好值伸展

![b713e3d2d867d86cf198210d79fb3c84.gif][]

[4eec832656d031bb315fde4f70672224.gif]: https://img-blog.csdnimg.cn/img_convert/4eec832656d031bb315fde4f70672224.gif
[70e96383b475e7730541038372f49103.gif]: https://img-blog.csdnimg.cn/img_convert/70e96383b475e7730541038372f49103.gif
[be7506db0cf185ec2635023fde419388.gif]: https://img-blog.csdnimg.cn/img_convert/be7506db0cf185ec2635023fde419388.gif
[dd1d93436eb21065a31482143515d0d8.gif]: https://img-blog.csdnimg.cn/img_convert/dd1d93436eb21065a31482143515d0d8.gif
[b713e3d2d867d86cf198210d79fb3c84.gif]: https://img-blog.csdnimg.cn/img_convert/b713e3d2d867d86cf198210d79fb3c84.gif