五、按钮（Button）组件

按钮是常用的交互UI组件，Unity的按钮组件主要属性介绍如下：

1. Intractable（是否可交互）
2. Transititon（外观状态切换），每个按钮都有蒲绒、高亮、按下、禁用4种状态，这四种状态下外观应该表现出区别。Unity提供了几种方式来定义外观的变化，稍后进行说明
3. Navigation（导航顺序），当玩家使用键盘或手柄zaiUI控件之间切换时，按键切换的顺序会变成一个复杂的问题，”导航顺序”就是为了解决这一问题而存在的。Visulaize（到行可视化）按钮也是为导航准备的，由于这一功能很多情况下用不到，本文不展开介绍

1.按钮外观状态切换的方法

按钮状态切换与实景应用密切相关，默认按钮的状态切换是Color Tint（颜色叠加）。实际上就是对颜色

做乘法运算

。

在做简单测试时，用颜色叠加十分方便。因为只需要准备一张按钮图片，默认状态下乘以白色，也就是不改变图片颜色；在高亮时乘以亮灰色；在按下时乘以深灰色，按钮明显变暗；在禁用时乘以半透明的深灰色，按钮不仅变暗还会有透明效果。如此一来，就可以用一张图片代表4种状态。

另一种效果更好的方式是根据需要，准备2～4张图片，然后选择Sprite Swap（切换精灵图）模式。在此模式下，需要对按钮的普通、高亮、按下、禁用状态分别指定不同的图片。当然，如果游戏中不会出现某种状态，也可以不指定对应图片。

2、按钮是组合的控件

仔细观察按钮在Inspector窗口中的详细信息，会发现其不仅具有Button组件，还有Image组件，另外还包含一个Text子物体，这说明按钮是由多种组件和父子物体组成的。其中Image组件代表默认的外观，而Text子物体决定了按钮上显示的文字。

3.OnClick（点击）事件

按钮最常用的功能就是单击，单击需要和脚本联动，一般是通过调用某个方法来实现的。事件的关联可以直接在编辑器中操作。

按钮OnClick事件可以出发任意物体的人方法，而且该方法可以食物参数的、有一个参数、或者有多个参数的。

甚至还可以在按下按钮时触发多个方法。单击编辑框下方的加号即可添加更多方法

六、单选框（toggle）组件

单选框组件与按钮组件类似，只不过它具有”勾选”和”不勾选”两种状态。在创建物体的菜单中选择UI->Toggle即可创建单选框

它在编辑器中提供的操作和按钮组件的非常相似，同样也有Transiiton选项，也具有几种切换外观状态的方法

相比按钮组件，单选框多出几个选项，说明如下：

1. Is On。代表是否处于勾选状态
2. Transition。用于定义外观和切换效果，类似按钮组件
3. Toggle Transition。代表狗勾选时的动态效果，有”淡入淡出”和”无效果”两种选择
4. Graphic。代表对钩图片对应的子物体。一般单选框对应的对钩图片时CheckMark子物体，如果需要替换小图片外观，修改CheckMark子物体即可
5. Group。代表单选框组，可以让多个单选框组成多选一的结构
6. 勾选或取消单选框时，会触发O你V啊略C韩哥的消息，带有一个Bool参数

为了更加形象，下面举一个例子，步骤如下：

1. 创建三个Toggle物体，摆在合适的位置，并修改物体Lable上的文字，以方便查看
2. 在UI话不中创建一个空物体，取一个名字，如Group1
3. 在场景列表中，将三个单选框拖拽到空物体上
4. 给这个父物体添加组件Toggle Group
5. 给每个单选框的Group选项，都指定为这个空物体（这一步可以同时选中这三个单选框，同一操作，比较方便）

完成之后就可以运行游戏进行测试。勾选任意一个选项，另外两个两个选项都会自动取消勾选。如果促使状态下三者都是勾选状态，那么可以通过修改Is On选项来改变原始状态。注意在这个例子中为了管理方便使用了”父子”物体，其实不一定要用此方法实现，只要制定好分组即可。

七、滑动条（Slider）组件

Slider组件通常用来显示和编辑一定范围内的数据，一般左边是最小值，右边是最大值。另外也有垂直布局、异形布局的滑动条组件。例如很多游戏中的血条就具有特殊的形状，但它们仍然可以利用滑动条控制制作。

滑动条控件由多个物体组成，一是Backgroud（背景物体），二是Fill Rect（已填充区域），三是滑动条的Handle Rect（手柄区域）。

Slider的属性如下：

1. Interactable（是否可交互），不可交互的滑动条可以用来作为血条、进度条等
2. Transition（外观状态切换），与按钮类似
3. Fill Rect（填充区域），对应滑动条左侧已填满区域
4. Handle Rect（手柄区域），对应滑动条的手柄区域。单独定义这两个区域，目的是将Slider与子物体联系起来
5. Direction（滑动条方向），支持左->右，右->左，上->下，下->上四种方向的滑动条
6. Min Value、Max Value，指定滑动条所表示的最小值和最大值
7. Whole Numbers（整数）可以简单理解为”勾选后数值都只能取整数”
8. Value（值），时Slider中
   
   最重要的属性
   
   ，是目前滑动条上的数字，一定在最大值与最小值之间。直接修改这个只会引起滑动现实的相应变化。可以用脚本修改这个值

下面举一个有趣的例子。让滑动条控制图片的现实，滑动条的值越大，就显示越多的图片内容。

//所控制的图片

public Image image;

//滑动条组件

Slider slider;

void Start()

{

slider=GetComponent<Slider>();

slider.minValue=0;

slider.maxValue=1;

//将图片类型改为Fillde，360度填充

image.type=Image.Type.Filled;

image.fillMethod=Image.FillMethod.Radial360;

}

void Update()

{

//每一帧都让滑动条的值决定图片的填充大小

image.fillAmount=slider.value;

}

八、输入框（Input Field）组件

用户在输入文字的时候，就会用到Input Field，它也是由父子物体组成的，简单来说父物体上的Input Field用来定义外观、处理输入，而文本显示则由子物体的Text属性负责。

具体属性如下：

1. Interactable（是否可交互）
2. Transition（外观状态控制）
3. Text Component（关联的文本组件），是对子物体的引用，将子物体的Text与父物体关联起来
4. Text（文本内容），是一个字符串
5. Chacter Type（字符数量限制）限制用户输入的最大字符数量
6. Content Type（内容类型），指定输入的格式，例如Standard、Password、Integer Number、Email Address等。各种应用场景中输入需求有所不同，例如需要隐藏字符，因此这个属性十分必要
7. Line Type（换行方式）可以指定单行或多行文本
8. Place Holder（占位符），也是对子物体的引用。默认占位符显示是一个灰色文本。
9. 与光标相关的选项，包括Caret Blink Rate（光标显示频率）,Caret Width（光标宽度）,Custom Caret Color（是否自定义光标颜色）
10. Selection Color（选中颜色），用于指定用户选中的文字的背景色
11. Hide Mobile Input（隐藏移动设备输入），用于隐藏移动谁的虚拟键盘
12. Read Only（只读），只读状体下无法输入内容。

Input Field有两种事件：On Value Changed（内容变化）事件和On End Edit（结束编辑）事件。

九、滚动区域（Scroll Rect）组件

在实际中，经常会遇到信息显示长度远大于显示器大小的情况。这是就要用到Scroll View（滚动视图控件），核心功能组件名为Scrool Rect。

在场景中新建一个Scroll View，观察其子物体，发现有三个，分别是Viewport（视口）、Scrollbar Horizontal（横向滚动条）、Scrollbar Vertical（纵向滚动条）。正确使用Scroll View的关键在于理解Viewport大小与Content（内容）大小之间的关系。

Viewport区域是控件的显示主体，用户只能通过Viewport看到Content的一部分。

实际制作时，可以借用默认的Content物体，将图片、文字等内容作为Content的子物体，然后计算并设置Content的大小，让Content的大小刚好能容纳所有内容，这样就可以实现滚动浏览所有内容的效果了。

下面来介绍其属性

1. Content（内容引用），指向子物体的Content
2. Horizontal（是否可以横向滑动）
3. Vertical（是否可以纵向滑动）
4. Movement Type（移动方式）包含Elastic（弹性）、Clamped（硬限制）、和Unrestricted（不限制）。这个选项指的是滚动窗口达到边缘时的效果。
5. Elasticity（弹性），在使用弹性效果时，指定回弹力度的大小
6. Inertia（惯性），快速滚动时，可以开启惯性效果。开启惯性后可以指定Deceleration Rate（减速率）
7. Scroll Sensitivity（滑动灵敏度），影响滑动速度
8. Viewport（窗口）只想子物体Viewport
9. Horizontal Scrollbar（纵向滚动条）
10. Vertical Scrollbar（横向滚动条

可选项有Permanent（始终显示）、Auto Hide（自动隐藏）、Auto Hide And Expand Viewport（自动隐藏并扩展）。

最后，Scroll Rect默认含有On Value Changer事件，可以在用户滚动滚动条时调用脚本方法，参数为当前滚动位置，类型为Vector2.