버전: 2023.2+
런타임 데이터 바인딩을 생성하는 방법이 궁금하신가요? 이 예시를 사용하여 시작할 수 있습니다. 이 예시에서는 데이터 소스 에셋을 생성하고 UI Builder를 사용하여 데이터 소스를 UI에 바인딩합니다.
이 예시에서는 다음을 보여 줍니다.
이 예시에서 생성하는 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.
이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.
바인딩할 프로퍼티를 포함하는 데이터 소스 에셋을 생성합니다. 이 예시에서는 string
프로퍼티, Vector3
프로퍼티, float
프로퍼티를 포함하는 ExampleObject
라는 ScriptableObject
에셋을 생성합니다. float
프로퍼티는 Vector3
프로퍼티의 x
, y
, z
값의 합을 반환하는 읽기 전용 프로퍼티입니다. 또한 데이터 소스 에셋은 float
를 Color
및 string
으로 전환하는 로컬 컨버터를 포함합니다.
템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.
프로젝트의 Assets
폴더에서 다음 콘텐츠가 포함된 ExampleObject.cs
라는 C# 스크립트를 생성합니다.
[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/runtime-data-binding/ExampleObject.cs)]
메뉴에서 Assets > Create > Example Object를 선택합니다. 이렇게 하면 프로젝트의 Assets
폴더에 에셋이 생성됩니다.
에셋의 이름을 ExampleObject.asset
으로 변경합니다.
이전 단계에서 생성한 데이터 소스 에셋에 바인딩되는 UI를 생성합니다. 이 예제에서는 Vector3Field, FloatField 및 Label을 자식 요소로 갖는 VisualElement를 포함하는 UXML 파일을 생성합니다.
Assets
폴더에서 ExampleObject.uxml
이라는 UXML 파일을 생성합니다.ExampleObject.uxml
파일을 더블 클릭하여 UI Builder에서 엽니다.이전 단계에서 생성한 데이터 소스 에셋에 UI를 바인딩합니다. 루트 VisualElement에 대한 데이터 소스를 설정하고 Vector3Field 요소의 label
및 value
프로퍼티를 데이터 소스 에셋의 vector3Label
및 vector3Value
프로퍼티에 바인딩합니다.
Float의 value
프로퍼티를 데이터 소스 에셋의 sumOfVector3Properties
프로퍼티에 바인딩합니다.
Label의 프로퍼티를 데이터 소스 에셋의 프로퍼티에 바인딩하고 Label에 대한 타입 컨버터를 적용합니다.
계층 구조 패널에서 Label을 선택합니다.
인스펙터 패널에서 Text 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.
Add Binding 창에서 다음을 수행합니다.
Add binding을 선택하여 변경 사항을 저장합니다.
인스펙터 패널에서 Background 필드를 확장합니다.
Color 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.
Add Binding 창에서 다음을 수행합니다.
Add binding을 선택하여 변경 사항을 저장합니다.
저장하고 UI Builder를 닫습니다. ExampleObject.uxml
파일이 다음과 같이 표시됩니다.
[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/runtime-data-binding/ExampleObject.uxml)]
Update the label text of the Vector3Field in the data source asset to see changes replicated in the UI. Update the value of the Vector3 property in the UI to see changes replicated in the data source asset. Move the slider of the danger level in the data source to see changes replicated in the Label.
Assets
folder of your project, select the ExampleObject.asset
file.ExampleObject.asset
changes to the numbers you entered.ExampleObject.asset
, move the Danger Level slider. The text and the background color of the Label in the UI Builder Viewport change according to the value of the Danger Level.