Canvas是画布，所有的UI组件就是绘制在这个画布里的，脱离画布，UI组件就不能用。

创建画布有两方式。一是通过菜单直接创建，二是直接创建一个UI组件时，会在创建这个组件的同时自动创建一个容纳该组件的画布出来。

不管那种方式创建出画布时，系统都会自动创建出一个EventSystem组件，这是UI的事件系统。

1.Canvas组件

在Canvas中有一Render Mode属性，它有3个选项，分别对应Canvas的三种渲染模式：Screen Space – Overlay、Screen Space – Camera、World Space。

Screen Space – Overlay：

此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面（即在某个UI的前面是不能再添加其他组件的），就好像是给摄像机贴上了一层膜。它的最大好处是不需要摄像机，不需要灯光。

Screen Space – Camera：

此模式需要提供一个UICamera，它支持在UI前方显示3D模型与粒子系统等内容。

当挂上摄像机并选择3D显示模式时，我们选中这个摄像机，并移动它，可发现画布会跟随摄像机的移动而移动，且Game视图显示的UI其位置与大小均保持不变

与第一种模式区别：画布与摄像机之间可放置三维物体或粒子系统，可做出许多绚丽的特效。

World Space：

完全3D的UI，也就是把UI也当成3D对象，如摄像机离UI远了，其显示就会变小，近了就会变大。

Sorting Layer：

当有多个画布时，决定谁在前，谁先显示。

2.Canvas Scaler组件

当Canvas中的Render Mode设为Screen Space – Overlay 或Screen Space – Camera时，此Canvas Scale中的Ui Scale Mode（大小模式）就可用，且其中有3个选项：

Constan Pixel Size：固定像素尺寸

Scale With Screen Size：以屏幕大小为标准缩放（屏幕自适应特性）

1)Reference Resolution：参考分辨率

在不同分辨率下，控件显示的大小有所不同，这要根据实际情况综合考虑。

2)Screen Match Mode：屏幕匹配模式

Match Width Or Heigt：匹配宽度或高度

此模式下会出现Match调节滑杆，调节其控块位置，也会影响UI元素显示的大小。

Expand：扩展

Shrink：收缩

Constant Physical Size：固定物理尺寸

3.EventSystem

事件处理系统

当我们创建一个画布时，Unity系统会自动为我们创建一个EventSystem，该事件处理器中有Event System：事件系统组件（事件）和Standalone Input Module：独立输入模块 （输入）等组件。

如果我们将Event System (Script) 前的勾去掉，则管理整个场景的事件系统则不起作用了。

4.Panel面板

初次创建Panel后，它会充满整个画布，此时通过拖动该面板控件的4个角点或四条边可调节面板的大小。

面板实际上就是一个容器，在其上可放置其他UI控件，当移动面板时，放在其中的UI组件就会跟随移动，这样我们可以更加合理与方便的移动与处理一组控件。一个面板里还可套用其他面板。

5.RectTransform

创建的所有UI控件，它们都有一个UI控件特有的Rect Transform组件。

每个UI控件都还一个Canvas Renderer组件，它是画布渲染，一般不用管它，因它不能点开的。

6.Text控件

Character:（字符）

Font：字体

Font Style：字体样式

Font Size：字体大小

Line Spacing：行间距（多行）

Rich Text：“富”文本。例如：U<b>G</b>U</i>I<volor=”yellow”>学</color>习

Color：字体颜色

Paragraph:（段落）

Alignment：设置文本在Text框中的水平以及垂直方向上的对齐方式。

Horizontal overflow：水平方向上溢出时的处理方式。它有两种：Wrap环绕；Overflow溢出。

Vertical overflow：垂直方向上溢出时的处理方式。它有两种：Truncate截断；Overflow溢出。

信息显示不全当然不好，但如果溢出又会破坏版面，想两全齐美的话，就可选中：Best fit，如果文字多时，它会自动缩小以适应文本框的大小，当选中该项后，在其下边会出现Min Size与Max Size两输入框，可设置字体变化时的最小与最大值。

说明：

当文字的大小修改为较大数值时，文字不显示了，原因是Text组件的宽度和高度小了。

编程修改Text组件的text属性、color属性、size属性

两种方法：

一是直接拖动赋值，最为方便。

二是使用UnityEngine.UI中的类Text。

    GameObject go=GameObject.Find("showText");

    UnityEngine.Text s_text=go.GetComponent<Text>();

    s_text.text="567567";

7.Image控件

Image控件除了两个公共的组件Rect Transform与Canvas Renderer外，默认就只有一个Image(Script)组件：

Source Image是要显示的源图像。要想把一个图片赋给Image，则需要把该图片转换成精灵格式。（Project中选中图片，然后在Inspector检视图中，单击纹理类型Texture Type右边的下拉框，选中该选项Sprite-2D and UI并点击下方的应用Apply按钮）

Color：可改变图片的颜色；

Material：材质，这是针对一些复杂的贴图使用。

Image Type：贴图的类型，这是最重要的属性。

1)Simple：简单

Preserve Aspect：维持宽高比

Set Native Size：设置本来的大小

2)Sliced：切片

先将贴图进行“九宫格”处理后才可以应用。

在Project中选中精灵图片，然后在Inspector检视图中单击“Sprite Editor”按钮即可进入九宫格处理。

在Sprinte Editor视窗中，可以拖动图像四条边上的绿色线，调节九宫格的布局大小，调好后单击顶端的Apply按钮应用。

在Image Type为Sliced时，当对图像进行大小调节时，其中心会缩放以适合矩形，但边界会保持不变。如果只想要边界，不要中心，可以禁用Fill Center（填充中心）属性。

3)Tiled：平铺

图像保持其原始大小，重复多次填充。

4)Filled：填充

图像填充满整个Image矩形区域，再结合Fill Amount属性，可做一些特效。

Fill Method（填充方法）:

Horizontal：水平填充

Vertical：垂直填充

Radial 90：径向90度填充

Radial 180：径向180度填充

Radial 360：径向360度填充

如果使用脚本来控制Fill Amount的值，就可制造出动画特效。

8.Button控件

除了公共的Rect Transform与Canvas Renderer两个UI组件外，Button还默认拥有Image(Script)与Button(Script)两个组件。

事实上，把一个Image控件添加Button(Script)组件，就可以产生一个Button控件。

说明：多个UI控件的显示顺序

Button是一个复合控件，它中还包含一个Text子控件，通过此子控件可设置Button上显示的文字的内容、字体、样式、字大小、颜色等，与前面所讲的Text控件是一样的。

Button(Script)组件里的属性：

Interactable：是否启用交互性

Transition：过渡方式

1)None：没有过渡方式。

2)Color Tint：颜色过渡   

Target Graphic：目标图像

Normal Color：正常颜色

Highlighted Color：经过高亮色

Pressed Color：点击色

Disabled Color：禁用色

Color Multiplier：颜色倍数

Fade Duration：变化过程时间

3)Sprite Swap：精灵交换。需要使用相同功能不同状态的贴图。

Target Graphic：目标图像

Highlighted Sprite：鼠标经过时的贴图

Pressed Sprite：点击时的贴图

Disabled Sprite：禁用时的贴图

4)Animation：动画。最复杂，效果最绚丽。

Navigation:导航

按上下方向键时导航到哪个控件

None：没有

Horizontal：水平

Vertical：垂直

Automatic：自动

Explicit：明确的

Visualize：显现

On Click()

在Button组件的下方有一个OnClick()选项，这就是Button控件处理事件的重要机制。

OnClick()意思为当该按钮被点击时所发生的事件，而此事件在UI中是委托机制。

9.Toggle控件

它也为一个复合型控件 ，有Background与Label两个子控件，而Background控件中还有一个Checkmark子控件， Background、Checkmark是图像控件，Label控件是一个文本框。

Is On：开关状态

Graphic：图像

控制出现与不出现的图像（默认时对勾图像）

Group：组（单选框功能）

先在画布上建立一个空对象，并命名为_ToggleGroup，添加ToggleGroup组件。

选中要成组的多个Toggle，把已添加了ToggleGroup组件的_ToggleGroup拖到group中，这样便把多个Toggle成组了。（最好把这些Toggle选中并拖到_ToggleGroup中成为子物体）

Toggle控件动态事件On Value Changed(Boolean)

10.事件处理

按钮事件处理（OnClick）：

1)为场景中的某个委托对象添加脚本，在脚本中添加public的无参方法，方法的内容是点击按钮执行的操作

2)选中按钮，单击Inspector面板中的OnClick()下面的“ ”按钮为其添加一个事件

3)此时其委托的事件处理对象依旧为空，把建好的并已挂上了事件处理脚本对象拖放到None(Object)框中

4)单击No Function的那个事件方法框，会弹出菜单列表,找到在脚本中编写的事件处理方法，选中它即可，这样就完成了事件的委托

Toggle控件事件处理（OnValueChanged）：

1)为场景中的某个委托对象添加脚本，在脚本中添加public的有一个参数的方法，参数的类型为bool类型，方法的内容是Toggle控件变换时执行的操作（Toggle选中与取消选中时都会产生事件，在一组单选按钮组中，当点选一个按钮同时会取消前一个按钮的选择，那么这两个按钮就都会产生事件，只不过传递的参数分别为true和false）

2)选中Toggle控件，单击Inspector面板中的OnValueChanged(Boolean)下面的“ ”按钮为其添加一个事件

3)把建好的并已挂上了事件处理脚本对象拖放到None(Object)框中

4)单击No Function的那个事件方法框，会弹出菜单列表。

下面带（bool）的是静态方法，上面不带的同名方法是动态事件，由系统自动生成，其bool型参数已被封装在其中了，此时不能象Button那样去选择其静态方法了，而要选择与之对应的动态事件才可正常运行。

11.Slider控件（滑动条）

Slider也是一个复合控件 ，Background是背景，Fill Area是填充区域，其子控件Fill中只有一个Image(Script)专有组件， Handle Slice Area中的子控件Handle（手柄）中也只有一个Image(Script)专有组件。

Fill Rect：填充矩形区域

Handle Rect：手柄矩形区域

Direction：Slider的摆放方向，可以从左到右、从右到左、从上到下、从下到上

Min Value：最小数值

Max Value：最大数值

Whole Numbers：整数数值。假设我们将Min Value设为1，Max Value设为100，那么调节手柄时，对应的值在1到100之间，而且是一个小数，如55.67，有时我们希望它是整数，那么选中该项即可。

Slider的动态事件

是Slider的滑块滑动其值发生改变时而产生的动态事件，它有一个参数Single：单精度，实际上这里指的是float，整个事件的机理是，当滑动滑块时，其值发生改变，事件产生，而且会实时将滑块所对应的值传给此事件，保存在这个参数中，供程序使用。

12. ScrollBar控件（滚动条）

Value：当拖动滑块时，其值是在0到1之间变化的

Size：是滑块的大小

Number Of Steps：数值的步数。假设设定为5，那么就会把Value分成5个值，调节滑块时其值就在这5个值中变化。

13.其他控件

滚动视图ScrollView

下拉列表Dropdown

文本输入InputField

14.案例：标签页面TabPage

1)在画布上创建一个空对象，命名为Label，创建一个Image，布局上Label在上面，Image在下面。

2)在Label中创建三个子控件，它们均为Toggle，命名为Toggle1、Toggle2、Toggle3，并调整它们的Background与Checkmark，使其看起来像按钮：

Background是背景，是未被选中时表现出来的图景。首先在场景视图中将其大小调大，使其与整个按钮形状一样大，然后在其Inspector视图中的Image组件里设置Source Image或Color属性值。

Checkmark是选中时表现出来的图景，默认是一个对钩。首先在场景视图中将其大小调大，使其与整个按钮形状一样大，这样一来，Checkmark与Background一样大，两个重叠起来了，当未选中时，表现出来的是Background的景象，选中后表现出来的是Checkmark的景象。然后在其Inspector视图中的Image组件里设置Source Image或Color属性值：将Image组件里的Source Image属性设为空None，即去掉那个对钩图像，并将其Color值设为被选中时展现出来的颜色。

这三个按钮状的Toggle应该为单选，设置它们的Group属性值为Lable ，同时，对于它们的Is On属性，第一个Toggle的保持勾选，另两个去掉勾选。

3)在Image上创建三个为空的子控件，分别命名为Page1、Page2、Page3，并调整它们的大小，使其与Image一样大，位置上与Image重叠。再在Page1、Page2、Page3上各自创建要显示的文本内容。

4)最后一步实现点击顶部不同的标签时，下部的内容区域会显示对应的内容版面。

以Toggle1为例，选中它，在其Inspetctor视图中,为其添加事件。

当Toggle1的选中状态发生改变时所挂接的对象Page1会被激活或失效（GameObject.SetActive）。