Version: 2023.1
언어: 한국어
슬라이드 토글 커스텀 컨트롤 만들기
커스텀 컨트롤에 대한 커스텀 스타일 생성

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

버전:2021.3+

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

개요 예시

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

이 예제에서 생성한 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.

선행 조건

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

커스텀 컨트롤 클래스 만들기

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 PathLabel 상자에 할당된 값이 표시됩니다.

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

  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에 해당 변경 사항이 반영됩니다.

추가 리소스

슬라이드 토글 커스텀 컨트롤 만들기
커스텀 컨트롤에 대한 커스텀 스타일 생성