[Unity3D] UGUI Dropdown control study

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
This link: https://blog.csdn.net/q764424567/article/details/100042868

I. Introduction

Dropdown drop-down list, control is still very strong, do UI when used more, Dropdown will now use some of the lessons learned together, for everyone to share the

Second, the reference

UGUI experience in Dropdown control
Unity3D UGUI in the dropdown control uses summarize
Unity (a) use the experience on Unity Dropdown controls

Third, the text

For the study Dropdown control, so I will be divided into several parts:

  • 1, the composition and properties of the control panel presentation
  • 2, initialize and display content control
  • 3, add nodes and delete nodes
  • 4, the event listener mode

1, the composition and properties of the control panel presentation

Here Insert Picture Description
Label is displayed initialization text
Arrow is displayed to initialize the drop-down arrow
Template is Dropdown template style
Item Background every Item background image
Item Checkmark every Item drop-down box picture
Item Label every Item text display content
Scrollbar is a drop-down box
in which Atlas resource Item Background and Item Checkmark we can change in advance.

Then we look at the Dropdown property panel:
Here Insert Picture Description
Caption Text and Caption Image as a drop-down list of preferences of text and graphics display, but also our content after each selection, so you can call to get the code

Item Text drop-down list as the text for each item displayed, Item Image can be used to extend the template add content

Value value will vary with the drop-down list of options, dropdown.value

Options Options column: Item objects can be dynamically assigned to Dropdown.OptionData

2, initialize and display content control

Initialization text

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);
    }
}

Here Insert Picture Description
Here Insert Picture Description
Meanwhile initialize text and image

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];
    }
}

Here Insert Picture Description
Here Insert Picture Description

3, add nodes and delete nodes

Add Nodes

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

Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
Delete Node

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

Here Insert Picture Description
Here Insert Picture Description
Delete After:
Here Insert Picture Description

4, the event listener mode

Dropdown using built-in monitor events

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 interface using event listeners

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;
    }

Use scripts in Dropdown panel monitor

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;
        }
    }
}

The script hanging above the Main Camera (of course, any object can be), and then dragged into the slot Dropdown:
Here Insert Picture Description
The following On Value Changed Dropdown method for increasing
Here Insert Picture Description
running, you can see the information printed in the console
Here Insert Picture Description

Guess you like

Origin blog.csdn.net/q764424567/article/details/100042868