版本: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就讲到这里,下一章是自动布局组件。

个人:

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

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

  1. 官方文档 恢复备份指南一 恢复备份介绍

    1.备份分为:物理备份和逻辑备份 物理备份:备份数据文件  控制文件  归档日志文件 逻辑备份:EXP EXPDP备份等 物理备份为主,逻辑做补充 2.错误的类型 media failure :介质失 ...

  2. React(精读官方文档) - 高级指引 -高阶组件

    高阶组件(HOC) 概述 是React复用组件逻辑的一种高级技巧,是一种基于React组合特性而形成的设计模式 高阶组件是参数为组件,返回值为新组件的函数 简单理解: 高阶组件本身是 函数,传参数是组 ...

  3. 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据

    阅读目录 1.系列文章说明 2.入门指南(2)获取数据源 3.资源 我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今 ...

  4. 微信小程序多选复选框checkbox。微信小程序官方文档bug

    由于个人从事微信小程序开发相关工作,在查询相关文档时(微信官方文档-小程序-表单组件-checkbox),发现示例代码中的一处错误. 问题出现原因:根据文档示例代码提示,设置本人本地代码,却发现下图红 ...

  5. 再仔细读读react18官方文档吧 20220608

    章节回顾: 再仔细读读react18官方文档吧 20220602 目录 卸载组件api 引入ReactDOM方式变了 root的渲染方式变了 什么是单页面应用? 传递事件函数的多种写法 React中的 ...

  6. AsyncDisplayKit官方文档个人翻译

    迁移老文章到掘金 文档比较老了,不适用最新的2.0 AsyncDisplayKit 官方文档 最近在拆解学习AsyncDisplayKit这个很知名的轮子,发现这个轮子内容还是非常庞大的,想要分解学习 ...

  7. 微信小程序联盟:官方文档+精品教程+demo集合(12月更新……)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 《SpringBoot官方文档》_笔记

    文章目录 Part III. Using Spring Boot Part IV Spring Boot Features 23 SpringApplication 23.1 Startup Fail ...

  9. 翻译Houdini官方文档:PDG/TOPs介绍

    官方文档:Introduction to TOPs 总览 使用TOPs工作 TOP节点UI Processors(处理器) Mappers partitions(分割) Schedulers(调度器) ...

最新文章

  1. 微盟数据库的涅槃之旅
  2. 《钢铁神兵》里的较量的数学题,都是什么级别的难题?
  3. Party(HDU-3062)
  4. arduino绘图_如何使用Arduino构建绘图仪
  5. POJ 1986:Distance Queries(倍增求LCA)
  6. 多边形区域填充算法_花一分钟看一个案例,PPT中图片填充形状的应用
  7. FFmpeg源代码简单分析:avformat_write_header()
  8. LeetCode(26): 删除排序数组中的重复项
  9. C++奥赛第四弹——阿克曼函数
  10. R语言(四)——十折交叉验证/机器学习回归【决策树(随机森林)、组合方法、SVR】
  11. 如何设立清晰的可衡量的目标(SMART原则)
  12. POJ 3422 Kaka's Matrix Travels(拆点+最大费用流)题解
  13. MySQL 报错InnoDB: Cannot allocate memory for the buffer poo处理方法
  14. 一个简单的音乐播放器(实现上一曲下一曲,和自动播放)
  15. android手机是否root,已经2017年了,安卓手机还需要Root吗?
  16. 1. 抽纸片(java)
  17. 数据挖掘之Spark学习
  18. python台风动图绘制_python可视化绘图:台风路径可视化
  19. php 答题 一页一题,微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题...
  20. Datepicker日期选择器插件

热门文章

  1. 成人弱视患者福音!可借助AR头显恢复视觉功能
  2. OPENCV420版本CV_INTER_LINEAR
  3. 我们为什么要用版本控制
  4. 敏捷是项目管理+合作
  5. 手机用android ics,ICS系统更多贴心小功能_手机Android频道-中关村在线
  6. html5 替代css js,jsindexof替代办
  7. android 自定义relativelayout,Android布局(RelativeLayout、TableLayout等)使用方法
  8. 微信浏览器input关闭键盘后导致页面底部空缺问题
  9. 开发移动办公APP需要哪些功能?
  10. linux rz下载文件,Linux使用rz sz上传下载文件