UGUI 自动扩张的聊天气泡制作时的问题
一个聊天气泡的基本结构是一张Image作为背景,上面叠加一个文字组件,随着文本内容的增加,背景图片会跟着扩张
而想要达成这种效果,需要分别在Image和Text上添加组件
1. 对于背景的Image
需要VerticalLayoutGroup和ContentSizeFitter,这两个组件缺一不可,且ContentSizeFitter的Vectical Fit需要设置为Preferred Size
2. 对于Text
需要ContentSizeFitter调整自身大小
3. 原理探究
为什么Imgae上必须有VerticalLayoutGroup和ContentSizeFitter这两个组件?首先看下两个组件的说明
从字面上能看到,垂直布局组能够确定当前布局组自身的最小高度或偏好高度,而内容大小适配器是根据布局元素的最小或偏好值来改变宽高的
接下来查看源码
4. 先看VerticalLayoutGroup
方法都在LayoutRebuilder中调用
但改变自身属性的是CalculateLayoutInputHorizontal和CalculateLayoutInputVertical这两个方法
继续深入
此方法会“沿给定轴计算此布局元素的布局元素属性”
以上是DeepSeek的解释,其中对于combinedPadding的计算就是组件上的Padding属性
继续深入
此方法会将计算出来的属性保存下来
4. 再看ContentSizeFitter
主要改变方法为这两个
即依旧在LayoutRebuilder中调用
继续深入,主要看LayoutUtility.GetMinSize和LayoutUtility.GetPreferredSize这两个方法
可以看到,在计算最终布局属性时,传入的是e.minHeight和e.preferredHeight,而e是一个ILayoutElement,正好LayoutGroup系列的组件都是ILayoutElement
在LayoutGroup中,preferredHeight指向另一个方法
取的就是LayoutGroup自身存储的数据
5. 总结
LayoutGroup类的组件会根据子物体不断该改变其最小或偏好数据(如果是LayoutElement组件的话,值是固定不变的),然后ContentSizeFitter会获取到这些数据,进行最终的宽高计算