Unity多层动态大小UI的实现

• 需求：

  一个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涉及每帧检测，且一旦子物体发生改变，还会涉及父物体以及父物体的父物体（一直向上）是否需要动态变化的检测，所以性能开销还是蛮大的，使用的时候需要仔细考虑。