UXML 템플릿 작성

UXML 템플릿은 사용자 인터페이스의 논리 구조를 정의하는 XML 마크업으로 작성된 텍스트 파일입니다. 다음 코드 예제는 사용자에게 선택을 요청하는 간단한 패널을 정의하는 방법을 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.Experimental.UIElements"
    xsi:noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.Experimental.UIElements ../UIElementsSchema/UnityEngine.Experimental.UIElements.xsd">

    <engine:Label text="Select something to remove from your suitcase:"/>
    <engine:Box>
        <engine:Toggle name="boots" label="Boots" value="false" />
        <engine:Toggle name="helmet" label="Helmet" value="false" />
        <engine:Toggle name="cloak" label="Cloak of invisibility" value="false"/>
    </engine:Box>
    <engine:Box>
        <engine:Button name="cancel" text="Cancel" />
        <engine:Button name="ok" text="OK" />
    </engine:Box>
</engine:UXML>

파일의 첫 번째 줄은 XML 선언입니다. 이 선언은 선택 사항이지만, 포함할 경우 제일 첫 줄에 있어야 하며 다른 콘텐츠나 공백이 먼저 나올 수 없습니다. version 속성은 필수이지만 encoding은 선택 사항입니다. version을 포함할 경우에는 파일의 캐릭터 인코딩을 나타내야 합니다.

다음 줄에 있는 <UXML>은 문서 루트를 정의합니다. <UXML> 요소는 네임스페이스 접두사 정의와 스키마 정의 파일의 위치에 대한 속성을 포함합니다. 이러한 속성에는 특별하게 지정된 순서가 없습니다.

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

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

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

네임스페이스를 더 쉽게 지정하기 위해 네임스페이스 접두사를 정의할 수 있습니다. 예를 들어 xmlns:engine="UnityEngine.Experimental.UIElements" 줄은 UnityEngine.Experimental.UIElements에서 지정한 것과 동일하게 engine 접두사를 정의합니다.

이러한 단축 접두사가 정의되면 <engine:Button /> 텍스트가 <UnityEngine.Experimental.UIElements:Button />과 같아집니다.

고유한 요소를 정의하는 경우 해당 요소는 자체 네임스페이스로 정의될 수 있습니다. 이러한 요소는 UXML 템플릿에서 사용하려면 네임스페이스 정의와 스키마 파일 위치를 Unity 네임스페이스와 함께 <UXML> 태그에 포함해야 합니다.

Asset/Create/UIElements View 메뉴에서 새로운 UXML 템플릿 에셋을 생성할 때 Unity 에디터는 이러한 작업을 자동으로 수행합니다.

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

요소 이름은 인스턴스화할 요소의 C# 클래스 이름과 동일합니다. 대부분의 요소에는 속성이 포함되어 있고 각 값은 C#으로 해당 클래스 프로퍼티에 매핑됩니다. 각 요소는 해당 부모 클래스 타입(고유한 속성 집합을 추가할 수 있음)으로부터 속성을 상속받습니다. VisualElement는 모든 요소의 기본 클래스이며, 모든 요소에 대해 다음의 속성을 제공합니다.

name: 요소의 식별자. 고유한 이름을 사용해야 합니다.
picking-mode: Position으로 설정하여 마우스 이벤트에 응답하거나 Ignore로 설정하여 마우스 이벤트를 무시합니다.
focus-index: 태빙 시 포커스 순서를 판단하는 데 사용됩니다. 자세한 내용은 이벤트 디스패치를 참조하십시오.
class: 요소를 특성화하는 식별자 목록으로, 공백으로 구분됩니다. 클래스를 사용하여 시각적 스타일을 요소에 할당하십시오. 클래스를 사용하여 UQuery에서 요소 집합을 선택할 수도 있습니다.
slot-name and slot: 슬롯이 플레이스홀더 역할을 합니다. 플레이스홀더는 UXML 컴포넌트가 인스턴스화될 때 다른 시각적 요소를 삽입합니다. 아래의 슬롯을 참조하십시오.
tooltip: 마우스 커서가 요소 위에 있을 때 툴팁으로 표시되는 문자열입니다.

UXML 템플릿 예제에서는 사용자 인터페이스의 시각적 요소를 정의하지 않습니다. 베스트 프랙티스를 위해서는 USS로 작성된 스타일 규칙이 포함된 별도 파일을 사용하여 UI 그리기를 위한 스타일 정보(예: 크기, 폰트, 컬러 등)를 정의해야 합니다(스타일 및 Unity 스타일시트 참조).

UXML 재사용

컴포넌트는 UXML 파일에서 정의하여 간단하게 생성할 수 있으며, <Template> 및 <Instance> 요소를 사용하여 다른 UXML 파일로 임포트할 수 있습니다.

대규모 사용자 인터페이스를 디자인하는 경우 UI 요소를 정의하는 템플릿 UXML 파일을 사용할 수 있습니다.

동일한 UI 정의를 여러 곳에서 사용할 수 있습니다. 예를 들어 이미지, 이름, 레이블이 포함된 세로 UI 요소를 가지고 있다고 가정해 보겠습니다. 이 경우 UXML 템플릿 파일을 생성하여 세로 UI 요소를 다른 UXML 파일에서 재사용할 수 있습니다.

예를 들어 Assets/Portrait.uxml 파일에 Portrait 컴포넌트가 있다고 가정해 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML ...>
    <engine:VisualElement class="portrait">
        <engine:Image name="portaitImage" image="a.png"/>
        <engine:Label name="nameLabel" text="Name"/>
        <engine:Label name="levelLabel" text="42"/>
    </engine:VisualElement>
</engine:UXML>

다음과 같이 Portrait 컴포넌트를 다른 UXML 템플릿에 임베드할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML ...>
    <engine:Template path="Assets/Portrait.uxml" name="Portrait">
    <engine:VisualElement name="players">
        <engine:Instance template="Portrait" name="player1"/>
        <engine:Instance template="Portrait" name="player2"/>
    </engine:VisualElement>
</engine:UXML>

슬롯

UXML 컴포넌트는 컴포넌트가 인스턴스화될 때 요소를 삽입하는 슬롯을 정의할 수 있습니다. 슬롯은 UXML 컴포넌트가 인스턴스화될 때 다른 시각적 요소를 삽입하는 플레이스홀더 역할을 합니다.

slot-name 속성을 사용하여 슬롯을 정의하십시오. 예를 들어 Window.uxml 에서 정의되는 창 컴포넌트는 title과 content라는 이름의 두 가지 슬롯을 추가로 정의할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML ...>
    <engine:VisualElement>
        <engine:VisualElement slot-name="title"/>
        <engine:ScrollView slot-name="content"/>
    </engine:VisualElement>
</engine:UXML>

그런 다음 템플릿은 템플릿 파일을 임포트하고, 해당 콘텐츠를 인스턴스화하고, 고유 요소로 슬롯을 채우고, slot 속성을 추가하여 시각적 요소를 slot-name에 바인딩하여 이 창을 사용할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML ...>
    <engine:Template path="Assets/Window.uxml" name="window"/>
    <engine:Instance template="window">
        <engine:Label slot="title">
        <engine:TextBox slot="content"/>
    </engine:Instance>
</Window>

최종 시각적 요소 계층 구조는 다음과 같습니다.

VisualElement
    VisualElement slot-name="title"
        Label slot="title"
    ScrollView slot-name="content"
        TextBox slot="content"

위의 시각적 요소에서는 slot="title" 속성을 가진 Label이 slot-name="title" 속성을 가진 VisualElement의 자식으로 추가되었습니다.

컴포넌트의 VisualTreeAsset에서 C#으로 슬롯을 채울 수도 있습니다.

var slots = new Dictionary<string, VisualElement>();
VisualElement t = visualTreeAsset.CloneTree(slots);
slots["title"].add(new Label());

CloneTree를 호출한 후 slots 사전은 VisualElement 슬롯에 매핑된 슬롯 이름을 포함합니다. 또한 이를 사용하여 시각적 요소를 슬롯의 자식으로 추가할 수 있습니다.

2018–11–02 일부 편집 리뷰를 거쳐 페이지 수정됨

UXML 포맷

C#에서 UXML 로드

매뉴얼

UXML 템플릿 작성

UXML 재사용

슬롯