# UI
# GUI
# GUI 是什么？
全称 即时模式游戏用户交互界面（IMGUI)
在 Unity 中一般简称为 GUI
它是一个代码驱动的 UI 系统
# GUI 的主要作用
- 作为程序员的调试工具，创建游戏内调试工具
- 为脚本组件创建自定义检视面板
- 创建新的编辑器窗口和工具以拓展 Unity 本身（一般用作内置游戏工具）
注意：不要用它为玩家制作 UI 功能
# GUI 的工作原理
在继承 MonoBehaviour 的脚本中的特殊函数里
调用 GUI 提供的方法
类似生命周期函数
private void OnGUI() | |
{ | |
// 在其中书写 GUI 相关代码 即可显示 GUI 内容 | |
// 先调用的先执行，后面的会覆盖前面的 | |
} |
注意：
- 它每帧执行 相当于是用于专门绘制 GUI 界面的函数
- 一般只在其中执行 GUI 相关界面绘制和操作逻辑
- 该函数 在 OnDisable 之前 LateUpdate 之后执行
- 只要是继承 Mono 的脚本 都可以在 OnGUI 中绘制 GUI
# GUI 控件绘制的共同点
他们都是 GUI 公共类中提供的静态函数 直接调用即可
他们的参数都大同小异
位置参数：Rect 参数 x y 位置 w h 尺寸
显示文本：string 参数
图片信息：Texture 参数
综合信息：GUIContent 参数
自定义样式：GUIStyle 参数
每一种控件都有多种重载，都是各个参数的排列组合。必备的参数内容是位置信息和显示信息
# 文本控件
// 文本 | |
GUI.Label(rect, "write something..."); | |
// 贴图 | |
GUI.Label(rect, texture); | |
// GUIContent | |
GUI.Label(rect, guiContent); | |
// 获取 Tooltip 信息 | |
Debug.Log(GUI.tooltip); |
# 按钮控件
// 按钮被点击 | |
if(GUI.Button(position，guiContent, guiStyle)) | |
{ | |
Debug.Log("Button Clicked!"); | |
} | |
// 长按按钮被点击 | |
if(GUI.RepeatButton(position, guiContent)) | |
{ | |
Debug.Log("Repeat Button Clicked!"); | |
} |
# 多选框和多选框
// 多选框 | |
// 修改固定宽高 fixedWidth 和 fixedHeight | |
// 修改从 GUIStyle 边缘到內容起始处的空间 padding | |
isSelected = GUI.Toggle(rect, isSelected, "开关", guiStyle); | |
// 单选框 | |
// 单选框是基于 多选框的实现 | |
// 关键：通过一个 int 标识来决定是否选中 | |
if(GUI.Toggle(new Rect(0, 60, 100, 30), nowSelIndex == 1, "选项一")) | |
{ | |
nowSelIndex = 1; | |
} | |
if(GUI.Toggle(new Rect(0, 60), 100, 30), nowSelIndex == 2, "选项二")) | |
{ | |
nowSelIndex = 2;} | |
} | |
if(GUI.Toggle(new Rect(0, 60, 100, 30), nowSelIndex == 3, "选项三")) | |
{ | |
nowSelIndex = 3; | |
} |
# 文本框
// 普通输入 | |
text = GUI.TextField(rect, text, maxLength); | |
// 密码输入 | |
password = GUI.PasswordField(rect, password, '*'); |
# 拖动条
// 水平拖动条 | |
value = GUI.HorizontalSlider(rect, value, leftValue, rightValue); | |
// 竖直拖动条 | |
value = GUI.VerticalSlider(rect, value, leftValue, rightValue); |
# 图片绘制
// ScaleMode | |
// ScaleAndcrop：也会通过宽高比来计算图片 但是 会进行裁剪 | |
// ScaleToFit：会自动根据宽高比进行计算不会拉变形会一直保持图片完全显示的状态 | |
// StretchToFill：始终填充满你传入的 Rect 范围 | |
//alpha 是用来 控制 图片是否开启透明通道的 | |
//imageAspect：自定义宽高比 如果不填 默认为 e 就会使用 图片原始宽高 | |
GUI.DrawTexture(position, image, scaleMode, alphaBlend, imageAspect); |
# 框绘制
GUI.Box(position, text); |
# 工具栏和选择网格
// 工具栏 | |
selected = GUI.Toolbar(position, selected, texts); | |
// 工具栏可以帮助我们根据不同的返回索引 来处理不同的逻辑 | |
switch(selected) | |
{ | |
case 0: | |
break; | |
case 1: | |
break; | |
case 2: | |
break; | |
} | |
// 选择网格 | |
// 相对 Toolbar 多了一个参数 xCount 代表水平方向最多显示的按钮数量 | |
selected = GUI.SelectionGrid(position, selected, texts, xCount); |
# 分组
GUI.BeginGroup(position); | |
// todo | |
// ... | |
GUI.EndGroup(); |
用于批量控制控件位置
可以理解为 包裹着的控件加了一个父对象
可以通过控制分组来控制包裹控件的位置
# 滚动列表
nowPos = GUI.BeginScrollView(position, scrollPosition, viewRect); | |
// todo | |
// ... | |
GUI.EndScrollView(); |
# 窗口
// callback | |
void func(int id) | |
{ | |
// do something... | |
// 如果是拖动窗口需要写下面这个语句 | |
// 该 API 写在窗口函数中调用 可以让窗口被拖动 | |
// 传入 Rect 参数的重载 作用是决定窗口中哪一部分位置 可以被拖动 | |
// 默认不填 就是无参重载 默认窗口的所有位置都能被拖动 | |
GUI.DragWindow(rect); | |
} | |
// 窗口 | |
// 第一个参数 id 是窗口的唯一 ID 不要和别的窗口重复 | |
// 委托参数 用于绘制窗口用的函数 | |
GUI.Window(id, clientRect, func, title); | |
// 模态窗口 | |
// 可以让该其它控件不再有用 | |
// 你可以理解该窗口在最上层 其它按钮都点击不到了 只能点击该窗口上控件 | |
GUI.ModalWindow(id, clientRect, func, title); | |
// 拖动窗口 | |
rect = GUI.Window(id, rect, func, title); | |
rect = GUI.ModalWindow(id, rect, func, title); |
# 自定义皮肤样式
// 全局颜色 | |
// 全局的着色颜色 影响背景和文本颜色 | |
GUI.color = Color.red; | |
// 文本着色颜色 会和全局颜色相乘 | |
GUI.contentColor = Color.yellow; | |
// 背景元素着色颜色 会和全局颜色相乘 | |
GUI.backgroundColor = Color.green; | |
// 整体皮肤样式 GUISkin | |
GUI.skin = skin; |
# GUILayout
// 自动布局 | |
// 主要用于进行编辑器开发 用来做游戏 UI 不太合适 | |
GUILayout.BeginArea(rect); | |
GUILayout.BeginHorizontal(); | |
GUILayout.Button("btn1"); | |
GUILayout.Button("btn2"); | |
GUILayout.EndHorizontal(); | |
GUILayout.EndArea(); | |
// GUILayoutOption 布局选项 | |
// 控件的固定宽高 | |
GUILayout.Width(300); | |
GUILayout.Height(200); | |
// 允许控件的最小宽高 | |
GUILayout.Minwidth(50); | |
GUILayout.MinHeight(50); | |
// 允许控件的最大宽高 | |
GUILayout.MaxWidth(100); | |
GUILayout.MaxHeight(100); | |
// 允许或禁止宽度 / 高度对齐 | |
GUILayout.ExpandWidth(true); // 允许 | |
GUILayout.ExpandWidth(false); // 禁止 | |
GUILayout.ExpandHeight(true); // 允许 | |
GUILayout.ExpandHeight(false); // 禁止 |
# 总结
缺点：
- 重复工作量繁多
- 控件绘制相关代码很多
最大缺点：
必须运行时才能去查看结果
不支持分辨率自适应
主要用处：
- 用于进行 Unity 内置编辑器、调试工具、编辑工具等等相关开发
- 一般不会用它来做游戏 UI
# NGUI
# NGUI 是什么？
NGUI 全称 下一代用户界面（Next-Gen UI）
它是第三方提供的 Unity 付费插件
专门用于制作 Unity 中游戏 UI 的第三方工具
相对于 GUI 它更适用于制作游戏 UI 功能
更方便使用，性能和效率更高
Unity 插件：是一种基于 Unity 规范编写出来的程序，主要用于拓展功能，简单理解就是别人基于 Unity 写好的某种功能代码，我们可以直接用来处理特定的游戏逻辑
# NGUI 的发展史
Unity 最初版本～Unity4.6 版本
Unity 官方只提供了 GUI 用于游戏 UI 的开发
所以更为高级和方便的 NGUI 是做 UI 的不二选择
Unity4.6 版本以后
Unity 官方招募 NGUI 作者加入 Unity，协助 Unity 开发出 UGUI 系统用于游戏 UI 功能开发
由于 UGUI 刚推出后功能不够完善，所以经历了较长的过渡期，几乎到 Unity5 的时代才开始正式全面普及
# 三大基础组件
# Root 组件（UIRoot）
Root 是用于分辨率自适应的根对象
可以设置基本分辨率，相当于设置 UI 显示区域
并且管理所有 UI 控件的分辨率自适应
可以简单理解，它管理一个 UI 画布，所有的 UI 都是显示在这个画布上的
它会管理 UI 画布和不同屏幕分辨率的适应关系
参数相关
灵活模式（Flexible）
在该模式下，UI 都是以像素为基础，100 像素的物体无论在多少分辨率上都是 100 像素。这就意味着，100 像素在分辨率低的屏幕上可能显示正常，但是在高分辨率上就会显得很小。
- Minimum Height
- 屏幕高小于该值时，开始按比例缩放
- Maximum Height
- 屏幕高大于改值时，开始按比例缩放
- Shrink Portrait UI
- 竖屏时，按宽度来适配
- Adjust by DPI
- 使用 dpi 做适配计算，建议勾选
约束模式（Constrained）
该模式下，屏幕按尺寸比例来适配，不管实际屏幕有多大。NGUI 都会通过合适的缩放来适配屏幕。这样在高分辨率上显示的 UI 就会被放大保持原有大小，但有可能会模糊，好处是各设备看到的 UI 和屏幕比例是一样的。
- Content Width
- 按照该宽度值适配屏幕
- 制作资源时的默认分辨率宽
- Content Height
- 按照该高度值适配屏幕
- 制作资源时的默认分辨率高
- Fit 表示以那个值做适配
- 勾选 Width
屏幕比例变化时，按照宽度来适配（宽度始终不变） - 勾选 Height
屏幕比例变化时，按照高度来适配（高度始终不变） - 两个都勾选
不会被裁剪，但是有黑边；当适配宽高比大于实际宽高比时，就会按照宽度适配，反之按照高度适配 - 如果两个都不勾选
始终保证屏幕被 UI 填充满；不会有黑边；可能会被裁剪
Constrained On Mobiles（上两种模式的综合体）
- 在 PC 和 Mac 等桌面设备上用 Flexible 模式
- 在移动设备上用 Constrained 模式
# Panel 组件（UIPanel）
它是用于让 UI 元素能够被渲染的关键组件，一般情况下一个面板就需要一个 UIPanel，所有的 UI 元素会依托在离自己最近的 Panel 下。
参数相关
Alpha
- 控制所有子 UI 元素的透明度
Depth
- 控制该 Panel 的层级
- 层级高的后渲染会把层级低的先渲染的遮挡住
Clipping
- 裁剪
None：不处理 正常
Texture Mask：根据图片信息进行遮罩 比如人物头像
Soft Clip：自己定范围裁剪 比如拖动框
Constrain But Don't Clip：约束但不剪裁 不裁剪画面，只限制响应范围
Sorting Layer：排序层
- 裁剪
Advanced Options
- 渲染相关高级选项
锚点设置
- 用于分辨率自适应设置大小
# Event System（UICamera）
主要作用是让摄像机渲染出来的物体能够接收到 NGUI 的事件。大部分设置不需要我们去修改
参数相关
Event Type
- 事件类型
- 决定了脚本如何对鼠标和触屏事件进行响应
- UI 模式，那么他们处理事件的方式是根据组件的深度
- World 模式，那么则会根据距离离主摄像机的远近来进行响应排序
2D 和 3D 的区别是，碰撞器是用 3D 碰撞器还是 2D 碰撞器
Events go to
- 事件通过刚体还是碰撞盒传递
Process Events In
- 事件更新进度在 Update 中还是 LateUpdate 中
- 一般不改，默认在 Update 中
Event Mask
- 决定哪个游戏对象层级将会接受事件
Debug
- 是否开启调试模式
- 如果开启，可以帮助你在点击时
- 判断当前和鼠标事件交互的是什么对象
- 能在 Scene 窗口看到信息
Command Click
- 苹果电脑上是否用 Command 按键模拟右键操作
Allow Multi Touch
- 是否支持多点触碰
Auto Hide Cursor
- 当游戏有控制器或者其他输入设备时
- 是否自动隐藏光标
Sticky Tooltip
- 是否使用 tooltip
Long Press Tooltip
- 是否长按出提示
Tooltip Delay
- 停留多久出现 tip
Raycast Range
- 射线长度，一般不修改
EventSources
- 接收的事件来源
- Mouse 鼠标
- Touch 触摸
- Keyboard 键盘
- Controller 控制器
- 接收的事件来源
Thresholds
- 调整鼠标事件的点击、拖、轻拍等行为
- Mouse Drag
- Mouse Click
- Touch Drag
- Touch Tap
- 调整鼠标事件的点击、拖、轻拍等行为
Axes and keys
- 热键关系，一般不修改
# 图集
所谓打图集，就是把各个小图片合并成一张大图片
打图集的主要目的是提高渲染效率
# 三大基础控件
# Sprite 精灵图片
# Label 文本控件
# Texture 大图控件
# UGUI
# UGUI 是什么？
UGUI 是 Unity 引擎内自带的 UI 系统
官方称之为：Unity UI 是目前 Unity 商业游戏开发中使用最广泛的 UI 系统开发解决方案
它是基于 Unity 游戏对象的 UI 系统，只能用来做游戏 UI 功能，不能用于开发 Unity 编辑器中内置的用户界面
# 六大基础组件
Canvas 对象上依附的：
- Canvas：画布组件，主要用于渲染 UI 控件
- Canvas Scaler：画布分辨率自适应组件，主要用于分辨率自适应
- Graphic Raycaster：射线事件交互组件，主要用于控制射线响应相关
- RectTransform：UI 对象位置锚点控制组件，主要用于控制位置和对其方式
EventSystem 对象上依附的：
- EventSystem
- Standalone Input Module
玩家输入事件响应系统和独立输入模块组件，主要用于监听玩家操作
# Canvas
Canvas 的意思是画布
它是 UGUI 中所有 UI 元素能够被显示的根本
它主要负责渲染自己的所有 UI 子对象
如果 UI 控件对象不是 Canvas 的子对象，那么控件将不能被渲染
我们可以通过修改 Canvas 组件上的参数修改渲染方式
场景中可以有多个 Canvas 对象
场景中允许有多个 Canvas 对象
可以分别管理不同画布的渲染方式，分辨率适应方式等等参数
如果没有特殊需求，一般情况场景上一个 Canvas 即可
Canvas 的三种渲染方式
Screen Space- Overlay：屏幕空间，覆盖模式，UI 始终在前
- Pixel Perfect：是否开启无锯齿精确渲染 (性能换效果)
- SortOrder：排序层编号（用于控制多个 Canvas 时的渲染先后顺序）
- TargetDisplay：目标设备（在哪个显示设备上显示）
- Additional Shader Channels：其他着色器通道，决定着色器可以读取
Screen Space-Camera：屏幕空间，摄像机模式，3D 物体可以显示在 UI 之前
- RenderCamera：用于渲染 UI 的摄像机（如果不设置将类似于覆盖模式）
- Plane Distance：UI 平面在摄像机前方的距离，类似整体 Z 轴的感觉
- Sorting Layer：所在排序层
- Order in Layer：排序层的序号
World Space：世界空间，3D 模式，可以把 UI 对象像 3D 物体一样处理，常用于 VR 或者 AR
- Event Camera：用于处理 UI 事件的摄像机（如果不设置，不能正常注册 UI 事件）
总结
Canvas 组件用来干啥 —— 画布组件，用于渲染显示 UI 控件，UI 控件必须作为子对象
场景中可以有多个 Canvas 对象 —— 不同的渲染和分辨率适应方式（不常用）
Canvas 组件的 3 种渲染方式
覆盖模式：UI 始终显示在最前面
摄像机模式：3D 物体可以显示在 UI 之前
3D 模式：用于制作 3DUI，在 VR 和 AR 中常用，游戏中的 3D UI 效果才使用
# CanvasScaler
CanvasScaler 意思是画布缩放控制器
它是用于分辨率自适应的组件
它主要负责在不同分辨率下 UI 控件大小自适应
它并不负责位置，位置由之后的 RectTransform 组件负责
它主要提供了三种用于分辨率自适应的模式
我们可以选择符合我们项目需求的方式进行分辨率自适应
屏幕分辨率：Game 窗口中的 Stats 统计数据窗口看到的当前 “屏幕” 分辨率，会参与分辨率自适应的计算
参考分辨率：参考分辨率在缩放模式的宽高模式中出现的参数，参与分辨率自适应的计算
画布大小和缩放系数：选中 Canvas 对象后在 RectTransform 组件中看到的宽高和缩放
宽高 * 缩放系数 = 屏幕分辨率
分辨率大小自适应：通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数该结果会影响所有 UI 控件的縮放大小
分辨率大小自适应主要就是通过不同的算法计算出一个缩放系数，用该系数去缩放所有 UI 控件，让其在不同分辨率下达到一个较为理想的显示效果。
说人话：屏幕大的时候，按钮大，屏幕小的时候，按钮小
CanvasScaler 的三种适配模式
Constant Pixel Size（恒定像素模式）：无论屏幕大小如何，UI 始终保持相同像素大小
- Scale Factor：缩放系数，按此系数缩放画布中的所有 UI 元素
- Reference Pixels Per Unit：单位参考像素，多少像素对应 Unity 中的一个单位（默认一个单位为 100 像素）图片设置中的 Pixels Per Unit 设置，会和该参数一起参与计算
- UI 原始尺寸 = 图片大小（像素）/（Pixels Per Unit / Reference Pixels Per Unit）
- 它不会让 UI 控件进行分辨率大小自适应，会让 UI 控件始终保持设置的尺寸大小显示
- 一般在进行游戏开发极少使用这种模式，除非通过代码计算来设置缩放系数
Scale With Screen Size（缩放模式）：根据屏幕尺寸进行缩放，随着屏幕尺寸放大缩小
Reference Resolution：参考分辨率（美术同学出图的标准分辨率）
缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算
Screen Match Mode：屏幕匹配模式，当前屏幕分辨率宽高比不适应参考分辨率时，用于分辨率大小自适应的匹配模式
Expand：水平或垂直拓展画布区域，会根据宽高比的变化来放大缩小画布，可能有黑边
- 拓展匹配：将 Canvas Size 进行宽或高扩大，让他高于参考分辨率
- 计算公式：
- 缩放系数 = Mathf.Min (屏幕宽 / 参考分辨率宽，屏幕高 / 参考分辨率高)
- 画布尺寸 = 屏幕尺寸 / 缩放系数
- 表现效果：最大程度的缩小 UI 元素，保留 UI 控件所有细节，可能会留黑边
Shrink：水平或垂直裁剪画布区域，会根据宽高比的变化来放大缩小画布，可能会裁剪
- 收缩匹配：将 Canvas Size 进行宽或高收缩，让它低于参考分辨率
- 计算公式：
- 缩放系数 = Mathf.Max (屏幕宽 / 参考分辨率宽，屏幕高 / 参考分辨率高)
- 画布尺寸 = 屏幕尺寸 / 缩放系数
- 表现效果：最大程度的放大 UI 元素，让 UI 元素能够填满画面，可能会出现裁剪
Match Width Or Height：以宽高或者二者的平均值作为参考来缩放画布区域
宽高匹配：以宽高或者二者的某种平均值作为参考来缩放画布
Match：确定用于计算的宽高匹配值
计算公式描述
// 在取平均值之前，我们先取相对宽度和高度的对数float logWidth = Mathf.Log(屏幕宽/参考分辨率宽， 2);
float logHeight = Mathf.Log(屏幕高/参考分辨率高，2);
// 在对数空间中变换是为了获得更好的性能以及更准确的结果float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight);
scaleFactor = Mathf.Pow(2, logWeightedAverage);
Constant Physical Size（恒定物理模式）：无论屏幕大小和分辨率如何，UI 元素始终保持相同物理大小
- DPI（Dots Per Inch，每英寸点数）：图像每英寸长度内的像素点数
- Physical Unit：物理单位，使用的物理单位种类
- Fallback Screen DPI：备用 DPI，当找不到设备 DPI 时，使用此值
- Default Sprite DPI：默认图片 DPI
| 单位种类 | 与 1 英寸的关系 |
|---|---|
| Centimeters（厘米 cm） | 2.54 |
| Millimeters（毫米 mm） | 25.4 |
| Inches（英寸） | 1 |
| Points（点） | 72 |
| Picas（皮卡） | 6 |
计算公式：
根据 DPI 算出新的 Reference Pixels Per Unit（单位参考像素）
新单位参考像素 = 单位参考像素 * Physical Unit / Default Sprite DPI
再使用模式一：恒定像素模式的公式进行计算
原始尺寸 = 图片大小（像素）/（Pixels Per Unit / 新单位参考像素）
恒定像素模式和恒定物理模式区别
相同点：他们都不会进行缩放，图片有多大显示多大，使用他们不会进行分辨率大小自适应
不同点：相同尺寸不同 DPI 设备像素点区别，像素点越多细节越多。同样为 5 像素，DPI 较低的设备上看起来的尺寸可能会大于 DPI 较高的设备，恒定物理模式在不同的 DPI 下的设备上显示同样的物理大小
World（3D 世界模式）：当 Canvas 的渲染模式设置为世界空间 3D 渲染模式时，这时 Canvas Scaler 的缩放模式会强制变为 World 3D 世界模式
- Dynamic Pixels Per Unit：UI 中动态创建的位图（例如文本）中，单位像素数（类似密度）
- Reference Pixels Per Unit：单位参考像素，多少像素对应 Unity 中的一个单位（默认一个单位为 100 像素）
总结
游戏开发一般使用 Scale With Screen Size 缩放模式
使用建议：
存在横竖屏切换选择：
- Expand（拓展匹配，有黑边）和 Shrink（收缩匹配，有裁剪）
不存在横竖屏切换（定死的横屏或者竖屏游戏）：
Match Width or Height（宽高匹配）
横屏游戏 Match = 1
竖屏游戏 Match = 0
# Graphic Raycaster
Graphic Raycaster 意思是图形射线投射器它是用于检测 UI 输入事件的射线发射器
它主要负责通过射线检测玩家和 UI 元素的交互判断是否点击到了 UI 元素
- Ignore Reversed Graphics：是否忽略反转图形
- Blocking Objects：射线被哪些类型的碰撞器阻挡（在覆盖渲染模式下无效）
- Blocking Mask：射线被哪些层级的碰撞器阻挡（在覆盖渲染模式下无效）
# EventSystem
Event System 意思是事件系统，它是用于管理玩家的输入事件并分发给各 UI 控件
它是事件逻辑处理模块，所有的 UI 事件都通过 EventSystem 组件中轮询检测并做相应的执行
它类似一个中转站，和许多模块一起共同协作
如果没有它，所有点击、拖曳等等行为都不会被响应
组件参数
- First Selected：首先选择的游戏对象，可以设置游戏一开始的默认选择
- Send Navigation Events：是否允许导航事件（移动 / 按下 / 取消）
- Drag Threshold：拖拽操作的阈值（移动多少像素算拖拽）
# Standalone Input Module
Standalone Input Module 意思是独立输入模块
它主要针对处理鼠标 / 键盘 / 控制器 / 触屏（新版 Unity）的输入
输入的事件通过 EventSystem 进行分发
它依赖于 EventSystem 组件，它们两缺一不可
组件参数
- Horizontal Axis：水平轴按钮对应的热键名（该名字对应 Input 管理器）
- Vertical Axis：垂直轴按钮对应的热键名（该名字对应 Input 管理器）
- Submit Button：提交（确定）按钮对应的热建名（该名字对应 Input 管理器）
- Cancel Button：取消按钮对应的热建名（该名字对应 Input 管理器）
- Input Actions Per Second：每秒允许键盘 / 控制器输入的数量
- Repeat Delay：每秒输入操作重复率生效前的延迟时间
- ForceModule Active：是否强制模块处于激活状态
# RectTransform
RectTransform 意思是矩形变换
它继承于 Transform，是专门用于处理 UI 元素位置大小相关的组件
Transform 组件只处理位置、角度、缩放
RectTransform 在此基础上加入了矩形相关，将 UI 元素当做一个矩形来处理
加入了中心点、锚点、长宽等属性
其目的是更加方便的控制其大小以及分辨率自适应中的位置适应
组件参数
- Pivot：轴心点（中心点），取值范围 0~1
- Anchors（相对父矩形锚点）：
- Min 是矩形锚点范围 X 和 Y 的最小值
- Max 是矩形锚点范围 X 和 Y 的最大值
- 取值范围都是 0~1
- Pos (X,Y,Z)：轴心点（中心点）相对锚点的位置
- Width/Height：矩形的宽高
- Left/Top/Right/Bottom：矩形边缘相对于锚点的位置；当锚点分离时会出现这些内容
- Rotation：围绕轴心点旋转的角度
- Scale：缩放大小
：Blueprint Mode（蓝图模式)，启用后，编辑旋转和缩放不会影响矩形，只会影响显示内容
：Raw Edit Mode（原始编辑模式)，启用后，改变轴心和锚点值不会改变矩形位置
# Image
Image 是图像组件，是 UGUI 中用于显示精灵图片的关键组件
除了背景图等大图，一般都使用 Image 来显示 UI 中的图片元素
组件参数
- Source Image：图片来源（图片类型必须是 “精灵” 类型）
- Color：图像的颜色
- Material：图像的材质（一般不修改，会使用 UI 的默认材质）
- Raycast Target：是否作为射线检测的目标（如果不勾选将不会响应射线检测）
- Maskable：是否能被遮罩（之后结合遮罩相关知识点进行讲解）
- Image Type：图片类型
- Simple - 普通模式，均匀缩放整个图片
- Sliced - 切片模式，9 宫格拉伸，只拉伸中央十字区域
- Pixels Per UnitMultiplier：每单位像索乘数
- Fill Center：中心填充
- Tiled - 平铺模式，重复平铺中央部分
- Filled - 填充模式
- Fill Method：填充方式
- Fill Origin：填充原点
- Fill Amount：填充量
- Clockwise：顺时针方向
- Use Sprite Mesh：使用精灵网格，勾选的话 Unity 会帮我们生成图片网格
- Preserve Aspect：确保图像保持其现有尺寸
- Set Native Size：设置为图片资源的原始大小
# 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：最大多大
富文本
- 加粗
- <b> 文本内容 </b>
- 斜体
- <i> 文本内容 </i>
- 大小
- <size=50> 文本内容 </size>
- 颜色
- <color=#ff0000ff> 文本内容 </size>
- <color=red> 文本内容 </size>
# RawImage
RawImage 是原始图像组件
是 UGUI 中用于显示任何纹理图片的关键组件
它和 Image 的区别是，一般 RawImage 用于显示大图（背景图，不需要打入图集的图片，网络下载的图等等）
组件参数
- Texture：图像纹理
- UV Rect：图像在 UI 矩形内的偏移和大小
- 位置偏移 X 和 Y（取值 0~1）
- 大小偏移 W 和 H（取值 0~1）
- 改变他们图像边缘将进行拉伸来填充 UV 矩形周围的空间
# Button
Button 是按钮组件，是 UGUI 中用于处理玩家按钮相关交互的关键组件
默认创建的 Button 由 2 个对象组成
父对象 ——Button 组件依附对象，同时挂载了一个 Image 组件，作为按钮背景图
子对象 —— 按钮文本（可选）
组件参数
Interactable：是否接受输入
Transition：响应用户输入的过渡效果
- None：没有状态变化效果
- ColorTint：用颜色表示不同状态的变化
- TargetGraphic：控制的目标图形
- Normal Color：正常状态颜色
- Highlighted Color：鼠标进入时显示高亮颜色
- Pressed Color：按下颜色
- Selected Color：选中的颜色
- Disabled Color：禁用时的颜色
- Color Multiplier：颜色倍增器，过渡颜色乘以该值
- FadeDuration：衰减持续时间，从一个状态进入另一个状态时需要的时间
- Sprite Swap：用图片表示不同状态的变化
- Highlighted Sprite：鼠标进入时图片
- Pressed Sprite：按下时图片
- Selected Color：选中时的颜色
- Disabled Sprite：禁用时显示的图片
- Animation：用动画表示不同状态的变化
- Normal Trigger：正常动画触发器
- Highlighted Trigger：鼠标进入状态时触发器
- Pressed Trigger：按下时触发器
- Selected Trigger：选中时触发器
- Disabled Trigger：禁用时触发器
Navigation：导航模式，可以设置 UI 元素如何在播放模式中控制导航
- None：无键盘导航
- Horizontal：水平导航
- Verticval：垂直导航
- Automatic：自动导航
- Explicit：指定周边控件进行导航
- 可以在场景窗口看到导航连线
OnClick：单击（按下再抬起）执行的函数列表
# Toggle
组件参数
- Interactable：是否接受输入
- Transition：响应用户输入的过渡效果
- Navigation：导航模式，可以设置 UI 元素如何在播放模式中控制器导航
- IsOn：当前是否处于打开状态
- Toggle Transition：在开关值变化时的过渡方式
- None：无任何过渡，直接显示隐藏
- Fade：淡入淡出
- Graphic：用于表示选中状态的图片
- Group：单选框分组
- OnValueChanged：开关状态变化时执行的函数列表
ToggleGroup
- Allow Switch Off：是否允许不选中任何一个单选框
注意：单选框分组组件可以挂载在任何对象上，只需要将其和一组的单选框关联即可
# InputField
InputField 是输入字段组件
是 UGUI 中用于处理玩家文本输入相关交互的关键组件
默认创建的 InputField 由 3 个对象组成
父对象 ——InputField 组件依附对象 以及 同时在其上挂载了一个 Image 作为背景图
子对象 —— 文本显示组件（必备）、默认显示文本组件（必备）
组件参数
- 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：只读，不能改
- Character Limit：可以输入字符长度的最大值
- OnValueChanged：内容改变时执行的函数列表
- OnEndEdit：结束输入时执行的函数列表
# Slider
Slider 是滑动条组件，是 UGUI 中用于处理滑动条相关交互的关键组件
默认创建的 Slider 由 4 组对象组成
父对象 ——Slider 组件依附的对象
子对象 —— 背景图、进度图、滑动块三组对象
组件参数
- Interactable：是否接受输入
- Transition：响应用户输入的过渡效果
- Navigation：导航模式，可以设置 UI 元素如何在播放模式中控制器导航
- FillRect：用于填充的进度条图形
- Handle Rect：用于滑动的滑动块图形
- Direction：滑动条值增加的方向
- Left To Right：从左到右
- Right To Left：从右到左
- Bottom To Top：从下到上
- Top To Bottom：从上到下
- Min Value 和 Max Value：最小值和最大值，滑动滚动条时值从最小到最大之间变化（左右、上下极值）
- Whole Numbers：是否约束为整数值变化
- Value：当前滑动条代表的数值
- OnValueChanged：滑动条值改变时执行的函数列表
# ScrollBar
Scrollbar 是滚动条组件
是 UGUI 中用于处理滚动条相关交互的关键组件
默认创建的 Scrollbar 由 2 组对象组成
父对象 ——Scrollbar 组件依附的对象
子对象 —— 滚动块对象
一般情况下我们不会单独使用滚动条都是配合 ScrollView 滚动视图来使用
组件参数
- Interactable：是否接受输入
- Transition：响应用户输入的过渡效果
- Navigation：导航模式，可以设置 UI 元素如何在播放模式中控制器导航
- Handle Rect：关联滚动块图形对象
- Direction：滑动条值增加的方向
- Left To Right：从左到右
- Right To Left：从右到左
- Bottom To Top：从下到上
- Top To Bottom：从上到下
- Value：滚动条初始位置值（0~1）
- Size：滚动块在条中的比例大小（0~1）
- Number Of Steps：允许可以滚动多少次（不同滚动位置的数量）
- OnValueChanged：滚动条值改变时执行的函数列表
# ScrollView
ScrollRect 是滚动视图组件
是 UGUI 中用于处理滚动视图相关交互的关键组件
默认创建的 ScrollRect 由 4 组对象组成
父对象 ——ScrollRect 组件依附的对象，还有一个 Image 组件作为背景图
子对象 ——Viewport 控制滚动视图可视范围和内容显示、Scrollbar Horizontal 水平滚动条、Scrollbar Vertical 垂直滚动条
组件参数
- 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：自动隐藏滚动条并且自动拓展内容视口
- Spacing：滚动条和视口之间的间隔空间
- OnValueChanged：滚动视图位置改变时执行的函数列表
# Dropdown
DropDown 是下拉列表（下拉选单）组件
是 UGUI 中用于处理下拉列表相关交互的关键组件
默认创建的 DropDown 由 4 组对象组成
父对象 ——DropDown 组件依附的对象，还有一个 Image 组件作为背景图
子对象 ——Label 是当前选项描述，Arrow 右侧小箭头，Template 下拉列表选单
组件参数
- Interactable：是否接受输入
- Transition：响应用户输入的过渡效果
- Navigation：导航模式，可以设置 UI 元素如何在播放模式中控制器导航
- Template：关联下拉列表对象
- Caption Text：关联显示当前选择内容的文本组件
- Caption Image：关联显示当前选择内容的图片组件
- Item Text：关联下拉列表选项用的文本控件
- Item Image：关联下拉列表选项用的图片控件
- Value：当前所选选项的索引值
- Alpha Fade Speed：下拉列表窗口淡入淡出的速度
- Options：存在的选项列表
- OnValueChanged：下拉列表选项改变时执行的函数列表
# 图集制作
UGUI 和 NGUI 使用上最大的不同是 NGUI 使用前就要打图集
UGUI 可以在之后再打图集，打图集的目的就是减少 DrawCall，提高性能
就是 CPU 通知 GPU 进行一次渲染的命令
如果 DC 次数较多会导致游戏卡顿
我们可以通过打图集，将小图合并成大图，将本应 n 次的 DC 变成 1 次 DC 来提高性能
在工程设置面板中打开功能
Edit -> Project Setting -> Editor
Sprite Packer（精灵包装器，可以通过 unity 自带图集工具生成图集）
Disabled：默认设置，不会打包图集
Enabled For Builds (Legacy Sprite Packer)：Unity 仅在构建时打包图集，在编辑模式下不会打包图集
Always Enabled (Legacy Sprite Packer)：Unity 在构建时打包图集，在编辑模式下运行前会打包图集
Legacy Sprite Packer：传统打包模式，相对下面两种模式来说，多了一个设置图片之间的间隔距离
Padding Power：选择打包算法在计算打包的精灵之间以及精灵与生成的图集边缘之间的间隔距离这里的数字，代表 2 的 n 次方
Enabled For Build：Unity 进在构建时打包图集，在编辑器模式下不会打包
Always Enabled：Unity 在构建时打包图集，在编辑模式下运行前会打包图集
参数相关
- Type：图集类型
- Master：主图集
- Include in Build：选中可以在当前构建中包含图集
- Allow Rotation：选中此选项将在打包图集时对图片元素进行旋转，可以最大限度提高组合后的图集密度；注意！！！如果是 UI 图集，请禁用此选项，因为打包时会将场景中 UI 元素旋转
- Tight Packing：选中此选项在打包图集时使用图片轮廓来打包而不是根据矩形，可以最大限度提高组合后的图集密度
- Padding：图集中各图片的间隔像素
- Variant：变体类型的图集
- Master Atlas：关联的主图集（图集类型必须是 Master）
- Include in Build：选中可以在当前构建中包含图集
- Scale：设置变体图集的缩放因子（0~1），变体图集的大小是主图集乘以 Scale 的结果
- 变体图集的主要作用是以主图集为基础，对它进行缩放产生一个新的图集副本。如果想使用变体图集中的内容，只需要勾选变体图集的 Include in build 选项，而主图集禁用此选项即可
- Master：主图集
- Read/Write Enabled：允许通过脚本访问纹理数据。如果启用，会创建纹理数据的副本。会让内存翻倍，一般情况下不需要开启它
- Generate Mip Maps：勾选它会生成 Mipmap；Mipmap 是一种性能优化手段，用内存换性能。一般情况下不用开启
- sRGB：启用此属性可指定将纹理存储在伽马空间中。对于非 HDR 颜色纹理（例如反照率和镜面反射颜色），应始终选中此复选框。如果纹理存储了有特定含义的信息，并且您需要着色器中的确切值（例如，平滑度或金属度），请禁用此属性。默认情况下会启用此属性。
- Filter Mode：纹理在 3D 变化拉伸时如何进行过滤
- Point：纹理靠近时变为块状
- Bilinear：纹理靠近时变得模糊
- Trilinear：与 Bilinear 类似，但是纹理在不同的 MIP 级别之间模糊
- Objects for Packing：关联需要打图集的图片们，注意：一定是 Sprite 类型的图片
- Default
- Max Texture Size：纹理的最大尺寸，像素为单位
- Format：指定纹理的内部表示，在不同平台上会有不同的参数
- Compression：纹理压缩类型
- None
- Low Quality
- Normal Quality
- High Quality
- 质量越高占用内存越多，不压缩质量最好
- Use Crunch Compression：使用 Crunch 压缩，是一种有损压缩格式，压缩耗时长，但是运行时解压速度快
- Compressor Quality：压缩质量，质量越高纹理越大，耗时越长
# UI 事件监听接口
目前所有的控件都只提供了常用的事件监听列表
如果想做一些类似长按，双击，拖拽等功能是无法制作的，或者想让 Image 和 Text，RawImage 三大基础控件能够响应玩家输入也是无法制作的
而事件接口就是用来处理类似问题让所有控件都能够添加更多的事件监听来处理对应的逻辑
常用事件接口
IPointerEnterHandler - OnPointerEnter - 当指针进入对象时调用（鼠标进入）
IPointerExitHandler - OnPointerExit - 当指针退出对象时调用（鼠标离开）
IPointerDownHandler - OnPointerDown - 在对象上按下指针时调用（按下）
IPointerUpHandler - OnPointerUp - 松开指针时调用（在指针正在点击的游戏对象上调用）（抬起）
IPointerClickHandler - OnPointerClick - 在同一对象上按下再松开指针时调用 （点击）
IBeginDragHandler - OnBeginDrag - 即将开始拖动时在拖动对象上调用（开始拖拽）
IDragHandler - OnDrag - 发生拖动时在拖动对象上调用（拖拽中）
IEndDragHandler - OnEndDrag - 拖动完成时在拖动对象上调用（结束拖拽）
不常用事件接口
IInitializePotentialDragHandler - OnInitializePotentialDrag - 在找到拖动目标时调用，可用于初始化值
IDropHandler - OnDrop - 在拖动目标对象上调用
IScrollHandler - OnScroll - 当鼠标滚轮滚动时调用
IUpdateSelectedHandler - OnUpdateSelected - 每次勾选时在选定对象上调用
ISelectHandler - OnSelect - 当对象成为选定对象时调用
IDeselectHandler - OnDeselect - 取消选择选定对象时调用导航相关
IMoveHandler - OnMove - 发生移动事件（上、下、左、右等）时调用
ISubmitHandler - OnSubmit - 按下 Submit 按钮时调用
ICancelHandler - OnCancel - 按下 Cancel 按钮时调用
PointerEventData 参数
父类：BaseEventData
pointerId：鼠标左右中键点击鼠标的 ID，通过它可以判断右键点击
position：当前指针位置（屏幕坐标系）
pressPosition：按下的时候指针的位置
delta：指针移动增量
clickCount：连击次数
clickTime：点击时间
pressEventCamera：最后一个 OnPointerPress 按下事件关联的摄像机
enterEvetnCamera：最后一个 OnPointerEnter 进入事件关联的摄像机
# EventTrigger
事件触发器是 EventTrigger 组件
它是一个集成了上一节中所有事件接口的脚本
它可以让我们更方便的为控件添加事件监听
# 屏幕坐标转 UI 相对坐标
RectTransformUtility 公共类是一个 RectTransform 的辅助类
主要用于进行一些 坐标的转换等等操作
其中对我们目前来说最重要的函数是将屏幕空间上的点，转换成 UI 本地坐标下的点
将屏幕坐标转换为 UI 本地坐标系下的点
方法：RectTransformUtility.ScreenPointToLocalPointInRectangle
参数一：相对父对象
参数二：屏幕点
参数三：摄像机
参数四：最终得到的点
一般配合拖拽事件使用
# Mask 遮罩
在不改变图片的情况下让图片在游戏中只显示其中的一部分
实现遮罩效果的关键组件时 Mask 组
通过在父对象上添加 Mask 组件即可遮罩其子对象
注意：
- 想要被遮罩的 Image 需要勾选 Maskable
- 只要父对象添加了 Mask 组件，那么所有的 UI 子对象都会被遮罩
- 遮罩父对象图片的制作，不透明的地方显示，透明的地方被遮罩
# 模型和粒子显示在 UI 之前
模型显示在 UI 之前
方法一：：直接用摄像机渲染 3D 物体
Canvas 的渲染模式只要不是覆盖模式
摄像机模式 和 世界 (3D) 模式都可以让模型显示在 UI 之前 (z 轴在 UI 元素之前即可)
注意：
- 摄像机模式时建议用专门的摄像机渲染 UI 相关
- 面板上的 3D 物体建议也用 UI 摄像机进行渲染
方法二：将 3D 物体渲染在图片上，通过图片显示
专门使用一个摄像机渲染 3D 模型，将其渲染内容输出到 Render Texture 上
类似小地图的制作方式
再将渲染的图显示在 UI 上
该方式不管 Canvas 的渲染模式是哪种都可以使用
粒子特效显示在 UI 之前
粒子特效的显示和 3D 物体类似
注意：在摄像机模式下时可以在粒子组件的 Renderer 相关参数中改变排序层，让粒子特效始终显示在其之前不受 z 轴影响
# 异形按钮
图片形状不是传统矩形的按钮
让异形按钮能够准确点击
方法一：通过添加子对象的形式
按钮之所以能够响应点击，主要是根据图片矩形范围进行判断的
它的范围判断是自下而上的，意思是如果有子对象图片，子对象图片的范围也会算为可点击范围
那么我们就可以用多个透明图拼凑不规则图形作为按钮子对象用于进行射线检测
方法二：通过代码改变图片的透明度响应阈值
- 第一步：修改图片参数，开启 Read/write Enabled 开关
- 第二步：通过代码修改图片的响应阈值
该参数含义：指定一个像索必须具有的最小 alpha 值，以便能够认为射线命中了图片
说人话：当像素点 alpha 值小于了该值，就不会被射线检测了
# 自动布局组件
虽然 UGUI 的 RectTransform 已经非常方便的可以帮助我们快速布局
但 UGUI 中还提供了很多可以帮助我们对 UI 控件进行自动布局的组件
他们可以帮助我们自动的设置 UI 控件的位置和大小等
自动布局的工作方式一般是：自动布局控制组件 + 布局元素 = 自动布局
自动布局控制组件：Unity 提供了很多用于自动布局的管理性质的组任用于布局
布局元素：具备布局属性的对象们，这里主要是指具备 RectTransform 的 UI 组件
布局元素的布局属性
要参与自动布局的布局元素必须包含布局属性
布局属性主要有以下几条：
- Minmum width：该布局元素应具有的最小宽度
- Minmum height：该布局元素应具有的最小高度
- Preferred width：在分配额外可用宽度之前，此布局元素应具有的宽度
- Preferred height：在分配额外可用高度之前，此布局元素应具有的高度
- Flexible width：此布局元素应相对于其同级而填充的额外可用宽度的相对量
- Flexible height：此布局元索应相对于其同级而填充的额外可用高度的相对量
在进行自动布局时都会通过计算布局元素中的这 6 个属性得到控件的大小位置
在布局时，布局元素大小设置的基本规则是
- 首先分配最小大小 Minmum width 和 Minmum height
- 如果父类容器中有足够的可用空间，则分配 Preferred width 和 Preferred height
- 如果上面两条分配完成后还有额外空间，则分配 Flexible width 和 Flexible height
一般情况下布局元素的这些属性都是 0，但是特定的 UI 组件依附的对象布局属性会被改变，比如 Image 和 Text
一般情况下我们不会去手动修改他们，但是如果你有这些需求可以手动添加一个 LayoutElement 组件，可以修改这些布局属性
水平垂直布局组件
水平垂直布局组件将子对象并排或者竖直的放在一起
组件名： Horizontal Layout Group 和 Vertical Layout Group
参数相关：
- Padding：左右上下边缘偏移位置
- Spacing：子对象之间的间距
- ChildAlignment：九宫格对其方式
- Control Child Size：是否控制子对象的宽高
- Use Child Scale：在设置子对象大小和布局时，是否考虑子对象的缩放
- Child Force Expand：是否强制子对象拓展以填充额外可用空间
网格布局组件
网格布局组件将子对象当成一个个的格子设置他们的大小和位置
组件名： Grid Layout Group
参数相关：
- Padding：左右上下边缘偏移位置
- Cell Size：每个格子的大小
- Spacing：格子间隔
- Start Corner：第一个元素所在位置（4 个角）
- Start Axis：沿哪个轴放置元素；Horizontal 水平放置满换行，Vertical 竖直放置满换列
- Child Alignment：格子对其方式（9 宫格）
- Constraint：行列约束
- Flexible：灵活模式，根据容器大小自动适应
- Fixed Column Count：固定列数
- Fixed Row Count：固定行数
内容大小适配器
内容大小适配器它可以自动的调整 RectTransform 的长宽来让组件自动设置大小
一般在 Text 上使用或者配合其它布局组件一起使用
组件名： Content Size Fitter
参数相关：
- Horizontal Fit：如何控制宽度
- Vertical Fit：如何控制高度
- Unconstrained：不根据布局元素伸展
- Min Size：根据布局元素的最小宽高度来伸展
- Preferred Size：根据布局元素的偏好宽度来伸展宽度。
宽高比适配器
- 让布局元素按照一定比例来调整自己的大小
- 使布局元素在父对象内部根据父对象大小进行适配
组件名：Aspect Ratio Fitter
参数相关：
- Aspect Mode：适配模式，如果调整矩形大小来实施宽高比
- None：不让矩形适应宽高比
- Width Controls Height：根据宽度自动调整高度
- Height Controls Width：根据高度自动调整宽度
- Fit In Parent：自动调整宽度、高度、位置和锚点，使矩形适应父项的矩形，同时保持宽高比，会出现 “黑边”
- Envelope Parent：自动调整宽度、高度、位置和锚点，使矩形覆盖父项的整个区域，同时保持宽高比，会出现 “裁剪”
- Aspect Ratio：宽高比，宽除以高的比值
# Canvas Group
用于整体控制 UI 组件的淡入淡出 或者 整体禁用
参数相关：
- Alpha：整体透明度控制
- Interactable：整体启用禁用设置
- Blocks Raycasts：整体射线检测设置
- Ignore Parent Groups：是否忽略父级 CanvasGroup 的作用
