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

버전:2021.3+

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

개요 예시

이 예제에서는 이중 데이터 타입을 사용하여 프로퍼티에 바인딩된 커스텀 컨트롤을 만듭니다.이 예제를 문자열이나 정수와 같은 다른 데이터 타입이 있는 프로퍼티에 바인딩하도록 조정할 수 있습니다.

이 예제에서 생성한 완성된 파일은 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.Therefoe, the ExampleField's underlying value is a double.
       public class ExampleField :BaseField<double>
       {
           // We can provide the existing BaseFieldTraits class as a type parameter for UxmlFactory, and this means we
           // don't need to define our own traits class or override its Init() method.We do, however, need to provide it
           // However, you must provide the value type (double) and its attribute description type:
           // (UxmlDoubleAttributeDescription).
           public new class UxmlFactory :
               UxmlFactory<ExampleField, BaseFieldTraits<double, UxmlDoubleAttributeDescription>> { }
   
           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 문서를 생성합니다.

2. 텍스트 에디터에서 ExampleField.uxml을 열고 해당 콘텐츠를 다음과 같이 바꿉니다.

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

3. Unity에서 ’ExampleField.uxml’을 더블 클릭하여 UI 빌더에서 엽니다.ExampleField가 Hierarchy(계층) 창에 표시되며 뷰포트에 시각화됩니다.계층 창에서 해당 ExampleField를 선택하면 인스펙터(Inspector) 창에 Binding Path 및 Label 상자에 할당된 값이 표시됩니다.

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

1. ExampleField 폴더에서 ExampleFieldComponent.cs라는 이름의 C# 스크립트를 만들고 해당 콘텐츠를 다음과 같이 바꿉니다.

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

2. ExampleField 폴더에서 Editor라는 이름의 폴더를 만듭니다.

3. 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;
           }
       }
   }
   

4. Unity의 프로젝트 창에서 ExampleFieldCustomEditor.cs를 선택합니다.

5. ExampleField.uxml을 인스펙터 창의 Uxml 상자로 드래그합니다.

예제 테스트

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

추가 리소스

• 커스텀 컨트롤