目录
以下举出几个例子展示Control Child Size、Use Child Scale、Child Force Expand三个属性的实际效果;
2. 勾选 Control Child Size - Width 状态
3. 勾选 Use Child Scale - Width 状态
4. 勾选Child Force Expand - Width 状态
1. 【案例】可同时控制子物体压缩和伸长——同时勾选 ContrlChildWidth 和 ChildForceExpand
三、Layout Group和Content Size Fitter的复合使用
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的效果;