Unity UGUI使用手册

概述

UGUI(Unity Graphical User Interface) :Unity 图像用户界面

在游戏开发中，我们经常需要搭建一些图形用户界面。Unity内置的UGUI可以帮助开发者可视化地拼接界面，提高开发效率。UGUI提供不同样式的UI组件，并且封装了对应功能的API，可以满足绝大多数的UI界面开发需求。

|------------------|----------|
| 组件 | 使用频率 |
| Text | ⭐⭐⭐⭐⭐ |
| Button | ⭐⭐⭐⭐⭐ |
| Image | ⭐⭐⭐⭐⭐ |
| Scrollview | ⭐⭐⭐⭐⭐ |
| 布局组件 | ⭐⭐⭐⭐⭐ |
| InputField | ⭐⭐⭐⭐ |
| Slider | ⭐⭐⭐⭐ |
| Toggle | ⭐⭐⭐ |
| ToggleGroup | ⭐⭐ |
| Mask/RectMask 2D | ⭐⭐⭐ |
| Outline | ⭐⭐⭐ |
| Shadow | ⭐⭐⭐ |
| Dropdown | ⭐⭐ |
| Raw Image | ⭐⭐ |
| ScrollBar | ⭐⭐ |

UI组件

Canvas

Canvas 是所有 UI 元素都应该位于其中的区域。Canvas 是带有 Canvas 组件的游戏对象，所有 UI 元素都必须是此类 Canvas 的子项。

如果场景中还没有 Canvas，则使用菜单 GameObject > UI > Image 创建新的 UI 元素（例如图像）会自动创建一个 Canvas。UI 元素将创建为此 Canvas 的子元素。

Canvas 中的 UI 元素的绘制顺序与它们在 Hierarchy 中的显示顺序相同。首先绘制第一个子项，然后绘制第二个子项，依此类推。如果两个 UI 元素重叠，则后一个 UI 元素将出现在前一个 UI 元素的顶部。

要更改哪个元素显示在其他元素之上，只需通过拖动元素来重新排序 Hierarchy 中的元素即可。还可以通过在 Transform 组件上使用以下方法从脚本中控制顺序：SetAsFirstSibling、SetAsLastSirbling 和 SetSiblingIndex。

Render Mode 渲染模式

Screen Space-Overlay：所有UI元素都渲染在场景中的最上层

Screen Space-Camera：画布放置在指定摄像机前面的给定距离处。场景中的物体可以显示在UI前面

World Space：应用：让Canvas更像一个游戏对象，可以在场景中移动，常用于制作跟随角色的血

Text

Text 控件向用户显示一段非交互式文本。这可用于在界面显示标题或标签，或者显示说明文本等。

属性	功能
Text	控件显示的文本
Font 字体	字体资源
Font Style 字形	应用于文本的样式。选项包括 Normal（普通） 、Bold（粗体）、 Italic（斜体） 和 Bold And Italic（粗体+斜体）
Font Size 字体大小	显示文本的大小
Line Spacing 行距	文本行之间的垂直分隔
Rich Text 富文本	是否使用富文本
Alignment 对准	文本的水平和垂直对齐方式
Align by Geometry 按几何图形对齐	不勾选的时候，内容和rect上边会由一点距离，勾选之后就没有了
Horizontal Overflow	水平超框处理 Wrap：超框部分换行显示 Overflow：直接超框显示，不换行
Vertical Overflow	垂直超框处理 Truncate ：超过文本框高度部分直接截断不显示 *Overflow：*超过文本框高度部分超框显示
Best Fit	文本适配，根据文本内容大小调整字体尺寸，可以用于处理多语言文本
Color	设置文本的颜色
Material	用于渲染文本的材质（目前开发中暂未用到）
Raycast Target	需要和组件进行交互时使用，未用到时建议取消勾选
Raycast Padding	调整可点击交互的区域大小
Maskable	用于控制UI元素是否受到父级遮罩组件的影响

Text和Text Mesh Pro的区别

1、Text字体放大过后会模糊失真，Text Mesh Pro字体放大后依然清晰

2、Text本身可以支持不同语言文本显示（包括中文），TextMeshPro需要创建对应语言的字体资源才能使用。

Image

用于显示图标或图像，只能使用Sprite精灵贴图类型

属性	功能
Source Image 源图片	表示要显示的图像的 Texture（必须作为Sprite导入）
Color 颜色	要应用于图像的颜色。
Material 材料	用于渲染图像的材质，一般用来处理图像置灰
Raycast Target	需要和组件进行交互时使用，未用到时建议取消勾选
Raycast Padding	调整可点击交互的区域大小
Maskable	用于控制UI元素是否受到父级遮罩组件的影响
Image Type(重要属性)	* Simple - 均匀缩放整个 sprite。 * Sliced - 在图片被九宫格切割后，可以进行填充拉伸 * Tiled - 类似于瓦片平铺，但平铺（重复）中心部分，而不是拉伸它。 * Filled - 填充类型，可以用来实现进度条、血条效果
Set Native Size	将图像框的尺寸设置为 Texture 的原始像素大小。

Button

用于响应玩家的点击操作

Button组件一般与Image（或者Raw Image）组件同时使用，并且Image的Raycast Target需要勾选（用于响应玩家的交互）。

属性	功能
Interactable 可交互	如果取消勾选，按钮就不可点击交互
Transition 过渡	对用户不同交互状态的显示 处理五种状态：普通、高亮（鼠标进入按钮区域）、按下、选中（点击后）、禁用 共有四种过渡模式 None:没有效果 Color Tine:颜色切换过渡，不同状态显示不同颜色 Sprite Swap:图片切换过渡，不同状态显示不同图片 Animation:动画切换过渡，不同状态播放不同Animation动画 点击Auto Generate Aniamtion，Unity会自动生成动画控制器和动画片段并且为目标添加Animator组件，通过Animation窗口对动画片段进行设计，通过Animator对动画进行控制。

按钮绑定点击响应逻辑

1、直接拖拽

2、代码设置

btnConnect.onClick.AddListener(() =>
{
   Debug.Log("Hello World!");
});

Scrollview/ScrollRect

滚动视图：当需要在小区域中显示占用大量空间的内容时，可以使用 Scroll Rect。Scroll Rect 提供滚动此内容的功能。

属性	功能
Content	这是对要滚动的UI元素的 Rect Transform的引用
Horizontal	可以水平滚动
Vertical	可以垂直滚动
Movement Type	Unrestricted 不受限制 Elastic 弹性 Clamped 夹紧 使用Elastic或Clamped强制内容保持在滚动矩形的范围内。当内容到达滚动矩形的边缘时，弹性模式会弹起内容
Elasticity	弹力，这是弹性模式中弹力大小，数值越大，反弹速度就越慢
Inertia	惯性 ，当设置惯性时，当指针在拖动后释放时，内容将继续移动。 当没有设置惯性时，内容只会在拖动时移动。
Deceleration Rate	减速速率，当惯性设置时，减速速率决定内容停止移动的速度。速率为0将立即停止移动。值为1意味着移动永远不会减慢。
Scroll Sensitivity	滚动灵敏度
Viewport	视窗，引用视图端口的矩形变换，它是矩形变换内容的父视图。

1、自动适配Content

一般在Content节点上挂载Content Size Fitter和Vertical Layout Group，这样组件可以自动根据子物体多少进行尺寸适配，这样就可以比较好的显示滑动效果了。

2、滑动到列表头或者列表尾部。

以垂直滑动列表来说

//滑到列表头部
ScrollRect.normalizedPosition = new Vector2(0, 1);

//滑倒列表尾部
ScrollRect.normalizedPosition = new Vector2(0, 0);

InputField

文本输入框

属性	功能
Character Limit	可输入的最大字符数的值
Content Type
Line Type	Single Line：单行文本框，可以输入单行文本 Multi Line Submit：多行文本框，可以输入多行文本。当用户按下Enter键时，输入文本会被提交 Multi Line Newline：多行文本框，可以输入多行文本。当用户按下Enter键时，会插入一个换行符
Caret Blink Rate	调节光标闪烁的频率，数值越大，闪烁的越快
Caret Width	调节光标的宽度，数值越大，光标越宽
Custom Caret Color	光标默认为深灰色，勾选后会弹出Caret Color属性，可以修改光标的颜色
Selection Color	选择文本时的颜色（就是输入完再选择时的底色），默认为浅蓝
Hide Mobile Input	在移动设备上隐藏虚拟键盘（官方此属性适用于ios）
Read only	是否只读，如果勾选，次输入框就不接受输入

交互事件绑定

​

//输入内容变化
inputField.onValueChanged.AddListener((str) =>
{
  Debug.Log(str);
});

//完成输入后点击回车键
inputField.onEndEdit.AddListener((str) =>
{
  Debug.Log(str);
});

Slider

滑动条

​

​

属性	功能
Interactable	是否可交互，用作进度条时一般取消勾选，用作设置调整数值时一般要勾选
Fill Rect	用于控件填充区域的图形。
Handle Rect	用于控件的滑动"手柄"部分的图形
Direction	拖动手柄时滑块值增加的方向。选项包括 Left To Right 、Right To Left 、Bottom To Top 和 Top To Bottom
Min Value	滑动条的最小值
Max Value	滑动条的最大值
Whole Numbers	滑块是否应限制为整数值？
Value	[0,1]

交互事件绑定

 Slider.onValueChanged.AddListener((value) =>
{
    Debug.Log($"进度值：{value}");
});

Toggle

单选开关

//isOn bool
Toggle.onValueChanged.AddListener((isOn) =>
{
    Debug.Log($"开关状态：{isOn}");
});

ToggleGroup

开关组

一般实现单选开关的作用（选中组中一个开关，取消选中其他开关）,必须保证其中一个被勾选。如果勾选**Allow Switch Off，**所有的开关都可以被关闭。

Mask/Rect Mask 2D

遮罩组件需要挂载到显示图像的父节点上

Rect Mask 2D 进行矩形裁剪

还可进行边缘虚化

Mask和Rect Mask 2D的区别：

1、Mask主要处理不规则图形遮罩效果，RectMask2D只能做矩形遮罩。

2、Mask需要一个Image来当作遮罩区域,子节点在Image[渲染区域]才会显示，RectMask2D以自身RectTransform为裁剪区域，可以不挂载Image组件,子节点在[RectTransform区域]内显示。

3、Rect Mask 2D比Mask性能好，(例如常见于scrollview的情况下,创建scrollview默认是Mask,可以选择手动替换成RectMask2D,大多数情况都适用,会有些许性能提升)

Outline

文本轮廓组件

Shadow

文本阴影组件

Dropdown

下拉列表可用于让用户从选项列表中选择单个选项。该控件显示当前选择的选项。单击后，它会打开选项列表，以便可以选择新选项。选择新选项后，列表将再次关闭，并且控件显示新的选定选项。如果用户单击控件本身或 Canvas 中的其他任何位置，则列表也会关闭。

属性	功能
Template 模板	下拉列表的模板的 Rect Transform。
Caption Text 字幕文本	用于保存当前所选选项的文本。（可选）
Caption Image 标题图像	用于保存当前所选选项的图像。（可选）
Item Text	用于保存项目的文本。（可选）
Item Image	用于保存项目的图像。（可选）
Value	当前所选选项的索引。0 是第一个选项，1 是第二个选项，依此类推。
Options	可能的选项列表。可以为每个选项指定文本字符串和图像。

//参数index是int类型，代表选中项的索引
Dropdown.onValueChanged.AddListener((index) =>
{
    Debug.Log($"选中{index}");
});

Raw Image

原始图像组件

RawImage可以结合Render Texture显示相机视野图片，结合video player播放视频

Image只能使用Sprite精灵贴图，Raw Image可以使用任何纹理

Image比Raw Image更消耗性能

ScrollBar

滚动条

布局组件

Content Size Fitter

内容尺寸适配器
​

属性	功能
Horizontal Fit
Unconstrained	不要根据布局元素驱动宽度
Min Size	根据布局元素的最小宽度驱动宽度
Preferred Size	宽度适配
Vertical Fit
Unconstrained	不要根据布局元素驱动高度
Min Size	基于布局元素的最小高度驱动高度
Preferred Size	高度适配

Horizontal Layout Group

水平布局组

Property: 财产：	Function: 功能：
Padding 填充	调整上下左右边距
Spacing 间距	布局元素之间的间距。
Child Alignment 子对齐
Control Child Size 控制子项大小	Layout Group 是否控制其子布局元素的宽度和高度。
Use Child Scale 使用子比例	布局组在调整元素大小和布局元素时是否考虑其子布局元素的比例。
Child Force Expand Child Force 扩展	是否强制子布局元素展开以填充额外的可用空间。

Vertical Layout Group

垂直布局组

Grid Layout Group

网格布局组

1、Flexible:根据宽和高适配最大可以显示的数量

2、Fixed Column Count：指定最大显示列数

3、Fixed Column Count：指定最大显示行数

事件系统

可以参考我的另一篇文章

Unity 事件触发类型_unity event=debug.log-CSDN博客

参考文章

Unity 3D - Mask和RectMask2D区别-CSDN博客

Unity UI: Unity User Interface | Unity UI | 1.0.0