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

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

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

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

二、网格布局组

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

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

三、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」

需要注意的是，如果父元素的布局组设置了「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：宽高比

五、内容大小适配器

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

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