Unity UI - 如何制作一个 "Composite" 布局组以在同一位置组合多个图像？

Question

我正在制作一个简单的自动布局 UI，它由一个带有背景图片和三行文本的面板组成。

首先，我在顶级“面板”游戏对象中有一个垂直布局组组件，设置为控制子高度。它还有一个 Content Size Fitter，为 Vertical Fit 设置了“Preferred”。 Panel 对象有一个背景图像，并且有几个代表视图中行的子对象：

Panel [Vertical Layout Group] [Image] [Content Size Fitter]
  - Text 1
  - Text 2
  - Text 3

一切正常。

出现我的问题是因为我希望面板背景由两个图像组成 - 一个是填充背景图像，另一个是适合的大部分透明“框架”图像在背景上添加细节，只添加到边缘和角落。两张图片都被切片了。

不幸的是，Unity 不允许在单个游戏对象上使用多个图像组件，因此这使我无法简单地将两个图像添加到面板中。如果这行得通，那就足够了。

相反，如果我将图像添加到 Panel 的新子项，那么它将作为子项包含在 VLG 中，并且框架显示为新的第一行，即垂直布局的一部分。不是我想要的：

Panel [VLG] [Image:Background] [Content Size Fitter]
  - Frame [Image:Frame]
  - Text 1
  - Text 2
  - Text 3

我尝试将两个图像作为面板的两个子项移动，然后添加第三个子项作为“布局”，将原始子项作为其子项，使用 VLG（将其从面板中删除）：

Panel [Content Size Fitter]
  - Background [Image: Background]
  - Frame [Image:Frame]
  - Layout [VLG]
    - Text 1
    - Text 2
    - Text 3

不幸的是，这似乎也不起作用，因为如果面板不包含某种布局组，则两个图像的尺寸不会由面板驱动。但是很明显，当我真的想要叠加所有三个时，将 VLG 添加到 Panel 会从 Frame 和 Layout 中分离出背景。

有没有办法创建一个“复合”布局组，使子项相互组合，而不是水平或垂直组合？我查看了 UnityEngine.UI.LayoutGroup 抽象基础 class 的源代码，想知道我是否可以创建类似于 VLG 的东西，但只是通过模拟 UnityEngine.UI.VerticalLayoutGroup 但返回每个子位置的 Y 值相同。这行得通吗？

我知道我可以手动将两张图片合二为一并只使用一张图片 - 但是我想更好地了解在一般情况下我如何能够做到这一点。此外，当图像之间的切片尺寸不同时，您可以使用运行时间合成获得更有趣的结果。

Answer 1

试试这个

Panel  [Image:Background] [Content Size Fitter]
  - Frame [VLG] [Image:Frame]
    - Text 1
    - Text 2
    - Text 3

Answer 2

感谢@Art Zolina III，关键是将第二张图片放在 Content Size Fitter 的唯一子项上，并在同一个子项上使用垂直布局组 (VLG) 将最终的子项传回到顶级对象 (Panel)。

Panel [Image:Background, sliced] 
      [Content Size Fitter: Horiz Preferred, Vert Preferred]
      [Vertical Layout Group: Control Child Width, Height]
  - Frame [Image:Framing, sliced] 
          [VLG: Control Child Width, Height; Child Force Expand Width]
    - Text 1 [TextMeshPro Text]
    - Text 2 [TextMeshPro Text]
    - Text 3 [TextMeshPro Text]

请注意，切片图像的首选高度是顶部和底部边框高度的总和，这意味着它不能轻易缩小到低于该高度。这把我绊倒了，因为我的图像有一个 900 像素的组合垂直边框 space，这让我误以为我的布局没有缩小“以适应”。一旦我使用顶部和底部边距较小的切片图像，面板布局似乎可以正常工作。

此外，Sprite 的切片边界似乎受到每单位像素乘数的影响，这意味着您可以使边界小于视觉上应有的边界，但增加乘数仍可呈现所有边距完整（但分辨率更高）。

Unity UI - 如何制作一个 "Composite" 布局组以在同一位置组合多个图像？

Unity UI - How to make a "Composite" Layout Group to combine multiple images in the same location?

c#

layout

user-interface

unity3d

unity-components