UI Dropdown 기능 할당/삭제 (이미지,텍스트 옵션 추가) in Script

드롭다운

 

 

누군가는 드롭다운으로 알고 있고 누군가는 콤보박스로 알고 있습니다. 선택지 중 하나를 선택해야 할 때, 선택지가 부분적이고 많지 않으면 단순 토글로 처리를 할 수도 있지만 양이 많아질 경우에는 드롭다운이 매우 효율적입니다. 이름은 생소할 수 있으나 어떤 옆으로 긴 네모 박스를 클릭을 하면 아래로 선택지가 촥 펼쳐지는 것을 해본 적이 있고 선택도 해본 적이 있을 것입니다. 온라인 쇼핑몰이나 게임 회원가입 등에서 생년월일에서 연도를 직접 입력하기도 하지만, 드롭다운을 이용해서 태어난 연도를 이상하게 입력해서 서비스에 오류가 나지 않게 도와주기도 합니다. 사용자 입장에서는 익숙하고 편리하게 사용할 수 있기 때문에 개발자가 정해놓은 틀 안에서 쉽게 선택할 수 있습니다. Unity3D UI에서 기본적으로 Dropdown을 제공하는데 하나의 선택지를 Option이라고 합니다. Option을 추가해서 선택지를 만들 수 있습니다. Option에는 기본적으로 Text를 지원하지만 몇 가지를 추가하면 Text 옆에 아이콘을 띠워서 표시할 수도 있습니다.

 

 

C# (UNITY 3D)

 

 

드롭다운

 

 

 

using UnityEngine.UI;

 

Dropdown, Image, Text, Button를 사용하기 위해 UnityEngine.UI가 필요합니다.

 

 

 

드롭다운에 이미지를 사용하려면 ▼

(텍스트만 사용할 경우 생략)

1. Image 추가

1. 드롭다운에 스프라이트를 사용하려면 이미지를 추가해 줘야 합니다. Dropdown 바로 하위에 하나하고 Template/Viewport/Content/Item 하위에도 하나 추가해 줍니다.

 

 

2. Image 할당

2. 추가한 이미지를 각각 Dropdown 컴포넌트에 할당합니다.

 

 

3. Sprite 할당

3. 드롭다운에 사용하라 Sprite를 배열에 할당해 줍니다.

 

4. 결과 Image 추가

4. 옵션을 변경했을 때 어떤 이미지로 변경됐는지 보여주기 위한 Image를 추가합니다.

 

 

 

 

    public Text message;
    public Text result;
    public Image result_img;
    public Dropdown dropdown;
    public Sprite[] sprites;
    public string[] op_title = new string[] { "A", "B", "C", "D", "F" };
    public Button button;
     
        

    void Start()
    {
        SetFunction_UI();
    }

    //CodeFinder
    //From https://codefinder.janndk.com/
    private void SetFunction_UI()
    {
        //Reset
        ResetFunction_UI();

        button.onClick.AddListener(Function_Button);
        dropdown.onValueChanged.AddListener(delegate {
            Function_Dropdown(dropdown);
        }); 
    }
    
    private void Function_Button()
    {
        string op = dropdown.options[dropdown.value].text;
        result.text = op;
        result_img.sprite = dropdown.options[dropdown.value].image;
        Debug.LogError("Dropdown Result!\n" + op);
    }
    private void Function_Dropdown(Dropdown select)
    {
        string op = select.options[select.value].text;
        message.text = op;
        Debug.Log("Dropdown Change!\n" + op);
    }

    private void ResetFunction_UI()
    {
        button.onClick.RemoveAllListeners();
        dropdown.onValueChanged.RemoveAllListeners();
        dropdown.options.Clear();

        for (int i = 0; i < op_title.Length; i++)
        {
            Dropdown.OptionData newData = new Dropdown.OptionData();
            newData.text = op_title[i];
            newData.image = sprites[i];
            dropdown.options.Add(newData);
        }
        dropdown.SetValueWithoutNotify(-1);
        dropdown.SetValueWithoutNotify(0); 

    }

 

변수(variable)
message : 드롭다운을 선택해서 옵션 값이 바뀌었을 때 값을 표시(Text)

result : Get 버튼을 눌렀을 때 드롭다운의 현재 옵션 값 텍스트 표시(Text)

result_Img : Get 버튼을 눌렀을 때 현재 선택된 옵션의 이미지 표시(Image)

sprites : 드롭다운 옵션에 추가할 스프라이트 이미지들(Sprite[])

op_title : 드롭다운 옵션에 추가할 글자들(string[])

button : 기능을 할당할 버튼(Button)

dropdown : 기능을 할당할 드롭다운(DropDown)

함수(function)
SetFunction_UI : 기존에 있던 UI 관련 기능은 모두 삭제하고 버튼과 드롭다운에 기능을 할당하고, 드롭다운 옵션 초기화 및 준비한 옵션들 추가
Function_Button : 버튼을 눌렀을 때 함수 발동

Function_Dropdown : 드롭다운의 옵션을 변경했을 때 변경된 드롭다운을 반환

ResetFunction_UI : 드롭다운과 버튼 기능 전체 삭제하고 초기 드롭다운 옵션 값 선택(SetValueWithoutNotify) 

 

 

 

 

UI / Dropdown / Comobox / Button / AddListener / SetValueWithoutNotify / onValueChanged / RemoveAllListener OnClick / Sprite / option / Image