专栏首页韩东吉的Unity杂货铺零基础入门 20: UGUI DropDown

零基础入门 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),作者:Jimin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础入门 5: 自定义脚本内容和脚本ICON

    Hello,这几天忙碌的不可开交,又有几天没更新了。这么久不见大家,今天来更新一发。

    韩东吉
  • 零基础入门 39:Unity常用快捷键汇总

    很多同学在后台和我反馈说从Unity零基础入门,觉得知道Unity的常用快捷键很有必要,但是却不知道常用的都有什么,都是什么,既然问的人这么多,那这篇就来对快捷...

    韩东吉
  • 零基础入门 7: 创建自己的菜单

    在上一篇菜单介绍分享之后,有一些小伙伴在后台留言说能不能分享下如何创建自定义的菜单栏?怎么创建?

    韩东吉
  • Python操作excel:用xlwt设置excel单元格背景颜色,给字体加粗。【附】颜色表

    xlwt.easyxf() 设置样式,pattern 指的就是背景,ice_blue 就是我设置的颜色。 font 就是设置字体,bold on 是加粗。 ...

    小蓝枣
  • WAIC 2020 微软论坛精彩全回顾!

    2020年,新冠疫情的肆虐放缓了全球经济增长的步伐,也提醒着我们,尽管科技发展突飞猛进,人类社会和自然环境仍然面临诸多挑战:自然灾害、流行病、贫穷、污染、饥饿等...

    AI科技评论
  • 第124天:移动web端-Bootstrap轮播图插件使用

    > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

    半指温柔乐
  • 微软Build 2019大会来了!跨空间多人协作亮相;对话小娜如同真人

    一年一度的Microsoft Build 2019终于来了!大会于今日正式在美国西雅图拉开了帷幕。

    AiTechYun
  • SUI分页组件和avalon搞定ajax无刷新分页

    阿炬
  • c++之深拷贝和浅拷贝

    在堆区开辟内存存储数据之后,如果不自己定义拷贝构造函数,那么系统会调用默认的拷贝构造函数,这种情况下就是浅拷贝,此时,p2和p1的m_height都指向同一块地...

    西西嘛呦
  • 动态 | 百度NLP团队登顶微软MARCO阅读理解测试

    AI 科技评论消息,2 月 21 日,百度 NLP 团队提交的 V-Net 模型以 46.15 的 Rouge-L 得分位列微软的 MS MARCO 机器阅读理...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券