유형 컨버터로 런타임 바인딩 만들기

버전: 6000.0+

이 예시는 데이터 소스와__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 간에 데이터 유형을 전환하는 유형 컨버터를 만드는 방법을 보여 줍니다.

개요 예시

이 예시에서는 UI 빌더에서 데이터 소스 에셋에 바인딩하는 레이블 컨트롤을 만듭니다. 데이터 소스 에셋에는 dangerLevel이라는 이름의 플로트 프로퍼티가 포함되어 있습니다. 레이블은 dangerLevel을 문자열로 표시하고 dangerLevel의 값에 따라 배경색을 변경합니다.

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

선행 조건

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

• UI 빌더
• UXML

데이터 소스 에셋 생성

바인딩하려는 프로퍼티가 포함된 데이터 소스 에셋을 만듭니다. 이 예시에서는 float를 Color 및 string으로 전환하는 로컬 컨버터가 포함된 ExampleConverterObject라는 이름의 ScriptableObject 에셋을 생성합니다.

1. 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.
2. 프로젝트의 Assets 폴더에서 다음 콘텐츠가 포함된 ExampleConverterObject.cs라는 C# 스크립트를 생성합니다.

using Unity.Properties;
using UnityEngine;
using UnityEngine.UIElements;

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleConverterObject : ScriptableObject
{
#if UNITY_EDITOR
    [InitializeOnLoadMethod]
#else
    [RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.SubsystemRegistration)]
#endif
    public static void RegisterConverters()
    {
    
        // Create local Converters.
        var group = new ConverterGroup("Value To Progress");
    
        // Converter groups can have multiple converters. This example converts a float to both a color and a string.
        group.AddConverter((ref float v) => new StyleColor(Color.Lerp(Color.red, Color.green, v)));
        group.AddConverter((ref float value) =>
        {
            return value switch
            {
                >= 0 and < 1.0f/3.0f => "Danger",
                >= 1.0f/3.0f and < 2.0f/3.0f => "Neutral",
                _ => "Good"
            };
        });
    
        // Register the converter group in InitializeOnLoadMethod to make it accessible from the UI Builder.
        ConverterGroups.RegisterConverterGroup(group);
    }
    
    [Header("Binding using a converter group")]
    [Range(0, 1)] public float dangerLevel;
}

예제 오브젝트 에셋 생성

1. Assets > Create > Example Object를 선택합니다. 그러면 프로젝트의 Assets 폴더에 데이터 소스 에셋이 생성됩니다.
2. 에셋의 이름을 ExampleConverterObject.asset으로 변경합니다.

UI 만들기

이전 단계에서 생성한 데이터 소스 에셋에 바인딩하는 UI를 생성합니다. 이 예시에서는 레이블 컨트롤이 포함된 UXML 파일을 생성합니다.

1. 프로젝트의 Assets 폴더에서 ExampleConverterObject.uxml이라는 UXML 파일을 생성합니다.
2. ExampleConverterObject.uxml 파일을 더블 클릭하여 UI 빌더에서 엽니다.
3. 계층 구조 패널에서 Label을 추가합니다.

데이터 소스에 레이블 바인딩

Label의 프로퍼티를 데이터 소스 에셋의 프로퍼티에 바인딩하고 Label에 대한 유형 컨버터를 적용합니다.

1. 계층 구조 패널에서 Label을 선택합니다.

2. 인스펙터 패널에서 Bindings > Data Source > Object 목록을 통해 ExampleConverterObject를 선택합니다.

3. Data Source Path 목록에서 dangerLevel을 선택합니다.

4. 인스펙터 패널에서 Text 필드를 오른쪽 클릭하고 Add binding을 선택합니다.

5. Add Binding 창에서 다음을 수행합니다.

   • Binding Mode 목록에서 To Target을 선택합니다. 이렇게 하면 데이터 소스가 변경될 때 UI가 업데이트됩니다.
   • Advanced Settings > Local converters > To target property (UI) 목록에서 Value To Progress를 선택합니다. 이렇게 하면 플로트가 문자열로 전환됩니다.

6. Add binding을 선택하여 변경 사항을 저장합니다.

7. 인스펙터 패널에서 Background 필드를 확장합니다.

8. Color 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.

9. Add Binding 창에서 다음을 수행합니다.

   • Binding Mode 목록에서 To Target을 선택합니다. 이렇게 하면 데이터 소스가 변경될 때 UI가 업데이트됩니다.
   • Advanced Settings > Local Converters > To target property (UI) 목록에서 Value To Progress를 선택합니다. 이렇게 하면 플로트가 색상으로 전환됩니다.

10. Add binding을 선택하여 변경 사항을 저장합니다.

11. UI 빌더를 저장하고 닫습니다. ExampleConverterObject.uxml 파일은 다음과 같습니다.

    <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" 
    engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
        <ui:Label text="Label" data-source="ExampleConverterObject.asset" data-source-path="dangerLevel">
            <Bindings>
                <ui:DataBinding property="style.backgroundColor" binding-mode="ToTarget" source-to-ui-converters="Value To Progress" />
                <ui:DataBinding property="text" binding-mode="ToTarget" source-to-ui-converters="Value To Progress" />
            </Bindings>
        </ui:Label>
    </ui:UXML>
    

바인딩 테스트

ExampleObject.asset의 인스펙터 창에서 Danger Level 슬라이더를 옮깁니다. UI 빌더 뷰포트에서 Label의 텍스트와 배경색이 Danger Level의 값에 따라 변경됩니다.

추가 리소스

• 런타임 데이터 바인딩
• 런타임 데이터 바인딩 생성
• 커스텀 바인딩 유형 생성
• 데이터 소스 정의
• 로깅 수준 정의