UXML 소개

UXML 포맷은 HTML, XAML, XML에서 영감을 받아 만들어졌습니다.이전에 이러한 포맷을 작업해 본 적이 있다면 UXML과의 유사점을 알 수 있습니다.그러나 UXML 포맷에는 Unity를 사용한 작업에 효과적인 방법을 제공하는 작은 차이점이 있습니다.이 페이지에서는 예시를 통해 UXML 포맷에 대해 소개합니다.

The following is an example UXML file. It contains several built-in UI controls that prompts the user to make a choice:

<?xml version="1.0" encoding="utf-8"?>
<UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="UnityEngine.UIElements"
    xsi:noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../UIElementsSchema/UnityEngine.UIElements.xsd">
    <Label text="Select something to remove from your suitcase:"/>
    <Box>
        <Toggle name="boots" label="Boots" value="false" />
        <Toggle name="helmet" label="Helmet" value="false" />
        <Toggle name="cloak" label="Cloak of invisibility" value="false"/>
    </Box>
    <Box>
        <Button name="cancel" text="Cancel" />
        <Button name="ok" text="OK" />
    </Box>
</UXML>

UXML 선언

위의 UXML 예시에서 첫 번째 코드줄은 UXML 선언입니다.선언은 선택 사항입니다.UXML 선언을 포함할 경우 첫 번째 줄에 넣어야 합니다.UXML 선언에는 version이 필요합니다.UXML 선언에서 encoding 속성은 선택 사항입니다.encoding 속성을 포함할 경우 파일의 문자 인코딩을 선언해야 합니다.

문서 루트

다음 줄에는 문서 루트 <UXML>을 정의합니다.<UXML> 요소에는 네임스페이스 접두사 정의와 스키마 정의 파일의 위치에 대한 속성이 포함됩니다.이러한 속성을 원하는 순서대로 지정할 수 있습니다.

네임스페이스

UI 툴킷에서 각 요소는 UnityEngine.UIElements 또는 UnityEditor.UIElements 네임스페이스 중 하나로 정의됩니다.

UnityEngine.UIElements 네임스페이스에는 Unity 런타임의 일부로 정의되는 요소가 포함됩니다.
UnityEditor.UIElements 네임스페이스에는 Unity 에디터에서 이용 가능한 요소가 포함됩니다. 요소를 완전히 지정하려면 네임스페이스를 접두사로 사용해야 합니다.

예를 들어 UXML 템플릿에서 Button 요소를 사용하려면 <UnityEngine.UIElements:Button />을 지정해야 합니다.

네임스페이스를 더 쉽게 지정하기 위해 네임스페이스 접두사를 정의할 수 있습니다.예를 들어 xmlns:engine="UnityEngine.UIElements"는 engine 접두사를 UnityEngine.UIElements로 정의합니다.네임스페이스 접두사를 정의하면 이를 사용하여 네임스페이스를 지정할 수 있습니다.예를 들어 <engine:Button />는 <UnityEngine.UIElements:Button />와 동등합니다.

또한 접두사를 제외하여 기본 네임스페이스를 정의할 수도 있습니다.예를 들어 xmlns="UnityEngine.UIElements"는 UnityEngine.UIElements를 기본 네임스페이스로 정의합니다.즉, <Button />를 지정하면 <UnityEngine.UIElements:Button />와 동등합니다.

자동으로 정의된 네임스페이스가 있는 UXML 파일을 생성하려면 Assets > Create > UI Toolkit > UI Document를 선택합니다.

참고:자체 요소를 정의하는 경우 UnityEngine.UIElements 또는 UnityEditor.UIElements 네임스페이스에 커스텀 컨트롤 클래스를 정의하지 마십시오.그렇지 않으면 UI 빌더에서 커스텀 컨트롤이 숨겨집니다.

스키마 정의

스키마 정의는 UXML 파일을 확인합니다.이는 각 UXML 요소에 포함할 수 있는 속성 및 자식 요소를 지정합니다.

UXML 파일에서 <UXML> 루트 요소의 xsi:noNamespaceSchemaLocation 또는 xsi:schemaLocation 속성은 스키마 정의 파일의 위치를 지정합니다.

최신 스키마 정의가 있는 UXML 파일을 생성하려면 Assets > Create > UI Toolkit > UI Document를 선택합니다.이렇게 하면 루트 요소의 xsi:noNamespaceSchemaLocation 속성이 포함된 파일이 생성됩니다.

참고:텍스트 에디터가 xsi:noNamespaceSchemaLocation 속성을 인식하지 않는 경우, xsi:schemaLocation 속성을 대신 사용합니다.

UXML 스키마 정의의 업데이트를 강제 적용하려면 Assets > Update UXML Schema를 선택합니다.

UXML 요소

UI의 정의는 <UXML> 루트 안에 있습니다.UI 정의는 일련의 중첩된 UXML 요소이며 각 요소는 시각적 요소를 나타냅니다.

요소 이름은 인스턴스화할 요소의 C# 클래스명에 해당합니다.대부분의 요소에는 속성이 있으며 해당 값은 C#에서 해당 클래스 프로퍼티에 매핑됩니다.각 요소에는 부모 클래스의 상속된 속성 외에도 자체 속성 세트가 있습니다.VisualElement는 모든 요소에 대한 기본 클래스이며 모든 요소에 대해 다음 속성을 제공합니다.

name:요소에 대한 식별자입니다.이름은 고유해야 합니다.
picking-mode:Position으로 설정하여 마우스 이벤트에 응답하거나 Ignore로 설정하여 마우스 이벤트를 무시합니다.
focus-index:(사용되지 않음) tabIndex와 focusable을 사용합니다.
tabindex:현재 요소의 태빙 포지션을 정의하는 정수입니다.
focusable:요소에 포커스를 둘 수 있는지를 나타내는 부울입니다.
class:요소를 특성화하는 식별자 목록으로, 공백으로 구분됩니다.클래스를 사용하여 요소에 시각적 스타일을 할당합니다.클래스를 사용하여 Uquery에서 요소 세트를 선택할 수도 있습니다.
tooltip:마우스 커서가 요소 위에 있을 때 툴팁으로 표시되는 문자열입니다.
view-data-key :요소 직렬화에 사용되는 키를 정의하는 문자열입니다.

추가 리소스

UXML을 통한 UI 구조

UXML에 스타일 추가