Unity UGUI 基础 之 DropDown(下拉列表框) 的简单使用(简单改变样式/动态下来列表的数据添加删除/列表事件监听等) |
您所在的位置:网站首页 › 怎么创造下拉列表 › Unity UGUI 基础 之 DropDown(下拉列表框) 的简单使用(简单改变样式/动态下来列表的数据添加删除/列表事件监听等) |
Unity UGUI 基础 之 DropDown(下拉列表框) 的简单使用(简单改变样式/动态下来列表的数据添加删除/列表事件监听等)
目录 Unity UGUI 基础 之 DropDown(下拉列表框) 的简单使用(简单改变样式/动态下来列表的数据添加删除/列表事件监听等) 一、简单介绍 二、DropDown 在 Unity 的样子中大概如下图(Item 背景样式简单修改) 三、DropDown 组件,及组件上的属性说明 四、DropDown 组件下某些子组件简单说明 五、注意事项 六、简单案例 七、关键代码 八、DropDown 源码 一、简单介绍 UGUI,是Unity自带的 GUI 系统,有别于 NGUI;使用 UGUI 也能制作出比较酷炫的效果 。 本节介绍,使用 UGUI DropDown 下拉列表的一些简单的使用说明,和使用方法,方法不唯一,欢迎指正。 DropDown:控件显示当前选择的选项。一旦单击,它将打开选项列表,以便可以选择一个新选项。选择新选项后,关闭的列表再次关闭,控件将显示新选定的选项。如果用户单击控件本身或画布中的任何其他位置,列表也将关闭。 二、DropDown 在 Unity 的样子中大概如下图(Item 背景样式简单修改) 三、DropDown 组件,及组件上的属性说明 Interactable 可交互 是否可点击 Transition 过渡 None:无 Color Tint:颜色色彩 Target Graphic:目标图形 Normal Color:正常颜色 Highlighted Color:高亮颜色 Pressed Color:按下颜色 Selected Color:选择颜色 Disabled Color:已禁用颜色 Color Multiplier:色彩乘数 Fade Duration:淡化持续时间 Sprite Swap:精灵交换 Target Graphic:目标图形 Highlighted Sprite:高亮精灵 Pressed Sprite:按下精灵 Selected Sprite:选择精灵 Disabled Sprite:已禁用精灵 Animation:动画 Normal Trigger:正常触发 Highlighted Trigger:高亮触发 Pressed Trigger:按下触发 Selected Trigger:选择触发 Disabled Trigger:引禁用触发 Auto Generate Animation 自动生成动画 Navigation 导航 None:无 Horizontal:水平 Vertical:垂直 Automatic:自动 Explicit:显式 Select On Up:向上选择 Select On Down:向下选择 Select On Left:向左选择 Select On Right:向右选择 Visualize:可视化,把按键能够导航到的路径可视化,高亮的黄色箭头为当前按钮可导航到的目标 Template 模板 下拉使用的模板样式 Caption Text 标题文本 当前选择的显示文本 Caption Image 标题图像 当前选择的显示图片 Item Text 项文本 下拉框选项模板里的文字,不填会导致选项列表中的每个选项不会修改模板里的文字 Item Image 项图像 下拉框选项模板里的图片,不填会导致选项列表中的每个选项不会修改模板里的图片 Value 值 当前选择的值(0开始) Options 选项 可选择项 On Value Changed(Int32) 值改变时(32位整数) 值调整时触发的事件 四、DropDown 组件下某些子组件简单说明 Dropdown:图片,带Dropdown组件,作为选中框的底图 Label:文本,作为标题文本,当前显示的文本 Arrow:图片,作为下拉按钮 Template:生成下拉列表的模板,可以在这里修改下拉列表的显示样式 Item Background:图片,这里可修改下拉列表Item的背景设置 Item Checkmark:图片,这里可修改下拉列表Item的前面的 勾,根据需要修改 Item Label:文本,这里可修改下拉列表Item的的文本,根据需要修改 Scrollbar:滑动条 五、注意事项 1、DropDown 通过代码设置选择的下拉选项(即是属性 vuale,而不是鼠标点击设置)的时候,也会触发 OnValueChanged 事件,跟UGUI的 Toggle 等不一样,这里需要自己处理,看情况需不需要(后面介绍处理方法,见后面代码) 六、简单案例 使用代码,实现DropDown 的下拉列表的清空,添加等简单功能 1、效果预览
2、场景布置如此
3、其中 Item Background 背景图片修改默认图片
4、在工程中,新建脚本,编写代码,控制 DropDown 的某些功能显示
5、把脚本挂载到场景中,并对应赋值
6、运行场景,效果如上 七、关键代码 1、DropDownTest using System.Collections.Generic; using UnityEngine; using UnityEngine.Events; using UnityEngine.UI; public class DropDownTest : MonoBehaviour { public Dropdown dropDown; // 是否是代码设置下拉 Item 值 private bool isCodeSetItemValue = false; void Start() { // 设置监听 SetDropDownAddListener(OnValueChange); SetDropDownItemValue(1); } /// /// 当点击后值改变是触发 (切换下拉选项) /// /// 是点击的选项在OptionData下的索引值 void OnValueChange(int v) { //切换选项 时处理其他的逻辑... Debug.Log("点击下拉控件的索引是..." + v); } private void Update() { if (Input.GetKeyDown(KeyCode.Space)) { List listOptions = new List(); listOptions.Add(new Dropdown.OptionData("Option 0")); listOptions.Add(new Dropdown.OptionData("Option 1")); AddDropDownOptionsData(listOptions); } if (Input.GetKeyDown(KeyCode.A)) { AddDropDownOptionsData("Option " + dropDown.options.Count); } if (Input.GetKeyDown(KeyCode.R)) { RemoveAtDropDownOptionsData(dropDown.options.Count - 1); } if (Input.GetKeyDown(KeyCode.C)) { ClearDropDownOptionsData(); } } /// /// 设置选择的下拉Item /// /// void SetDropDownItemValue(int ItemIndex) { // 代码设置的值 isCodeSetItemValue = true; if (dropDown.options == null) { Debug.Log(GetType()+ "/SetDropDownItemValue()/下拉列表为空,请检查"); return; } if (ItemIndex >= dropDown.options.Count) { ItemIndex = dropDown.options.Count - 1; } if (ItemIndex < 0 ) { ItemIndex = 0; } dropDown.value = ItemIndex; } /// /// 是否可以点击 /// void SetDropDownInteractable() { //是否可以点击 dropDown.interactable = true; } /// /// 设置显示字体大小 /// /// void SetDropDownCaptionTextFontSize(int fontSize) { //设置显示字体大小 dropDown.captionText.fontSize = fontSize; } /// /// 设置下拉Item显示字体大小 /// /// void SetDropDownItemTextFontSize(int fontSize) { //设置下拉Item显示字体大小 dropDown.itemText.fontSize = fontSize; } /// /// 添加一个列表下拉数据 /// /// void AddDropDownOptionsData(List listOptions) { dropDown.AddOptions(listOptions); } /// /// 添加一个下拉数据 /// /// void AddDropDownOptionsData(string itemText) { //添加一个下拉选项 Dropdown.OptionData data = new Dropdown.OptionData(); data.text = itemText; //data.image = "指定一个图片做背景不指定则使用默认"; dropDown.options.Add(data); } /// /// 移除指定位置 参数:索引 /// /// void RemoveAtDropDownOptionsData(int index) { // 安全校验 if (index >= dropDown.options.Count || index < 0) { return; } //移除指定位置 参数:索引 dropDown.options.RemoveAt(index); } /// /// 直接清理掉所有的下拉选项 /// void ClearDropDownOptionsData() { //直接清理掉所有的下拉选项, dropDown.ClearOptions(); } /// /// 当点击后值改变是触发 (切换下拉选项) /// void SetDropDownAddListener(UnityAction OnValueChangeListener) { //当点击后值改变是触发 (切换下拉选项) dropDown.onValueChanged.AddListener((value)=> { // 手动代码设置的值不触发事件(根据需要可以保留或者去掉) if (isCodeSetItemValue == true) { isCodeSetItemValue = false; return; } OnValueChangeListener(value); }); } }八、DropDown 源码 using System; using System.Collections; using System.Collections.Generic; using UnityEngine.Events; using UnityEngine.EventSystems; using UnityEngine.UI.CoroutineTween; namespace UnityEngine.UI { [AddComponentMenu("UI/Dropdown", 35)] [RequireComponent(typeof(RectTransform))] /// /// A standard dropdown that presents a list of options when clicked, of which one can be chosen. /// /// /// The dropdown component is a Selectable. When an option is chosen, the label and/or image of the control changes to show the chosen option. /// /// When a dropdown event occurs a callback is sent to any registered listeners of onValueChanged. /// public class Dropdown : Selectable, IPointerClickHandler, ISubmitHandler, ICancelHandler { protected internal class DropdownItem : MonoBehaviour, IPointerEnterHandler, ICancelHandler { [SerializeField] private Text m_Text; [SerializeField] private Image m_Image; [SerializeField] private RectTransform m_RectTransform; [SerializeField] private Toggle m_Toggle; public Text text { get { return m_Text; } set { m_Text = value; } } public Image image { get { return m_Image; } set { m_Image = value; } } public RectTransform rectTransform { get { return m_RectTransform; } set { m_RectTransform = value; } } public Toggle toggle { get { return m_Toggle; } set { m_Toggle = value; } } public virtual void OnPointerEnter(PointerEventData eventData) { EventSystem.current.SetSelectedGameObject(gameObject); } public virtual void OnCancel(BaseEventData eventData) { Dropdown dropdown = GetComponentInParent(); if (dropdown) dropdown.Hide(); } } [Serializable] /// /// Class to store the text and/or image of a single option in the dropdown list. /// public class OptionData { [SerializeField] private string m_Text; [SerializeField] private Sprite m_Image; /// /// The text associated with the option. /// public string text { get { return m_Text; } set { m_Text = value; } } /// /// The image associated with the option. /// public Sprite image { get { return m_Image; } set { m_Image = value; } } public OptionData() { } public OptionData(string text) { this.text = text; } public OptionData(Sprite image) { this.image = image; } /// /// Create an object representing a single option for the dropdown list. /// /// Optional text for the option. /// Optional image for the option. public OptionData(string text, Sprite image) { this.text = text; this.image = image; } } [Serializable] /// /// Class used internally to store the list of options for the dropdown list. /// /// /// The usage of this class is not exposed in the runtime API. It's only relevant for the PropertyDrawer drawing the list of options. /// public class OptionDataList { [SerializeField] private List m_Options; /// /// The list of options for the dropdown list. /// public List options { get { return m_Options; } set { m_Options = value; } } public OptionDataList() { options = new List(); } } [Serializable] /// /// UnityEvent callback for when a dropdown current option is changed. /// public class DropdownEvent : UnityEvent {} // Template used to create the dropdown. [SerializeField] private RectTransform m_Template; /// /// The Rect Transform of the template for the dropdown list. /// public RectTransform template { get { return m_Template; } set { m_Template = value; RefreshShownValue(); } } // Text to be used as a caption for the current value. It's not required, but it's kept here for convenience. [SerializeField] private Text m_CaptionText; /// /// The Text component to hold the text of the currently selected option. /// public Text captionText { get { return m_CaptionText; } set { m_CaptionText = value; RefreshShownValue(); } } [SerializeField] private Image m_CaptionImage; /// /// The Image component to hold the image of the currently selected option. /// public Image captionImage { get { return m_CaptionImage; } set { m_CaptionImage = value; RefreshShownValue(); } } [Space] [SerializeField] private Text m_ItemText; /// /// The Text component to hold the text of the item. /// public Text itemText { get { return m_ItemText; } set { m_ItemText = value; RefreshShownValue(); } } [SerializeField] private Image m_ItemImage; /// /// The Image component to hold the image of the item /// public Image itemImage { get { return m_ItemImage; } set { m_ItemImage = value; RefreshShownValue(); } } [Space] [SerializeField] private int m_Value; [Space] // Items that will be visible when the dropdown is shown. // We box this into its own class so we can use a Property Drawer for it. [SerializeField] private OptionDataList m_Options = new OptionDataList(); /// /// The list of possible options. A text string and an image can be specified for each option. /// /// /// This is the list of options within the Dropdown. Each option contains Text and/or image data that you can specify using UI.Dropdown.OptionData before adding to the Dropdown list. /// This also unlocks the ability to edit the Dropdown, including the insertion, removal, and finding of options, as well as other useful tools /// /// /// /// /// //Create a new Dropdown GameObject by going to the Hierarchy and clicking __Create__>__UI__>__Dropdown__. Attach this script to the Dropdown GameObject. /// /// using UnityEngine; /// using UnityEngine.UI; /// using System.Collections.Generic; /// /// public class Example : MonoBehaviour /// { /// //Use these for adding options to the Dropdown List /// Dropdown.OptionData m_NewData, m_NewData2; /// //The list of messages for the Dropdown /// List m_Messages = new List(); /// /// /// //This is the Dropdown /// Dropdown m_Dropdown; /// string m_MyString; /// int m_Index; /// /// void Start() /// { /// //Fetch the Dropdown GameObject the script is attached to /// m_Dropdown = GetComponent(); /// //Clear the old options of the Dropdown menu /// m_Dropdown.ClearOptions(); /// /// //Create a new option for the Dropdown menu which reads "Option 1" and add to messages List /// m_NewData = new Dropdown.OptionData(); /// m_NewData.text = "Option 1"; /// m_Messages.Add(m_NewData); /// /// //Create a new option for the Dropdown menu which reads "Option 2" and add to messages List /// m_NewData2 = new Dropdown.OptionData(); /// m_NewData2.text = "Option 2"; /// m_Messages.Add(m_NewData2); /// /// //Take each entry in the message List /// foreach (Dropdown.OptionData message in m_Messages) /// { /// //Add each entry to the Dropdown /// m_Dropdown.options.Add(message); /// //Make the index equal to the total number of entries /// m_Index = m_Messages.Count - 1; /// } /// } /// /// //This OnGUI function is used here for a quick demonstration. See the [[wiki:UISystem|UI Section]] for more information about setting up your own UI. /// void OnGUI() /// { /// //TextField for user to type new entry to add to Dropdown /// m_MyString = GUI.TextField(new Rect(0, 40, 100, 40), m_MyString); /// /// //Press the "Add" Button to add a new entry to the Dropdown /// if (GUI.Button(new Rect(0, 0, 100, 40), "Add")) /// { /// //Make the index the last number of entries /// m_Index = m_Messages.Count; /// //Create a temporary option /// Dropdown.OptionData temp = new Dropdown.OptionData(); /// //Make the option the data from the TextField /// temp.text = m_MyString; /// /// //Update the messages list with the TextField data /// m_Messages.Add(temp); /// /// //Add the Textfield data to the Dropdown /// m_Dropdown.options.Insert(m_Index, temp); /// } /// /// //Press the "Remove" button to delete the selected option /// if (GUI.Button(new Rect(110, 0, 100, 40), "Remove")) /// { /// //Remove the current selected item from the Dropdown from the messages List /// m_Messages.RemoveAt(m_Dropdown.value); /// //Remove the current selection from the Dropdown /// m_Dropdown.options.RemoveAt(m_Dropdown.value); /// } /// } /// } /// /// public List options { get { return m_Options.options; } set { m_Options.options = value; RefreshShownValue(); } } [Space] // Notification triggered when the dropdown changes. [SerializeField] private DropdownEvent m_OnValueChanged = new DropdownEvent(); /// /// A UnityEvent that is invoked when when a user has clicked one of the options in the dropdown list. /// /// /// Use this to detect when a user selects one or more options in the Dropdown. Add a listener to perform an action when this UnityEvent detects a selection by the user. See https://unity3d.com/learn/tutorials/topics/scripting/delegates for more information on delegates. /// /// /// /// //Create a new Dropdown GameObject by going to the Hierarchy and clicking Create>UI>Dropdown. Attach this script to the Dropdown GameObject. /// //Set your own Text in the Inspector window /// /// using UnityEngine; /// using UnityEngine.UI; /// /// public class Example : MonoBehaviour /// { /// Dropdown m_Dropdown; /// public Text m_Text; /// /// void Start() /// { /// //Fetch the Dropdown GameObject /// m_Dropdown = GetComponent(); /// //Add listener for when the value of the Dropdown changes, to take action /// m_Dropdown.onValueChanged.AddListener(delegate { /// DropdownValueChanged(m_Dropdown); /// }); /// /// //Initialise the Text to say the first value of the Dropdown /// m_Text.text = "First Value : " + m_Dropdown.value; /// } /// /// //Ouput the new value of the Dropdown into Text /// void DropdownValueChanged(Dropdown change) /// { /// m_Text.text = "New Value : " + change.value; /// } /// } /// /// public DropdownEvent onValueChanged { get { return m_OnValueChanged; } set { m_OnValueChanged = value; } } [SerializeField] private float m_AlphaFadeSpeed = 0.15f; /// /// The time interval at which a drop down will appear and disappear /// public float alphaFadeSpeed { get { return m_AlphaFadeSpeed; } set { m_AlphaFadeSpeed = value; } } private GameObject m_Dropdown; private GameObject m_Blocker; private List m_Items = new List(); private TweenRunner m_AlphaTweenRunner; private bool validTemplate = false; private static OptionData s_NoOptionData = new OptionData(); /// /// The Value is the index number of the current selection in the Dropdown. 0 is the first option in the Dropdown, 1 is the second, and so on. /// /// /// /// //Create a new Dropdown GameObject by going to the Hierarchy and clicking __Create__>__UI__>__Dropdown__. Attach this script to the Dropdown GameObject. /// //Set your own Text in the Inspector window /// /// using UnityEngine; /// using UnityEngine.UI; /// /// public class Example : MonoBehaviour /// { /// //Attach this script to a Dropdown GameObject /// Dropdown m_Dropdown; /// //This is the string that stores the current selection m_Text of the Dropdown /// string m_Message; /// //This Text outputs the current selection to the screen /// public Text m_Text; /// //This is the index value of the Dropdown /// int m_DropdownValue; /// /// void Start() /// { /// //Fetch the DropDown component from the GameObject /// m_Dropdown = GetComponent(); /// //Output the first Dropdown index value /// Debug.Log("Starting Dropdown Value : " + m_Dropdown.value); /// } /// /// void Update() /// { /// //Keep the current index of the Dropdown in a variable /// m_DropdownValue = m_Dropdown.value; /// //Change the message to say the name of the current Dropdown selection using the value /// m_Message = m_Dropdown.options[m_DropdownValue].text; /// //Change the onscreen Text to reflect the current Dropdown selection /// m_Text.text = m_Message; /// } /// } /// /// public int value { get { return m_Value; } set { Set(value); } } /// /// Set index number of the current selection in the Dropdown without invoking onValueChanged callback. /// /// The new index for the current selection. public void SetValueWithoutNotify(int input) { Set(input, false); } void Set(int value, bool sendCallback = true) { if (Application.isPlaying && (value == m_Value || options.Count == 0)) return; m_Value = Mathf.Clamp(value, 0, options.Count - 1); RefreshShownValue(); if (sendCallback) { // Notify all listeners UISystemProfilerApi.AddMarker("Dropdown.value", this); m_OnValueChanged.Invoke(m_Value); } } protected Dropdown() {} protected override void Awake() { #if UNITY_EDITOR if (!Application.isPlaying) return; #endif m_AlphaTweenRunner = new TweenRunner(); m_AlphaTweenRunner.Init(this); if (m_CaptionImage) m_CaptionImage.enabled = (m_CaptionImage.sprite != null); if (m_Template) m_Template.gameObject.SetActive(false); } protected override void Start() { base.Start(); RefreshShownValue(); } #if UNITY_EDITOR protected override void OnValidate() { base.OnValidate(); if (!IsActive()) return; RefreshShownValue(); } #endif protected override void OnDisable() { //Destroy dropdown and blocker in case user deactivates the dropdown when they click an option (case 935649) ImmediateDestroyDropdownList(); if (m_Blocker != null) DestroyBlocker(m_Blocker); m_Blocker = null; base.OnDisable(); } /// /// Refreshes the text and image (if available) of the currently selected option. /// /// /// If you have modified the list of options, you should call this method afterwards to ensure that the visual state of the dropdown corresponds to the updated options. /// public void RefreshShownValue() { OptionData data = s_NoOptionData; if (options.Count > 0) data = options[Mathf.Clamp(m_Value, 0, options.Count - 1)]; if (m_CaptionText) { if (data != null && data.text != null) m_CaptionText.text = data.text; else m_CaptionText.text = ""; } if (m_CaptionImage) { if (data != null) m_CaptionImage.sprite = data.image; else m_CaptionImage.sprite = null; m_CaptionImage.enabled = (m_CaptionImage.sprite != null); } } /// /// Add multiple options to the options of the Dropdown based on a list of OptionData objects. /// /// The list of OptionData to add. /// /// /// See AddOptions(List options) for code example of usages. /// public void AddOptions(List options) { this.options.AddRange(options); RefreshShownValue(); } /// /// Add multiple text-only options to the options of the Dropdown based on a list of strings. /// /// /// Add a List of string messages to the Dropdown. The Dropdown shows each member of the list as a separate option. /// /// The list of text strings to add. /// /// /// //Create a new Dropdown GameObject by going to the Hierarchy and clicking Create>UI>Dropdown. Attach this script to the Dropdown GameObject. /// /// using System.Collections.Generic; /// using UnityEngine; /// using UnityEngine.UI; /// /// public class Example : MonoBehaviour /// { /// //Create a List of new Dropdown options /// List m_DropOptions = new List { "Option 1", "Option 2"}; /// //This is the Dropdown /// Dropdown m_Dropdown; /// /// void Start() /// { /// //Fetch the Dropdown GameObject the script is attached to /// m_Dropdown = GetComponent(); /// //Clear the old options of the Dropdown menu /// m_Dropdown.ClearOptions(); /// //Add the options created in the List above /// m_Dropdown.AddOptions(m_DropOptions); /// } /// } /// /// public void AddOptions(List options) { for (int i = 0; i < options.Count; i++) this.options.Add(new OptionData(options[i])); RefreshShownValue(); } /// /// Add multiple image-only options to the options of the Dropdown based on a list of Sprites. /// /// The list of Sprites to add. /// /// See AddOptions(List options) for code example of usages. /// public void AddOptions(List options) { for (int i = 0; i < options.Count; i++) this.options.Add(new OptionData(options[i])); RefreshShownValue(); } /// /// Clear the list of options in the Dropdown. /// public void ClearOptions() { options.Clear(); m_Value = 0; RefreshShownValue(); } private void SetupTemplate() { validTemplate = false; if (!m_Template) { Debug.LogError("The dropdown template is not assigned. The template needs to be assigned and must have a child GameObject with a Toggle component serving as the item.", this); return; } GameObject templateGo = m_Template.gameObject; templateGo.SetActive(true); Toggle itemToggle = m_Template.GetComponentInChildren(); validTemplate = true; if (!itemToggle || itemToggle.transform == template) { validTemplate = false; Debug.LogError("The dropdown template is not valid. The template must have a child GameObject with a Toggle component serving as the item.", template); } else if (!(itemToggle.transform.parent is RectTransform)) { validTemplate = false; Debug.LogError("The dropdown template is not valid. The child GameObject with a Toggle component (the item) must have a RectTransform on its parent.", template); } else if (itemText != null && !itemText.transform.IsChildOf(itemToggle.transform)) { validTemplate = false; Debug.LogError("The dropdown template is not valid. The Item Text must be on the item GameObject or children of it.", template); } else if (itemImage != null && !itemImage.transform.IsChildOf(itemToggle.transform)) { validTemplate = false; Debug.LogError("The dropdown template is not valid. The Item Image must be on the item GameObject or children of it.", template); } if (!validTemplate) { templateGo.SetActive(false); return; } DropdownItem item = itemToggle.gameObject.AddComponent(); item.text = m_ItemText; item.image = m_ItemImage; item.toggle = itemToggle; item.rectTransform = (RectTransform)itemToggle.transform; // Find the Canvas that this dropdown is a part of Canvas parentCanvas = null; Transform parentTransform = m_Template.parent; while (parentTransform != null) { parentCanvas = parentTransform.GetComponent(); if (parentCanvas != null) break; parentTransform = parentTransform.parent; } Canvas popupCanvas = GetOrAddComponent(templateGo); popupCanvas.overrideSorting = true; popupCanvas.sortingOrder = 30000; // If we have a parent canvas, apply the same raycasters as the parent for consistency. if (parentCanvas != null) { Component[] components = parentCanvas.GetComponents(); for (int i = 0; i < components.Length; i++) { Type raycasterType = components[i].GetType(); if (templateGo.GetComponent(raycasterType) == null) { templateGo.AddComponent(raycasterType); } } } else { GetOrAddComponent(templateGo); } GetOrAddComponent(templateGo); templateGo.SetActive(false); validTemplate = true; } private static T GetOrAddComponent(GameObject go) where T : Component { T comp = go.GetComponent(); if (!comp) comp = go.AddComponent(); return comp; } /// /// Handling for when the dropdown is initially 'clicked'. Typically shows the dropdown /// /// The asocciated event data. public virtual void OnPointerClick(PointerEventData eventData) { Show(); } /// /// Handling for when the dropdown is selected and a submit event is processed. Typically shows the dropdown /// /// The asocciated event data. public virtual void OnSubmit(BaseEventData eventData) { Show(); } /// /// This will hide the dropdown list. /// /// /// Called by a BaseInputModule when a Cancel event occurs. /// /// The asocciated event data. public virtual void OnCancel(BaseEventData eventData) { Hide(); } /// /// Show the dropdown. /// /// Plan for dropdown scrolling to ensure dropdown is contained within screen. /// /// We assume the Canvas is the screen that the dropdown must be kept inside. /// This is always valid for screen space canvas modes. /// For world space canvases we don't know how it's used, but it could be e.g. for an in-game monitor. /// We consider it a fair constraint that the canvas must be big enough to contain dropdowns. /// public void Show() { if (!IsActive() || !IsInteractable() || m_Dropdown != null) return; // Get root Canvas. var list = ListPool.Get(); gameObject.GetComponentsInParent(false, list); if (list.Count == 0) return; // case 1064466 rootCanvas should be last element returned by GetComponentsInParent() Canvas rootCanvas = list[list.Count - 1]; for (int i = 0; i < list.Count; i++) { if (list[i].isRootCanvas) { rootCanvas = list[i]; break; } } ListPool.Release(list); if (!validTemplate) { SetupTemplate(); if (!validTemplate) return; } m_Template.gameObject.SetActive(true); // popupCanvas used to assume the root canvas had the default sorting Layer, next line fixes (case 958281 - [UI] Dropdown list does not copy the parent canvas layer when the panel is opened) m_Template.GetComponent().sortingLayerID = rootCanvas.sortingLayerID; // Instantiate the drop-down template m_Dropdown = CreateDropdownList(m_Template.gameObject); m_Dropdown.name = "Dropdown List"; m_Dropdown.SetActive(true); // Make drop-down RectTransform have same values as original. RectTransform dropdownRectTransform = m_Dropdown.transform as RectTransform; dropdownRectTransform.SetParent(m_Template.transform.parent, false); // Instantiate the drop-down list items // Find the dropdown item and disable it. DropdownItem itemTemplate = m_Dropdown.GetComponentInChildren(); GameObject content = itemTemplate.rectTransform.parent.gameObject; RectTransform contentRectTransform = content.transform as RectTransform; itemTemplate.rectTransform.gameObject.SetActive(true); // Get the rects of the dropdown and item Rect dropdownContentRect = contentRectTransform.rect; Rect itemTemplateRect = itemTemplate.rectTransform.rect; // Calculate the visual offset between the item's edges and the background's edges Vector2 offsetMin = itemTemplateRect.min - dropdownContentRect.min + (Vector2)itemTemplate.rectTransform.localPosition; Vector2 offsetMax = itemTemplateRect.max - dropdownContentRect.max + (Vector2)itemTemplate.rectTransform.localPosition; Vector2 itemSize = itemTemplateRect.size; m_Items.Clear(); Toggle prev = null; for (int i = 0; i < options.Count; ++i) { OptionData data = options[i]; DropdownItem item = AddItem(data, value == i, itemTemplate, m_Items); if (item == null) continue; // Automatically set up a toggle state change listener item.toggle.isOn = value == i; item.toggle.onValueChanged.AddListener(x => OnSelectItem(item.toggle)); // Select current option if (item.toggle.isOn) item.toggle.Select(); // Automatically set up explicit navigation if (prev != null) { Navigation prevNav = prev.navigation; Navigation toggleNav = item.toggle.navigation; prevNav.mode = Navigation.Mode.Explicit; toggleNav.mode = Navigation.Mode.Explicit; prevNav.selectOnDown = item.toggle; prevNav.selectOnRight = item.toggle; toggleNav.selectOnLeft = prev; toggleNav.selectOnUp = prev; prev.navigation = prevNav; item.toggle.navigation = toggleNav; } prev = item.toggle; } // Reposition all items now that all of them have been added Vector2 sizeDelta = contentRectTransform.sizeDelta; sizeDelta.y = itemSize.y * m_Items.Count + offsetMin.y - offsetMax.y; contentRectTransform.sizeDelta = sizeDelta; float extraSpace = dropdownRectTransform.rect.height - contentRectTransform.rect.height; if (extraSpace > 0) dropdownRectTransform.sizeDelta = new Vector2(dropdownRectTransform.sizeDelta.x, dropdownRectTransform.sizeDelta.y - extraSpace); // Invert anchoring and position if dropdown is partially or fully outside of canvas rect. // Typically this will have the effect of placing the dropdown above the button instead of below, // but it works as inversion regardless of initial setup. Vector3[] corners = new Vector3[4]; dropdownRectTransform.GetWorldCorners(corners); RectTransform rootCanvasRectTransform = rootCanvas.transform as RectTransform; Rect rootCanvasRect = rootCanvasRectTransform.rect; for (int axis = 0; axis < 2; axis++) { bool outside = false; for (int i = 0; i < 4; i++) { Vector3 corner = rootCanvasRectTransform.InverseTransformPoint(corners[i]); if ((corner[axis] < rootCanvasRect.min[axis] && !Mathf.Approximately(corner[axis], rootCanvasRect.min[axis])) || (corner[axis] > rootCanvasRect.max[axis] && !Mathf.Approximately(corner[axis], rootCanvasRect.max[axis]))) { outside = true; break; } } if (outside) RectTransformUtility.FlipLayoutOnAxis(dropdownRectTransform, axis, false, false); } for (int i = 0; i < m_Items.Count; i++) { RectTransform itemRect = m_Items[i].rectTransform; itemRect.anchorMin = new Vector2(itemRect.anchorMin.x, 0); itemRect.anchorMax = new Vector2(itemRect.anchorMax.x, 0); itemRect.anchoredPosition = new Vector2(itemRect.anchoredPosition.x, offsetMin.y + itemSize.y * (m_Items.Count - 1 - i) + itemSize.y * itemRect.pivot.y); itemRect.sizeDelta = new Vector2(itemRect.sizeDelta.x, itemSize.y); } // Fade in the popup AlphaFadeList(m_AlphaFadeSpeed, 0f, 1f); // Make drop-down template and item template inactive m_Template.gameObject.SetActive(false); itemTemplate.gameObject.SetActive(false); m_Blocker = CreateBlocker(rootCanvas); } /// /// Create a blocker that blocks clicks to other controls while the dropdown list is open. /// /// /// Override this method to implement a different way to obtain a blocker GameObject. /// /// The root canvas the dropdown is under. /// The created blocker object protected virtual GameObject CreateBlocker(Canvas rootCanvas) { // Create blocker GameObject. GameObject blocker = new GameObject("Blocker"); // Setup blocker RectTransform to cover entire root canvas area. RectTransform blockerRect = blocker.AddComponent(); blockerRect.SetParent(rootCanvas.transform, false); blockerRect.anchorMin = Vector3.zero; blockerRect.anchorMax = Vector3.one; blockerRect.sizeDelta = Vector2.zero; // Make blocker be in separate canvas in same layer as dropdown and in layer just below it. Canvas blockerCanvas = blocker.AddComponent(); blockerCanvas.overrideSorting = true; Canvas dropdownCanvas = m_Dropdown.GetComponent(); blockerCanvas.sortingLayerID = dropdownCanvas.sortingLayerID; blockerCanvas.sortingOrder = dropdownCanvas.sortingOrder - 1; // Find the Canvas that this dropdown is a part of Canvas parentCanvas = null; Transform parentTransform = m_Template.parent; while (parentTransform != null) { parentCanvas = parentTransform.GetComponent(); if (parentCanvas != null) break; parentTransform = parentTransform.parent; } // If we have a parent canvas, apply the same raycasters as the parent for consistency. if (parentCanvas != null) { Component[] components = parentCanvas.GetComponents(); for (int i = 0; i < components.Length; i++) { Type raycasterType = components[i].GetType(); if (blocker.GetComponent(raycasterType) == null) { blocker.AddComponent(raycasterType); } } } else { // Add raycaster since it's needed to block. GetOrAddComponent(blocker); } // Add image since it's needed to block, but make it clear. Image blockerImage = blocker.AddComponent(); blockerImage.color = Color.clear; // Add button since it's needed to block, and to close the dropdown when blocking area is clicked. Button blockerButton = blocker.AddComponent(); blockerButton.onClick.AddListener(Hide); return blocker; } /// /// Convenience method to explicitly destroy the previously generated blocker object /// /// /// Override this method to implement a different way to dispose of a blocker GameObject that blocks clicks to other controls while the dropdown list is open. /// /// The blocker object to destroy. protected virtual void DestroyBlocker(GameObject blocker) { Destroy(blocker); } /// /// Create the dropdown list to be shown when the dropdown is clicked. The dropdown list should correspond to the provided template GameObject, equivalent to instantiating a copy of it. /// /// /// Override this method to implement a different way to obtain a dropdown list GameObject. /// /// The template to create the dropdown list from. /// The created drop down list gameobject. protected virtual GameObject CreateDropdownList(GameObject template) { return (GameObject)Instantiate(template); } /// /// Convenience method to explicitly destroy the previously generated dropdown list /// /// /// Override this method to implement a different way to dispose of a dropdown list GameObject. /// /// The dropdown list GameObject to destroy protected virtual void DestroyDropdownList(GameObject dropdownList) { Destroy(dropdownList); } /// /// Create a dropdown item based upon the item template. /// /// /// Override this method to implement a different way to obtain an option item. /// The option item should correspond to the provided template DropdownItem and its GameObject, equivalent to instantiating a copy of it. /// /// e template to create the option item from. /// The created dropdown item component protected virtual DropdownItem CreateItem(DropdownItem itemTemplate) { return (DropdownItem)Instantiate(itemTemplate); } /// /// Convenience method to explicitly destroy the previously generated Items. /// /// /// Override this method to implement a different way to dispose of an option item. /// Likely no action needed since destroying the dropdown list destroys all contained items as well. /// /// The Item to destroy. protected virtual void DestroyItem(DropdownItem item) {} // Add a new drop-down list item with the specified values. private DropdownItem AddItem(OptionData data, bool selected, DropdownItem itemTemplate, List items) { // Add a new item to the dropdown. DropdownItem item = CreateItem(itemTemplate); item.rectTransform.SetParent(itemTemplate.rectTransform.parent, false); item.gameObject.SetActive(true); item.gameObject.name = "Item " + items.Count + (data.text != null ? ": " + data.text : ""); if (item.toggle != null) { item.toggle.isOn = false; } // Set the item's data if (item.text) item.text.text = data.text; if (item.image) { item.image.sprite = data.image; item.image.enabled = (item.image.sprite != null); } items.Add(item); return item; } private void AlphaFadeList(float duration, float alpha) { CanvasGroup group = m_Dropdown.GetComponent(); AlphaFadeList(duration, group.alpha, alpha); } private void AlphaFadeList(float duration, float start, float end) { if (end.Equals(start)) return; FloatTween tween = new FloatTween {duration = duration, startValue = start, targetValue = end}; tween.AddOnChangedCallback(SetAlpha); tween.ignoreTimeScale = true; m_AlphaTweenRunner.StartTween(tween); } private void SetAlpha(float alpha) { if (!m_Dropdown) return; CanvasGroup group = m_Dropdown.GetComponent(); group.alpha = alpha; } /// /// Hide the dropdown list. I.e. close it. /// public void Hide() { if (m_Dropdown != null) { AlphaFadeList(m_AlphaFadeSpeed, 0f); // User could have disabled the dropdown during the OnValueChanged call. if (IsActive()) StartCoroutine(DelayedDestroyDropdownList(m_AlphaFadeSpeed)); } if (m_Blocker != null) DestroyBlocker(m_Blocker); m_Blocker = null; Select(); } private IEnumerator DelayedDestroyDropdownList(float delay) { yield return new WaitForSecondsRealtime(delay); ImmediateDestroyDropdownList(); } private void ImmediateDestroyDropdownList() { for (int i = 0; i < m_Items.Count; i++) { if (m_Items[i] != null) DestroyItem(m_Items[i]); } m_Items.Clear(); if (m_Dropdown != null) DestroyDropdownList(m_Dropdown); m_Dropdown = null; } // Change the value and hide the dropdown. private void OnSelectItem(Toggle toggle) { if (!toggle.isOn) toggle.isOn = true; int selectedIndex = -1; Transform tr = toggle.transform; Transform parent = tr.parent; for (int i = 0; i < parent.childCount; i++) { if (parent.GetChild(i) == tr) { // Subtract one to account for template child. selectedIndex = i - 1; break; } } if (selectedIndex < 0) return; value = selectedIndex; Hide(); } } }
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |