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即可。