Unity 的 UGUI 组件Dropdown简析

Dropdown设置属性

Unity 会自动帮我们创建一个下拉菜单的模板、并且添加好 Dropdown 组件.

我们需要做的就是，设置我们需要的属性、以及功能即可

将我们的脚本、需要的选择项、UI选项设置好就可以用了

1：首先看一下控件

自己添加了一个新的Item Image,后面会提到它的用处。

Image用来做赋值对象的，后面会提到

Lable和Arrow是用来显示初始化的文字和勾选项的

2：看一下Dropdown的属性面板

Caption Text和Caption Image是作为下拉列表首选项的文字和图片显示

Item Text和Item Image是作为下拉列表中每个item的文字和图片显示

Value值会随着下拉列表选项的不同而变化，可通过代码利用

Options选项栏内：通过代码可赋值给相应的Item对象  Dropdown.OptionData

 

Demo1:

using UnityEngine;
using UnityEngine.UI;

private Dropdown dropDown;

/// 
/// 测试Dropdown组件例子脚本
/// 
public class TestDropdown : MonoBehaviour
{
    void Start()
    {
        //代码动态绑定的方法，如果通过代码添加监听事件，外部就无需再做添加 
        //查找Dropdown组件
        dropDown = GameObject.Find("Dropdown").GetComponent();
        //监听组件事件
        dropDown.onValueChanged.AddListener(ConsoleResult);
    }


    /// 
    /// 输出结果 —— 添加监听事件时要注意，需要绑定动态方法
    /// 
    public void ConsoleResult(int value)
    {
        //这里用 if else if也可，看自己喜欢
        //分别对应：第一项、第二项....以此类推
        switch (value)
        {
            case 0:
                print("第1页");
                break;
            case 1:
                print("第2页");
                break;
            case 2:
                print("第3页");
                break;
            case 3:
                print("第4页");
                break;
            //如果只设置的了4项，而代码中有第五个，是调用不到的
            //需要对应在 Dropdown组件中的 Options属性 中增加选择项即可
            case 4:
                print("第5页");
                break;
        }
    }
}

 

Demo2:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropDownTest : MonoBehaviour {

    public Dropdown dropDown;

	void Start () {

        //是否可以点击
        dropDown.interactable = true;

        #region 添加下拉选项，，，设置文字，底图
        //添加一个下拉选项
        Dropdown.OptionData data = new Dropdown.OptionData();
        data.text = "方案一";
        //data.image = "指定一个图片做背景不指定则使用默认"；
        dropDown.options.Add(data);

        //另一种添加方式 , 不过用起来并不比第一个方便，
        List listOptions = new List();       
        listOptions.Add(new Dropdown.OptionData("方案二"));
        listOptions.Add(new Dropdown.OptionData("方案三"));
        dropDown.AddOptions(listOptions);

        //设置显示字体大小
        dropDown.captionText.fontSize = 14;
        //dropDown.captionImage = "底图";
        //设置要复制字体大小
        dropDown.itemText.fontSize = 15;
        //dropDown.itemImage = "底图";

        //PS：我一般是使用循环 使用第一种形式添加
        #endregion

        #region 添加完成就可以使用了，那么当我们想要复用怎么办呢？，这时就用到了移除OptionData，下面的每个注释打开都是一个功能
        //直接清理掉所有的下拉选项，
        dropDown.ClearOptions();
        //亲测不是很好用
        //dropDown.options.Clear(); 

        //对象池回收时，有下拉状态的，直接干掉... (在极限点击测试的情况下会出现)
        if (dropDown.transform.childCount == 3)
        {
            Destroy(dropDown.transform.GetChild(2).gameObject);
        }

        //移除指定数据   参数：OptionData
        dropDown.options.Remove(data);
        //移除指定位置   参数:索引
        dropDown.options.RemoveAt(0); 
        #endregion

        #region 添加监听函数
        //当点击后值改变是触发 (切换下拉选项)
        dropDown.onValueChanged.AddListener((int v) => OnValueChange(v));
        //若有多个，可以将自己当做参数传递进去，已做区分。
        //dropDown.onValueChanged_1.AddListener((int v) => OnValueChange(dropDown.gameobject,v));
        #endregion
    }

    /// 
    /// 当点击后值改变是触发 (切换下拉选项)
    /// 
    /// 是点击的选项在OptionData下的索引值
    void OnValueChange(int v)
    {
        //切换选项 时处理其他的逻辑...
        Debug.Log("点击下拉控件的索引是..." + v);
    }	
	
}

 

Demo3:

public class UIDropdownItem : MonoBehaviour {

    Dropdown dropdownItem;
    List tempNames;

    void Awake()
    {
        dropdownItem = GetComponent();
        tempNames = new List();
    }

    void Start()
    {
        AddNames();
        UpdateDropdownView(tempNames);
    }

    /// 
    /// 刷数据
    /// 
    /// 
    private void UpdateDropdownView(List showNames)
    {
        dropdownItem.options.Clear();
        Dropdown.OptionData tempData;
        for (int i = 0; i < showNames.Count; i++)
        {
            tempData = new Dropdown.OptionData();
            tempData.text = showNames[i];
            dropdownItem.options.Add(tempData);
        }
        dropdownItem.captionText.text = showNames[0];
    }
    /// 
    /// 模拟数据
    /// 
    private void AddNames()
    {
        string s1 = "小白";
        string s2 = "小胖";
        string s3 = "桃桃";
        string s4 = "南瓜";
        string s5 = "宝哥哥";

        tempNames.Add(s1);
        tempNames.Add(s2);
        tempNames.Add(s3);
        tempNames.Add(s4);
        tempNames.Add(s5);
    }
}

Demo4:

要实现的功能：1下拉列表里显示image，2每次选择后dropdown里的图片跟着一起改变。

1.看一下控件

自己添加了一个新的Item Image,后面会提到它的用处。

Image用来做赋值对象的，后面会提到

Lable和Arrow是用来显示初始化的文字和勾选项的

2：看一下Dropdown的属性面板

 

 

3. 脚本和需要使用的对象

ShowText自己测试用的每个Item的Text

Sprite自己用来做每个Item的图片显示

想实现如下效果：

other_img是随便的一个img对象用来作为第三者赋值的,看代码

代码模块

说明：参考他人的代码，并做了修改

public string[] showText;
    public Sprite[] sprite;
    Dropdown dropDownItem;
    List temoNames;
    List sprite_list;
    public Image other_img;//任意的img，用作被赋值替换
    void Start()
    {
        dropDownItem = this.GetComponent();
        temoNames = new List();
        sprite_list = new List();
        
        AddNames();
        UpdateDropDownItem(temoNames);
        
    }


    void UpdateDropDownItem(List showNames)
    {
        dropDownItem.options.Clear();
        Dropdown.OptionData temoData;
        for (int i = 0; i