Version: 5.6
设计用于多种分辨率的 UI
创建 World Space UI

使 UI 元素适应其内容的大小

通常,在使用矩形变换定位 UI 元素时,应手动指定其位置和大小(可选择性地包括使用父矩形变换进行拉伸的行为)。

但是,有时可能希望自动调整矩形的大小来适应 UI 元素的内容。为此,可添加名为内容大小适配器 (Content Size Fitter) 的组件。

适应文本大小

为了使带有文本组件的矩形变换适应文本内容,请将内容大小适配器组件添加到具有文本组件的同一游戏对象。然后将 Horizontal Fit 和 Vertical Fit 下拉选单设置为 Preferred 设置。

工作原理

此处的工作原理是文本组件充当布局元素,可提供有关最小大小和偏好大小的大小信息。在手动布局中,不会使用此信息。内容大小适配器是一种布局控制器,可监听布局元素提供的布局信息,并根据此信息控制矩形变换的大小。

注意轴心

When UI elements are automatically resized to fit their content, you should pay extra attention to the pivot of the Rect Transform. The pivot will stay in place when the element is resized, so by setting the pivot position you can control in which direaction the element will expand or shrink. For example, if the pivot is in the center, then the element will expand equally in all directions, and if the pivot is in the upper left corner, then the element will expand to the right and down.

适应具有子文本的 UI 元素的大小

如果 UI 元素(比如按钮)具有一个背景图像和一个带有文本组件的子游戏对象,这种情况下可能会希望整个 UI 元素适应文本的大小 - 可能还需要一些填充。

In order to do this, first add a Horizontal Layout Group to the UI element, then add a Content Size Fitter too. Set the Horizontal Fit, the Vertical Fit, ot both to the Preferred setting. You can add and tweak padding using the padding property in the Horizontal Layout Group.

为什么使用水平布局组?其实,也可以是垂直布局组 (Vertical Layout Group),只要只有一个子项,两者的结果就是相同的。

工作原理

The Horizontal (or Vertical) Layout Group functions both as a Layout Controller and as a Layout Element. First it listens to the layout information provided by the children in the group - in this case the child Text. Then it determines how large the group must be (at minimum, and preferrably) in order to be able to contain all the children, and it functions as a Layout Element that provides this information about its minimum and preferred size.

内容大小适配器会监听同一游戏对象上的任何布局元素提供的布局信息 - 在本示例中由水平(或垂直)布局组提供。根据设置,内容大小适配器随后会基于此信息控制矩形变换的大小。

一旦设置了矩形变换的大小,水平(或垂直)布局组将确保根据可用空间来定位其子项并调整大小。请参阅有关水平布局组的页面,详细了解如何控制其子项的位置和大小。

使布局组的子项适应各自的大小

如果有一个布局组(水平或垂直)并希望该组中的每个 UI 元素都适应其各自的内容,该怎么做?

这种情况下不能为每个子项添加内容大小适配器。原因是内容大小适配器想要控制自己的矩形变换,但父布局组也想要控制子矩形变换。因此会产生冲突,结果是不明确的行为。

但是,也没有必要这样做。父布局组已经可以使每个子项适应内容的大小。需要做的是禁用布局组上的 Child Force Expand 开关。如果子项本身也是布局组,可能还需要禁用这些子项上的 Child Force Expand 开关。

一旦子项不再以灵活宽度进行扩展,便可使用 Child Alignment 设置在布局组中指定子项的对齐方式。

如果希望某些子项进行扩展以便填充额外的可用空间,而其他子项不扩展,该怎么办?向需要扩展的子项添加布局元素组件并在这些布局元素上启用 Flexible Width 或 Flexible Height 属性,即可轻松控制此行为。父布局组仍应禁用 Child Force Expand 开关,否则所有子项将灵活扩展。

工作原理

一个游戏对象可以有多个组件,每个组件都提供有关最小大小、偏好大小和灵活大小的布局信息。优先级系统将确定哪些值优先于其他值。布局元素组件的优先级高于文本、图像和布局组组件,因此可用于覆盖它们提供的任何布局信息值。

布局组监听子项提供的布局信息时,还会考虑覆盖的灵活大小。然后,在控制子项的大小时,布局组不会让子项的大小超过偏好大小。但是,如果布局组启用了 Child Force Expand 选项,则始终会使所有子项的灵活大小至少为 1。

更多信息

本页面介绍了一些常见用例的解决方案。如需了解自动布局系统的更深入说明,请参阅 UI 自动布局页面。

设计用于多种分辨率的 UI
创建 World Space UI