问题描述
我正在制作一个简单的自动布局 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 值每个子位置。这行得通吗?
我知道我可以手动将两个图像合并为一个,然后只使用一个图像 - 但是我想更好地了解在一般情况下我如何能够做到这一点。此外,当图像之间的切片尺寸不同时,您可以通过运行时合成获得更有趣的结果。
解决方法
试试这个
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 的影响,这意味着您可以使边界比视觉上应有的更小,但增加乘数以仍然完整呈现所有边距(但分辨率更高)。