UGUI系列-Dropdown控件研究(Unity3D)

简介: Dropdown下拉列表,控件还是很强大的,做UI的时候用的比较多,现在就将Dropdown使用中的一些经验总结起来,分享给大家了

一、前言

Dropdown下拉列表,控件还是很强大的,做UI的时候用的比较多,现在就将Dropdown使用中的一些经验总结起来,分享给大家了


二、参考资料

UGUI 中Dropdown控件的使用经验

Unity3D UGUI中的dropdown控件使用总结

Unity(一)关于Unity Dropdown控件的使用心得


三、正文

对于Dropdown控件的研究,我将分成这么几个部分:

  • 1、控件的组成以及属性面板介绍
  • 2、控件的初始化以及内容显示
  • 3、增加节点以及删除节点
  • 4、事件监听方式


1、控件的组成以及属性面板介绍

网络异常,图片无法展示
|

Label是显示初始化的文字 Arrow是显示初始化的下拉箭头 Template是Dropdown的模板样式 Item Background是每一个Item的背景图片 Item Checkmark是每一个Item的下拉框图片 Item Label是每一个Item的文字显示内容 Scrollbar是一个下拉框 其中Item Background和Item Checkmark的图集资源我们可以提前更改。

然后我们看一下Dropdown的属性面板:

网络异常,图片无法展示
|

Caption Text和Caption Image是作为下拉列表首选项的文字和图片显示,也是我们每次选择后的内容,因此可代码调用获取

Item Text作为下拉列表中每个item的文字显示,Item Image可以用来扩展模板增加内容

Value值会随着下拉列表选项的不同而变化,dropdown.value

Options选项栏内:可以动态赋值给Item对象  Dropdown.OptionData


2、控件的初始化以及内容显示


初始化文字内容

using UnityEngine;
using UnityEngine.UI;
public class TestDropdown : MonoBehaviour
{
    public Dropdown Drd_IPList;
    private void Start()
    {
        InitDropdown();
    }
    private void InitDropdown()
    {
        //清空默认节点
        Drd_IPList.options.Clear();
        //初始化
        Dropdown.OptionData op1 = new Dropdown.OptionData();
        op1.text = "220.110.1.10";
        Drd_IPList.options.Add(op1);
        Dropdown.OptionData op2 = new Dropdown.OptionData();
        op2.text = "220.110.1.11";
        Drd_IPList.options.Add(op2);
        Dropdown.OptionData op3 = new Dropdown.OptionData();
        op3.text = "220.110.1.12";
        Drd_IPList.options.Add(op3);
    }
}
复制代码

网络异常,图片无法展示
|
网络异常,图片无法展示
|


时初始化文字和图片

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class TestDropdown : MonoBehaviour
{
    public Dropdown Drd_IPList;
    public List<Sprite> m_Sprite;
    List<string> m_TextContent;
    Dropdown.OptionData m_TempData;
    private void Start()
    {
        AddTextContent();
        InitDropdown();
    }
    private void AddTextContent()
    {
        for (int i = 0; i < 3; i++)
        {
            m_TextContent.Add("220.110.1.1" + i);
        }
    }
    private void InitDropdown()
    {
        //清空默认节点
        Drd_IPList.options.Clear();
        //初始化
        for (int i = 0; i < 3; i++)
        {
            m_TempData = new Dropdown.OptionData();
            m_TempData.text = m_TextContent[i];
            m_TempData.image = m_Sprite[i];
            Drd_IPList.options.Add(m_TempData);
        }
        //初始选项的显示
        Drd_IPList.captionText.text = m_TextContent[0];
    }
}
复制代码

网络异常,图片无法展示
|

网络异常,图片无法展示
|


3、增加节点以及删除节点


添加节点

//添加节点
    public void AddItem()
    {
        m_TempData = new Dropdown.OptionData();
        m_TempData.text = "新添加的节点";
        Drd_IPList.options.Add(m_TempData);
    }
复制代码

网络异常,图片无法展示
|
网络异常,图片无法展示
|
网络异常,图片无法展示
|
网络异常,图片无法展示
|


删除节点

//删除节点
    public void DelectItem()
    {
        //删除第一个节点
        m_TempData = Drd_IPList.options[0];
        Drd_IPList.options.Remove(m_TempData);
    }
复制代码

网络异常,图片无法展示
|
网络异常,图片无法展示
|

删除后:

网络异常,图片无法展示
|


4、事件监听方式


使用Dropdown自带的监听事件

using UnityEngine;
using UnityEngine.UI;
[RequireComponent(typeof(Dropdown))]
public class Drop : MonoBehaviour
{
    private Dropdown drop;
    void Start()
    {
        drop = this.GetComponent<Dropdown>();
        drop.onValueChanged.AddListener(Change);
    }
    private void Change(int index)
    {
        Debug.Log(index);       
        switch (index)
        {
            case 0: break;
            case 1: break;
            default: break;
        }
    }
复制代码


使用ISelectHandler接口进行事件监听

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class Drop : MonoBehaviour,ISelectHandler
{
    public Dropdown drop;
    private int lastIndex;
    public void OnSelect(BaseEventData eventData)
    {
        //避免点击下拉列表item和dropdown重复调用
        if (drop.value == lastIndex) return;
        //处理逻辑
        //
        Debug.Log("OnSelect=" + drop.value);
        lastIndex = drop.value;
    }
复制代码


在Dropdown面板中使用脚本监听

using UnityEngine;
using UnityEngine.UI;
public class TestDropdown : MonoBehaviour
{
    public Dropdown Drd_IPList;
    //事件监听
    public void EventListening()
    {
        switch (Drd_IPList.value)
        {
            case 0:
                Debug.Log(0);
                break;
            case 1:
                Debug.Log(1);
                break;
            case 2:
                Debug.Log(2);
                break;
            default:
                break;
        }
    }
}
复制代码

将脚本挂在Main Camera上面(当然,任何物体都可以),然后将Dropdown拖入卡槽中:

网络异常,图片无法展示
|

将Dropdown下面的On Value Changed增加方法

网络异常,图片无法展示
|

运行起来,可以看到控制台打印的信息

网络异常,图片无法展示
|



相关文章
|
9月前
|
Web App开发 编解码 前端开发
更专业省心的来了,你没必要研究UE4和Unity官方推流了!
需求催生了一种新的“云渲染”方案,将庞大负载的“渲染”放到云端强大算力的服务器去执行,前端仅仅是展示和交互。 本文小编介绍了目前主流的3种方案,如果你感兴趣的话一起看看吧~
更专业省心的来了,你没必要研究UE4和Unity官方推流了!
|
图形学 BI
学习和研究下unity3d的四元数 Quaternion
学习和研究下unity3d的四元数 Quaternion       今天准备学习和研究下unity3d的四元数 Quaternion 四元数在电脑图形学中用于表示物体的旋转,在unity中由x,y,z,w 表示四个值。
|
14小时前
|
图形学
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版3(附带项目源码)
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版3(附带项目源码)
8 2
|
14小时前
|
图形学
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版2(附带项目源码)
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版2(附带项目源码)
8 1
|
14小时前
|
图形学
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱10(附带项目源码)
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱10(附带项目源码)
4 1
|
13小时前
|
图形学
【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》(完结,附带项目源码)(下)
【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》(完结,附带项目源码)(下)
5 0
|
13小时前
|
图形学
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版12(附带项目源码)
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版12(附带项目源码)
7 0
|
13小时前
|
存储 图形学
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版11(附带项目源码)
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版11(附带项目源码)
5 0
|
13小时前
|
图形学
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版10(附带项目源码)
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版10(附带项目源码)
7 0