NGUI UIRect组件

在Unity的NGUI（Next-Gen UI）系统中，UIRect是一个基础而强大的组件，它为UI元素提供了一个灵活的布局和定位框架。UIRect可以作为其他UI组件的容器，同时支持复杂的布局策略和变换效果。本文将探讨UIRect的作用、特性以及如何使用它来构建和管理Unity中的UI布局。

UIRect简介

UIRect是NGUI中的一个核心组件，用于定义UI元素的矩形区域。它不仅作为布局容器，还负责处理子元素的布局、对齐、边距和填充等属性。

核心特性

• 布局管理：支持自动布局，可以快速实现复杂的UI布局。
• 变换效果：可以对UI元素进行旋转、缩放等变换操作。
• 边距和填充：允许设置元素的边距和填充，以实现精确的布局控制。
• 锚点系统：通过锚点可以轻松实现UI元素的自适应布局。
• 可扩展性：可以作为其他NGUI组件的基础，如UILabel、UIButton等。

组件详解

UIRect 是 Widgets 和 Panels 的派生基础组件。它是一个抽象类，无法被创建。

所有具有可修改区域的 NGUI 元素都可以锚定到其他元素甚至 3D 对象。选择锚点时，您可以决定是希望所有边都锚定到同一对象，还是希望锚定到不同的对象。选择Unified将为您提供一个选项，而选择Advanced将为您提供每侧一个选项。

要锚定小部件，请将其移动到所需位置，选择其中一个预设，然后拖放您希望其锚定的目标。锚点的值将自动填充。

要将内部的小部件设置为始终“嵌入”在另一个小部件中，请将其设为该小部件的子部件，然后选择Unified选项。为方便起见，将自动选取目标小部件并填充初始值。然后，您可以像往常一样在场景视图中进一步调整小组件，或者通过修改选项来调整小组件。

每一侧都独立于其他侧锚定，对于每一侧，您都可以选择它将使用 3 个预设锚点中的哪一个。例如，对于“左”和“右”，它们是“左”、“居中”和“右”。如果两者都不符合您的需求，请选择“自定义”并自行设置值。

自定义(Custom) 设置为您提供了一个要使用的相对值。此值是相对于目标的维度而言的，因此，仅当您将另一个小组件或面板作为目标时，才可以选择此值。

对于左锚点或右锚点，0 表示左，1 表示右，0.5 表示中间右侧。0.25?目标宽度的 25% 从目标左侧算起。

选择Set to Current Position将简单地将锚点设置为一侧当前的位置，使偏移量为零。

如果您想要更多控制，或者您只想锚定特定的一侧，那么您应该使用高级锚点类型。使用高级模式，您可以为每个锚点指定独特的目标，有效地控制锚点将调整哪些侧，以及哪些侧将保持您离开它们。在上图中，我对滑块的拇指做了这个操作：我为顶部和底部选择了带衬垫的锚点，使它们随着滑块高度的变化而调整大小，但我将“左”和“右”保留为“无”。这意味着水平调整滑块的大小不会影响拇指。

您可以通过将 Simple Horizontal Slider 控件拖入场景中并选择其缩略图来进一步检查这一点。

最后但同样重要的是，您无需将小部件或面板指定为目标。您还可以指定您选择的随机游戏对象，以使 UI 小部件跟随它。如果你的矩形位于一个小部件上，你也可以让它自动隐藏自己，它会检测到它不再可见。由于 alpha 是累积的，因此这样做将自动影响其所有子项。

使用UIRect

创建UIRect

1. 在Unity编辑器中，创建一个新的空GameObject，并命名为"UIRect"。
2. 将UIRect组件附加到该GameObject上。

配置UIRect

在Inspector面板中，可以配置UIRect的各种属性：

• Anchors：设置UIRect的锚点，控制其相对于父元素的位置。
• Pivot：设置UIRect的中心点，用于旋转和缩放。
• Position：设置UIRect在父元素中的具体位置。
• Size：设置UIRect的尺寸。

布局子元素

将其他UI元素设置为UIRect的子对象，并使用以下属性进行布局：

• Width和Height：直接设置子元素的尺寸。
• Min Width和Max Width、Min Height和Max Height：设置子元素的最小和最大尺寸。

应用变换效果

使用UIRect的变换属性实现UI元素的动态效果：

• Rotation：设置子元素的旋转角度。
• Scale：设置子元素的缩放比例。

边距和填充

调整UIRect的边距和填充属性，以实现子元素的精确布局：

• Padding：设置子元素内部的边距。
• Margins：设置子元素相对于UIRect边缘的边距。

响应式设计

利用UIRect的锚点系统实现响应式设计，确保UI在不同分辨率下正确显示。

结语

UIRect是NGUI中一个多功能的组件，它为Unity UI提供了强大的布局和管理能力。通过本文的介绍，你应该能够了解UIRect的基本概念、特性以及使用方法。合理使用UIRect，可以提升UI的组织性、灵活性和视觉效果，为玩家带来更加舒适和直观的用户体验。

NGUI下载地址