Unity UGUI系列七 Layout、Content Siz

参考
【Unity3D-UGUI原理篇】（五）Auto Layout 自动布局
Unity中UI的自动布局

image.png

一、Layout Element

https://docs.unity.cn/cn/2019.4/Manual/script-LayoutElement.html

image.png

• Ignore Layout 启用后，布局系统将忽略此布局元素。
• Min Width 此布局元素应具有的最小宽度。
• Min Height 此布局元素应具有的最小高度。
• Preferred Width 在分配额外可用宽度之前，此布局元素应具有的偏好宽度。
• Preferred Height 在分配额外可用高度之前，此布局元素应具有的偏好高度。
• Flexible Width 此布局元素应相对于其同级而填充的额外可用宽度的相对量。
• Flexible Height 此布局元素应相对于其同级而填充的额外可用高度的相对量。
• Layout Priority 此组件的布局优先级。如果一个游戏对象有一个以上包含布局属性的组件（例如，一个 Image 组件和一个 LayoutElement 组件），则布局系统将使用 Layout Priority 值最高的组件中的属性值。如果这些组件具有相同的 Layout Priority 值，则布局系统将使用每个属性的最大值，而不管该属性来自哪个组件。

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

首先分配 Min Width、Min Height
如果还有足够空间，分配 Preferred Width、Preferred Height
如果还有额外空间，分配 Flexible Width、Flexible Height

从以下图片可以看出图片宽度的增长方式：

image.png
image.png

首先分配 Min Width (300，红色部分)
如果还有足够空间，分配 Preferred Width (300~500，绿色部分)
如果还有额外空间，分配 Flexible Width ：1 (500~700，蓝色部分)
比较特别的是 Flexible，他是代表著整个大小的比例，如果 Layout 下有2个物体，分别给 Flexible 设定为 0.3 与 0.7，那比例就会变成下图 ：

image.png

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

二、Horizontal/Vertical Layout Group

参考
https://docs.unity.cn/cn/2019.4/Manual/script-HorizontalLayoutGroup.html

image.png

• Padding 布局组边缘内的填充。
• Spacing 布局元素之间的间距。
• Child Alignment 用于子布局元素的对齐方式（如果这些元素未填满可用空间）。
• Control Child Size 布局组是否控制其子布局元素的宽度和高度。
• Use Child Scale 在为元素调整大小和进行布局时，布局组是否考虑其子布局元素的缩放。Width 和 Height 对应于每个子布局元素的 Rect Transform 组件中的 Scale > X 和 Scale > Y 值。
• Child Force Expand 是否要强制子布局元素扩展以填充额外的可用空间。

1.Child Alignment

image.png

Upper,Middle,Lower可以理解为垂直方向上的是否居中

2.Control Child Size

勾上后，父容器变化时，这些Button的宽高会改变

3.Use Child Scale

image.png

如图，把左侧按钮的Scale.x改为2，如果不勾选Use Child Scale，就是布局组不考虑子元素的缩放，那么就叠到一块了。勾上后，则会自动计算Scale增加的宽度，如图：

image.png

4.Child Force Expand

• 父对象>子元素，子元素自动水平排版方式填充满父对象的空间，如果无法填充满则使用空白填充，子元素大小不变。
• 父对象<=子元素，子元素自动水平排版，子元素大小不变.

5.实例

Unity UI布局（Layout）与布局元素（Layout Element）
给PanelUp和PanelDown添加布局元素，并分别设置Flexible Height为2和1，这个Flexible Height就是用于设置控件显示比例的

image.png

三、Grid Layout Group

https://docs.unity.cn/cn/2019.4/Manual/script-GridLayoutGroup.html

image.png

• Padding 布局组边缘内的填充。
• Cell Size 要用于组内每个布局元素的大小。
• Spacing 布局元素之间的间距。
• Start Corner 第一个元素所在的角。
• Start Axis 沿哪个主轴放置元素。Horizontal 将在填充整行后才开始新行。Vertical 将在填充整列后才开始新列。
• Child Alignment 用于布局元素的对齐方式（如果这些元素未填满可用空间）。
• Constraint 将网格约束为固定数量的行或列以便支持自动布局系统。

1.Cell Size

与其他布局组不同，网格布局组会忽略其包含的布局元素的最小大小、偏好大小和灵活大小属性，而是为所有这些元素分配固定大小，此大小则由网格布局组本身的 Cell Size 属性进行定义。

更改Cell Size会影响Button大小

2.Start Corner

image.png

可以设定如图这种元素，观察不同的Start Corner对应起始位置。

3.Start Axis

image.png

四、Content Size Fitter

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

如果我们现在有一个需求，必需要让 “父物件大小” 根据 “子物件大小” 进行缩放:

1.新建场景，新建一个Canvas，Canvas下新增空物体，给空物体增加Horizontal Layout Group组件。

这时如果增加 Button(子物件)，上面有提到，Horizontal Layout Group 会根据子物件的 Layout Element 进行分配子物件大小，而不会修改父物件本身的大小

2.父物件下增加 Button(子物件)，并增加 Layout Element组件，Min Width 调整为 100。

3.父物件增加 Content Size Fitter组件，Horizontal Fit 调整为 Min Size，透过子物件 Min Width 调整父物件本身大小

image.png

Horizontal、Vertical Fit有三个参数：

• None 不调整
• Min Size 根据子物件的 Min Width大小进行调整
• Preferred Size 根据子物件的 Preferred 大小进行调整

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

5.调整父物件的 pivot，可以控制缩放方向

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

五、Aspect Ratio Fitter 长宽比装配组件

image.png

• Aspect Mode 调整模式
• Aspect Ratio 比例，此数值为 宽/高

1.Aspect Mode

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

2.Width Controls Height：基于 Width 为基准，依据比例改变 Height

20180704150848186.gif

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

20180704151008246.gif

3.Height Controls Width：基于 Height 为基准，依据比例改变 Width

20180704151014444.gif

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

20180704151041640.gif

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

20180704151048629.gif

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

20180704151103337.gif

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

20180704151122485.gif

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

20180704151129262.gif

6.Content Size Fitter 与 Aspect Ratio Fitter的区别

• Content Size Fitter 是通过子物件自动进行调整大小
• Aspect Ratio Fitter 是通过数值(宽高比)进行调整