填充宽度或高度的Unity UI正方形


11

我正在尝试创建一个具有以下要求的板:

  • 它应该是正方形的。
  • 它应适合可用的宽度或高度。
  • 它应在画布中居中。
  • 可以根据需要将其包装到尽可能多的其他中间画布中。

我在玩锚,但找不到任何组合。我能想到的唯一解决方案是为容器编写某种“ OnResize”脚本并以编程方式设置板子的大小。

这是原始布局。(1)是BoardCanvas。(2)是董事会。

原始布局

我希望如果屏幕变高,正方形会增大,但仍然是正方形:

在此处输入图片说明

或减少:

在此处输入图片说明

但是,尽管前面的示例捕捉到了顶部和底部边缘,但我也希望如果垂直空间变得比可用宽度高,那么正方形将根据左右边界来限制其大小:

在此处输入图片说明

Q1:有没有办法用锚/枢轴做到这一点?如果可行,我可以在BoardCanvas和Board本身之间创建中间画布。

Q2:如果是这样,我应该在哪里放置锚?我需要中间物体吗?

问题3:如果不是,编写脚本解决方案吗?画布上是否有任何要处理的OnResize?我在列表中看不到任何调整大小的事件,但也许我不知道在哪里寻找它。我觉得在每个帧上对其进行测试似乎有点过大,事件驱动似乎更好。

谢谢!

Answers:


13

最终,我找到了一种方法(在v5.0.0中进行了测试),其方式如下:

  • 不需要代码或条件来检查方向。
  • 不会用秤乱砍,也不需要参考分辨率。

在UI视频教程中,尽管在文本文档中有很好的记录,但仍然缺少很大一部分:“自动布局”系统。

自动布局是由“布局”和“布局控制器”组成的机制。布局控制器是可以附加到UI游戏对象的组件。控制器可以Rect Transform智能调整大小。

某些控制器可能会调整应用组件的对象的大小,而其他控制器可能会调整该对象的子对象的大小。

有一些内置控制器。其中之一是Aspect Ratio Fitter

首先,选择Board面板并附加一个新Aspect Ratio Fitter组件:

在此处输入图片说明

Aspect Ratio Fitter似乎旨在“维持”的对象通缉宽高比。为此,可以将对象设置为“包裹”在子对象周围(同时保持宽高比),也可以将其设置为扩展和适合其容器(同时保持宽高比)。

然后选择Fit In Parent选项,并通过将所需的宽高比设置为1来指定想要一个完美的正方形:

在此处输入图片说明

在此处输入图片说明

这样产生的布局与我想要的布局非常相似,但是我不必告诉板子尺寸。但是,它仍然知道它必须是正方形,如下所示:

在此处输入图片说明

如果我垂直缩小或扩展,则正方形跟随父对象,同时保持长宽比:

在此处输入图片说明

在此处输入图片说明

神奇地,当通过减小宽度来进行更改时,没有脚本要附加,也没有属性要更改,因为“纵横比拟合器”自动为我们做到了:

在此处输入图片说明

最后,由于我要在此处留一点余地,所以我只是放置了一个容器rect转换作为隔离符,并将容器BoardBoardCanvas移到MarginCanvas

在此处输入图片说明


啊,太棒了,这看起来是个很好的解决方案。很高兴找到您,谢谢分享!
克里斯·麦克法兰

3

这是可能的,但可能只需要一两行代码即可定义屏幕是横向还是纵向并更改几个值。

在Canvas上,需要将Canvas Scaler的“ Ui Scale Mode”设置为“ Scale with Screen Size”,并将“ Screen Match Mode”设置为“ Match Width or Height”:

在此处输入图片说明

假设使用默认的参考分辨率800x600,并且假定屏幕的视口为横向(例如Screen.width大于Screen.height),则需要将“匹配”滑块一直设置为高度1

然后,您将需要使用中间/中央锚点预设的“画布”上的图像。您还希望图像的宽度和高度与Canvas Scaler的参考分辨率的Y值匹配。

在此处输入图片说明

然后,您可以调整相机视口的大小,并在拉伸其高度以使其与视口高度匹配时看到图像保持其形状:

在此处输入图片说明


如果屏幕是纵向屏幕-并且可能需要在此处编码以根据需要进行检查和/或更改-您需要将Scaler的Match值设置为0,并更改图像的Height和Width以匹配Reference Resolution的X值。(在下面的图片中,图片的Width和Height均为800


如果要在内部放置较小的图像,则可以通过根据参考分辨率的X或Y值(取决于横向或纵向)调整宽度和高度来“缩放”图像。因此,例如,我制作了一个蓝色正方形,该正方形使用了“参考分辨率”的X值的一半(因为视口是纵向的),并且可以很好地缩放和缩小:

在此处输入图片说明

此外,如果您想要一个棋盘格之类的东西,则每个图像的X和Y位置以及高度和宽度都可以基于Canvas Scaler的Resolution的百分比来进行,以完成您想要的任何事情:

在此处输入图片说明


1
感谢克里斯的详细回答。最终,我找到了一种不需要任何代码行即可检查方向的解决方案,并且无需使用比例尺,也无需使用参考分辨率。我将发表我自己的答案,但我不想在不感谢您的努力和说明的情况下通过。
哈维·蒙特罗
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.