Unity UGUI_DropDown控件模拟QQ分组的使用心得
关于 DropDown 很好用,但是也有很多坑,对比专门的软件开发工具,unity关于DropDown的功能有限,下面总结一下我本次使用DropDown的一些心得
DropDown下拉选项
DropDown创建即可运行,并生成初始选项,供我们参考使用,也非常简单,下面我讲讲使用方法:
上图我创建了一个DropDown,相关属性我就不说了,我讲讲怎么添加事件,和设置名称
我根据项目需求,选中后主标题是不会变化的,所以把CaptionText 控件置为空,这样我们就可以单独控制改文字的更改。
我的项目需求是有多少选项就会显示多少,所以去掉Template下的一些控件,并且去除掉Template身上的Scroll Rect组件。
上面步骤完成后,我们调整锚点,然后给Template添加两个组件,用于排列显示,和适应选项大小,现在我们就实现了有多少选项都会直接显示出来,下面我们进行事件绑定和实现qq分组折叠效果
上代码:
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class DropdownScript : MonoBehaviour {public Text m_dropdownName;//名称public int m_ids = 0;//idprivate Dropdown m_dropdown;//控件private List<Dropdown.OptionData> optionDatas = new List<Dropdown.OptionData>();//选项private Action<int> DropDownEvent;//选项事件public Action<bool, int,float> OpenOrCloseEvent;//点击事件private void OnClickDropdown(int arg0){if (DropDownEvent!=null){DropDownEvent(arg0);}}/// <summary>/// 初始化下拉框/// </summary>/// <param name="name"></param>/// <param name="options"></param>public void InitDropdown(string name,int id,List<string> options){m_ids = id;m_dropdown = this.transform.GetComponent<Dropdown>();m_dropdown.onValueChanged.AddListener(OnClickDropdown);m_dropdownName.text = name;m_dropdown.ClearOptions();if (options.Count>0&& options!=null){for (int i = 0; i < options.Count; i++){Dropdown.OptionData option = new Dropdown.OptionData();option.text = options[i];optionDatas.Add(option);}}m_dropdown.AddOptions(optionDatas);}/// <summary>/// 添加或者清空事件 不传参或者null清空事件/// </summary>/// <param name="action"></param>public void DropDownEventCtrl(Action<int> action=null){DropDownEvent += action;}public void OnClickEventCtrl(Action<bool,int,float> action = null){OpenOrCloseEvent += action;}}
该代码挂在编辑好的DropDown上,由于DropDown没有展开和关闭的事件监听,所以我做了一个能够检测到展开关闭的事件OpenOrCloseEvent,思路是在点击展开时系统会生成一个叫做DropDown List的控件,该控件就是基于Template生成的,所以我写了一个脚本,专门在start和destory时触发OpenOrCloseEvent事件,看代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;
public class TemplateEvent : MonoBehaviour {DropdownScript dropdownScript;float hight = 0;// Use this for initializationvoid Start () {dropdownScript = GetComponentInParent<DropdownScript>();hight = this.GetComponent<RectTransform>().rect.height+ dropdownScript.GetComponent<RectTransform>().rect.height;if (this.name == "Dropdown List"){if (dropdownScript.OpenOrCloseEvent != null){dropdownScript.OpenOrCloseEvent(true, dropdownScript.m_ids, hight);}}}// Update is called once per framevoid Update () {}private void OnDestroy(){if (this.name == "Dropdown List"){if (dropdownScript.OpenOrCloseEvent != null){dropdownScript.OpenOrCloseEvent(false, dropdownScript.m_ids, hight);}}}
}
该脚本挂在Template上
OpenOrCloseEvent有三个参数:分别为bool(开启关闭),int(当前的DropDown),float(当前选项框的长度+DropDown高度),下面我们就来为这两个事件添加内容监听,主要是OpenOrCloseEvent
}using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class SecondLevelPanel : MonoBehaviour {public DropdownScript m_dropdownScript;//下拉框预制体public Transform m_dropdownParent;//下拉框父物体List<DropdownScript> m_curDropdownScripts = new List<DropdownScript>();// Use this for initializationvoid Start () {List<string> options = new List<string>();for (int i = 0; i < 8; i++){options.Add(("xx图片" + i));}for (int i = 0; i < 5; i++){DropdownScript obj = Instantiate(m_dropdownScript, m_dropdownParent);float y = (-obj.GetComponent<RectTransform>().rect.height - 2 ) * i;Debug.Log("height : " + y);obj.GetComponent<RectTransform>().anchoredPosition = new Vector2(obj.GetComponent<RectTransform>().anchoredPosition.x, obj.GetComponent<RectTransform>().anchoredPosition.y+y);Debug.Log(obj.transform.localPosition);obj.InitDropdown("背景" + i,i, options);obj.DropDownEventCtrl(DropdownEvent);obj.OnClickEventCtrl(OnClickEvent);m_curDropdownScripts.Add(obj);}}/// <summary>/// 点击了控件的事件/// </summary>/// <param name="obj"></param>/// <param name="index"></param>private void OnClickEvent(bool obj,int index,float hight){if (obj){foreach (var item in m_curDropdownScripts){if (item.m_ids> index){float y = item.GetComponent<RectTransform>().anchoredPosition.y - hight;item.GetComponent<RectTransform>().anchoredPosition = new Vector2(item.GetComponent<RectTransform>().anchoredPosition.x, y);}}}else{foreach (var item in m_curDropdownScripts){if (item.m_ids > index){float y = item.GetComponent<RectTransform>().anchoredPosition.y + hight;item.GetComponent<RectTransform>().anchoredPosition = new Vector2(item.GetComponent<RectTransform>().anchoredPosition.x, y);}}}}/// <summary>/// 下拉框事件/// </summary>/// <param name="obj"></param>private void DropdownEvent(int obj){Debug.Log("进入 DropdownEvent");}// Update is called once per framevoid Update () {}
}
该脚本挂载在主控物体上,可以是场景里的任意物体,但不能是预制体
具体思路:点击了DropDown,展开时触发展开事件,其他控件加上其高度,收回时触发事件,其他控件减去其高度,演示效果如下:
那么这个qq的分组效果就实现了,最终所有生成的DropDown其父节点在一个Scroll View上面,如果有多个分组可以以滑动的方式显示!
希望这边帖子能给大家带来帮助!
Unity UGUI_DropDown控件模拟QQ分组的使用心得相关推荐
- net中winform教程 ListView控件如何实现分组?
虽然现在winform开发很少使用微软自带的控件,但其中有一个控件还是不错的,它就是ListView控件.操作系统的文件夹页,就是ListView控件的样子,数据展示包括大图标.小图标.列表.明细等. ...
- 安卓自定义日期控件(仿QQ,IOS7)
还记得上篇:高大上的安卓日期时间选择器,本篇是根据上篇修改而来,先看下qq中日期选择的效果: 鉴于目前还没有相似的开源日期控件,因此本人花费了一些时间修改了下之前的日期控件,效果如图: 虽说相似度不是 ...
- Unity 工具控件 之 Text 文本字间距调整(老版本的Unity编写工具控件/新版本Unity使用TMP)
Unity 工具控件 之 Text 文本字间距调整(老版本的Unity编写工具控件/新版本Unity使用TMP) 目录 Unity 工具控件 之 Text 文本字间距调整(老版本的Unity编写工具控 ...
- 扩展DropDownList控件和ListBox控件(1) - 支持分组功能(optgroup标签)
介绍 扩展DropDownList控件和ListBox控件: 通过DropDownList控件和ListBox控件的.Items.Add(ListItem item)方法,来为其添加optgroup标 ...
- Android ExpandableListView 展开列表控件(手机QQ好友列表)
你是否觉得手机QQ上的好友列表那个控件非常棒? 不是..... 那也没关系, 学多一点知识对自己也有益无害. 那么我们就开始吧. 展开型列表控件, 原名ExpandableListView 是普 ...
- 安卓自定义日期控件(仿QQ,IOS7)续
本篇是在原来的基础上修改了界面效果,使其更加接近ios7,qq等日期选择控件,看图: 源码地址:http://download.csdn.net/detail/baiyuliang2013/87601 ...
- Unity UGUI控件介绍
UGUI UGUI是Unity官方的UI实现方式,自从Unity4.6以后,Unity官方推出了新版UGUI系统.新版UGUI系统相比于OnGUI系统更加人性化,而且是一个开源系统,利于游戏开发人员进 ...
- Excel表单控件选项按钮分组错乱的原因
问题 今天在设计一个表单控件时,发现分开的两组选项按钮控件经常错乱,如下图1: 原因 花了几乎一整天的时间调试研究,终于发现错乱的真正原因,分享给大家,希望能帮到遇到类似问题的朋友. 原因1:分组框 ...
- vc6.0 radio控件多个分组
如何使用多组? 多组和一组是一样的使用,只要搞清楚哪个是哪一组的就行了.再为对话框添加Radio3和Radio4.很简单,先为这些Radio Button排个顺序,就是排列他们的TAB ORDER.在 ...
最新文章
- 网易SRC指责白帽子私自披露已修复漏洞,强势表态违刑必究
- github pages部署静态网页
- IDEA查看某个类的某个方法或该类在哪里被调用 / 引用
- LiveVideoStackCon技术培训 限量买1赠1
- 4.4.6 数组也能无锁:AtomicIntegerArray
- OpenCV 4.0 rc版本发布,扩展计算图Graph API
- 从数学到SQL Server,对集合论的快速介绍
- 龙飞船再次发射成功!马斯克无缘现场,因疑似感染新冠……
- 计算机课flash课件,flash动画制作获奖课件
- 辉迅手机号码归属地查询软件 手机号码归属地 手机查询
- 诚之和:苹果汽车还没造出来,但数百万车将先装上它的“灵魂”
- Websockets 介绍和应用
- UnicodeDecodeError: 'gbk' codec can't decode byte 0xfe in position 575056: illegal multibyte sequenc
- 高程数据下载——DLR_SRTM_说明
- 算法——霍夫曼编码压缩算法
- c语言写定时闹钟程序,定时闹钟C语言程序.doc
- WorldView卫星遥感影像数据/米级分辨率遥感影像
- 空间几何变换 之 齐次坐标
- Windows 7、8、8.1安装.NET 3.5报错问题
- python 绘制 3D 曲面