컨트롤

컨트롤은 버튼, 레이블, 체크박스 등 그래픽 사용자 인터페이스의 요소로서, 컨트롤과의 상호작용 및 운영을 위한 스크립트화된 로직과 컨트롤의 비주얼을 포함합니다.

UI 툴킷에서 컨트롤은 시각적 요소와 스크립팅을 UI 패널 창 내에서 사용할 수 있는 템플릿으로 조합하며, 프리팹과 비슷하게 작용합니다.

컨트롤은 하나의 시각적 요소 또는 여러 시각적 요소의 조합으로 구성될 수 있습니다.

예를 들어, 위의 Toggle 컨트롤은 다음 세 가지 요소를 포함합니다.

• 텍스트 레이블
• 상자 이미지
• 체크 표시 이미지

Toggle 컨트롤의 구현은 컨트롤의 동작을 정의하며, 내부 값은 토글 상태가 true인지 false인지 여부입니다. 이 로직은 값이 변경되면 체크 표시 이미지를 표시하거나 숨깁니다.

UI에 컨트롤 추가하기

UI에서 컨트롤을 사용하려면 시각적 트리라는 UI 계층 구조에 컨트롤을 추가해야 합니다. 스크립트를 통해, UXML을 통해 또는 UI 빌더에서 컨트롤을 추가할 수 있습니다.

아래 코드 스니펫은 기존의 시각적 트리에 Button 컨트롤을 추가하는 방법을 나타냅니다.

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

UI 계층 구조에 컨트롤을 추가할 때 레이아웃 엔진은 크기 조절과 위치 지정을 자동으로 처리합니다. 자동 레이아웃에 관한 자세한 내용은 레이아웃 엔진을 참조하십시오.

시각적 요소의 크기와 위치를 수동으로 오버라이드할 수도 있습니다. 수동으로 위치를 컨트롤하는 방법은 시각적 트리 페이지를 참조하십시오.

UI 툴킷의 모든 시각적 요소는 스타일을 사용하여 속성을 정의합니다. 다음 세 가지 방법으로 스타일 프로퍼티를 수정할 수 있습니다.

• Creating a USS style sheets.
• UI 빌더에서 적절한 프로퍼티 적용
• 코드를 통해 요소의 스타일 프로퍼티 수정

컨트롤을 사용하여 상호작용

컨트롤은 인터랙티브하며, 변경 가능한 값을 나타냅니다. 예를 들어, FloatField는 플로트 값을 나타냅니다. 코드를 사용하여 다음과 같은 변경에 반응할 수 있습니다.

• 콜백 등록
• 컨트롤 값 직접 읽기
• 데이터 바인딩

컨트롤 값 프로퍼티

수정 가능한 값을 나타내는 경우, 컨트롤은 value 프로퍼티를 포함합니다. 스크립트는 value 프로퍼티를 사용하여 컨트롤의 값에 바로 액세스할 수 있습니다. 아래의 코드 스니펫은 Toggle 컨트롤과 Button 컨트롤을 생성합니다. 버튼을 클릭하면 토글의 값이 플립됩니다.

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

특정 컨트롤의 프로퍼티에 대해 자세히 알아보려면 UI 툴킷 컨트롤 레퍼런스를 참조하십시오.

콜백 등록

value 프로퍼티가 있는 모든 빌트인 컨트롤은 값이 변경되면 이벤트를 전송합니다. 코드는 이 이벤트를 받기 위해 콜백을 등록할 수 있습니다. 다음 코드 스니펫은 Toggle 컨트롤을 생성하고 콜백을 등록하는 방법을 나타냅니다.

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

콜백과 이벤트에 대해 자세히 알아보려면 이벤트 처리를 참조하십시오.

데이터 바인딩

컨트롤은 오브젝트나 직렬화된 프로퍼티에 바로 바인드할 수 있습니다. 예를 들어, MonoBehaviour에 속한 public 플로트 변수에 FloatField 컨트롤을 바인드할 수 있습니다. 컨트롤은 프로퍼티에 바인드할 때 프로퍼티의 값을 자동으로 표시합니다. 사용자가 컨트롤을 수정하면 프로퍼티의 값이 업데이트됩니다.

마찬가지로 코드를 통해 프로퍼티 값이 변경되는 경우에도 UI에 업데이트된 값이 표시됩니다. 이러한 양방향 연결은 커스텀 인스펙터를 만들 때 유용합니다.

데이터 바인딩에 대해 자세히 알아보려면 바인딩 페이지를 참조하십시오.

일부 컨트롤은 바인드할 수 없습니다. 모든 빌트인 컨트롤의 리스트와 컨트롤이 바인딩을 지원하는지 여부는 UI 툴킷 컨트롤 레퍼런스를 참조하십시오.

커스텀 컨트롤 만들기

UI 툴킷을 사용하여 커스텀 컨트롤을 만들 수 있습니다. 이를 통해 복잡한 컨트롤을 만들거나 사용자 인터페이스 요소를 위한 커스텀 로직을 구현할 수 있습니다. 컨트롤은 VisualElement에서 직접 파생되거나, TextElement와 같은 VisualElement의 서브 클래스에서 파생됩니다. 또한 컨트롤은 매니퓰레이터를 추가하여 컨트롤의 동작을 구현할 수도 있습니다. 예를 들어 Button 컨트롤은 Clickable 매니퓰레이터를 추가합니다.

빌트인 컨트롤

Unity는 레이블, 텍스트 필드와 토글 등 광범위한 표준 컨트롤을 포함합니다. 일부 컨트롤은 에디터에서만 사용할 수 있습니다. UI 툴킷용 빌트인 컨트롤이 모두 포함된 리스트는 UI 툴킷 컨트롤 레퍼런스를 참조하십시오.