UXML 템플릿에 바인딩

버전: 2021.3+

이 예는 UXML 템플릿으로 바인딩 경로를 설정하는 방법을 보여줍니다.

개요 예시

이 예시에서는 에셋 메뉴 항목을 만듭니다. 메뉴는 GameSwitch 오브젝트의 프로퍼티에 바인딩하는 세 가지 템플릿 인스턴스가 있는 GameSwitch 에셋을 만듭니다.

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

선행 조건

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

GameSwitch 에셋 생성

GameSwitch 구조체를 정의하는 스크립트와 GameSwitch 구조체의 프로퍼티를 보유하는 커스텀 에셋을 생성합니다.

템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.
프로젝트 창에서 모든 파일을 저장할 bind-uxml-template이라는 폴더를 만듭니다.

GameSwitch.cs라는 이름의 C# 스크립트를 생성하고 콘텐츠를 다음과 같이 바꿉니다.

using System;

[Serializable]
public struct GameSwitch
{
    public string name;
    public bool enabled;
}

GameSwitchesAsset.cs라는 이름의 C# 스크립트를 생성하고 해당 콘텐츠를 다음과 같이 바꿉니다.

using UnityEngine;

[CreateAssetMenu(menuName = "UIToolkitExamples/GameSwitches")]
public class GameSwitchesAsset : ScriptableObject
{
    public GameSwitch useLocalServer;
    public GameSwitch showDebugMenu;
    public GameSwitch showFPSCounter;

    // Use the Reset function to provide default values
    public void Reset()
    {
        useLocalServer = new GameSwitch() { name = "Use Local Server", enabled = false };
        showDebugMenu = new GameSwitch() { name = "Show Debug Menu", enabled = false };
        showFPSCounter = new GameSwitch() { name = "Show FPS Counter", enabled = true };
    }
}

UXML 템플릿 및 파일 만들기

각 GameSwitch 구조체 인스턴스에 사용할 수 있는 UXML 템플릿과 이 템플릿을 사용하는 UXML 파일을 생성합니다.

game_switch.uxml이라는 이름의__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 문서를 생성하고 해당 콘텐츠를 다음과 같이 바꿉니다.
```
<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <Box style="flex-direction: row;">
        <Toggle binding-path="enabled" />
        <TextField binding-path="name" readonly="true" style="flex-grow: 1;"/>
    </Box>
</UXML>
```
bind-uxml-template 폴더에 ’Editor라는 이름의 폴더를 만듭니다.

Editor 폴더에 game_switches_editor.uxml이라는 이름의 UI 문서를 생성하고 해당 콘텐츠를 다음과 같이 바꿉니다.

<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
    <Template name="switch" src="../game_switch.uxml"/>
    <Instance template="switch" binding-path="useLocalServer" />
    <Instance template="switch" binding-path="showDebugMenu" />
    <Instance template="switch" binding-path="showFPSCounter" />
</UXML>

참고: 커스텀 에디터의 메인 UXML 파일입니다. 각 프로퍼티는 Instance의 binding-path 속성을 통해 game_switch.uxml의 인스턴스에 바인딩합니다.

에셋 메뉴 및 에셋 만들기

스크립트를 생성하여 GameSwitchesAsset에 대한 커스텀 에디터를 등록합니다.

GameSwitchesEditor.cs라는 이름의 C# 스크립트를 생성하고 콘텐츠를 다음과 같이 바꿉니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

namespace UIToolkitExamples
{
    [CustomEditor(typeof(GameSwitchesAsset))]
    public class GameSwitchesEditor : Editor
    {
        [SerializeField]
        VisualTreeAsset visualTreeAsset;

        public override VisualElement CreateInspectorGUI()
        {
            return visualTreeAsset.CloneTree();
        }
    }
}

GameSwitchesEditor.cs의 인스펙터 창에서 game_switches_editor.uxml 파일을 Visual Tree Asset 필드에 할당합니다.

바인딩 테스트

Unity에서 Assets > Create > UIToolkitExamples > GameSwitches를 선택하여 프로젝트의 Assets 폴더에 새 에셋을 생성합니다.
새로 생성된 에셋을 선택합니다. 인스펙터에는 GameSwitchesAsset.useLocalServer, GameSwitchesAsset.showDebugMenu 및 GameSwitchesAsset.showFPSCounter 프로퍼티에 바인딩하는 토글과 텍스트 필드가 표시됩니다.

추가 리소스

중첩된 프로퍼티에 바인딩

바인딩된 프로퍼티가 변경될 때 콜백 수신