Unity UI 드롭다운 사용

페이지 업데이트 : 2023년 12월 27일 수요일

페이지 생성 날짜 : 2022년 3월 24일 목요일

검증 환경

윈도우

윈도우 11

유니티 에디터

2020.3.25에프1

이 팁의 전제 조건

이 팁을 설명하기 위한 전제 조건으로 다음 설정이 미리 이루어졌습니다.

처음에

드롭다운을 사용하여 사용자가 여러 선택 항목 중 하나를 선택할 수 있습니다. 선택할 항목이 많더라도 선택한 항목만 화면에 표시되므로 공간 절약에 유용하고 사용자가 선택한 항목을 더 쉽게 이해할 수 있습니다.

드롭다운 배치

계층에서 "드롭다운"을 선택하여 뷰에 추가합니다.

드롭다운의 위치를 재량에 따라 조정합니다. 크기가 작아 보이면 프레임을 드래그하여 더 크게 만듭니다.

Dropdown 내부 텍스트의 크기를 설정하려면 내부 텍스트 대신 내부 Label 입력을 선택합니다.

실행하면 드롭다운이 작동하는 것을 볼 수 있습니다. 초기 상태에서는 선택할 수 있는 항목이 3개 있으므로 선택을 전환할 수 있습니다. 그러나 드롭다운의 크기나 Label 의 글꼴 크기를 변경하면 드롭다운에 표시되는 텍스트의 크기와 일치하지 않습니다.

드롭다운 항목의 크기 조정

드롭다운을 배치할 때 개체의 크기나 글꼴 크기를 변경하지 않은 경우 이 작업을 수행할 필요가 없지만 변경하는 경우 드롭다운 항목도 설정해야 합니다.

드롭다운 개체에는 선택한 항목이 표시될 때 표시되는 방법에 대한 정의가 포함되어 있습니다. Dropdown Template 라는 경우입니다. 몇 가지 설정을 하지 않으면 예쁘게 보이지 않습니다.

우선, 배치된 드롭다운의 각 파라미터가 다음과 같이 설정되어 있는 것을 전제로 합니다. 다른 매개변수로 설정하는 경우 숫자를 교체하고 읽으십시오. 이 예제에서는 다른 매개 변수도 설정되지만 드롭다운 항목과 관련이 없기 때문에 생략됩니다.

개체	매개 변수 이름	값
드롭다운(Dropdown)	높이	72
드롭다운 > 레이블	글꼴 크기	40

항목 글꼴 크기

먼저 항목의 글꼴 크기를 변경합니다. 개체에 대해 > > >Dropdown Template Content > > Viewport Item Item Label선택합니다. 글꼴 크기를 레이블과 같은 40으로 지정합니다. 더 많은 선택 항목을 표시하려면 조금 더 작게 만들 수 있습니다.

글꼴 크기를 늘려도 한 항목의 표시 크기는 변하지 않기 때문에 실행해도 아무것도 보이지 않을 수 있습니다.

항목 크기

다음으로 한 항목의 크기를 설정합니다. 선택할 객체는 > >Dropdown Template Viewport > > 입니다. Content Item 높이를 72로 설정합니다. 더 많은 선택 항목을 표시하려면 조금 더 작게 만들 수 있습니다.

이렇게 하면 항목의 요소가 표시되지만 어떤 이유로 스크롤에 관계없이 선택한 항목의 상단과 하단이 약간 잘립니다.

이 문제를 해결하려면 > > >Dropdown Viewport ContentTemplate 의 높이를 와 같은 72로 Item 설정합니다. 이렇게 하면 상단 및 하단 항목을 제대로 볼 수 있습니다.

그건 그렇고, 기본 드롭 다운 설정 Item 에서 의 높이는 보다 약간 크게 Content 설정되어 있습니다. 결과적으로 선택한 항목의 위와 아래에 약간의 여백이 표시되어 압박감이 줄어 듭니다.

체크 표시 크기

체크 표시의 크기도 작기 때문에 수정하겠습니다. 대상 개체는 "> > Viewport > > >Item CheckmarkContent Item Template"Dropdown입니다.

폭과 높이를 변경하면 체크 표시도 늘어나기 때문에 여기에서는 72로 설정합니다.

실행하면 체크 표시가 더 크지만 위치가 잘못되어 이것도 수정합니다.

Item Checkmark 먼저 피벗 X를 0으로 설정한 다음 위치 X도 0으로 설정합니다. 이렇게 하면 수표나 라벨의 크기에 관계없이 좋은 위치에 놓을 수 있습니다.

또한 레이블 Item Lebel 과 겹치기 때문에 왼쪽 위치를 체크 표시의 크기와 동일하게 하려면 선택합니다.

스크롤 막대 크기

스크롤 막대도 작고 클릭하기 어려우므로 더 크게 만듭니다. 모두 크기를 고집하기 때문에 정할 수 있는 것이 아닙니다. 이 경우 드롭다운 높이의 2/3인 48을 설정합니다.

선택할 객체는 >Dropdown Template > Scrollbar의 너비 값으로 설정됩니다.

드롭다운 아이콘 크기

아이템 쪽은 아니지만 드롭다운 아이콘이 아직 작기 때문에 변경하겠습니다. 선택할 객체는 >Dropdown Arrow입니다.

아이콘의 크기는 너비와 높이를 설정하여 크기를 변경할 수 있습니다. 여기서는 드롭다운의 높이와 같은 72로 설정합니다.

이 경우 위치가 꺼지므로 피벗 X를 1로, 위치 X를 0으로 설정합니다. 이렇게 하면 크기에 관계없이 아이콘을 좋은 위치에 표시할 수 있습니다.

표시되는 드롭다운 항목 수

항목의 크기를 늘리면 한 번에 표시할 수 있는 선택 항목이 줄어들기 때문에 이를 늘리도록 합니다. 이 설정은 >Dropdown Template에 지정되어 있습니다. 표시할 항목 수는 항목 수로 지정되지 않고 크기는 높이로 설정되기 때문에 지정된 값은 "높이 × 항목 수"입니다. 여기에서는 10 개 정도 전시하고 싶기 때문에 72 x 10 = 720 세트 .

표시 영역이 확대되어 있습니다 만, 현재 3 항목 밖에 없기 때문에 3 항목 만 표시됩니다.

선택 영역 설정

기본적으로 "옵션 A ~ 옵션 C"의 3 항목이 설정되어 있습니다. 이러한 항목은 Dropdown 객체 Dropdown 의 구성 요소에 있습니다.

인스펙터를 아래로 스크롤하면 이름을 자유롭게 변경하거나 추가 또는 삭제할 수 있는 "옵션" 항목을 찾을 수 있습니다.

초기 선택 설정

항목 선택은 숫자로 결정됩니다. Dropdown Dropdown 객체의 구성요소 값에서 초기 선택을 지정할 수 있습니다. 항목 번호는 0부터 시작하므로 네 번째 항목을 초기 선택으로 설정하려면 3을 설정합니다.

항목을 선택할 때 처리 수행

드롭다운에서 항목을 선택할 때 작업을 수행할 수 있습니다. 이는 버튼을 클릭할 때와 같은 방식으로 구현할 수 있습니다.

개체에는 드롭다운과 텍스트가 한 번에 하나씩 있습니다. 드롭다운에서 항목을 선택한 후 내용이 오른쪽의 텍스트 개체에 표시되는지 확인합니다. 오브젝트의 배치 외에는 아무 것도 중요하지 않으므로 원하는 대로 설정할 수 있습니다.

먼저 프로젝트에서 스크립트를 만듭니다. DropdownItemSelector 이 경우 이름은 입니다.

스크립트를 열고 다음에 코드를 추가합니다.

using UnityEngine;
using UnityEngine.UI;

public class DropdownItemSelector : MonoBehaviour
{
  /// <summary>ドロップダウンで選択したアイテムの内容を表示するテキストオブジェクト。</summary>
  [SerializeField] Text TextValueSetter;

  /// <summary>値を取得するドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>ドロップダウンでアイテムを選択したときに呼ばれます。</summary>
  public void OnSelectionChanged()
  {
    // ドロップダウンの選択値と選択しているアイテムのテキストを表示
    TextValueSetter.text = $"value={Dropdown.value}, options.text={Dropdown.options[Dropdown.value].text}";
  }
}

스크립트를 저장한 후 개체에 EventSystem 연결합니다. 단추에 대한 팁에 설명된 대로 이 팁은 특별한 이유가 없는 한 스크립트를 EventSystem 일관되게 첨부합니다.

값을 가져올 드롭다운 개체와 값을 설정할 텍스트 개체를 연결합니다.

그런 다음 작업할 드롭다운 개체를 선택하고 검사기 구성 요소에 "값 변경 시(Int32)"를 Dropdown 추가합니다.

왼쪽 하단 항목에는 작동 할 스크립트가 첨부 된 객체를 넣어야하므로 여기에 EventSystem 설정합니다.

기능 DropdownItemSelector 없음에서 를 OnSelectionChanged 선택합니다.

제대로 작동하는지 확인하기 위해 실행해 보십시오.

동적으로 항목 추가

에디터에서 선택할 수 있는 아이템을 지정할 수 있지만, 게임 도중에 상태가 바뀌어 선택한 아이템을 변경하고 싶을 때가 있습니다. 이 경우 프로그램에서 선택한 항목을 변경합니다.

개체는 아래와 같이 "drop-down" 및 "button x2"를 정렬합니다. 정렬 이외의 파라미터를 자유롭게 설정할 수 있습니다.

스크립트를 만들고 이름을 지정합니다 DropdownDynamic . 코드는 다음과 같아야 합니다.

using UnityEngine;
using UnityEngine.UI;

public class DropdownDynamic : MonoBehaviour
{
  /// <summary>アイテム処理を行うドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>追加ボタンをクリックしたとき。</summary>
  public void OnClickAdd()
  {
    // アイテムを追加します
    Dropdown.options.Add(new Dropdown.OptionData { text = $"Item {Dropdown.options.Count}" });

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }

  /// <summary>削除ボタンをクリックしたとき。</summary>
  public void OnClickRemove()
  {
    // アイテムを削除します
    if (Dropdown.options.Count >= 1)
		{
      Dropdown.options.RemoveAt(Dropdown.options.Count - 1);
    }

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }
}

Dropdown.options 에는 선택할 항목을 제어할 수 있으므로 Add 또는 Remove 항목을 수행하여 항목을 동적으로 제어할 수 있습니다.

EventSystem 스크립트와 개체를 에 연결합니다.

add 및 delete 버튼의 click 이벤트에 각각 메서드를 할당합니다.

완료되면 실행합니다. 편집기에서 항목을 지우면 클릭해도 항목이 표시되지 않습니다.

추가 버튼을 4번 클릭하면 4개의 항목이 추가된 것을 확인할 수 있습니다.

삭제 버튼을 두 번 클릭하면 두 개의 항목이 삭제된 것을 확인할 수 있습니다.

Unity UI에서 버튼 사용

선택한 항목이 드롭다운 항목 목록의 맨 위에 오도록 스크롤합니다