Unity3D学习笔记uGUI(12):Interaction Components祥述

发表于2017-04-28
评论0 7.8k浏览

20Interaction Components - Button

         按钮用于响应用户点击,可用于启动或确认某个动作。最常见的例子就是表单的确定和取消按钮。

说明: A Button.

说明: http://docs.unity3d.com/uploads/Main/UI_ButtonInspector.png

 

20.1 Button属性一览

Interactable

Selectable

Transition

Selectable

Navigation

Selectable

 

20.2 Button事件一览

On Click

点击事件

 

20.3 Button细节描述

         按钮用于响应用户点击。如果鼠标在弹起之前移出了按钮范围,那么用户点击行为并不会被执行。

         按钮只有一个点击事件,用于响应用户完成了一次点击动作。常见的用法:

         1)确认一个决定(比如启动游戏或游戏存档);

         2)移动到下一级子菜单;

         3)取消一个进度(比如取消下载)。

 

21Interaction Components - Toggle

         Toggle用于制作选择框,提供用户选中或取消选中的功能。

说明: A Toggle.

说明: http://docs.unity3d.com/uploads/Main/UI_ToggleInspector.png

 

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无子节点或子节点为禁用状态,那么它自身不可点击。

 

22Interaction Components - Toggle Group

         ToggleGroup并是不可见控件,但可控制一组Toggle的控件行为。属于同一Toggle Group的多个Toggle,同一时间内只有一个Toggle处于开启(On)状态,点击某个为On则其他全部自动变成Off

说明: A Toggle Group

说明: http://docs.unity3d.com/uploads/Main/UI_ToggleGroupInspector.png

 

22.1 Toggle Group属性一览

Allow Switch Off

是否允许全部Toggle都为Off。若允许,则点击On状态的Toggle,会把自己置为Off,那么此时全部Toggle都为Off。若不允许,则点击On状态的Toggle将不会有任何变化。

 

22.2 Toggle Group细节描述

         拖拽Toggle GroupToggle控件的Group属性一栏,即可设置Toggle分属哪一组。

         ToggleGroup适用于在多个互斥选项中单选某一项的应用场景。比如选择玩家角色类型、速度设置(慢、中、快),或者颜色设置,又或者选择一周当中某一天。若有需要,一个Scene可同时存在多个Toggle Group

         不像其他UI元素,Toggle Group不必作为Canvas的子节点。然而Toggle是需要作为Canvas子节点的。

         注意在Scene加载时,或Toggle Group初始化时,Toggle Group并不会强制设置Toggle是否选中。只有当设置某一个为On时才会设置其他为Off。也就是说,你需要管理初始化时哪一个Toggle默认为On状态。

 

23Interaction Components - Slider

         Slider控件适用于拖拽滑块从一个范围内指定某个值。注意它跟ScrollBar比较像,但Scrollbar常用于浏览内容而不是选择某个数值。

说明: A Slider.

说明: http://docs.unity3d.com/uploads/Main/UI_SliderInspector.png

 

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)设置一段距离、大小、时间或角度;

 

24Interaction Components - Scrollbar

         Scrollbar控件适用于浏览一屏显示不全的图片或文本。注意它跟Slider比较像,但Slider常用于选择一个数值而不是浏览内容。

说明: A Scrollbar.

说明: http://docs.unity3d.com/uploads/Main/UI_ScrollBarInspector.png

 

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参数为下至上或上至下。

         ScrollbarSlider的一个明显区别在于,Scrollbar可以设置滑块宽度,用于辨识当前可以滑动区域的长度。若可滑动区域较小,滑块应设为较宽,以此限制滑动幅度。

         Scrollbar只有一个值变更事件,用于响应用户拖动滑块的动作。新的值(Float类型)作为参数传递。常见的用法:

         1)垂直方向,用于浏览一大段文本;

         2)水平方向,用于设置时间线;

         3)使用一对垂直和水平的Scrollbar,用于放大缩小,以及设置放大缩小的幅度。

 

25Interaction Components - Dropdown

         Dropdown一般用于制作下拉菜单。

         此控件会显示当前选择项。点击则弹出选项列表,可选择其中一项。选中某一项后,选项列表会自动收起,然后只显示当前选择项。点击控件本身或点击Canvas其他任意区域(也即除了选项列表),选项列表都会自动收起。

说明: A Dropdown.

说明: A Dropdown with its list of options open.

说明: http://docs.unity3d.com/uploads/Main/UI_DropdownInspector.png

 

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)需拖拽到DropdownTemplate属性栏。

         模版(Template)有且仅有一个挂载Toggle组件的Item子节点。当点击弹出下拉列表时,此Item将被复制多份用于显示每一个选项。而Item父节点将自动缩放使得它能包含所有Item

         有多种方式可以设置模版(Template)。使用菜单GameObject=>UI=>Dropdown则会创建带有ScrollViewDropdown,适用于很多可选项时能显示进度条。然而ScrollView并不是必需的。

 

25.3.2 Setup of text and image support

         Dropdown支持每一个选项设置文本和图片(可选)。只有Dropdown设置恰当,它们才能生效。

         Dropdown都设置了Caption TextItem Text的引用,则选项中的文本才能生效。使用菜单GameObject=>UI=>Dropdown创建则默认设置了这两项。

         1Caption Text:显示当前项的文本,一般是Dropdown的子节点。

         2Item Text:显示下拉项的文本,一般是Item的子节点

         Dropdown都设置了Caption ImageItem Image的引用,则选项中的图片才能生效。默认没有设置。

         1Caption Image:显示当前项的图片,一般是Dropdown的子节点。

         2Item Image:显示下拉项的图片,一般是Item的子节点

         以上属性值可通过Inspector面板指定,也可通过代码修改。

 

25.3.3 Placement of the dropdown list

         下拉列表的显示区域是由模版(Template)的Rect Transform组件的锚点和中心点来决定的。

         默认情况下拉列表出现在下方,这是因为模版(Template)的锚点就是下方对齐(Bottom)。同时模版(Template)的中心点要在顶部,这样弹出列表才是从上往下伸展的。

         Dropdown有简单的算法来防止下拉选项显示在Canvas外面,否则某些选项会选择不到。假如按默认位置不能完全将下拉选项全部显示于Canvas里面,那么它的位置有可能反转过来。假如向下展开不够位置显示,那么有可能自动变更为向上显示。

         这个逻辑相当简单,且有一些限制。比如Dropdown的模版(Template)大小不能超过Canvas减去Dropdown自身大小后的一半,否则将没有足够空间来完整显示下拉列表。

 

26Interaction Components - Input Field

         TextField控件使得Text能够输入文字。跟其他的交互控件类似,Text Field本身是不可见的,它需要结合一个或多个可见UI控件来使得自身可见。

说明: An empty Input Field.

说明: Text entered into the Input Field.

说明: http://docs.unity3d.com/uploads/Main/UI_InputFieldInspector.png

 

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 InputiOS 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 FieldText属性那一栏。

         Text控件的Text属性也会随着用户输入文本变化而变化。注意并不支持富文本(RichText),编辑的时候会直接隐藏标签符号(Markup),也没有办法去编辑标签符号(Markup)。

 

26.4 Input Field特别提示

         要获得输入文本,应获取Text Field自身的Text属性,而不是用于显示的Text组件的Text属性,这是因为Text组件的Text属性有可能显示为*号(设置了输入格式为密码),而实际文本内容并不是*号。

 

27Interaction Components - Scroll Rect

         ScrollRect适用于内容很长但是又要显示在很小区域内的情况。Scroll Rect提供了滚动此内容的功能。

         通常Scroll Rect结合Mask来实现Scroll View,这样就只有位于Scroll Rect区域内的滚动内容可见。它还可以结合一个或两个Scrollbar来实现水平或垂直的滚动条。

说明: A Scroll Rect.

说明: http://docs.unity3d.com/uploads/Main/UI_ScrollRectInspector.png

 

27.1 Scroll Rect属性一览

Content

需要滚动的UI元素,比如一个大图片

Horizontal

是否允许水平滚动

Vertical

是否允许垂直滚动

Movement Type

滑动类型:Unrestricted(不受限)、Elastic(回弹)或Clamped(夹紧)。采用ElasticClamped可以限制滚动时内容不会超出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 RectViewport属性上。

         3)所有可以滚动的内容都必须是Content的子节点,而Content自身又是Viewport的子节点。此外Content必须赋值到Scroll RectContent属性上。

         4)如果需要进度条,那么进度条是根节点的子节点。

 

         下图显示了一种Viewport作为根节点子节点的节点树结构。这是通过菜单GameObject=>UI=>ScrollView默认创建的节点树结构。

说明: http://docs.unity3d.com/uploads/Main/UI_ScrollRectHierarchy.png

        

         要想滑动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锚点用来决定ContentScroll View伸缩时的布局参数。比如希望Content上对齐,那么设置Anchor为父节点的Top,而Pivot也置为Top即可。

点击访问官方英文文档

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引