[Unity UI Toolkit] # 2. 컨트롤

문연수·2022년 11월 12일

Control UI Toolkit Unity

Unity UI Toolkit

목록 보기

3/4

컨트롤은 버튼, 레이블 혹은 체크박스와 같은 그래픽 유저 인터페이스 요소의 한 요소이다. 이는 컨트롤의 모양과, 컨트롤의 상호작용과 수행을 위한 스크립트 로직을 포함한다.

UI Toolkit 에서, 컨트롤은 visual element 와 스크립트를 템플릿으로 조합하여 UI Panel 내에서 사용 가능하게 만든다.

컨트롤은 단일 visual element 혹은 다중의 visual element 들로 구성되어질 수 있다.

예를 들어, 이하에서 보여주는 토글 컨트롤은 세 개의 요소들을 포함한다:

A text label
An image of a box
An image of a checkmark

[Figure 1] Toogle control (https://docs.unity3d.com/2021.3/Documentation/Manual/UIE-Controls.html)

토글 컨트롤의 구현은 컨트롤의 동작 정의한다. 이는 내부적으로 토글 상태가 참인지 거짓인지에 대한 값을 가진다. 이러한 로직은 값이 변할 때마다 체크마커 이미지의 가시성을 변화시킨다.

1. UI 에 컨트롤 추가하기

UI 에서 컨트롤을 사용하기 위해선 이를 VisualTree 에 추가해야 한다. C# 스크립트, UXML 혹은 UI Builder 내에서 컨트롤을 추가할 수 있다. 다음의 C# 코드는 버튼 컨트롤을 존재하는 visual tree 에 추가하는 예제이다:

var newButton = new Button("Click me!");
rootVisualElement.Add(newButton);

UI 계층에 컨트롤이 추가될 때, 레이아웃 엔진은 자동적으로 크기와 위치를 조정해준다. 뿐만 아니라 visual element 의 크기와 위치를 오버라이드 하는 것도 가능하다.

다음의 방법을 통해 visual element 의 형태를 정의할 수 있다:

USS 파일 생성
UI Builder 를 통해 직접 형태 정의
C# 스크립트에서 요소의 스타일 속성을 수정

2. 컨트롤과 상호작용

컨트롤은 수정할 수 있는 값을 나타내며 상호작용이 가능하다. 예를 들어, FloatField 는 실수 값을 나타내며 컨트롤의 값을 수정하고, 콜백을 등록하고, 데이터 바인딩을 적용하기 위한 C# 스크립트를 생성할 수 있다.

3. 컨트롤 값 수정하기

컨트롤의 값에 접근하거나 수정하기 위해서 컨트롤의 value 프로퍼티를 사용하라.

다음의 C# 예제는 토글 컨트롤과 버튼 컨트롤을 생성한다. 버튼을 클릭할 때, 토글의 값을 반전된다.

// Create a toggle and register callback
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
rootVisualElement.Add(m_MyToggle);

// Create button to flip the toggle's value
Button button01 = new Button() { text = "Toggle" };
button01.clicked += () =>
{
    m_MyToggle.value = !m_MyToggle.value;
};
rootVisualElement.Add(button01);

- 콜백 등록하기

컨트롤은 값이 바뀌었을 때 이벤트를 전달하는 value 프로퍼티를 가진다. 이를 통해 이벤트를 처리할 콜백을 등록할 수 있다. 다음의 코드 예제는 토글 컨트롤을 생성하고 콜백을 등록한다:

// Create a toggle and register callback
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
m_MyToggle.RegisterValueChangedCallback((evt) => { Debug.Log("Change Event received"); });
rootVisualElement.Add(m_MyToggle);

- 데이터 바인딩 적용하기

역: bind 는 묶다, 속박하다, 구속하다 등의 뜻이 있으나 bind 라는 영단어 자체가 주는 그 고유의 느낌(귀속시키다? 굳이 더 표현하자면 강제력 있게 결합 시키다?) 을 대한의 단어가 잘 살리지 못한다는 느낌 (그러한 단어가 아직 대한의 문화와 역사 속에 존재하지 않거나 반대로 있음에도 필자가 모르거나) 이 들어서 그냥 한글로 옮겨서 바인딩이라고 번역하겠습니다.

직렬화된 프로퍼티 혹은 오브젝트에 컨트롤을 바인딩할 수 있다. 예를 들어, FloatField 컨트롤을 MonoBehavior 에 속한 public float 변수에 바인딩 할 수 있다. 컨트롤이 프로퍼티에 바인딩되면, 이는 자동적으로 프로퍼티의 값을 보여준다. 컨트롤을 수정하게 되면, 프로퍼티의 값 또한 갱신된다.