零基础入门 20: UGUI DropDown

(题外话,因为这期分享中段制作之后,微信平台抽疯,Gif图无法使用,导致我不得不尝试用其他的方式来让文章看起来没那么死板,在后面的部分展示中,我插入了视频文件而并非Gif,不过大小进行了控制,不会浪费太多流量,不过仍然建议wifi环境下观看。)

(从蛮牛过来的同学或者是电脑端查看的同学,在查看视频的时候可以全屏,效果更佳,手机端的同学们可能效果不是很理想,但是也可以视频全屏铺满查看,但是效果肯定不会有电脑的全屏清晰。后续如果确定了这种制作方式,我会尽量保证高清晰度提供给大家查看)

今天给大家分享一个Unity5中期版本才加入的UGUI组件,Dropdown。什么是Dropdown呢?就是我们所谓的下拉菜单,点开以后有一定数量的下拉选项,以供使用者进行对应的筛选操作等。

我从网上找到了一张下拉菜单的图。大家可以参考下,一看便知Dropdown是什么

那如何使用呢?进入我们今天的主题分享


Dropdown这个组件是之前UGUI刚出时没有的组件。也算是一个新组件,我们先在Unity里创建一个看看

重命名后再看来下Dropdown的组件内容

静态图展示

来说下这个组件的内容

Interactable不用多说了,依然是交互的开关

Transition:交互动画选项

Color Multiplier:颜色乘法系数

Fade Duration:动画的过渡时间

包括navigation导航在内,都是之前讲的几个其他组件也有的,从template开始,是Dropdown自己特有的组件属性内容。

Template:Dropdown的模板,DropdownList以该模班生成

Caption Text:标题的文字

Caption Image:标题的图片

Item Text:模板文字组件

Item Image:模板图片组件

Value:下拉菜单默认第几个位置(0起)

Options:选项的设置,包括文本和图片

在知道了Dropdown的这些内容之后,有一点需要注意

下拉菜单的value代表了菜单的默认值,从0开始,如果当前赋值的数目不符合下拉菜单options下标,则根据赋值数找到Options的最大或者最小值进行显示,超出后mark标记无法显示。

什么意思呢?举个例子,比如说我们现在默认的Options是3个,value默认为0,我们分别改名为aa bb cc,那么默认应该显示的就是下标value为0的options,即aa。打开下拉菜单后,可以看到的确是选择的aa,并且aa前面有一个mark标记代表选中。

而如果此时我们把value改为-1,结果如何呢?根据我们刚才所说的注意事项,options默认下标从0开始,总数为3个,所以options的value应该符合值有0,1,2

那如果我把value改成了-1,根据规则会找到最大或者最小值进行匹配设置,且无mark标记,即当我们把数值改为-1后,下拉菜单会显示下标为0的内容,并且无标记。

如下图,我们来演示下,默认值为0,显示aa,当把数值改为-1后,默认选中了下标为0的aa,但是无mark标记显示。

再演示下不同数值的下拉菜单效果。

在编辑器里增加和删除Options的方法。增加的话点击下面的加号,输入标题即可了。

删除的话点击前面的选择框, 然后点击-号即可。

知道了如何在编辑器下创建并且设置下拉菜单以后,以及在了解了Dropdown这个组件的一些属性内容之后,又到了我们在脚本内创建并且控制组件的时候了,毕竟实际使用中,有时候很多需求都要求我们动态的去设置下拉菜单的内容。

首先,创建一个脚本,然后公开一个Dropdown。并且把脚本挂载到canvas上,将Unity编辑器下创建的dropdown进行拖动赋值。

(从这开始,微信平台抽疯,导致Gif无法使用,以致于我不得不去尝试用视频的方式来给大家完成后面的分享,不过每个视频的大小进行了控制,不会很大)

(在制作视频的时候,我会尽量把关键点拉近给大家看,这样就算视频效果不是很清晰的时候,也能让大家看到关键点。

虽然微信抽疯无法发出GiF,但是必要的时候我仍然会贴出静态图。)

回到正题,我们在脚本的Start函数里做一些事情,比如说,默认的dropdown的value值为0,我们在脚本的start函数里进行设置默认值为2,即可显示出第三个下拉菜单。

视频内容

通过上面的操作大家可以看出来,默认的value值为0,所以在非运行状态下显示的是第0个下拉菜单,即aa,那么运行后,我们在start里面将value修改为了2,此时运行后,下拉菜单的显示就变成了下标为2的cc。

这里说一下下标和实际数目的区别,因为我们正常查数都是从1 2 3这样数数,但是对于下拉菜单来说,因为是个list,下标是从0起,即下标0对应了我们所说的第1个,即下标x对应着第x+1个,这样理解即可。

在我们学会设置value后,下一步要学会的就是如何通过代码来动态的去控制这个dropDown的Options。下面的这个视频来给大家进行演示。并且我会写上对应的注释。

视频内容

在学会了如何动态的设置下拉菜单的内容以后,最后一步就是学习一下,如何在菜单点击切换发生改变的时候,拿到这个事件,从而做一些事件处理。下面的这个视频也是这篇分享里的最后一个。讲述一下,如何代码控制菜单切换拿到这个切换对应菜单的事件。

视频内容

好了,这期的Dropdown的分享到这里就结束了,总结一下,这期里分享了这个组件的一些属性内容的概念,让大家了解到了如何在编辑器下实现对下拉菜单的预编辑,以及通过代码实现对下拉菜单的一些控制、事件获取等等。

这期分享,一波三折,多有不易,本来分波段录制了不少的小视频,最后上传得知一篇帖子只能显示3个视频,又重新制作,哎,真心不易,今天算是被平台给坑了。无法使用Gif真是麻烦,这期结束以后大家可以给我一些反馈,如果觉得这种视频讲解的要比Gif好的,可以给我留言,我后期会考虑中和一下。

再见啦,有问题大家可以给我留言也可以加我的QQ:1173344117,添加请备注谢谢。

最后谢谢大家的支持,ヾ( ̄▽ ̄)Bye~Bye~

原文发布于微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin)

原文发表时间:2017-04-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术总结

Photos存储、获取、更改照片详解

2699
来自专栏守候书阁

vue快速入门的三个小实例

用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下webpack+vue项目实战(一,搭建运行环境和相...

1321
来自专栏Jaycekon

Phantomjs+Nodejs+Mysql数据抓取(1.数据抓取)

概要: 这篇博文主要讲一下如何使用Phantomjs进行数据抓取,这里面抓的网站是太平洋电脑网估价的内容。主要是对电脑笔记本以及他们的属性进行抓取,然后在使...

4405
来自专栏我有一个梦想

Python 项目实践一(外星人入侵小游戏)第三篇

接着上节的继续学习, 一 重构:模块game_functions 在大型项目中,经常需要在添加新代码前重构既有代码。重构旨在简化既有代码的结构,使其更容易扩展。...

3339
来自专栏刘望舒

Android应用优化之流畅度实操

3113
来自专栏前端说吧

vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?!

6173
来自专栏我的博客

JQuery表格表单操作

1、多选框应用代码示例 <form action=”#” method=”post”> 你喜欢的明星是?<br /> <input type=”checkbox...

3074
来自专栏程序员的SOD蜜

“老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春

火热的MVVM框架 最近几年最热门的技术之一就是前端技术了,各种前端框架,前端标准和前端设计风格层出不穷,而在众多前端框架中具有MVC,MVVM功能的框架成为耀...

4146
来自专栏nimomeng的自我进阶

Event官方文档

当系统传递一个touch event,首先会send到一个特定的view。对于touch view来讲,这个view就是被hitTest:withEve...

1212
来自专栏xx_Cc的学习总结专栏

iOS-世界那么大,CoreLocation带你去看看

3009

扫码关注云+社区

领取腾讯云代金券