바인드 가능 커스텀 컨트롤 만들기

버전: 2023.2+

이 예제는 커스텀 에디터 창에서 바인딩 가능한 커스텀 컨트롤을 만드는 방법을 보여줍니다.

개요 예시

이 예시에서는 이중 데이터 유형으로 프로퍼티에 바인딩된 커스텀 컨트롤을 생성합니다. 이 예시는 문자열이나 정수와 같은 다른 데이터 유형의 프로퍼티에 바인딩하도록 조정할 수 있습니다.

이 예시에서 만든 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 가이드입니다. 시작하기 전에 먼저 다음을 숙지하십시오.

• UI 빌더
• 시각적 트리
• UXML
• SerializedObject 데이터 바인딩

커스텀 컨트롤 클래스 생성

C# 클래스를 생성하여 커스텀 컨트롤을 정의합니다.

1. 임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.
2. ExampleField라는 폴더를 만들어 파일을 저장합니다.
3. ExampleField 폴더에서 ExampleField.cs라는 이름의 C# 스크립트를 생성하고 내용을 다음과 같이 바꿉니다.

using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    // ExampleField inherits from BaseField with the double type. ExampleField's underlying value, then, is a double.
    [UxmlElement]
    public partial class ExampleField : BaseField<double>
    {
        Label m_Input;

        // Default constructor is required for compatibility with UXML factory
        public ExampleField() : this(null)
        {

        }

        // Main constructor accepts label parameter to mimic BaseField constructor.
        // Second argument to base constructor is the input element, the one that displays the value this field is
        // bound to.
        public ExampleField(string label) : base(label, new Label() { })
        {
            // This is the input element instantiated for the base constructor.
            m_Input = this.Q<Label>(className: inputUssClassName);
        }

        // SetValueWithoutNotify needs to be overridden by calling the base version and then making a change to the
        // underlying value be reflected in the input element.
        public override void SetValueWithoutNotify(double newValue)
        {
            base.SetValueWithoutNotify(newValue);

            m_Input.text = value.ToString("N");
        }
    }
}

UXML 파일에서 커스텀 컨트롤 사용

1. ExampleField 폴더에 ExampleField.uxml이라는 이름의__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
   See in Glossary 문서를 만듭니다.
2. 텍스트 에디터에서 ExampleField.uxml을 열고 해당 내용을 다음과 같이 바꿉니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:example="UIToolkitExamples">
    <example:ExampleField label="Binding Target" binding-path="m_Value" />
</ui:UXML>

바인딩 타겟에 대한 클래스 만들기

1. Unity에서 ExampleField.uxml을 더블 클릭하여 UI 빌더에서 엽니다. ExampleField는 계층 창에 표시되고 뷰포트에서 시각화됩니다. 계층 창에서 ExampleField를 선택하면 인스펙터 창에 Binding Path 및 Label 상자에 할당된 값이 표시됩니다.
2. ExampleField 폴더에서 ExampleFieldComponent.cs라는 이름의 C# 스크립트를 생성하고 해당 내용을 다음과 같이 바꿉니다.

using UnityEngine;

namespace UIToolkitExamples
{
    public class ExampleFieldComponent : MonoBehaviour
    {
        [SerializeField]
        double m_Value;
    }
}

바인딩 타겟에 대한 커스텀 에디터 만들기

1. ExampleField 폴더에 Editor라는 이름의 폴더를 만듭니다.
2. Editor 폴더에서 ExampleFieldCustomEditor.cs라는 이름의 C# 스크립트를 생성하고 해당 내용을 다음과 같이 바꿉니다.

using UnityEditor;
using UnityEngine.UIElements;
using UnityEngine;

namespace UIToolkitExamples
{
    [CustomEditor(typeof(ExampleFieldComponent))]
    public class ExampleFieldCustomEditor : Editor
    {
        [SerializeField]
        VisualTreeAsset m_Uxml;

        public override VisualElement CreateInspectorGUI()
        {
            var parent = new VisualElement();

            m_Uxml?.CloneTree(parent);

            return parent;
        }
    }
}

예제 테스트

1. Unity의 프로젝트 창에서 ExampleFieldCustomEditor.cs를 선택합니다.
2. ExampleField.uxml을 인스펙터 창의 Uxml 상자로 드래그합니다.
3. 빈 게임 오브젝트를 씬에 추가합니다.
4. ExampleFieldComponent 컴포넌트를 게임 오브젝트에 추가합니다. 커스텀 컨트롤은 인스펙터에서 바인딩 타겟에 대한 기본값이 0으로 나타납니다. 기본 이중 프로퍼티의 값을 변경하면 UI에 해당 변경 사항이 반영됩니다.

추가 리소스

• 커스텀 컨트롤