좋은 커스텀 컨트롤은 추상적이고 독립적이며 반복적이어야 합니다.
슬라이드 토글은 커스텀 컨트롤의 좋은 예입니다.
애플리케이션의 메뉴바는 커스텀 컨트롤의 좋은 예가 아닙니다.
커스텀 컨트롤을 생성하고 나면 USS로 스타일을 지정하고 로직을 추가하여 C#에서 이벤트를 처리할 수 있습니다.
커스텀 컨트롤을 생성하려면 다음을 수행합니다.
UxmlElement 속성을 커스텀 컨트롤 클래스 정의에 추가합니다.VisualElement 또는 파생된 클래스 중 하나에서 상속합니다.예제:
[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/Examples/CreateCustomControl.cs)]
커스텀 컨트롤을 생성한 후 UXML 및 UI 빌더에서 사용할 수 있습니다.
다음 예시 UXML 문서에서는 커스텀 컨트롤을 사용합니다.
[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/Examples/CreateCustomControl.uxml)]
기본적으로 커스텀 컨트롤은 UI 빌더의 Library 탭에 표시됩니다. Library 탭에서 숨기려면 HideInInspector 속성을 추가합니다.
커스텀 컨트롤은 VisualElement에서 상속됩니다.VisualElement는 게임 오브젝트의 수명에 바인딩되지 않으며, 다음 콜백을 수신하지 않습니다.
Awake()OnEnable()OnDisable()OnDestroy()생성자에서 커스텀 컨트롤을 초기화할 수 있습니다. 하지만 애플리케이션에서 필요로 하는 경우 커스텀 컨트롤이 UI에 추가될 때까지 초기화를 연기할 수 있습니다. 이렇게 하려면 AttachToPanelEvent에 대한 콜백을 등록하십시오. 커스텀 컨트롤이 UI에서 제거된 것을 감지하려면 DetachFromPanelEvent 콜백을 사용하십시오.
public CustomControl()
{
var myCustomElement = rootVisualElement.Q(className: "my-custom-element");
myCustomElement.RegisterCallback<AttachToPanelEvent>(e =>
{ /* do something here when element is added to UI */ });
myCustomElement.RegisterCallback<DetachFromPanelEvent>(e =>
{ /* do something here when element is removed from UI */ });
}
UI 툴킷은 모든 요소에 대해 이 두 개의 이벤트를 디스패치하며 커스텀 VisualElement 서브 클래스를 필요로 하지 않습니다. 자세한 내용은 패널 이벤트를 참조하십시오.
USS를 사용하여 빌트인 컨트롤과 동일한 방식으로 커스텀 컨트롤의 모양을 커스터마이즈할 수 있습니다.커스텀 컨트롤의 스타일을 지정하기 위해 USS 커스텀 프로퍼티를 생성할 수도 있습니다.
참고:UI 빌더의 인스펙터 창에 USS 커스텀 프로퍼티가 표시되지 않습니다.USS 커스텀 프로퍼티를 편집하려면 텍스트 에디터를 사용하여 USS 파일을 직접 편집합니다.
C#에서 커스텀 컨트롤의 커스텀 USS 프로퍼티와 상호 작용하려면 CustomStyleProperty 구조체와 CustomStylesResolvedEvent 이벤트를 사용하십시오.
CustomStyleProperty는 스타일시트에서 읽는 프로퍼티의 이름과 타입을 설명합니다.
UI 툴킷은 커스텀 USS 프로퍼티를 직접 수신하는 모든 요소에 대해 CustomStylesResolvedEvent를 디스패치합니다. 선택자가 일치하는 모든 요소, 규칙에 커스텀 프로퍼티 값이 포함된 선택자에 대해 이벤트를 디스패치합니다. UI 툴킷은 값을 상속하는 요소에 대해 이벤트를 디스패치하지 않습니다. 이벤트는 ICustomStyle 오브젝트에 대한 레퍼런스를 포함합니다. 이 오브젝트의 TryGetValue() 메서드를 사용하여 CustomStyleProperty의 유효 값을 읽어야 합니다. 이 메서드에는 다양한 유형의 CustomStyleProperty에 대한 오버로드가 있습니다.
커스텀 컨트롤 예제가 포함된 커스텀 스타일에 대해서는 커스텀 컨트롤에 대한 커스텀 스타일 생성을 참조하십시오.
참고:커스텀 스타일 프로퍼티에 대한 전환을 정의할 수 없습니다.
커스텀 컨트롤에 대한 이벤트를 처리하는 자세한 방법은 이벤트 처리를 참조하십시오.
참고:
커스텀 컨트롤이 나타내는 프로퍼티 및 동작의 기타 기능적 측면을 UXML 프로퍼티로 노출하고, 커스텀 컨트롤의 모양에 영향을 주는 프로퍼티를 USS 프로퍼티로 노출합니다.
다른 요소와의 이름 충돌을 피하려면 고유하고 짧고 읽기 쉬운 네임스페이스를 사용하십시오.
UXML 속성을 기본으로 유지합니다. UXML에서 지정할 수 있는 데이터는 기본 데이터 형식 세트로 제한됩니다. UXML은 복잡한 데이터 구조나 컬렉션을 지원하지 않습니다. UXML이 아닌 C# 스크립트 또는 데이터 바인딩을 사용하여 복잡한 데이터를 런타임 시 커스텀 컨트롤에 전달하십시오.
C#에서는 USS 클래스 또는 이름을 상수로 노출합니다.이를 통해 UQuery를 사용하여 클래스 또는 이름별로 요소를 찾을 수 있습니다.
USS 클래스에 BEM 표준을 채택합니다.이를 통해 클래스 리스트 선택자를 사용하여 모든 요소를 지정할 수 있습니다.
메모리 사용량을 줄이려면 정적 콜백을 사용하십시오.콜백으로 사용할 인스턴스 메서드를 등록할 때 불필요한 할당을 생성할 수 있습니다.할당을 피하려면 일반 C# 정적 메서드로 호출하는 익명의 정적 람다 함수를 사용하십시오.현재 요소의 컨텍스트는 EventBase.currentTarget 프로퍼티를 통해 검색할 수 있습니다.
커스텀 컨트롤에 대한 generateVisualContent 콜백을 통해 커스텀 지오메트리를 렌더링합니다. 부분적으로 채워진 원을 렌더링하는 사용 예시는 RadialProgress 예시를 참조하십시오.
커스텀 컨트롤은 편리합니다.그러나 다음과 같은 방법으로도 동일한 결과를 얻을 수 있습니다.
MonoBehaviour'를 사용하여 UI를 담고 있는 특정 UI 문서와 관련된 로직을 추가하십시오.(MonoBehaviour를 사용하여 UI 문서에서 UI를 제어하는 방법을 알아보려면 [첫 번째 런타임 UI 만들기](UIE-HowTo-CreateRuntimeUI.html)를 참조하십시오).캡슐화를 달성하려면MonoBehaviour내부에 [UQuery](UIE-UQuery.html)로 [VisualElement`](../ScriptReference/UIElements.VisualElement.html)를 내부적으로 가져오고 해당 프로퍼티를 조작하는 프로퍼티와 메서드를 생성하십시오.