1

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

首先，我在顶级“面板”游戏对象中有一个垂直布局组组件，设置为控制子高度。它还有一个内容大小调整器，其中为垂直适合设置了“首选”。Panel 对象有一个背景图像，并且有几个子对象代表视图中的行：

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

这一切都按原样运行。

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

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

相反，如果我将图像添加到 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抽象基类的源代码，想知道是否可以创建类似于 VLG 的东西，但只是通过模拟UnityEngine.UI.VerticalLayoutGroup但为每个子位置返回相同的 Y 值将所有子级放在同一位置。这行得通吗？

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

4

2 回答 2

1

试试这个

Panel  [Image:Background] [Content Size Fitter]
  - Frame [VLG] [Image:Frame]
    - Text 1
    - Text 2
    - Text 3
于 2021-03-23T09:07:12.660 回答
0

感谢@Art Zolina III，关键是将第二个图像放在 Content Size Fitter 的唯一孩子上，并在同一个孩子上使用垂直布局组 (VLG) 将最终的孩子传播回顶层对象（面板）。

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 像素的组合垂直边框空间，这让我误以为我的布局没有缩小“以适应”。一旦我使用了具有较小顶部和底部边距的切片图像，面板布局似乎可以正常工作。

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

于 2021-07-11T06:27:03.093 回答