facebook twitter hatena line email

「Unity/UIDropdown」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(Dropdownの選択項目追加)
(Dropdownを開いた後、閉じる際にクリックしても、閉じない不具合がある場合)
 
(同じ利用者による、間の17版が非表示)
行33: 行33:
  
 
===選択項目の高さが狭い場合===
 
===選択項目の高さが狭い場合===
templates/viewportのscaleのyを1から3とかにする
+
#Dropdown/templates/scaleのyを1から3とかにする
 +
===選択項目の幅が狭い場合===
 +
#Dropdown/templates/scaleのxを1から3とかにする
 +
#Dropdownの横幅が長くなるので、Dropdown/templatesのLeftとRightを200ぐらいにして狭くする
  
 
==Dropdownの選択項目追加==
 
==Dropdownの選択項目追加==
行42: 行45:
 
public class Example : MonoBehaviour
 
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
 
     //The list of messages for the Dropdown
 
     List<Dropdown.OptionData> m_Messages = new List<Dropdown.OptionData>();
 
     List<Dropdown.OptionData> m_Messages = new List<Dropdown.OptionData>();
行57: 行58:
 
         m_Dropdown.ClearOptions();
 
         m_Dropdown.ClearOptions();
  
         //Create a new option for the Dropdown menu which reads "Option 1" and add to messages List
+
         List<string> names = new List<string> { "Option 1", "Option 2" };
        m_NewData = new Dropdown.OptionData();
+
         foreach (string name in names) {
        m_NewData.text = "Option 1";
+
            Dropdown.OptionData m_NewData = new Dropdown.OptionData();
         m_Messages.Add(m_NewData);
+
            m_NewData.text = name;
 
+
            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
 
         //Take each entry in the message List
行82: 行80:
 
==ListデータをDropdownへ反映==
 
==ListデータをDropdownへ反映==
 
<pre>
 
<pre>
List<string> names = new List<string>();
+
List<string> cars = new List<string>();
 +
string car = "police";
 +
Dropdown carDropdown;
 +
void Start()
 +
{
 +
    carDropdown = GameObject.Find("/Canvas/CarDropdown").GetComponent<Dropdown>();
 +
    carDropdown.onValueChanged.AddListener(delegate {
 +
      CarDropdownValueChanged(carDropdown);
 +
    });
 +
}
 
void InitDropdown()
 
void InitDropdown()
 
{
 
{
     names.Add("taro");
+
     cars.Add("taxi");
     names.Add("jiro");
+
     cars.Add("police");
 
     List<Dropdown.OptionData> optionMessages = new List<Dropdown.OptionData>();
 
     List<Dropdown.OptionData> optionMessages = new List<Dropdown.OptionData>();
     Dropdown optionDropdown = GameObject.Find("nameDropdown").GetComponent<Dropdown>();
+
     Dropdown optionDropdown = GameObject.Find("CarDropdown").GetComponent<Dropdown>();
 
     optionDropdown.ClearOptions();
 
     optionDropdown.ClearOptions();
     foreach (string name in names)
+
     foreach (string car in cars)
 
     {
 
     {
 
         Dropdown.OptionData optionData;
 
         Dropdown.OptionData optionData;
 
         optionData = new Dropdown.OptionData();
 
         optionData = new Dropdown.OptionData();
         optionData.text = name;
+
         optionData.text = car;
 
         optionMessages.Add(optionData);
 
         optionMessages.Add(optionData);
 
     }
 
     }
行101: 行108:
 
         optionDropdown.options.Add(message);
 
         optionDropdown.options.Add(message);
 
     }
 
     }
 +
    optionDropdown.value = cars.IndexOf(car);
 +
    GameObject.Find("CarDropdown/Label").GetComponent<Text>().text = cars[optionDropdown.value].ToString();
 +
}
 +
 +
void CarDropdownValueChanged(Dropdown change)
 +
{
 +
  car = cars[change.value];
 +
  GameObject.Find("CarDropdown/Label").GetComponent<Text>().text = cars[optionDropdown.value].ToString();
 
}
 
}
 
</pre>
 
</pre>
 +
 +
==前回のドロップダウンの開いたときのスクロール位置を記憶==
 +
<pre>
 +
TMP_Dropdown optionDropdown = GameObject.Find("/Canvas/Dropdown").GetComponent<TMP_Dropdown>();
 +
optionDropdown.onValueChanged.AddListener(delegate {
 +
    Transform listTransform = optionDropdown.transform.Find("Dropdown List/Viewport/Content");
 +
    if (listTransform != null)
 +
    {
 +
        RectTransform list = listTransform.GetComponent<RectTransform>();
 +
        RectTransform template = optionDropdown.transform.Find("Template/Viewport/Content").GetComponent<RectTransform>();
 +
        template.anchoredPosition = list.anchoredPosition;
 +
        template.anchoredPosition3D = list.anchoredPosition3D;
 +
    }
 +
});
 +
</pre>
 +
参考:https://www.create-forever.games/dropdown-pulldown-position-restore/
 +
 +
==Dropdownをcsで開く==
 +
<pre>
 +
TMP_Dropdown dropdown;
 +
if (dropdown != null && !dropdown.IsExpanded)
 +
{
 +
    dropdown.show();
 +
}
 +
</pre>
 +
 +
==Dropdownをcsで閉じる==
 +
<pre>
 +
TMP_Dropdown dropdown;
 +
if (dropdown != null && dropdown.IsExpanded)
 +
{
 +
    dropdown.Hide();
 +
}
 +
</pre>
 +
 +
==Dropdownを開いた後、閉じる際にクリックしても、閉じない不具合がある場合==
 +
Canvasに、LayoutGroupを追加してる場合は、外すと、動作するようになる。
 +
 +
原因は、Dropdownを開いた際に、Canvasの下にBlockerのGameObjectが追加される仕様だが、
 +
Blockerの位置がLayoutGroupによってずれるため、動作しなくなる。LayoutGroupを削除すると、通常通りの動作になる。
 +
 +
CanvasにLayoutGroupを追加する代わりに、Panelとかを挟んで、PanelにLayoutGroupを追加すれば良さそう。

2024年9月13日 (金) 00:53時点における最新版

Dropdown追加方法

  1. UI/Dropdownを追加
  2. Dropdownを選択肢Inspectorのoptionsから選択項目を編集する

Dropdown選択値取得サンプル

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<Dropdown>();
        //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;
    }
}

参考:https://docs.unity3d.com/ja/current/ScriptReference/UI.Dropdown-onValueChanged.html

選択項目の高さが狭い場合

  1. Dropdown/templates/scaleのyを1から3とかにする

選択項目の幅が狭い場合

  1. Dropdown/templates/scaleのxを1から3とかにする
  2. Dropdownの横幅が長くなるので、Dropdown/templatesのLeftとRightを200ぐらいにして狭くする

Dropdownの選択項目追加

using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
public class Example : MonoBehaviour
{
    //The list of messages for the Dropdown
    List<Dropdown.OptionData> m_Messages = new List<Dropdown.OptionData>();
    //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<Dropdown>();
        //Clear the old options of the Dropdown menu
        m_Dropdown.ClearOptions();

        List<string> names = new List<string> { "Option 1", "Option 2" };
        foreach (string name in names) {
            Dropdown.OptionData m_NewData = new Dropdown.OptionData();
            m_NewData.text = name;
            m_Messages.Add(m_NewData);
        }

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

参考:https://docs.unity3d.com/ja/current/ScriptReference/UI.Dropdown-options.html

ListデータをDropdownへ反映

List<string> cars = new List<string>();
string car = "police";
Dropdown carDropdown;
void Start()
{
    carDropdown = GameObject.Find("/Canvas/CarDropdown").GetComponent<Dropdown>();
    carDropdown.onValueChanged.AddListener(delegate {
       CarDropdownValueChanged(carDropdown);
    });
}
void InitDropdown()
{
    cars.Add("taxi");
    cars.Add("police");
    List<Dropdown.OptionData> optionMessages = new List<Dropdown.OptionData>();
    Dropdown optionDropdown = GameObject.Find("CarDropdown").GetComponent<Dropdown>();
    optionDropdown.ClearOptions();
    foreach (string car in cars)
    {
        Dropdown.OptionData optionData;
        optionData = new Dropdown.OptionData();
        optionData.text = car;
        optionMessages.Add(optionData);
    }
    foreach (Dropdown.OptionData message in optionMessages)
    {
        optionDropdown.options.Add(message);
    }
    optionDropdown.value = cars.IndexOf(car);
    GameObject.Find("CarDropdown/Label").GetComponent<Text>().text = cars[optionDropdown.value].ToString();
}

void CarDropdownValueChanged(Dropdown change)
{
   car = cars[change.value];
   GameObject.Find("CarDropdown/Label").GetComponent<Text>().text = cars[optionDropdown.value].ToString();
}

前回のドロップダウンの開いたときのスクロール位置を記憶

TMP_Dropdown optionDropdown = GameObject.Find("/Canvas/Dropdown").GetComponent<TMP_Dropdown>();
optionDropdown.onValueChanged.AddListener(delegate {
    Transform listTransform = optionDropdown.transform.Find("Dropdown List/Viewport/Content");
    if (listTransform != null)
    {
        RectTransform list = listTransform.GetComponent<RectTransform>();
        RectTransform template = optionDropdown.transform.Find("Template/Viewport/Content").GetComponent<RectTransform>();
        template.anchoredPosition = list.anchoredPosition;
        template.anchoredPosition3D = list.anchoredPosition3D;
    }
});

参考:https://www.create-forever.games/dropdown-pulldown-position-restore/

Dropdownをcsで開く

TMP_Dropdown dropdown;
if (dropdown != null && !dropdown.IsExpanded)
{
    dropdown.show();
}

Dropdownをcsで閉じる

TMP_Dropdown dropdown;
if (dropdown != null && dropdown.IsExpanded)
{
    dropdown.Hide();
}

Dropdownを開いた後、閉じる際にクリックしても、閉じない不具合がある場合

Canvasに、LayoutGroupを追加してる場合は、外すと、動作するようになる。

原因は、Dropdownを開いた際に、Canvasの下にBlockerのGameObjectが追加される仕様だが、 Blockerの位置がLayoutGroupによってずれるため、動作しなくなる。LayoutGroupを削除すると、通常通りの動作になる。

CanvasにLayoutGroupを追加する代わりに、Panelとかを挟んで、PanelにLayoutGroupを追加すれば良さそう。