Unity3D学习笔记uGUI（12）：Interaction Components祥述
20、Interaction Components - Button
按钮用于响应用户点击，可用于启动或确认某个动作。最常见的例子就是表单的确定和取消按钮。
20.1 Button属性一览
Interactable | 同Selectable |
Transition | 同Selectable |
Navigation | 同Selectable |
20.2 Button事件一览
On Click | 点击事件 |
20.3 Button细节描述
按钮用于响应用户点击。如果鼠标在弹起之前移出了按钮范围，那么用户点击行为并不会被执行。
按钮只有一个点击事件，用于响应用户完成了一次点击动作。常见的用法：
（1）确认一个决定（比如启动游戏或游戏存档）；
（2）移动到下一级子菜单；
（3）取消一个进度（比如取消下载）。
21、Interaction Components - Toggle
Toggle用于制作选择框，提供用户选中或取消选中的功能。
21.1 Toggle属性一览
Interactable | 同Selectable |
Transition | 同Selectable |
Navigation | 同Selectable |
Is On | 默认为开或关 |
Toggle Transition | 选中时的变化方式，可选项：None（无效果）和Fade（淡入淡出） |
Graphic | 选中后显示的小图片（对勾） |
Group | Toggle分组 |
21.2 Toggle事件一览
On Value Changed | 值变更事件，参数类型为bool |
21.3 Toggle细节描述
Toggle控件用于切换开关状态（On/Off）。也可整合多个Toggle为一个Toggle Group，这样可实现同一时间内只有一个Toggle处于开启（On）状态（也就是有多个选项的单选组）。
Toggle只有一个值变更事件，用于响应用户变更状态的动作。新的值（Boolean类型）作为参数传递。常见的用法：
（1）切换开或关（比如是否开启游戏音乐）；
（2）让用户确认他们已经阅读法律声明；
（3）使用Toggle Group提供一个单选项（比如一周当中的某一天）。
注意Toggle作为父节点提供给子节点可点击区域，若Toggle无子节点或子节点为禁用状态，那么它自身不可点击。
22、Interaction Components - Toggle Group
ToggleGroup并是不可见控件，但可控制一组Toggle的控件行为。属于同一Toggle Group的多个Toggle，同一时间内只有一个Toggle处于开启（On）状态，点击某个为On则其他全部自动变成Off。
22.1 Toggle Group属性一览
Allow Switch Off | 是否允许全部Toggle都为Off。若允许，则点击On状态的Toggle，会把自己置为Off，那么此时全部Toggle都为Off。若不允许，则点击On状态的Toggle将不会有任何变化。 |
22.2 Toggle Group细节描述
拖拽Toggle Group到Toggle控件的Group属性一栏，即可设置Toggle分属哪一组。
ToggleGroup适用于在多个互斥选项中单选某一项的应用场景。比如选择玩家角色类型、速度设置（慢、中、快），或者颜色设置，又或者选择一周当中某一天。若有需要，一个Scene可同时存在多个Toggle Group。
不像其他UI元素，Toggle Group不必作为Canvas的子节点。然而Toggle是需要作为Canvas子节点的。
注意在Scene加载时，或Toggle Group初始化时，Toggle Group并不会强制设置Toggle是否选中。只有当设置某一个为On时才会设置其他为Off。也就是说，你需要管理初始化时哪一个Toggle默认为On状态。
23、Interaction Components - Slider
Slider控件适用于拖拽滑块从一个范围内指定某个值。注意它跟ScrollBar比较像，但Scrollbar常用于浏览内容而不是选择某个数值。
23.1 Slider属性一览
Interactable | 同Selectable |
Transition | 同Selectable |
Navigation | 同Selectable |
Fill Rect | 填充已被滑动覆盖的控件区域的图片 |
Handle Rect | 小滑块的图片 |
Direction | 滑动方向：左至右/右至左/下至上/上至下 |
Min Value | 最小值 |
Max Value | 最大值 |
Whole Numbers | 是否限制为整数 |
Value | 当前值 |
23.2 Slider事件一览
On Value Changed | 值变更事件，参数为当前值，参数类型为float |
23.3 Slider细节描述
Slider取值是由上面滑块的位置决定的。拖动滑块可以从最小值改变到最大值。滑块默认行为是从左往右递增，但可调整Direction参数来更改。比如设置Direction为下至上或上至下。
Slider只有一个值变更事件，用于响应用户拖动滑块的动作。新的值（Float类型）作为参数传递。常见的用法：
（1）选择游戏难度、选择灯光明暗程度；
（2）设置一段距离、大小、时间或角度；
24、Interaction Components - Scrollbar
Scrollbar控件适用于浏览一屏显示不全的图片或文本。注意它跟Slider比较像，但Slider常用于选择一个数值而不是浏览内容。
24.1 Scrollbar属性一览
Interactable | 同Selectable |
Transition | 同Selectable |
Navigation | 同Selectable |
Handle Rect | 小滑块的图片 |
Direction | 滑动方向：左至右/右至左/下至上/上至下 |
Value | 当前值 |
Size | 滑块所占背景的百分比，取值0.0~1.0 |
Number Of Steps | 从0.0滑到1.0可以拆分为多少步。若为0则不限步数。 |
24.2 Scrollbar事件一览
On Value Changed | 值变更事件，参数为当前值，参数类型为float |
24.3 Scrollbar细节描述
Scrollbar的取值是由上面滑块的位置决定的。拖动滑块可以从最小值改变到最大值。滑块默认行为是从左往右递增，最左侧是0，最右侧是1，而中间就是0.5。也可以设置Direction参数为下至上或上至下。
Scrollbar与Slider的一个明显区别在于，Scrollbar可以设置滑块宽度，用于辨识当前可以滑动区域的长度。若可滑动区域较小，滑块应设为较宽，以此限制滑动幅度。
Scrollbar只有一个值变更事件，用于响应用户拖动滑块的动作。新的值（Float类型）作为参数传递。常见的用法：
（1）垂直方向，用于浏览一大段文本；
（2）水平方向，用于设置时间线；
（3）使用一对垂直和水平的Scrollbar，用于放大缩小，以及设置放大缩小的幅度。
25、Interaction Components - Dropdown
Dropdown一般用于制作下拉菜单。
此控件会显示当前选择项。点击则弹出选项列表，可选择其中一项。选中某一项后，选项列表会自动收起，然后只显示当前选择项。点击控件本身或点击Canvas其他任意区域（也即除了选项列表），选项列表都会自动收起。
25.1 Dropdown属性一览
Interactable | 同Selectable |
Transition | 同Selectable |
Navigation | 同Selectable |
Template | 下拉面板的模版（Template）的Rect Transform |
Caption Text | 用于显示当前选择项文本的Text（可选） |
Caption Image | 用于显示当前选择项图片的Image（可选） |
Item Text | 用于显示下拉项（Item）文本的Text（可选） |
Item Image | 用于显示下拉项（Item）图片的Image（可选） |
Value | 当前选择项的下标，从0开始递增 |
Options | 选项列表，每一项都可指定文本与图片 |
25.2 Dropdown事件一览
On Value Changed | 值变更事件，参数为当前选中下标，参数类型为int |
25.3 Dropdown细节描述
Dropdown可选项的列表通过Inspector或代码都能设置。每个选项可指定文本和图片。
当点击下拉列表并选中其中某一项，OnValueChanged事件就会触发。此事件的参数是一个整数，表示选中项的下标，取值从0开始递增。
25.3.1 The template system
Dropdown控件被设计为拥有一个子节点作为下拉面板的模版（Template），用于点击下拉后的内容显示区域。这个模版（Template）默认是非激活的，但可以激活它然后编辑它的内容。此模版（Template）需拖拽到Dropdown的Template属性栏。
模版（Template）有且仅有一个挂载Toggle组件的Item子节点。当点击弹出下拉列表时，此Item将被复制多份用于显示每一个选项。而Item父节点将自动缩放使得它能包含所有Item。
有多种方式可以设置模版（Template）。使用菜单GameObject=>UI=>Dropdown则会创建带有ScrollView的Dropdown，适用于很多可选项时能显示进度条。然而ScrollView并不是必需的。
25.3.2 Setup of text and image support
Dropdown支持每一个选项设置文本和图片（可选）。只有Dropdown设置恰当，它们才能生效。
当Dropdown都设置了Caption Text和Item Text的引用，则选项中的文本才能生效。使用菜单GameObject=>UI=>Dropdown创建则默认设置了这两项。
（1）Caption Text：显示当前项的文本，一般是Dropdown的子节点。
（2）Item Text：显示下拉项的文本，一般是Item的子节点
当Dropdown都设置了Caption Image和Item Image的引用，则选项中的图片才能生效。默认没有设置。
（1）Caption Image：显示当前项的图片，一般是Dropdown的子节点。
（2）Item Image：显示下拉项的图片，一般是Item的子节点
以上属性值可通过Inspector面板指定，也可通过代码修改。
25.3.3 Placement of the dropdown list
下拉列表的显示区域是由模版（Template）的Rect Transform组件的锚点和中心点来决定的。
默认情况下拉列表出现在下方，这是因为模版（Template）的锚点就是下方对齐（Bottom）。同时模版（Template）的中心点要在顶部，这样弹出列表才是从上往下伸展的。
Dropdown有简单的算法来防止下拉选项显示在Canvas外面，否则某些选项会选择不到。假如按默认位置不能完全将下拉选项全部显示于Canvas里面，那么它的位置有可能反转过来。假如向下展开不够位置显示，那么有可能自动变更为向上显示。
这个逻辑相当简单，且有一些限制。比如Dropdown的模版（Template）大小不能超过Canvas减去Dropdown自身大小后的一半，否则将没有足够空间来完整显示下拉列表。
26、Interaction Components - Input Field
TextField控件使得Text能够输入文字。跟其他的交互控件类似，Text Field本身是不可见的，它需要结合一个或多个可见UI控件来使得自身可见。
26.1 Input Field属性一览
Interactable | 同Selectable |
Transition | 同Selectable |
Navigation | 同Selectable |
Text Component | 用于显示输入文本的Text控件 |
Text | 初始默认文本 |
Character Limit | 文本字数限制 |
Content Type | 文本格式 |
- Standard | 标准（文本类型不限） |
- Autocorrected | 自动修正拼写错误 |
- Integer Number | 整数（阿拉伯数字） |
- Decimal Number | 有理数（阿拉伯数字和小数点） |
- Alphanumeric | 英文字母和阿拉伯数字 |
- Name | 名字（自动将首字母大写） |
- Email Address | 电子邮件 |
- Password* | 密码（以*显示代替实际输入的文本，文本格式不限） |
- Pin | Pin码（以*显示代替实际输入的文本，文本仅限数字） |
- Custom | 自定义 |
Line Type | 文本换行方式 |
- Single Line | 仅限一行 |
- Multi Line Submit | 可以多行（按需换行） |
- Multi Line Newline | 可以多行（回车换行） |
Placeholder | 输入提示（输入为空时显示，输入不为空时自动隐藏） |
Caret Blink Rate | 输入光标闪烁速度 |
Selection Color | 被选中文本的背景颜色 |
Hide Mobile Input（iOS only） | 隐藏手机自带键盘（仅限iOS） |
26.2 Input Field事件一览
On Value Changed | 值变更事件，参数为当前输入的文本，参数类型为string |
End Edit | 结束输入时发送的事件，参数为当前输入的文本，参数类型为string |
26.3 Input Field细节描述
通过菜单GameObject=>UI=>InputField即可将Input Field添加到任意已经存在的Text控件上面，然后将此Text控件拖拽到Input Field的Text属性那一栏。
Text控件的Text属性也会随着用户输入文本变化而变化。注意并不支持富文本（RichText），编辑的时候会直接隐藏标签符号（Markup），也没有办法去编辑标签符号（Markup）。
26.4 Input Field特别提示
要获得输入文本，应获取Text Field自身的Text属性，而不是用于显示的Text组件的Text属性，这是因为Text组件的Text属性有可能显示为*号（设置了输入格式为密码），而实际文本内容并不是*号。
27、Interaction Components - Scroll Rect
ScrollRect适用于内容很长但是又要显示在很小区域内的情况。Scroll Rect提供了滚动此内容的功能。
通常Scroll Rect结合Mask来实现Scroll View，这样就只有位于Scroll Rect区域内的滚动内容可见。它还可以结合一个或两个Scrollbar来实现水平或垂直的滚动条。
27.1 Scroll Rect属性一览
Content | 需要滚动的UI元素，比如一个大图片 |
Horizontal | 是否允许水平滚动 |
Vertical | 是否允许垂直滚动 |
Movement Type | 滑动类型：Unrestricted（不受限）、Elastic（回弹）或Clamped（夹紧）。采用Elastic和Clamped可以限制滚动时内容不会超出Scroll Rect区域范围。若采用Elastic模式，则当内容滚动到Scroll Rect边界时会回弹回来。 |
- Elasticity | Elastic模式的回弹力度（Elasticity）。 |
Inertia | 是否启用惯性。若启用，则停止拖拽时滚动持续。若不启用，则停止拖拽同时停止滚动。 |
- Deceleration Rate | 启用惯性时的减速度，表明停止拖拽后滚动减速到停止的系数。为0则立马停止，为1则永不停止。 |
Scroll Sensitivity | 滚动灵敏度 |
Viewport | 内容的视窗（Content的父节点） |
Horizontal Scrollbar | 水平进度条属性 |
- Visibility | 是否自动隐藏/扩展 |
- Spacing | 进度条与视窗（Viewport）的间距 |
Vertical Scrollbar | 垂直进度条属性 |
- Visibility | 是否自动隐藏/扩展 |
- Spacing | 进度条与视窗（Viewport）的间距 |
27.2 Scroll Rect事件一览
On Value Changed | 值变更事件，参数为当前滚动的位置，参数类型为Vecter2 |
27.3 Scroll Rect细节描述
ScrollView的重要组成部分包括视窗（Viewport）、内容（Content）以及两个进度条（Scrollbar）。
（1）根节点挂载Scroll Rect脚本；
（2）视窗（Viewport）挂载Mask脚本。Viewport既可以是根节点，也可以是根节点的子节点。如果使用了自动隐藏进度条，那么Viewport必须是子节点。此外Viewport节点必须赋值到Scroll Rect的Viewport属性上。
（3）所有可以滚动的内容都必须是Content的子节点，而Content自身又是Viewport的子节点。此外Content必须赋值到Scroll Rect的Content属性上。
（4）如果需要进度条，那么进度条是根节点的子节点。
下图显示了一种Viewport作为根节点子节点的节点树结构。这是通过菜单GameObject=>UI=>ScrollView默认创建的节点树结构。
要想滑动Content，那么应该操作Scroll Rect边界范围内区域，而不是操作Content自身区域（比Scroll Rect大）。
注意，若使用了Unrestricted（不受限）滑动类型，有可能一下子滑太多导致失控。若使用Elastic（回弹）或Clamped（夹紧）滑动类型，则最好一开始就将Content设置位于Scroll Rect区域内，否则当滑动后Scroll Rect试图将Content拽回自身区域时，可能会出现奇怪的行为。
27.3.1 Scrollbar setup
作为可选项，Scroll Rect可指定水平和垂直的Scrollbar。在Hierarchy视图中它们通常跟VIewport同级，同时被拖拽到Scroll Rect对应的水平或垂直进度条的属性值上面。注意水平进度条的Direction属性应设置为自左向右（Left To Right），而垂直进度条则应设置为自下向上（Bottom To Top）。
当Content区域并不比Viewport大的时候，进度条还可以自动隐藏。注意自动隐藏的行为只在播放模式下生效。在编辑模式下它总是显示。这样是为了防止Scene被置为已修改需保存状态（dirty），同时也有助于编辑内容使得进度条可见时，内容显示也是符合比例的。
若一个或两个进度条都设置了自动隐藏与扩展（Auto HideAnd Expand View），则当进度条隐藏时，Viewport会自动扩展以便利用进度条所提供的额外空间。当应用这项设置时，Viewport的位置与大小就会受Scroll Rect影响，水平进度条的宽度、垂直进度条的高度也一样受Scroll Rect影响。所以这种情况Viewport跟进度条都必须是Scroll Rect的子节点。
27.4 Scroll Rect特别提示
Content（内容）的Pivot中心点和Anchor锚点用来决定Content当Scroll View伸缩时的布局参数。比如希望Content上对齐，那么设置Anchor为父节点的Top，而Pivot也置为Top即可。