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的效果;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值