-
需求:
一个UI窗口,窗口中有一行行的消息,消息的行数不定且每行消息的长度不定(有最小长度)。同时还有两个常驻的元素与消息条目同级。
-
分析:
-
对于上述多行的消息,首先想到的就是使用
Vertical Layout Group
组件来管理,实现多行消息的自动布局。 -
对于第二个需求(不定长消息),可以使用
Content Size Fitter
组件来实现,这个组件可以动态控制绑定GO的大小,但是如果把Content Size Fitter
挂在GO:A
上,GO:a
是A
的子物体。而子物体a
大小动态改变后,如果想同时动态改变A
,A
上必须要有Layout Group
类型的组件,换言之,这两种组件xxx Layout Group
和Content Size Fitter
常常一起使用。 -
但这又有一个问题,我们有两个常驻的元素是不需要和消息一起受Layout Group的管理的,所以又需要最后一个组件
Layout Element
的帮助。挂了Layout Element
组件并勾选Ignore Layout
后,该GO就可以无视父物体上的Layout Group
组件的管理。 -
最终结构如下
-
其中
closebutton
绑上ignore element
并勾选ignore,然后otherTip
就是最下面的提示,这里实际上和上面的需求描述有所区别,otherTip
也需要动态拓展(只是位置一直保持在下方)。然后中间的UISingleGiftTip
就是”消息“-
GiftList
作为一个Verticial Layout Group
的节点,其具体结构如下
为了防止部分消息太短了导致不美观,设置了最小宽度为300,content Size Fitter
的宽高都Preferred Size
从而实现横向和纵向的动态拉伸。
💡 有个小技巧:可以通过调整go的RectTransform
的Pivot
来控制动态拉伸的方向。例如对于这个GiftList
,设置pivot
为(0,0)
就可以让面板往右上方
动态拉伸,从而控制其整个面板处于画面的左下角 -
UISingleGiftTip
是表示每条消息的预制体,需要横向动态拉伸。
注意,因为UISingleGiftTip
中每还有”动态大小”的文字子物体,所以也要挂上一个layout Group
,所以这里选择了Horizontal Layout Group
组件(如果不需要其效果,可以对每个子物体挂上Layout Element
组件并勾选Ignore Layout
) -
xxxText
(需要动态大小的具体文字组件)
TMP
和Content Size Fitter
放一起就可以随文字长度拉伸了
-
-
-
补充:
加了content size fitter的东西在动态变化时,其父物体上的layout group可能无法及时的自动更新,导致排版出错。所以得手动在脚本中设置好数据后,调用LayoutRebuilder.ForceRebuildLayoutImmediate
方法来强制更新。而且这种content size fitter
涉及每帧检测,且一旦子物体发生改变,还会涉及父物体以及父物体的父物体(一直向上)是否需要动态变化的检测,所以性能开销还是蛮大的,使用的时候需要仔细考虑。
Unity多层动态大小UI的实现
最新推荐文章于 2024-07-28 08:41:35 发布
文章讨论了如何在一个UI窗口中实现多行消息的动态布局,包括使用VerticalLayoutGroup、ContentSizeFitter和LayoutElement组件,以及如何处理不同组件间的相互影响,特别是关于动态大小和性能开销的注意事项。
摘要由CSDN通过智能技术生成