Unity3D 官方文档 UGUI总览 可互动组件的介绍

版本：unity 5.6  语言：C#

 

总起：

可互动组件包括按钮、复选框、滑块、滚动条等，本身它们是不可见的，但它们内部有可视化组件。

 

做UI的时候，如果不需要什么特效本身使用onClick.AddListener添加事件可能就能轻松的完成，但如果需要类似按钮渐隐、图片弹出这类顺序显示特效的效果，那么强烈推荐使用UniRx，响应式编程能能轻松解决以上问题，而且往往是几行代码搞定。

 

UGUI介绍更完之后，应该会深入研究UniRx，并写几篇博文进行介绍。

 

可互动组件：

♦ Selectable

先来介绍一下所有可互动组件的父类，所有可互动组件都具有该类的属性：

 

Interactible：当前组件是否可互动，如果该值为false，则组件的输入事件会处于禁用状态；

 

Transition：决定互动组件处于不同状态时视觉的表现：

Transition有三种模式：Color Tint颜色叠加、Sprite Swap图片切换、Animation动画；
而组件一般有四种状态：Normal普通、Highlighted高亮、Pressed按下、Disabled禁用；

 

Navigation：点击按钮、滑块等互动组件时，UGUI系统会聚焦到该组件上，此时按下Tab键切换目标时的顺序，则由该属性决定。这个属性看样子适用于Console Game使用手柄游戏的开发。一般手游、PC鼠标流基本就不需要了。

 

♦ Selectable -> Transition -> Animation



事实上Transition的前两种模式都可以用Animation模式来实现，如图点击Auto Generate Animation就能生成一个组件相关的Animator，然后开启Animation窗口就能录制组件四种状态下的动画。

 

♦ Button

按钮被设计为处理用户的单击，如果用户点下按钮，但释放的时候移开到按钮范围之外，那么该按钮将不会被触发。

 

让我们来看看一个实际按钮的截图：



仔细一看其实都是父类Selectable的属性，唯一例外的就是多了一个OnClick事件监听。

 

OnClick：写事件现在有三种方法：

1.拖脚本，直接点击OnClick小窗口下的 + 号，添加场景中的调用方法；

2.脚本控制（常用），调用Button.onClick.AddListener添加事件；

3.UniRx（最佳），添加插件之后调用Button.onClick.AsObservable()，将其转换为一个异步观测者。

 

♦ Toggle

复选框，他能在开和关两种状态下切换，而且能添加Toggle Group将几个Toggle添加到一个组中，使它们保持只有一个Toggle被勾选：



IsOn：当前Toggle的状态；

 

Toggle Transition：Toggle状态切换时的效果，现在只有一种Fade淡入淡出；

 

Graphic：IsOn为true时显示的图片；

 

Group：当前Toggle所在的组；

 

OnValueChanged：Toggle状态变化时触发的事件，与Button的OnClick用法类似，不再赘述。

 

♦ Toggle Group

拥有相同的ToggleGroup的Toggle组，表现行为就类似于复选框，每次同时只有一个Toggle被选中，注意保证所有的Toggle默认状态为Off（false），官方建议只有一个为On。



Allow Switch Off：是否允许没有任何一个Toggle被选中，意思是有一个被选中的Toggle时，再次点击时，能否把它关闭掉。

 

♦ Slider

滑块，可以做音乐、音效音量的调节。去掉事件触发和Handle按钮就是进度条：



Fill Rect：填充矩形，该图片用于在不同进度下填充区域的控制；

 

Handle Rect：滑块的把手，我一般一开始就把它去掉；

 

Direction：Slider进度的方向，有四种：左到右、右到左、上到下、下到上；

 

Min Value：Slider进度的最小值；

 

Max Value：Slider进度的最大值；

 

Whole Numbers：是否将Slider进度值处理为整数int；

 

Value：当前Slider的进度；

 

OnValueChanged：进度变化时触发的事件。

 

♦ Scrollbar

滚动条，类似于上面的滑块，不贴图了，就介绍一下跟Slider不同的参数：

 

Size：把手大小占整个滚动条的比例；

 

Number Of Steps：将进度分成的份数，设定为0和1没有效果。

 

♦ Dropdown

下拉列表，可以允许选择一个单一选项：



Template：当前选项的模版；

 

Caption Text：当前选中的文字（可选）；

 

Caption Image：当前选中的图片（可选）；

 

Item Text：每个选项的文字（可选）；

 

Item Image：每个选项的图片（可选）；

 

Value：当前选中的值，0为第一个，1为第二个，以此类推；

 

Options：所有的选项；

 

On Value Changed：值变化时触发的事件。

 

Template在运行的时候一直是处于inactive状态的，一般在编辑的时候会设置为active再进行编辑，相当于一个Prefab的模版。

 

♦ Input Field

输入框，用于控制文本输入：



TextComponent：该Component用于当前文本的显示，但获取数据是不应该使用该Text，因为可能有密码框，他的内容可能全是*；

 

Text：当前文本输入的内容；

 

Character Limit：字符的最大数量；

 

Content Type：当前内容的形式，这个类型有很多：标准、自动更正错别字、整数、实数、字母和数字、名字（第一个字母会大些）、Email、密码、Pin（类似密码，但只允许数字）等，根据实际需求选择就好，就不一一列举了。

 

Line Type：决定换行的类型：

        1.Single Line，不允许换行；

        2.Multi Line Submit，允许换行，但只有一行内容容纳不下时；

        3.Multi Line Newline，允许换行，用户可以按Enter键进行换行。

    

Placeholder：占位符，当内容为空时，提示输入的文字或图片。注意被选中时还会显示，只有有了内容才会消失；

 

Caret Blink Rate：光标闪烁的频率；

 

Caret Width：光标的宽度；

 

Selection Color：选中文字时，覆盖在上面遮罩的颜色；

 

Hide Mobile Input（iOS专用）：隐藏手机的本地的输入键盘；

 

Read Only：是否只读；

 

On Value Change：值变化事件；

 

End Edit：结束文字输入事件。

 

♦ Scroll Rect

滚动列表，当前内容放不下的时候或者动态加载内容项时可以使用：



Content：需要一个巨大的矩形，用于滚动；

 

Horiazontal：是否启用水平的滚动；

 

Vertical：是否启用垂直的滚动；

 

Movement Type：滑动时的类型：

Elastic类型在滑出边缘后有回弹效果；

Unreastricted可以进行任意的滑动，不是很推荐；

Clamped就是内容强制在一定范围内，没有滑动回弹效果。

 

Inertia：滑动后送开是否会因为惯性继续移动；

 

Scroll Sensitivity：滑动的灵敏度；

 

Viewport：内容的RectTransform；

 

Horizontal Scrollbar：垂直的滚动条；

 

Vertical Scrollbar：水平的滚动条；

 

Visibility：滚动条的设置，最好是选择Auto Hide And Expand Viewport，这样滚动调的显隐会根据内容自动控制；

 

Spacing：滚动条设置，滚动条和Viewport之间的空隙；

 

On Value Changed：滚动条值发生变化时触发的事件。

 

OK，今天的UGUI就讲到这里，下一章是自动布局组件。

 

个人：

这些天一直整理官方文档然后写项目，感觉有了更深一层次的理解，感觉良好，哈哈。