UXML 템플릿은 사용자 인터페이스의 논리 구조를 정의하는 XML 마크업으로 작성된 텍스트 파일입니다. 다음 코드 예제는 사용자에게 선택을 요청하는 간단한 패널을 정의하는 방법을 보여줍니다.
<?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>
파일의 첫 번째 줄은 XML 선언입니다. 이 선언은 선택 사항입니다. 이 선언을 포함할 경우 제일 첫 줄에 있어야 하며 다른 콘텐츠나 공백이 먼저 나올 수 없습니다. version 속성은 필수이지만 encoding 속성은 선택 사항입니다. encoding을 포함할 경우에는 파일의 캐릭터 인코딩을 선언해야 합니다.
다음 줄에 있는 <UXML>은 문서 루트를 정의합니다. <UXML> 요소는 네임스페이스 접두사 정의와 스키마 정의 파일의 위치에 대한 속성을 포함합니다. 이러한 속성에는 특별하게 지정된 순서가 없습니다.
UIElement에서 각 요소는 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 템플릿에서 사용하려면 네임스페이스 정의와 스키마 파일 위치를 Unity 네임스페이스와 함께 <UXML> 태그에 포함해야 합니다.
Asset > Create > UIElements Editor Window 를 선택하여 새로운 UXML 템플릿 에셋을 만들 경우 에디터는 네임스페이스를 자동으로 정의합니다.
UI 정의는 <UXML> 루트 내에 있습니다. UI 정의는 일련의 중첩된 XML 요소이며 각 요소는 VisualElement를 나타냅니다.
요소 이름은 인스턴스화할 요소의 C# 클래스 이름과 동일합니다. 대부분의 요소에는 속성이 포함되어 있고 각 값은 C#으로 해당 클래스 프로퍼티에 매핑됩니다. 각 요소는 해당 부모 클래스 타입(고유한 속성 집합을 추가할 수 있음)으로부터 속성을 상속받습니다. VisualElement는 모든 요소의 기본 클래스이며, 모든 요소에 대해 다음의 속성을 제공합니다.
name: 요소의 식별자. 고유한 이름을 사용해야 합니다.picking-mode: Position으로 설정하여 마우스 이벤트에 응답하거나 Ignore로 설정하여 마우스 이벤트를 무시합니다.focus-index:(사용되지 않음) tabIndex와 focusable을 사용합니다.tabindex: 현재 요소의 태빙 포지션을 정의하는 정수입니다.focusable: 요소에 포커스를 둘 수 있는지 여부를 표시하는 부울입니다.class: 요소를 특성화하는 식별자 목록으로, 공백으로 구분됩니다. 클래스를 사용하여 시각적 스타일을 요소에 할당하십시오. 클래스를 사용하여 UQuery에서 요소 집합을 선택할 수도 있습니다.tooltip: 마우스 커서가 요소 위에 있을 때 툴팁으로 표시되는 문자열입니다.view-data-key: 요소 직렬화에 사용되는 키를 정의하는 문자열입니다.UXML 템플릿 예제에서는 사용자 인터페이스의 시각적 요소를 정의하지 않습니다. 스타일 정보(예: UI 그리기에 필요한 크기, 폰트, 컬러)는 별도의 USS 파일에서 정의하는 것이 좋습니다(스타일과 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>