Unity知识点快速回顾UI系统

知识点来源：总结人间自有韬哥在， 唐老狮，豆包

一、GUI

1. 文本控件（Label）

• 作用：生成文本控件。
• 重载形式：
  • public static void Label(Rect position, string text);
  • public static void Label(Rect position, Texture image);
  • public static void Label(Rect position, GUIContent guiContent);
  • public static void Label(Rect position, string text, GUIStyle style);
  • public static void Label(Rect position, Texture image, GUIStyle style);
  • public static void Label(Rect position, GUIContent guiContent, GUIStyle style);
• 使用示例：

GUI.Label(new Rect(100, 20, 100, 20), "666666欢迎你");
GUI.Label(labelRect1, image);
GUI.Label(labelRect2, guiContent);
GUI.Label(new Rect(500, 200, 500, 500), "林文韬欢迎你", labelGuiStyle);

2. 按钮控件

普通按钮（Button）

• 作用：创建单击按钮，点击时执行操作，返回布尔值。
• 重载形式：与 Label 类似，有多种参数组合。
• 使用示例：

if (GUI.Button(btnRect, btnGUIContent1, btnGuiStyle))
{
    Debug.Log("按钮被点击");
}

长按按钮（RepeatButton）

• 作用：用户按住时一直处于激活状态，返回布尔值。
• 使用示例：

if (GUI.RepeatButton(new Rect(300, 60, 100, 20), btnGUIContent2))
{
    Debug.Log("长按按钮被点击");
}

3. 多选框（Toggle）

• 作用：创建打开/关闭的开关按钮，需传入布尔值表示选中状态，返回改变后的选中状态。
• 重载形式：与 Label 类似，有多种参数组合。
• 使用示例：

isSel = GUI.Toggle(new Rect(0, 0, 100, 30), isSel, "效果开关");
isSel2 = GUI.Toggle(new Rect(0, 40, 100, 30), isSel2, "音效开关", style);

4. 单选框（基于 Toggle 实现）

• 关键：通过一个 int 标识决定是否选中，改变 int 值。
• 使用示例：

if (GUI.Toggle(new Rect(0, 100, 100, 30), nowSelIndex == 1, "选项一"))
{
    nowSelIndex = 1;
}
if (GUI.Toggle(new Rect(0, 140, 100, 30), nowSelIndex == 2, "选项二"))
{
    nowSelIndex = 2;
}
if (GUI.Toggle(new Rect(0, 180, 100, 30), nowSelIndex == 3, "选项三"))
{
    nowSelIndex = 3;
}

5. 输入框

普通输入框（TextField）

• 作用：创建可供用户编辑字符串的单行文本字段。
• 使用示例：

inputStr = GUI.TextField(new Rect(0, 0, 100, 30), inputStr, 5);

密码输入框（PasswordField）

• 作用：创建可让用户输入密码的文本字段。
• 使用示例：

inputPW = GUI.PasswordField(new Rect(0, 50, 100, 30), inputPW, '★');

6. 拖动条

水平拖动条（HorizontalSlider）

• 作用：用户可拖动的水平滑动条，用于在最小值和最大值之间更改某值。
• 使用示例：

nowValue = GUI.HorizontalSlider(new Rect(0, 100, 100, 50), nowValue, 0, 1);

竖直拖动条（VerticalSlider）

• 作用：用户可拖动的垂直滑动条，用于在最小值和最大值之间更改某值。
• 使用示例：

nowValue = GUI.VerticalSlider(new Rect(0, 150, 50, 100), nowValue, 0, 1);

7. 图片绘制（DrawTexture）

• 作用：在一个矩形内绘制纹理。
• 重载形式：
  • public static void DrawTexture(Rect position, Texture image);
  • public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode);
  • public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend);
  • public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend, float imageAspect);
• 参数说明：
  • ScaleMode：图像宽高比不适合绘制宽高比时的缩放方式，包括 ScaleAndCrop（计算后裁剪）、ScaleToFit（自动计算保持完整显示）、StretchToFill（填充满 Rect 范围）。
  • alphaBlend：绘制图像时是否应用 Alpha 混合（默认启用），控制图片透明通道。
  • imageAspect：源图像宽高比，为 0 时使用图像默认宽高比。
• 使用示例：

GUI.DrawTexture(texPos, tex, mode, alpha, wh);

8. 框绘制（Box）

• 作用：在 GUI 层上创建一个框。
• 使用示例：

GUI.Box(texPos, "123");

9.工具栏（Toolbar ）

Toolbar 静态方法用于创建一个工具栏。使用时需要声明一个 int 变量来记录当前选择的索引，以及一个 string 数组用于显示工具栏的内容。该方法会返回一个 int 值，需将其重新赋值给用于记录选择的 int 变量。

** 代码示例**

// 声明用于记录选择的索引变量
int toolbarIndex = 0; 
// 声明用于显示工具栏内容的字符串数组
string[] toolbarInfos = { "选项1", "选项2", "选项3" }; 

// 创建工具栏并更新选择索引
toolbarIndex = GUI.Toolbar(new Rect(0, 0, 200, 30), toolbarIndex, toolbarInfos);

// 根据不同的返回索引处理不同的逻辑
switch (toolbarIndex)
{
    case 0:
        // 处理索引为0的逻辑
        break;
    case 1:
        // 处理索引为1的逻辑
        break;
    case 2:
        // 处理索引为2的逻辑
        break;
}

选择网格（SelectionGrid）
SelectionGrid 静态方法用于创建一个按钮网格。同样需要声明一个 int 变量用于记录当前选择的索引，以及一个 string 数组用于显示网格中按钮的内容。与 Toolbar 相比，多了一个参数 xCount，它代表水平方向最多显示的按钮数量。

** 代码示例**

// 声明用于记录选择的索引变量
int selGridIndex = 0; 
// 声明用于显示网格按钮内容的字符串数组
string[] toolbarInfos = { "选项1", "选项2", "选项3" }; 

// 创建选择网格并更新选择索引
selGridIndex = GUI.SelectionGrid(new Rect(0, 50, 200, 60), selGridIndex, toolbarInfos, 2);

10. 分组（BeginGroup 和 EndGroup）

• 作用：批量控制控件位置，类似添加父对象。
• 使用示例：

GUI.BeginGroup(groupRect);
GUI.Button(new Rect(0, 0, 100, 50), "测试按钮");
GUI.Label(new Rect(0, 60, 100, 20), "Label信息");
GUI.EndGroup();

11. 滚动列表（BeginScrollView 和 EndScrollView）

• 作用：创建滚动视图。
• 参数说明：
  • position：滚动视图外部矩形区域，定义大小和位置。
  • scrollPosition：当前滚动视图的滚动位置，需实时赋值。
  • viewRect：滚动视图的内容区域，定义可滚动内容的边界。
• 使用示例：

nowPos = GUI.BeginScrollView(scRect, nowPos, showRect);
// 滚动列表内容
GUI.EndScrollView();

12. 窗口

12.1.普通窗口（Window）

• 作用：创建弹出窗口。
• 参数说明：
  • id：窗口唯一 ID，用于区分不同窗口。
  • position：窗口位置和大小的屏幕矩形。
  • function：用于绘制窗口的委托函数。
• 使用示例：

private void OnGUI()
{
    GUI.Window(1, new Rect(100, 100, 200, 150), DrawWindow, "测试窗口");
    GUI.Window(2, new Rect(100, 250, 200, 150), DrawWindow, "测试窗口2");
}

private void DrawWindow(int id)
{
    switch (id)
    {
        case 1:
            GUI.Button(new Rect(0, 30, 30, 20), "1");
            break;
        case 2:
            GUI.Button(new Rect(0, 30, 30, 20), "2");
            break;
        case 3:
            GUI.Button(new Rect(0, 30, 30, 20), "3");
            break;
    }
}

12.2.模态窗口（ModalWindow）

• 作用：显示模态窗口，使其他控件不可用，常用于警告弹窗等。
• 使用示例：

GUI.ModalWindow(3, new Rect(300, 100, 200, 150), DrawWindow, "模态窗口");

12.3. 拖动窗口

• 实现方法：位置实时赋值，并在窗口委托函数中调用 DragWindow 方法。
• 使用示例：

dragWinPos = GUI.Window(4, dragWinPos, DrawWindow, "拖动窗口");

private void DrawWindow(int id)
{
    switch (id)
    {
        case 4:
            GUI.DragWindow(new Rect(0, 0, 1000, 20));
            break;
    }
}

13.全局颜色和皮肤样式

13.1.全局颜色

• GUI.color：全局着色颜色。
• GUI.contentColor：文本着色颜色，与全局颜色相乘。
• GUI.backgroundColor：背景元素着色颜色，与全局颜色相乘。
• 使用示例：

GUI.color = Color.red;
GUI.Label(new Rect(0, 50, 150, 30), "全局着色颜色标签红");
GUI.contentColor = Color.yellow;
GUI.Button(new Rect(0, 200, 150, 30), "文本着色颜色");
GUI.backgroundColor = Color.green;
GUI.Button(new Rect(0, 250, 150, 30), "背景元素着色颜色", style);

13.2. 整体皮肤样式

• 创建：在 Project 窗口右键创建 GUI 皮肤。
• 使用：通过 GUI.skin 设置全局皮肤，设置后可整套设置自定义样式，但绘制时使用 GUIStyle 参数会优先使用该参数。
• 使用示例：

GUI.color = Color.white;
GUI.contentColor = Color.white;
GUI.backgroundColor = Color.white;
GUI.skin = mySkin;
GUI.Button(new Rect(200, 0, 100, 30), "测试按钮1");
GUI.Button(new Rect(200, 50, 100, 30), "测试按钮2", style);
GUI.skin = null;
GUI.Button(new Rect(200, 100, 100, 30), "测试按钮3");

14.GUILayout 自动布局

• 特点：类似 GUI 类，有自动布局功能，主要用于编辑器开发。
• 使用示例：

GUI.BeginGroup(new Rect(100, 100, 500, 300));
GUILayout.BeginArea(new Rect(10, 10, 400, 300));
GUILayout.BeginVertical();
GUILayout.Button("竖直123", GUILayout.Width(200));
GUILayout.Button("竖直245666656565");
GUILayout.Button("竖直235", GUILayout.ExpandWidth(false));
GUILayout.EndVertical();
GUILayout.BeginHorizontal();
GUILayout.Button("水平123", GUILayout.Height(300));
GUILayout.Button("水平245666656565");
GUILayout.Button("水平235", GUILayout.ExpandWidth(false));
GUILayout.EndHorizontal();
GUILayout.EndArea();
GUI.EndGroup();

15.GUILayoutOption 布局选项

• GUILayout.Width 和 GUILayout.Height：控件的固定宽高。
• GUILayout.MinWidth 和 GUILayout.MinHeight：允许控件的最小宽高。
• GUILayout.MaxWidth 和 GUILayout.MaxHeight：允许控件的最大宽高。
• GUILayout.ExpandWidth 和 GUILayout.ExpandHeight：允许或禁止水平、竖直拓展。

二、UGUI

1.Canvas画布组件

内容	详情
Canvas 组件作用	用于创建和管理 UI，场景中可存在多个 Canvas 对象
渲染方式 - Screen Space - Overlay	覆盖模式，UI 始终显示在场景内容前方，会挡住场景模型。 参数： - Pixel Perfect：是否开启无锯齿精确渲染（性能换效果） - SortOrder：排序层编号，控制多个 Canvas 渲染先后顺序，层级高的先渲染 - TargetDisplay：目标显示设备 - Additional Shader Channels：其他着色器通道，决定着色器可读取的数据
渲染方式 - Screen Space - Camera	摄像机模式，3D 物体可显示在 UI 之前。 参数： - RenderCamera：用于渲染 UI 的摄像机，不推荐设为主摄像机，建议创建只渲染 UI 层的摄像机并关联，设置模式为仅深度，调整深度比主摄像机高，想让模型在 UI 前可创建为 UI 子物体 - Plane Distance：UI 平面在摄像机前方的距离，类似整体 Z 轴 - Sorting Layer：所在排序层 - Order in Layer：排序层的序号
渲染方式 - World Space	3D 模式，可将 UI 对象像 3D 物体一样处理，常用于 VR 或 AR。一般关联主摄像机，重置 UI 比例和长宽后，标准单位的 UI 图片大小和立方体一样。 参数： - Event Camera：用于处理 UI 事件的摄像机，不设置则不能正常注册 UI 事件

2.CanvasScaler画布缩放器组件

• 组件作用：用于对Canvas中的UI元素进行适配，以适应不同的屏幕分辨率和设备。
• 三种适配模式：
  • 恒定像素模式（Constant Pixel Size）：通过Scale Factor（缩放系数）和Reference Pixels Per Unit（单位参考像素）来全局缩放UI元素，单位参考像素与图片的Pixels Per Unit共同影响UI元素最终显示尺寸。
  • 缩放模式（Scale With Screen Size）：最常用的模式，基于Reference Resolution（参考分辨率）进行自适应计算。当屏幕分辨率宽高比不适应参考分辨率时，通过Screen Match Mode（屏幕匹配模式）来处理，有Expand（拓展模式，保留UI，可能有黑边）、Shrink（最大程度放大UI，可能裁剪）、Match Width Or Height（宽高匹配模式，UI大小不变，可能裁剪或有黑边）三种匹配方式。
  • 恒定物理模式（Constant Physical Size）：涉及DPI（每英寸点数）、Physical Unit（物理单位）、Fallback Screen DPI（备用DPI）、Default Sprite DPI（默认图片DPI）等参数，与恒定像素模式的区别在于其基于物理单位和DPI来处理UI元素的显示。
• 3D模式（World模式）：有Dynamic Pixels Per Unit（UI中动态创建位图的单位像素数）和Reference Pixels Per Unit（单位参考像素，默认一个单位为100像素）等参数，用于处理3D场景中的UI相关设置。

3.GraphicRaycaster 图形射线投射器

主要作用
GraphicRaycaster 用于处理 UI 元素的射线检测，确定鼠标点击或触摸事件是否发生在 UI 元素上。

** 参数说明**

参数	说明
Ignore Reversed Graphics	是否忽略反转图形。若勾选，当对象旋转了 x 轴或 y 轴时，点击该对象无效；若不勾选，点击始终有效。
Blocking Objects	射线被哪些类型的碰撞器阻挡，但在覆盖渲染模式下此设置无效。可选择能阻挡射线的碰撞器类型。
Blocking Mask	射线被哪些层级的碰撞器阻挡，同样在覆盖渲染模式下无效。需配合阻塞对象使用，只有对象处于勾选的层级，并且符合阻塞对象的类型，才能阻挡射线。

覆盖模式特性
在覆盖模式下，由于 UI 始终显示在最前面，Blocking Objects 和 Blocking Mask 参数无效。

4.EventSystem事件系统组件和StandaloneInputModule独立输入模块组件

4.1.EventSystem 组件

参数	说明
First Selected	可设置游戏开始时默认选中的游戏对象，关联对象后，运行游戏该对象会被默认选中。
Send Navigation Events	决定是否允许导航事件（如移动、按下、取消等）。勾选后，可通过 wasd 或上下左右键切换选择的对象。
Drag Threshold	定义了拖拽操作的阈值，即鼠标移动多少像素后会进入拖拽状态。

4.2.Standalone Input Module 组件

参数	说明
Horizontal Axis	水平轴按钮对应的热键名，该名字需对应 Input 管理器中的设置。
Vertical Axis	垂直轴按钮对应的热键名，对应 Input 管理器中的设置。
Submit Button	提交（确定）按钮对应的热键名，对应 Input 管理器中的设置。
Cancel Button	取消按钮对应的热键名，对应 Input 管理器中的设置。
Input Actions Per Second	每秒允许键盘或控制器输入的数量。
Repeat Delay	每秒输入操作重复率生效前的延迟时间。
ForceModule Active	决定是否强制该模块处于激活状态。一般情况下，不会对该组件的参数进行修改。

5.RectTransform矩形变换组件

参数	说明
Pivot（轴心点）	取值范围为 0 - 1，以左下角为原点 (0, 0)，右上角为 (1, 1)。 是旋转的中心点，与锚点共同用于位置计算。 影响宽高扩大或缩小时的伸缩方向。
Anchors（相对父矩形锚点）	Min 是矩形锚点范围 X 和 Y 的最小值，Max 是最大值，取值范围 0 - 1。 当 Min 和 Max 对应的 xy 值完全贴合时，锚点以点的形式存在，根据锚点位置建立坐标系，结合轴心点计算 UI 对象位置。 当 Min 和 Max 对应的 xy 值分开时，根据锚点的四条边和 UI 对象的四条边计算位置，适用于背景图或需要子对象随父对象变化而变化的情况。
Pos(X, Y, Z)	轴心点（中心点）相对锚点的位置。
Width/Height	矩形的宽高。
Left/Top/Right/Bottom	矩形边缘相对于锚点的位置，当锚点分离时出现。
Rotation	围绕轴心点旋转的角度。
Scale	缩放大小。
Blueprint Mode（蓝图模式）	启用后，编辑旋转和缩放不会影响矩形，只会影响显示内容，一般不勾选。
Raw Edit Mode（原始编辑模式）	启用后，改变轴心和锚点值不会改变矩形位置，即改变轴心位置，图片显示位置改变，但 UI 对象的 Pos 位置数值不变。 不启用时，改变轴心位置，UI 对象的 Pos 位置也会改变。

6.Image图片控件

6.1.Image 图片组件参数

参数	说明
Source Image（源图形）	图片来源，图片类型必须是“精灵”类型。
Color（颜色）	图像的颜色，会在原图基础上叠加。
Material（材质）	图像的材质，一般使用 UI 的默认材质，不做修改。
Raycast Target（射线目标）	是否作为射线检测的目标，不勾选则不会响应射线检测，可穿透当前控件点击到后面的控件。
Maskable	是否能被遮罩，后续结合遮罩相关知识点讲解。
Image Type（图片类型）	Simple（普通模式）：均匀缩放整个图片。 Sliced（切片模式）：9 宫格拉伸，只拉伸中央十字区域，需打开精灵编辑开启设置九宫格；Pixels Per Unit Multiplier 一般不修改；Fill Center 不勾选图片会中间空心。 Tiled（平铺模式）：重复平铺中央部分。 Filled（填充模式）：可用于做血条、cd 进度条等，有 Fill Method（填充方式）、Fill Origin（填充原点）、Fill Amount（填充量）、Clockwise（顺时针方向）等参数。
Use Sprite Mesh（使用精灵网格）	勾选后 Unity 会帮我们生成图片网格。
Preserve Aspect（保持长宽比）	确保图像保持其现有尺寸。
Set Native Size（设置原生大小）	设置为图片资源的原始大小。

6.2.Image 图片代码控制

操作	代码示例	说明
获取 Image 组件	Image image = this.GetComponent<Image>();	获取当前脚本所附加的 GameObject 上的 Image 组件。
设置显示图像	image.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");	从资源文件夹中加载名为 “ui_TY_fanhui_01” 的 Sprite，并将其设置为 Image 的显示图像。
设置宽高	(transform as RectTransform).sizeDelta = new Vector2(200, 200);	将当前 GameObject 的 Transform 转换为 RectTransform，然后修改其尺寸为宽度 200、高度 200。
设置是否进行射线检测	image.raycastTarget = false;	禁用该 Image 组件的射线检测，使其不响应用户的点击事件。
设置颜色	image.color = Color.red;	将该 Image 组件的颜色设置为红色。

7.Text

7.1.Text 文本组件参数

参数	说明
Text（文本）	文本显示内容。
Font（字体）	文本所使用的字体。
FontStyle（字体样式）	包括 Normal（普通）、Bold（加粗）、Italic（斜体）、Bold And Italic（加粗 + 斜体）。
Font Size（字体大小）	文本字体的大小。
Line Spacing（行间距）	行之间的垂直间距。
Rich Text（富文本）	是否开启富文本功能。
Alignment（对齐方式）	文本的对齐方式。
Align By Geometry（几何对齐）	使用字形集合形状范围进行水平对齐，而非字形指标，一般不勾选。
Horizontal Overflow（水平溢出）	处理文本太宽无法放入矩形范围的方式，有 Wrap（包裹模式，自动换行）和 Overflow（溢出模式，可溢出矩形框）。
Vertical Overflow（垂直溢出）	处理文本太高无法放入矩形范围的方式，有 Truncate（截断模式，超出部分裁剪）和 Overflow（溢出模式，可溢出矩形框）。
Best Fit（最佳适应）	忽略字体大小，自动调整使内容完全显示在矩形框中，可设置 MinSize（最小字体大小）和 MaxSize（最大字体大小）。

7.2.富文本使用

需开启富文本选项才能生效，示例如下：

• 加粗：<b>文本内容</b>
• 斜体：<i>文本内容</i>
• 大小：<size=50>文本内容</size>
• 颜色：<color=#ff0000ff>文本内容</color> 或 <color=red>文本内容</color>

7.3.边缘线和阴影

若要添加边缘线和阴影效果，需自行添加对应的组件，如 Outline（边缘线组件）和 Shadow（阴影组件）。

7.4.Text 文本代码控制

操作	代码示例	说明
获取 Text 组件	Text text = this.GetComponent<Text>();	获取当前脚本所附加的 GameObject 上的 Text 组件。
设置文本显示内容	text.text = "哈哈哈哈哈";	通过 text.text 变量设置文本显示内容。

8.RawImage

8.1.RawImage 原始图像组件参数

参数	说明
Texture（图像纹理）	可以拖拽任何类型的图进行关联。
UV Rect（UV 矩形）	表示图像在 UI 矩形内的偏移和大小。位置偏移 X 和 Y 取值范围是 0 - 1，大小偏移 W 和 H 取值范围也是 0 - 1。改变这些值，图像边缘会进行拉伸来填充 UV 矩形周围的空间，一般情况下不会改变此参数。

8.2.RawImage 原始图像代码控制

操作	代码示例	说明
获取 RawImage 组件	RawImage rawImage = this.GetComponent<RawImage>();	获取当前脚本所附加的 GameObject 上的 RawImage 组件。
设置纹理	rawImage.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");	从资源文件夹中加载名为 “ui_TY_lvseshuzi_08” 的 Texture，并将其设置为 RawImage 组件的显示纹理。
设置 UV 矩形	rawImage.uvRect = new Rect(0, 0, 1, 1);	设置 RawImage 组件的纹理坐标矩形，创建一个左下角坐标为 (0, 0)，宽度和高度都为 1 的 Rect 对象。

9.Toggle

9.1.Toggle 开关组件参数

参数	说明
Interactable	决定是否接受输入。
Transition	响应用户输入的过渡效果。
Navigation	导航模式，设置 UI 元素在播放模式中控制器导航的方式。
IsOn	表示当前是否处于打开状态。
Toggle Transition	开关值变化时的过渡方式，有 None（无过渡，直接显示隐藏）和 Fade（淡入淡出）两种。
Graphic	用于表示选中状态的图片，默认关联创建 Toggle 时自动生成的勾形状选中图对象。
Group	关联的 ToggleGroup 单选框分组组件。创建一个空物体添加 ToggleGroup 组件作为管理组对象，将需管理的 Toggle 放在其下，并将每个 Toggle 的 Group 关联该 ToggleGroup 对象可实现单选框功能。Allow Switch Off 属性决定是否允许不选中任何一个单选框。
OnValueChanged	开关状态变化时执行的函数列表。

9.2.Toggle 开关代码控制

操作	代码示例	说明
获取 Toggle 组件	Toggle toggle = this.GetComponent<Toggle>();	获取当前脚本所附加 GameObject 上的 Toggle 组件。
设置 Toggle 状态	toggle.isOn = true;	将 Toggle 状态设置为打开。
获取 ToggleGroup 组件	ToggleGroup toggleGroup = this.GetComponent<ToggleGroup>();	获取当前脚本所附加 GameObject 上的 ToggleGroup 组件。
设置 ToggleGroup 属性	toggleGroup.allowSwitchOff = false;	禁止取消选中所有 Toggle。
获取 ToggleGroup 中选中的 Toggle	foreach (Toggle item in toggleGroup.ActiveToggles()) { print(item.name + " " + item.isOn); }	遍历 ToggleGroup 中处于选中状态的 Toggle 并打印其名称和状态。

9.3.Toggle 监听事件的两种方式

** 拖脚本添加事件监听**
点击 Button 组件下 OnClick 下面的添加按钮，选择关联对象及该对象上脚本的公共方法进行点击事件监听，可关联多个函数。示例方法如下：

public void ChangValue(bool isOn)
{
    print("状态改变" + isOn);
}

代码添加事件监听
使用 toggle.onValueChanged.AddListener 添加值改变事件监听。示例代码如下：

private void ChangeValue2(bool v)
{
    print("代码监听 状态改变" + v);
}

// 监听 toggle 的值改变事件，当值改变时调用 ChangeValue2 方法
toggle.onValueChanged.AddListener(ChangeValue2);

// 使用 lambda 表达式定义一个匿名方法并监听 toggle 的值改变事件
toggle.onValueChanged.AddListener((b) =>
{
    // 在控制台打印输出字符串，显示状态改变信息和当前状态值 b
    print("代码监听lambda表达式 状态改变" + b);
});

10. InputField

10.1. InputField文本输入组件参数

参数名称	描述
Interactable	是否接受输入
Transition	响应用户输入的过渡效果
Navigation	导航模式，设置UI元素在播放模式中控制器导航的方式
TextComponent	用于关联显示输入内容的文本组件
Text	输入框的起始默认值，也是当前文本输入的内容
Character Limit	可以输入字符长度的最大值
Content Type	输入的字符类型限制，包括Standard（标准模式）、Autocorrected（自动更正模式）、Integer Number（整数模式）、Decimal Number（十进制数模式）、Alphanumeric（字母数字模式）、Name（名字模式）、Email Address（邮箱地址模式）、Password（密码模式）、Pin（别针模式）、Custom（自定义模式）等
Line Type	定义文本格式，有Single Line（单行显示）、Multi Line Submit（多行提交）、Multi Line NewLine（多行换行）三种模式
Placeholder	关联用于显示初始内容文本控件
Caret Blink Rate	光标闪烁速率
Caret Width	光标宽度
Custom Caret Color	自定义光标颜色
Selection Color	批量选中的背景颜色
Hide Mobile Input	隐藏移动设备屏幕上键盘，仅适用于iOS
Read Only	设置为只读，用户无法修改，输入无作用
OnValueChanged	内容改变时执行的函数列表
OnEndEdit	结束输入时执行的函数列表

10.2.nputField监听事件的两种方式

1拖脚本监听事件：函数需有一个string类型的参数，选择动态的函数。对文本输入框的任何输入都会调用值改变时的事件，焦点不在文本输入框上就会调用结束编辑时的事件。示例代码如下：

public void ChangeInput(string str)
{
    print("改变的输入内容" + str);
}

public void EndInput(string str)
{
    print("结束输入时内容" + str);
}

代码添加监听事件：通过InputField.onValueChanged.AddListener添加值改变事件监听，InputField.onEndEdit.AddListener添加结束编辑事件监听。示例代码如下：

// 给inputField的onValueChanged事件添加监听器，当输入框文本内容改变时触发
inputField.onValueChanged.AddListener((str) =>
{
    // 打印输出带有改变内容的消息
    print("代码监听 改变" + str);
});

// 给inputField的onEndEdit事件添加监听器，当输入框结束编辑时触发
inputField.onEndEdit.AddListener((str) =>
{
    // 打印输出带有结束输入内容的消息
    print("代码监听 结束输入" + str);
});

11. Slider

。

11.1.Slider 滑动条组件参数

参数名称	描述
FillRect	关联的用于填充的进度条图形对象
Handle Rect	关联的用于滑动的滑动块图形对象
Direction	滑动条值增加的方向，包含： - Left To Right：从左到右 - Right To Left：从右到左 - Bottom To Top：从下到上 - Top To Bottom：从上到下
Min Value 和 Max Value	最小值和最大值，滑动滚动条时值在最小到最大之间变化（左右、上下极值）
Whole Numbers	是否约束为整数值变化
Value	当前滑动条代表的数值
OnValueChanged	滑动条值改变时执行的函数列表

11.2.Slider 监听事件的两种方式

拖脚本监听事件
关联的函数要有一个 float 类型的参数，要选择动态的函数。若选择静态，值改变时会只打印右边输入框的值。示例函数如下：

public void ChangeValue(float v)
{
    print(v);
}

代码添加监听事件

• slider.onValueChanged.AddListener(ChangeValue);
• slider.onValueChanged.AddListener((v) => { print("代码添加的监听" + v); });

12.ScrollBar

12.1.ScrollBar 滚动条组件参数

参数名称	描述
Handle Rect	关联滚动块图形对象。
Direction	滑动条值增加的方向，包括： Left To Right：从左到右 Right To Left：从右到左 Bottom To Top：从下到上 Top To Bottom：从上到下
Value	滚动条初始位置值，范围是 0 到 1。
Size	滚动块在条中的比例大小，范围是 0 到 1，为 1 时填满，代表不能拖动。
Number Of Steps	允许可以滚动的次数（不同滚动位置的数量），即可以一格一格变化时分成的格数。
OnValueChanged	滚动条值改变时执行的函数列表。

12.2.ScrollBar 滚动条控件代码控制

(1).通过 GetComponent<Scrollbar>() 得到 Scrollbar 组件，如 Scrollbar scrollbar = this.GetComponent<Scrollbar>();。
(2) .使用 Scrollbar.value 获取滚动条当前值，例如 print(scrollbar.value);。
(3). 使用 Scrollbar.size 获取滚动条大小，例如 print(scrollbar.size);。

12.3.ScrollBar 监听事件的两种方式

拖脚本监听事件：函数需要一个 float 参数，代表滚动条的值。示例代码如下：

public void ChangeValue(float v)
{
    print(v);
}

代码添加监听事件：通过 scrollbar.onValueChanged.AddListener 添加滑动条值变化的监听。示例代码如下：

// 注册监听滑动条值变化的事件，当滑动条的值发生变化时，执行下面的函数
scrollbar.onValueChanged.AddListener((v) => {
    // 打印输出带有滑动条值的字符串
    print("代码监听的函数" + v);
});

13.ScrollView滚动视图控件

13.1.ScrollRect 滚动视图组件参数

参数名称	描述
Content	控制滚动视图显示内容的父对象，其尺寸决定滚动视图的拖动范围，默认关联 Viewport 的子对象 Content
Horizontal	启用水平滚动
Vertical	启用垂直滚动
Movement Type	滚动视图元素的运动类型，控制拖动时的反馈效果： - Unrestricted：不受限制，随意拖动 - Elastic：回弹效果，滚出边缘后会弹回边界，Elasticity 为回弹系数，值越大回弹越慢 - Clamped：夹紧效果，始终限制在范围内，无回弹效果
Inertia	移动惯性，开启后松开鼠标有一定移动惯性
Deceleration Rate	减速率，范围 0 - 1，0 表示无惯性，1 表示不会停止
Scroll Sensitivity	滚轮和触摸板的滚动事件敏感性，增大值可加快滚轮滚动速度
Viewport	关联滚动视图内容视口对象，决定可视范围
Horizontal Scrollbar	关联水平滚动条
Visibility	设置滚动条的可视性模式： - Permanent：一直显示滚动条 - Auto Hide：自动隐藏滚动条，不自动扩展视口范围 - Auto Hide And Expand Viewport：自动隐藏滚动条，并自动扩展内容 Viewport 视口范围
Spacing	滚动条和视口之间的间隔空间，控制间隙大小
OnValueChanged	滚动视图位置改变时执行的函数列表

13.2.ScrollRect 滚动视图代码控制

操作	代码示例	说明
获取 ScrollRect 组件	ScrollRect scrollRect = this.GetComponent<ScrollRect>();	获取当前游戏对象上的 ScrollRect 组件
改变内容对象大小	scrollRect.content.sizeDelta = new Vector2(1000, 1000);	改变内容的大小，决定具体可拖动范围
设置滑动面板归一化位置	scrollRect.normalizedPosition = new Vector2(0, 1f);	重置 content 位置到左上，x 表示水平方向归一化值（0 - 1），y 表示垂直方向归一化值（0 - 1）

13.3.ScrollView 监听事件的两种方式

拖脚本监听事件

public void ChangeValue(Vector2 v)
{
    print(v);
}

代码添加监听事件

scrollRect.onValueChanged.AddListener((vec) =>
{
    print(vec);
});

14.Dropdown下拉列表控件

14.1.DropDown 下拉列表组件参数

参数名称	描述
Template	关联下拉列表对象
Caption Text	关联显示当前选择内容的文本组件
Caption Image	关联显示当前选择内容的图片组件，可能需手动创建 Image
Item Text	关联下拉列表选项用的文本控件
Item Image	关联下拉列表选项用的图片控件，可能需手动创建 Image
Value	当前所选选项的索引值
Alpha Fade Speed	下拉列表窗口淡入淡出的速度，越小显示越快
Options	存在的选项列表
OnValueChanged	下拉列表选项改变时执行的函数列表

14.2.DropDown 下拉列表代码控制

操作	代码示例	说明
获取 DropDown 组件	Dropdown dropdown = GetComponent<Dropdown>();	获取当前脚本所附加游戏对象上的 DropDown 组件
获取当前选中项索引	print(dropdown.value);	打印下拉菜单当前选中项的索引
获取当前选中项文本内容	print(dropdown.options[dropdown.value].text);	打印下拉菜单当前选中项的文本内容
添加新选项	dropdown.options.Add(new Dropdown.OptionData("123123123"));	在下拉菜单的选项列表末尾添加一个新选项

14.3.DropDown 监听事件的两种方式

拖脚本监听事件
需要一个 Int 类型的参数，代表下拉列表的索引值。示例代码如下：

public void ChangeValue(int value)
{
    print(value);
}

代码添加监听事件

dropdown.onValueChanged.AddListener((index) =>
{
    print(index);
});

15.图集

15.1.打图集的原因

在 Unity 的 UI 系统中，UGUI 和 NGUI 在使用图集上存在差异，NGUI 使用前就需要打图集，而 UGUI 可在之后进行打图集操作。打图集的核心目的是减少 DrawCall 从而提高性能。

DrawCall（DC）是 CPU 通知 GPU 进行一次渲染的命令，当 DC 次数过多时会导致游戏卡顿。通过打图集，能够将多个小图合并成一张大图，原本需要 n 次的 DC 渲染操作可变为 1 次，以此提升游戏性能。

15.2.Unity 中自带打图集功能的开启方式

可在工程设置面板中选择 Edit -> Project Setting -> Editor 来打开 Sprite Packer，其包含以下几种设置模式：

设置模式	描述	是否在编辑模式下打包	是否在构建时打包	特殊选项
Disabled	默认设置，若创建的不是 2D 项目，很可能是此选项，该模式下不会进行图集打包操作	否	否	无
Enabled For Builds（Legacy Sprite Packer）	Unity 仅在构建项目时打包图集	否	是	有 Padding Power 选项，用于设置图片间隔距离，数字代表 2 的 n 次方
Always Enabled（Legacy Sprite Packer）	Unity 在构建项目时会打包图集，并且在编辑模式下运行项目前也会进行图集打包	是（运行项目前）	是	有 Padding Power 选项，用于设置图片间隔距离，数字代表 2 的 n 次方
Enabled For Build	Unity 仅在构建项目时打包图集，在编辑器模式下不会进行打包	否	是	无
Always Enabled	Unity 在构建项目时打包图集，且在编辑模式下运行前会进行打包操作	是（运行前）	是	无

注意：在使用 UGUI 打图集时，建议取消勾选“允许旋转”和“紧密包装”这两个选项。

15.3.代码加载图集的方法

(1).加载图集（需引用相应命名空间）：SpriteAtlas spriteAtlas = Resources.Load<SpriteAtlas>("MyAlas");
(2).从图集中加载指定名字的小图：spriteAtlas.GetSprite("bk");

16.UI事件监听接口

16.1.UGUI 事件接口列表

16.1.1.常用事件接口

接口名	接口函数名	解释说明
IPointerEnterHandler	OnPointerEnter	鼠标指针进入对象时调用
IPointerExitHandler	OnPointerExit	鼠标指针退出对象时调用
IPointerDownHandler	OnPointerDown	在对象上按下鼠标指针时调用
IPointerUpHandler	OnPointerUp	松开鼠标指针时（在指针点击的对象上）调用
IPointerClickHandler	OnPointerClick	在同一对象上按下再松开鼠标指针时调用
IBeginDragHandler	OnBeginDrag	即将开始拖拽时在拖拽对象上调用
IDragHandler	OnDrag	发生拖拽时在拖拽对象上调用
IEndDragHandler	OnEndDrag	拖拽完成时在拖拽对象上调用

16.1.2.不常用事件接口

接口名	接口函数名	解释说明
IInitializePotentialDragHandler	OnInitializePotentialDrag	找到拖动目标时调用，可用于初始化值
IDropHandler	OnDrop	在拖动目标对象上调用
IScrollHandler	OnScroll	鼠标滚轮滚动时调用
IUpdateSelectedHandler	OnUpdateSelected	每次勾选时在选定对象上调用
ISelectHandler	OnSelect	对象成为选定对象时调用
IDeselectHandler	OnDeselect	取消选择选定对象时调用

16.1.3.导航相关接口

接口名	接口函数名	解释说明
IMoveHandler	OnMove	发生移动事件（上、下、左、右等）时调用
ISubmitHandler	OnSubmit	按下 Submit 按钮时调用
ICancelHandler	OnCancel	按下 Cancel 按钮时调用

16.2.PointerEventData 指针目标数据类参数详解

PointerEventData 类继承自 BaseEventData 类，是 UGUI 事件系统中存储用户输入设备交互信息的重要参数，包含以下关键属性：

属性名	描述
pointerId	代表用户操作中不同按键的唯一标识，用于识别触发事件的按键
position	当前指针在屏幕坐标系中的实时位置，拖拽时持续更新
pressPosition	指针按下那一刻在屏幕上的初始位置
Delta	从上一次事件到当前事件期间，指针在屏幕上的位移变化量
clickCount	连续点击的次数，用于区分单击和连击行为
clickTime	最后一次点击发生的时间戳，用于根据点击间隔执行不同逻辑
pressEventCamera	最后一次触发按下事件时所关联的摄像机实例
enterEventCamera	最后一次触发进入事件时所关联的摄像机实例

17.UI事件监听接口(EventTrigger)

17.1.使用事件触发器的方法

（1）拖曳脚本进行关联事件
关联的函数需要有一个 BaseEventData 参数。以下是示例代码：

public void TestPointerEnter(BaseEventData data)
{
    // 可以转换成子类 PointerEventData
    PointerEventData eventData = data as PointerEventData;
    print("鼠标进入 " + eventData.position);
}

通常的操作是将面板对象拖拽进来，然后选择面板脚本上的函数进行关联。

（2）代码添加

        // 申明一个希望监听的事件对象 EventTrigger.Entry
        // EventTrigger.Entry包含一个事件的类型ID eventID
        // 和一个事件回调 callback
        EventTrigger.Entry entry = new EventTrigger.Entry();

        // 申明事件的类型为 PointerUp 拖拽事件
        entry.eventID = EventTriggerType.PointerUp;

        // 监听函数关联，当拖拽事件被触发时，打印"抬起"
        entry.callback.AddListener((data) =>
        {
            print("抬起");
        });

        // 把申明好的事件对象加入到 EventTrigger 当中叫triggers的entry列表中
        eventTrigger.triggers.Add(entry);

18.屏幕坐标转UI相对坐标

• RectTransformUtility类：是 RectTransform 的辅助类，主要用于坐标转换等操作。当前重要的函数是将屏幕空间上的点转换成 UI 本地坐标下的点。
• 坐标转换方法：RectTransformUtility.ScreenPointToLocalPointInRectangle 方法可将屏幕坐标点转换为父对象的本地坐标系中的点。该方法有四个参数：相对父对象、屏幕点坐标、摄像机、最终得到的点坐标。一般配合拖拽事件使用。

示例代码

public class Lesson21_UGUI进阶_屏幕坐标转UI相对坐标 : MonoBehaviour, IDragHandler
{    
    public RectTransform parent; // 父对象

    public void OnDrag(PointerEventData eventData)
    {
        Vector2 nowPos; // 当前位置
        // 执行完这个函数后，会把屏幕坐标转换成 UI 本地坐标系下的值赋值给 nowPos
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            parent, // 相对父对象
            eventData.position, // 屏幕点坐标
            eventData.enterEventCamera, // 摄像机
            out nowPos); // 最终得到的点坐标

        this.transform.localPosition = nowPos; // 将当前对象的本地位置设置为转换后的坐标
    }
}

19. Mask遮罩

• 遮罩定义：遮罩是一种在不改变图片的情况下，让图片在游戏中只显示其中一部分的组件。ScrollView 滚动视图中的 ViewPort 就包含遮罩组件，使得滚动视图中只有在可见范围内才能看到组件。
• 遮罩使用方法：关键组件是 Mask 组件，在父对象上添加 Mask 组件即可遮罩其子对象。需要注意的是，想要被遮罩的 Image 需要勾选 Maskable；只要父对象添加了 Mask 组件，所有的 UI 子对象都会被遮罩；遮罩父对象图片不透明的地方显示，透明的地方被遮罩。

20. Mask遮罩模型、粒子特效显示在UI之前

• 直接用摄像机渲染 3D 物体：当 Canvas 的渲染模式不是覆盖模式（摄像机模式和世界（3D）模式）时，只要模型的 Z 轴在 UI 元素之前，模型就可以显示在 UI 之前。建议使用专门的摄像机渲染 UI 相关内容，UI 面板上的 3D 物体也用 UI 摄像机进行渲染。实现方法是设置一个专门渲染 UI 层的摄像机，让主摄像机不渲染 UI 层，UI 摄像机关联 Canvas，并将 Canvas 的渲染模式设置成摄像机模式，然后在 Canvas 上创建 Cube，调整缩放尺寸，层级设置为 UI 层，通过调整 Z 轴控制其显示位置。
• 将 3D 物体渲染在图片上，通过图片显示：专门使用一个摄像机渲染 3D 模型，将其渲染内容输出到 Render Texture 上，再将渲染的图显示在 UI 上。这种方式不受 Canvas 渲染模式的限制。实现步骤为创建一个模型层，创建一个专门渲染模型层的摄像机并改成纯色模式，创建一个立方体并设置为模型层，创建 RenderTexture 渲染器纹理并关联模型摄像机，在 Canvas 下创建 RawImage 并关联 RenderTexture 渲染器纹理。
• 粒子特效显示在 UI 之前：粒子特效的显示和 3D 物体类似。在摄像机模式下，可以在粒子组件的 Renderer 相关参数中改变排序层，让粒子特效始终显示在 UI 之前，不受 Z 轴影响。

21. 异形按钮

• 异形按钮定义：形状不是传统矩形的按钮，例如只有独角兽区域能够被点击响应的按钮。
• 实现准确点击的方法
  • 添加子对象的形式：按钮根据图片矩形范围判断点击响应，范围判断自下而上，有子对象图片时，子对象图片范围也算可点击范围。可以用多个透明图拼凑不规则图形作为按钮子对象进行射线检测。
  • 代码改变图片的透明度响应阈值：创建 Image 变量外部关联按钮的 Image 组件，通过设置 image.alphaHitTestMinimumThreshold 变量来改变透明度命中测试的最小阈值。只有当物体的不透明度大于等于该阈值时，才会进行命中测试。

22.自动布局组件

22.1.布局元素的布局属性

要参与自动布局，布局元素必须包含布局属性，主要有以下 6 条：

属性名称	描述
Minmum width	该布局元素应具有的最小宽度
Minmum height	该布局元素应具有的最小高度
Preferred width	在分配额外可用宽度之前，此布局元素应具有的宽度
Preferred height	在分配额外可用高度之前，此布局元素应具有的高度
Flexible width	此布局元素应相对于其同级而填充的额外可用宽度的相对量
Flexible height	此布局元素应相对于其同级而填充的额外可用高度的相对量

布局时，布局元素大小设置遵循以下规则：

1. 首先分配最小大小（Minmum width 和 Minmum height）。
2. 若父容器有足够可用空间，则分配 Preferred width 和 Preferred height。
3. 若上述分配完成后仍有额外空间，则分配 Flexible width 和 Flexible height。

一般情况下，布局元素的这些属性值为 0，但特定 UI 组件（如 Image 和 Text）依附对象的布局属性可能会改变。通常无需手动修改这些属性，若有需要，可手动添加 LayoutElement 组件进行修改。

22.2.常见自动布局组件

22.2.1.HorizontalVerticalLayoutGroup 水平垂直布局组件

可将子对象并排或竖直放置，一般将该布局组件放到父对象上，子对象为被布局对象。其参数如下：

参数名称	描述
Padding	左右上下边缘的偏移位置
Spacing	子对象之间的间距
ChildAlignment	九宫格对齐方式
Control Child Size	是否控制子对象的宽高
Use Child Scale	在设置子对象大小和布局时，是否考虑子对象的缩放
Child Force Expand	是否强制子对象扩展以填充额外可用空间

22.2.1.2.LayoutElement 布局元素组件

可给子对象添加该组件，例如设置布局属性最小宽和最小高为 100，即便父对象很小，子对象最小也会保持宽高 100。

22.2.3.GridLayoutGroup 网格布局组件

可将子对象当成格子，并设置它们的大小和位置，一般在滚动容器添加到 content 上，和 ContentSizeFitter 内容大小适配器一起使用。其参数如下：

参数名称	描述
Padding	左右上下边缘的偏移位置
Cell Size	每个格子的大小
Spacing	格子之间的间隔
Start Corner	第一个元素所在的位置（四个角）
Start Axis	沿着哪个轴放置元素，Horizontal 水平放置并换行，Vertical 竖直放置并换列
Child Alignment	格子的对齐方式（九宫格）
Constraint	行列约束，有 Flexible（灵活模式，根据容器大小自动适应）、Fixed Column Count（固定列数）、Fixed Row Count（固定行数）三种模式

22.2.4.ContentSizeFitter 内容大小适配器

可自动调整 RectTransform 的宽度和高度，使组件自动设置大小，常用于 Text 组件，或与其他布局组件一起使用。其参数如下：

参数名称	描述
Horizontal Fit	控制宽度的方式
Vertical Fit	控制高度的方式

可选参数包括：

• Unconstrained：不根据布局元素伸展宽度或高度。
• Min Size：根据布局元素的最小宽度或高度伸展。
• Preferred Size：根据布局元素的首选宽度或高度伸展宽度。

若滚动视图中的元素动态添加，滚动视图不会自动改变大小，可给滚动视图添加自动布局组件和内容大小适配器组件，使其动态添加时自动更改宽高。

22.2.5.AspectRatioFitter 宽高比适配器

可让布局元素按一定比例调整自身大小，并在父对象内部根据父对象大小进行适配。其参数如下：

参数名称	描述
Aspect Mode	适配模式，用于调整矩形大小以实现宽高比
Aspect Ratio	宽度除以高度的比值，即宽高比

Aspect Mode 的可选值及含义：

• None：不对矩形进行宽高比适配。
• Width Controls Height：根据宽度自动调整高度。
• Height Controls Width：根据高度自动调整宽度。
• Fit In Parent：自动调整宽度、高度、位置和锚点，使矩形适应父项的矩形，同时保持宽高比，可能会出现“黑边”。
• Envelope Parent：自动调整宽度、高度、位置和锚点，使矩形覆盖父项的整个区域，同时保持宽高比，可能会出现“裁剪”。

25.CanvasGroup画布组

参数名称	描述
Alpha	用于整体控制面板的透明度，通过调整该值可实现面板的淡入淡出效果
Interactable	控制面板整体的启用和禁用状态。设置为 true 时，面板及其子对象可与用户交互；设置为 false 时，面板及其子对象无法与用户交互
Blocks Raycasts	用于设置面板是否阻挡射线检测。设置为 true 时，面板会阻挡射线；设置为 false 时，射线可穿过面板
Ignore Parent Groups	决定是否忽略父级 CanvasGroup 的作用。设置为 true 时，该面板不受父级 CanvasGroup 相关设置的影响；设置为 false 时，会受到父级 CanvasGroup 的影响