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;//id
    private 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 initialization
    void 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 frame
	void 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 initialization
    void 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 frame
    void Update () {
		
	}
}

該腳本掛載在主控物體上，可以是場景里的任意物體，但不能是預制體
具體思路：點擊了DropDown，展開時觸發展開事件，其他控制元件加上其高度，識訓時觸發事件，其他控制元件減去其高度，演示效果如下：

那么這個qq的分組效果就實作了，最終所有生成的DropDown其父節點在一個Scroll View上面，如果有多個分組可以以滑動的方式顯示！
希望這邊帖子能給大家帶來幫助！