Unity(2022.3.41LTS) - UI详细介绍- Panel(面板)和RectTransform组件

零. 简介

在 Unity 中，Panel（面板）是一种常用的 UI 容器组件，用于组织和管理其他 UI 元素。

一、功能与作用

容器功能：Panel 主要作为一个容器，用于容纳其他 UI 元素，如按钮、文本、图像等。它可以帮助你组织和布局 UI，使界面更加清晰和易于管理。
背景和装饰：Panel 可以设置背景颜色、图像或材质，为其内部的 UI 元素提供一个背景或装饰效果。这可以增强 UI 的视觉吸引力，使其更加美观和专业。
裁剪和遮罩：通过设置 Panel 的裁剪模式，可以实现对其内部 UI 元素的裁剪效果。例如，可以使用矩形裁剪或圆形裁剪来显示特定形状的区域，或者使用遮罩效果来隐藏部分 UI 元素。
层级管理：Panel 可以帮助你管理 UI 元素的层级关系。通过将不同的 UI 元素放置在不同的 Panel 中，可以轻松地控制它们的显示顺序和遮挡关系。

二、属性与设置

Rect Transform：Panel 具有 Rect Transform（矩形变换）组件，用于控制其大小、位置和旋转。你可以通过调整 Rect Transform 的属性来设置 Panel 的尺寸和在屏幕上的位置。
Image：Panel 可以设置一个背景图像，可以是 Sprite（精灵图）或 Texture2D（纹理）。通过设置 Image 组件的属性，可以调整图像的颜色、透明度、平铺模式等。
Canvas Group：Panel 通常会包含一个 Canvas Group（画布组）组件。Canvas Group 可以用于控制 Panel 及其内部 UI 元素的整体透明度、交互性和是否响应射线检测等属性。
Graphic Raycaster：如果 Panel 需要接收交互事件，如鼠标点击或触摸，它需要包含一个 Graphic Raycaster（图形射线投射器）组件。Graphic Raycaster 负责检测 UI 元素是否被点击，并将事件传递给相应的处理程序。

三、使用方法

创建 Panel：在 Unity 中，可以通过 GameObject -> UI -> Panel 菜单创建一个新的 Panel。创建后，你可以在 Inspector 窗口中调整 Panel 的属性和设置。
添加 UI 元素：将其他 UI 元素（如按钮、文本、图像等）作为 Panel 的子对象添加到 Panel 中。你可以通过拖放 UI 元素到 Panel 上或者在 Hierarchy 视图中手动创建子对象的方式来添加 UI 元素。
布局和排列：使用 Unity 的 UI 布局系统（如 Horizontal Layout Group、Vertical Layout Group、Grid Layout Group 等）可以自动排列 Panel 内部的 UI 元素，使其具有良好的布局和对齐效果。
响应交互事件：如果 Panel 或其内部的 UI 元素需要响应交互事件，可以为它们添加相应的事件处理程序。例如，可以使用 Unity 的事件系统（Event System）来检测按钮的点击事件，并执行特定的函数。

四、优化和注意事项

性能优化：如果 Panel 内部包含大量的 UI 元素，可能会对性能产生一定的影响。为了提高性能，可以考虑使用合批技术（Batching）来减少绘制调用次数。同时，避免在每一帧都更新 Panel 的属性和内部 UI 元素，以减少不必要的计算。
层级管理：注意 Panel 之间的层级关系，避免出现遮挡或显示异常的情况。可以使用 Rect Transform 的 Z 轴位置或 UI 元素的 Order in Layer 属性来调整层级。
响应范围：确保 Panel 的响应范围正确设置，以便用户能够准确地与 Panel 及其内部的 UI 元素进行交互。可以通过调整 Rect Transform 的大小和 Graphic Raycaster 的设置来控制响应范围。
可扩展性：在设计 UI 时，考虑 Panel 的可扩展性和灵活性。如果可能，尽量使用动态布局和自适应大小的方式，以便在不同的屏幕尺寸和分辨率下都能正常显示。

五.面板总结

Panel 在 Unity 的 UI 系统中起着重要的作用，它可以作为一个容器来组织和管理其他 UI 元素，提供背景和装饰效果，实现裁剪和遮罩，以及管理 UI 元素的层级关系。通过合理地使用 Panel，可以创建出美观、易用且性能良好的用户界面。

六. RectTransform

在 Unity 中，RectTransform 是用于控制 UI 元素位置、大小和旋转的组件。以下是对 RectTransform 组件的详细介绍：

A、主要属性

Anchor Presets（锚点预设）：- RectTransform 通过设置锚点（Anchors）来确定 UI 元素在父容器中的相对位置。锚点由四个点组成，分别对应 UI 元素的四个角与父容器的相对位置。- Anchor Presets 提供了一些常见的锚点预设，如左上角对齐、中心对齐、拉伸等，可以快速设置锚点位置。- 通过调整锚点，可以使 UI 元素在不同屏幕尺寸下自适应布局。
Position（位置）：- 表示 UI 元素在父容器中的位置。可以以像素为单位设置绝对位置，也可以通过设置相对于锚点的偏移量来确定相对位置。- 如果锚点设置为拉伸模式，Position 的值会根据锚点的拉伸比例进行计算。
Size Delta（大小差值）：- 用于设置 UI 元素的宽度和高度相对于锚点的差值。例如，如果 Size Delta 的 X 值为 100，Y 值为 50，且锚点设置为中心对齐，那么 UI 元素的宽度将比父容器宽度小 100 像素，高度将比父容器高度小 50 像素。- 如果锚点设置为拉伸模式，Size Delta 的值会根据锚点的拉伸比例进行调整。
Pivot（轴心点）：- 决定了 UI 元素的旋转和缩放中心。取值范围为 0 到 1，表示在 UI 元素的局部坐标系中的位置。例如，(0.5, 0.5) 表示 UI 元素的中心。- 调整轴心点可以实现不同的旋转和缩放效果。

B、布局控制

自动布局：- RectTransform 可以与 Unity 的自动布局系统（如 Horizontal Layout Group、Vertical Layout Group、Grid Layout Group 等）结合使用，实现自动排列和调整 UI 元素的位置和大小。- 通过设置这些布局组件的属性，可以轻松创建响应式布局，适应不同的屏幕尺寸和分辨率。
锚点和拉伸：- 根据锚点的设置，UI 元素可以在父容器中进行拉伸或保持固定大小。例如，如果锚点设置为四个角都与父容器对齐，那么 UI 元素将随着父容器的大小变化而拉伸。- 可以通过调整 Size Delta 和锚点的组合来实现不同的布局效果。

C、代码控制

通过脚本可以动态地修改 RectTransform 的属性，以实现 UI 元素的动态布局和动画效果。例如，可以使用以下代码在运行时更改 UI 元素的位置和大小：

using UnityEngine;
using UnityEngine.UI;

public class RectTransformController : MonoBehaviour
{
    public RectTransform myRectTransform;

    void Start()
    {
        // 设置位置
        myRectTransform.anchoredPosition = new Vector2(100, 50);

        // 设置大小
        myRectTransform.sizeDelta = new Vector2(200, 100);
    }
}