USS 선택자를 바인드하는 커스텀 바인딩 생성

버전: 2023.2+

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

개요 예시

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

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

선행 조건

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

• UI 빌더
• UXML

커스텀 바인딩 유형 생성

형제 인덱스에 따라 USS 클래스를 할당하는 커스텀 바인딩 유형을 생성합니다. 바인딩은 형제 인덱스가 변경될 때만 업데이트됩니다.

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

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

   using UnityEngine.UIElements;
       
   [UxmlObject]
   public partial class AddMenuUssClass : CustomBinding
   {
       protected override BindingResult Update(in BindingContext context)
       {
           // Assign USS classes based on the sibling index. The binding updates when the sibling index changes.
           var element = context.targetElement;
           var index = element.parent.IndexOf(element);
           element.EnableInClassList("menu-button--first", index == 0);
           element.EnableInClassList("menu-button--last", index == element.parent.childCount - 1);                
               
           return new BindingResult(BindingStatus.Success);
       }
   }
   

UI 및 바인딩 생성

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

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

   .menu-button {
       flex-direction: row;
       height: 64px;
       align-items: center; 
       justify-content: center;
   }
       
   .menu-button--first {
       border-top-left-radius: 15px;
       border-bottom-left-radius: 15px;
       border-left-width: 2px;
   }
       
   .menu-button--last {
       border-top-right-radius: 15px;
       border-bottom-right-radius: 15px;
       border-right-width: 2px;
   }
       
   Button {
       margin: 0px;
       border-color: red;
   }
   

2. 프로젝트의 Assets 폴더에 다음 내용이 포함된 CustomBinding.uxml이라는 UXML 파일을 생성합니다.

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="True">
       <ui:VisualElement class="menu-button">
           <ui:Button text="Bloub">
               <Bindings>
                   <AddMenuUssClass property="add-menu-button-class" />
               </Bindings>
           </ui:Button>
           <ui:Button text="Bip">
               <Bindings>
                   <AddMenuUssClass property="add-menu-button-class" />
               </Bindings>
           </ui:Button>
           <ui:Button text="Boop">
               <Bindings>
                   <AddMenuUssClass property="add-menu-button-class" />
               </Bindings>
           </ui:Button>
       </ui:VisualElement>
   </ui:UXML>
   

3. CustomBinding.uxml 파일을 더블 클릭하여__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
   See in Glossary 빌더에서 엽니다.

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

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

바인딩 테스트

바인딩을 테스트하려면 UI 빌더에서 버튼 요소의 순서를 변경하고 UI 빌더 뷰포트에서 변경 사항을 살펴봅니다.

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

추가 리소스

• 런타임 데이터 바인딩
• 런타임 데이터 바인딩 생성
• 커스텀 바인딩 유형 생성