Unity LayoutGroup和ContentSizeFitter的效果及简单应用案例

目录

一、Unity官方介绍LayoutGroup

以下举出几个例子展示Control Child Size、Use Child Scale、Child Force Expand三个属性的实际效果；

1. 无勾选状态下

2. 勾选 Control Child Size - Width 状态

3. 勾选 Use Child Scale - Width 状态

4. 勾选Child Force Expand - Width 状态

二、参数间的组合效果、以及一些实际案例：

​​1. 【案例】可同时控制子物体压缩和伸长——同时勾选 ContrlChildWidth 和 ChildForceExpand

三、Layout Group和Content Size Fitter的复合使用

Unity官方介绍Content Size Fitter

1. 【案例】“聊天气泡1”使父物体高度跟随子物体总高度尺寸变化——同时勾选Control Child Size - Height 和 Content Size Fitter- Vertical-Preferred， 即根据子物体的总高度来调整父物体高度：

2. 【案例】“聊天气泡2”使父物体高度跟随子物体总高度尺寸变化，宽度也随子物体尺寸变化（但有最大宽度限制，即文本单行小于最大宽度时会缩小气泡）

补充说明：

---

一、Unity官方介绍LayoutGroup

Unity Horizontal、Vertical Layout Group组件

图片1 2 贴图原尺寸均为46*46

===========================分割线===============================

以下举出几个例子展示Control Child Size、Use Child Scale、Child Force Expand三个属性的实际效果；

1. 无勾选状态下

子物体会依次排序（宽度总和可以超出父物体框最大width，此时如果子物体是Image或者Text会自动计算其原尺寸计算子物体的位置和间距）

2. 勾选 Control Child Size - Width 状态

子物体图片宽度尺寸会被等比例压缩（宽度总和不会超过父物体框最大width，但如果拉大父物体width，子物体不会被等比例拉长——可压缩、不可伸长）

压缩父物体width时：

拉长父物体width时：

3. 勾选 Use Child Scale - Width 状态

在调整子物体间距时，子物体的Scale也会被会考虑进去；（如果取消勾选的话则会忽视子物体的Scale放缩只考虑其尺寸）

勾选width时：（在生成布局时兼顾考虑了子物体的Scale）

未勾选width时：（在生成布局时不考虑子物体的Scale，只关心子物体的宽、高）

4. 勾选Child Force Expand - Width 状态

会主动调整子物体间距，使子物体均匀填充整个布局（此时增加Layout的Width会使所有的子物体间距位置一起变大，但减少到小于子物体宽度之和的话布局不会被强行压缩——可伸长、不能压缩）

拉长父物体width时：

缩小父物体width时：

===========================分割线===============================

二、参数间的组合效果、以及一些实际案例：

​​1. 【案例】可同时控制子物体压缩和伸长——同时勾选 ContrlChildWidth 和 ChildForceExpand

压缩时，子物体会被等比例压缩：

拉伸时，子物体也会被等比例拉伸：

===========================分割线===============================

三、Layout Group和Content Size Fitter的复合使用

Unity官方介绍Content Size Fitter

（效果展示略）

【重要】：当父物体同时拥有 LayoutGroup 和 ContentSizeFitter 时，会自动控制子物体尺寸，子物体中无需再添加ContentSizeFitter

此时等于子物体的尺寸已经被父物体的ContentSizeFitter组件控制，如果子物体再添加会提示如下警告：

Unity提示该子物体已经被父物体的VerticalLayoutGroup控制了：

1. 【案例】“聊天气泡1”使父物体高度跟随子物体总高度尺寸变化——同时勾选Control Child Size - Height 和 Content Size Fitter- Vertical-Preferred， 即根据子物体的总高度来调整父物体高度：

父物体（黑色背景气泡图）：

子物体（文本，注意打开可换行设置使得文本高度可变）：

改变文本长度查看效果变化（宽度不变、高度影响了父物体）：

当有多个子物体文本时会自动计算总高度来调整父物体高度：

===========================分割线===============================

2. 【案例】“聊天气泡2”使父物体高度跟随子物体总高度尺寸变化，宽度也随子物体尺寸变化（但有最大宽度限制，即文本单行小于最大宽度时会缩小气泡）

实现效果：

使用三层结构来实现：

其中最外层父物体Node_Layout用来限制子物体最大宽度（自身宽度不变），以及使自身根据子物体高度变化而变化（高度随子物体变化）

第二层父物体Image 用来传递子物体高度（即子物体text高度先改变Image的高度，然后自身高度传递给第一层父物体Node_Layout）

第三层的子物体文本text无需设置（记得打开Text可换行wrap）

简单解释实现思路：

考虑第一层Node_Layout 和其子物体 Image气泡之间的关系，

1. 子物体width 不影响父物体（父物体宽度固定），故ContentSize-Width选Unconstrained；

子物体width可压缩不可伸长（子物体过长时不会超出父物体width），故勾选ControlChildSize-Width；

2. 子物体height 影响父物体（父物体高度随子物体改变），故ContentSize-Height 选Preferred、且打开父物体ControlChildSize-Height；

然后考虑第二层Image气泡和Text之间的关系，

1. 考虑到子物体文本的width 和 height 均会影响父物体Image气泡的尺寸，故在第一层Node_Layout已经添加了ContentSizeFitter的情况下（效果等同于Image气泡自身也有一个ContentSizeFitter接受追踪其子物体Text带来的尺寸影响[1]），故Image气泡的ControlChildSize-Width和ControlChildSize-Height 全部勾选。

补充说明：

[1] 笔者未验证该说法的正确性，此处为经验性结论，即：父物体同时拥有LayoutGroup和ContentSizeFitter组件时，其子物体若也有LayoutGroup，默认也会拥有ContentSizeFitter的效果；