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 파일에서 정의하여 간단하게 생성할 수 있으며, <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 슬롯에 매핑된 슬롯 이름을 포함합니다. 또한 이를 사용하여 시각적 요소를 슬롯의 자식으로 추가할 수 있습니다.