Version: 2023.2
언어: 한국어
커스텀 바인딩 타입 생성
SerializedObject 데이터 바인딩

커스텀 바인딩을 생성하여 USS 선택자 바인딩

버전: 2023.2+

이 예시에서는 USS 선택자를 시각적 요소에 바인딩하는 커스텀 바인딩을 생성하는 방법을 보여 줍니다.

개요 예시

이 예시에서는 계층 구조의 자식 요소 순서에 따라 시각적 요소의 각 자식 요소에 USS 클래스 선택자를 할당하는 커스텀 바인딩을 생성합니다. 첫 번째 요소는 항상 왼쪽 모서리 가장자리가 둥글고, 마지막 요소는 항상 오른쪽 모서리 가장자리가 둥급니다.

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

선행 조건

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

커스텀 바인딩 타입 생성

형제 인덱스를 기반으로 USS 클래스를 할당하는 커스텀 바인딩 타입을 생성합니다. 바인딩은 형제 인덱스가 변경될 때만 업데이트됩니다.

  1. 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.

  2. 프로젝트의 Assets 폴더에서 다음 콘텐츠를 포함하는 AddMenuUSSClass.cs라는 C# 스크립트를 생성합니다.

    [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/runtime-custom-binding/AddMenuUSSClass.cs)]

UI 및 바인딩 생성

일반적으로는 요소의 기존 프로퍼티에 바인딩하는 바인딩을 만듭니다. 하지만 이 예시에서는 데모 목적으로 요소에 존재하지 않는 프로퍼티에 바인딩하는 커스텀 바인딩을 만듭니다. 존재하지 않는 프로퍼티에 바인딩하는 바인딩을 설정하려면 UXML 또는 C#을 사용해야 합니다. 이 예시에서는 UXML을 사용하여 바인딩을 설정합니다.

  1. 프로젝트의 Assets 폴더에서 다음 콘텐츠를 포함하는 CustomBinding.uss라는 USS 파일을 생성합니다.

    [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/runtime-custom-binding/CustomBinding.uss)]

  2. 프로젝트의 Assets 폴더에서 다음 콘텐츠를 포함하는 CustomBinding.uxml이라는 UXML 파일을 생성합니다.

    [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/runtime-custom-binding/CustomBinding.uxml)]

  3. CustomBinding.uxml 파일을 더블 클릭하여 UI Builder에서 엽니다.

  4. StyleSheet 패널에서 + > Add Existing USS를 선택하고 CustomBinding.uss 파일을 선택합니다.

  5. 변경 사항을 저장합니다.

바인딩 테스트

바인딩을 테스트하려면 UI Builder에서 버튼 요소의 순서를 변경하고 UI Builder Viewport에서 변경 사항을 관찰합니다.

  1. CustomBinding.uxml 파일을 더블 클릭하여 UI Builder에서 엽니다.
  2. 계층 구조 패널에서 루트 VisualElement를 확장하여 자식 요소, 즉 버튼을 표시합니다.
  3. 버튼을 드래그 앤 드롭하여 순서를 변경합니다. 첫 번째 버튼은 항상 왼쪽 모서리 가장자리가 둥글고, 마지막 버튼은 항상 오른쪽 모서리 가장자리가 둥급니다.

추가 리소스

커스텀 바인딩 타입 생성
SerializedObject 데이터 바인딩