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
슬롯에 매핑된 슬롯 이름을 포함합니다. 또한 이를 사용하여 시각적 요소를 슬롯의 자식으로 추가할 수 있습니다.
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.