前端之家

  1. 首页
  2. 问答

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

• 问答

我正在制作一个简单的自动布局 UI，其中包含一个带有背景图像和三行文本的面板。

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

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

这一切都按原样运行。

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

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

相反，如果我将图像添加到面板的新子项，则它会作为子项包含在 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 添加到面板会从框架和布局中分离出背景。

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

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

zhengxyx 回答：Unity UI - 如何制作“复合”布局组以在同一位置组合多个图像？

试试这个

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

感谢@Art Zolina III，关键是将第二个图像放在内容大小调整器的唯一子节点上，并在同一个子节点上使用垂直布局组 (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 的切片边界似乎受 Pixels Per Unit Multiplier 的影响，这意味着您可以使边界比视觉上应有的更小，但增加乘数以仍然完整呈现所有边距（但分辨率更高）。

c#layoutunity-componentsunity3duser-interface
本文链接：https://www.f2er.com/709992.html

大家都在问