[UIToolkit]UXML 템플릿 작성 - 1

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> 요소에는 네임스페이스 접두사 정의에 대한 속성과 스키마 정의 파일의 위치가 포함됩니다. 이러한 속성은 특별한 순서 없이 지정할 수 있습니다.

 

UI Toolkit에서 각 요소는 UnityEngine.UIElements 또는 UnityEditor.UIElements 네임스페이스에 정의됩니다.

- UnityEngine.UIElements 네임스페이스에는 Unity 런타임에서 사용할 수 있는 요소가 포함되어 있습니다.

- UnityEditor.UIElements 네임스페이스에는 Unity 예디터에서 사용할 수 있는 요소가 포함되어 있습니다. 요소를 완전히 지정하려면 해당 네임스페이스를 접두사로 지정해야 합니다.

 

예를 들어 Button UXML 템플릿의 요소를 사용하려면 아래와 같이 지정해야 합니다. 

<UnityEngine.UIElements:Button />.

 

네임스페이스를 더 쉽게 지정하기 위해 네임스페이스 접두사를 정의할 수 있습니다. 예를 들어  xmlns:engine="UnityEngine.UIElements"은 UnityEngine.UIElements을 engine으로 정의합니다. 네임스페이스 접두사가 정의되면 이를 사용하여 네임스페이스를 지정할 수 있습니다. 예를 들어 <UnityEngine.UIElements:Button />을 <engine:Button />라고 표현할 수 있습니다.

 

접두사를 제외하여 기본 네임스페이스를 정의할 수도 있습니다. 예를 들어 xmlns="UnityEngine.UIElements"은 UnityEngine.UIElements를 기본 네임스페이스로 정의합니다. 이는 예를 들어 <UnityEngine.UIElements:Button />을 <Button />으로 지정할 수 있게 해줍니다.

 

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

 

Asset > Create > UI Toolkit > Editor Window 를 선택하여 새 UXML 템플릿 에셋을 생성하면 에디터가 자동으로 네임스페이스를 정의합니다.

 

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

 

요소의 이름은 인스턴스화하는 요소의 C# 클래스 이름에 해당합니다. 대부분의 요소에는 속성이 있으며 그 값은 C#의 대응하는 클래스 속성에 매핑됩니다. 각 요소는 부모 클래스 유형의 속성을 상속하며, 여기에 자체 속성 집합을 추가할 수 있습니다. VisualElement는 모든 요소의 기본 클래스이며 모든 요소에 대해 다음 속성을 제공합니다.

 

- name: 요소의 식별자입니다. 이름은 고유해야 합니다.

- picking-mode: 마우스 이벤트에 응답하는 position 으로 설정하거나 마우스 이벤트를 무시하도록 Ignore로 설정합니다.

- tabindex: 현재 요소의 탭 위치를 정의하는 정수입니다.
- focusable: 요소가 초점을 맞출 수 있는지 여부를 나타내는  bool값입니다.
- class: 요소를 특징짓는 공백으로 구분된 식별자 목록입니다. 이를 사용하여 요소에 비주얼 스타일을 지정합니다. 클래스를 사용하여 UQuery에서 특정 요소를 선택할 수도 있습니다.
- tooltip: 요소 위로 마우스를 가져갈 때 툴팁으로 표시되는 문자열입니다.
- view-data-key: 요소의 직렬화에 사용되는 키를 정의하는 문자열입니다.

 

UXML 템플릿 예제는 사용자 인터페이스의 시각적 측면을 정의하지 않습니다. UI를 그리기 위한 치수, 글꼴 및 색상과 같은 스타일 정보는 별도의 USS 파일에 정의하는 것이 좋습니다.