UXML 파일 재사용

템플릿으로 UXML 파일을 생성하여 다른 UXML 파일에서 재사용할 수 있습니다.

UXML 템플릿 임포트

대규모 사용자 인터페이스를 디자인할 때 UI의 일부를 정의하는 템플릿 UXML 파일을 만들고, <Template> 및 <Instance> 요소를 사용하여 다른 UXML 파일로 임포트할 수 있습니다.

예를 들어 이미지, 이름, 레이블이 있는 세로 UI 요소가 있는 경우 다음 콘텐츠를 통해 Assets/Portrait.uxml로 UXML 템플릿 파일을 만들 수 있습니다.

<ui:UXML ...>
    <ui:VisualElement class="portrait">
        <ui:Image name="portaitImage" style="--unity-image: url(\"a.png\")"/>
        <ui:Label name="nameLabel" text="Name"/>
        <ui:Label name="levelLabel" text="42"/>
    </ui:VisualElement>
</ui:UXML>

그런 다음 다음과 같이 세로 템플릿을 재사용할 수 있습니다.

<ui:UXML ...>
    <ui:Template src="/Assets/Portrait.uxml" name="Portrait"/>
    <ui:VisualElement name="players">
        <ui:Instance template="Portrait" name="player1"/>
        <ui:Instance template="Portrait" name="player2"/>
    </ui:VisualElement>
</ui:UXML>

UXML 속성 오버라이드

UXML 템플릿의 인스턴스를 만들 때 해당 요소의 기본 속성 값을 오버라이드할 수 있습니다.속성 오버라이드를 사용하면 동일한 템플릿을 인스턴스마다 다른 값으로 여러 번 인스턴스화할 수 있습니다.

속성 오버라이드

‘UXML’ 태그로 속성을 오버라이드할 수 있습니다.속성을 오버라이드하려면 다음을 지정하십시오.

• 속성을 오버라이드하려는 요소의 element-name 속성입니다.
• 오버라이드하려는 속성의 이름
• 새로운 속성 값

예를 들어 게임의 각 플레이어에게 동일한 정보 세트를 표시하려면 UXML 템플릿을 생성하고 속성 오버라이드를 사용하여 플레이어별 인스턴스를 생성할 수 있습니다.

먼저 다음 콘텐츠로 MyTemplate.uxml과 같은 템플릿을 만듭니다.

<UXML xmlns="Unityui.UIElements">
    <Label name="player-name-label" text="default name" />
    <Label name="player-score-label" text="default score" />
</UXML>

그런 다음 다른 UXML 파일에서 인스턴스화하고 해당 속성을 오버라이드하여 각 플레이어의 이름과 점수를 표시합니다.

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <Template src="MyTemplate.uxml" name="MyTemplate" />
    <Instance name="player1" template="MyTemplate">
        <!-- Alice is the new value of the text attribute for the player-name-label -->
        <AttributeOverrides element-name="player-name-label" text="Alice" /> 
        <!-- 2 is the new value of the text attribute for the player-score-label -->
        <AttributeOverrides element-name="player-score-label" text="2" />
    </Instance>
    <Instance name="player2" template="MyTemplate">
        <!-- Bob is the new value of the text attribute for the player-name-label -->
        <AttributeOverrides element-name="player-name-label" text="Bob" />
        <!-- 1 is the new value of the text attribute for the player-score-label -->
        <AttributeOverrides element-name="player-score-label" text="1" />
    </Instance>
</UXML>

여러 속성 오버라이드

오버라이드당 두 개 이상의 속성을 지정할 수 있습니다. 예를 들어 다음 구문은 player-name-label이라는 인스턴스에서 요소를 찾아 다음을 수행합니다.

• text 속성의 기본값을 새로운 값 Alice로 오버라이드합니다.
• tooltip 속성의 기본값을 새로운 값 Tooltip 1로 오버라이드합니다.

<AttributeOverrides element-name="player-name-label" text="Alice" tooltip="Tooltip 1" />

중첩 속성 오버라이드

속성 오버라이드는 요소 계층 구조에서 중첩된 템플릿을 통해 전파됩니다. 예를 들어 템플릿 A는 템플릿 B를 인스턴스화하고, 템플릿 B는 템플릿 C를 인스턴스화하는 경우 템플릿 A와 템플릿 B는 둘 다 템플릿 C의 속성을 오버라이드할 수 있습니다.

중첩된 템플릿에서 속성을 오버라이드하면 가장 깊은 오버라이드가 우선합니다.위의 예에서 템플릿 A와 템플릿 B가 모두 템플릿 C의 동일한 속성을 오버라이드하는 경우, 템플릿 B의 오버라이드에 따라 렌더링된 UI에 실제로 표시되는 내용이 결정됩니다.

템플릿 인스턴스 스타일 오버라이드

UXML 템플릿의 인스턴스를 생성할 때 템플릿의 요소에 style 속성으로 정의된 인라인 스타일이 있는 경우 AttributeOverrides를 사용하여 해당 style 속성을 오버라이드할 수 없습니다.그러나 USS 스타일시트에서 USS 선택자를 사용하여 템플릿 인스턴스의 스타일을 오버라이드할 수 있습니다.

예를 들어, 두 개의 레이블이 있는 #Container를 정의하는 Hotkeys.uxml이라는 UXML 템플릿이 있고 #Container에 플렉스 행 방향을 정의하는 인라인 스타일이 있다고 가정해 보겠습니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement name="Container" style="flex-direction: row;">
        <ui:Label text="E" name="Hotkeys" />
        <ui:Label text="Talk" name="Action" />
    </ui:VisualElement>
</ui:UXML>

두 번째 템플릿 인스턴스의 플렉스 행 방향이 반전된 두 개의 템플릿 인스턴스를 만들려는 경우, AttributeOverides를 사용하여 두 번째 인스턴스에서 #Container 요소의 style 속성을 오버라이드할 수 없습니다.

스타일을 오버라이드하려면 다음을 수행하십시오.

• 위 UXML 템플릿(Hotkeys.uxml)에서 #Container의 스타일을 제거합니다.
• UXML 인스턴스 파일에서 두 인스턴스의 이름을 HotkeysXML 및 ReversedHotkeysXML과 같이 지정합니다.
• ContextHotkeys.uss와 같은 USS 스타일시트를 UXML 인스턴스 파일에 적용합니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:Template name="HotkeysXML" src="HotkeysXML.uxml"/>
    <Style src="ContextHotKeys.uss"/>
    <ui:Instance template="HotkeysXML" name="HotkeysXML" />
    <ui:Instance template="HotkeysXML" name="ReversedHotkeysXML" />
</ui:UXML>

그런 다음 ContextHotkeys.uss를 생성하여 템플릿 인스턴스 이름에 따라 #Container 스타일을 변경할 수 있습니다.

# ReversedHotkeysXML > #Container {
    flex-direction: row-reverse;
}
 
# HotkeysXML > #Container {
    flex-direction: row;
}

제한 사항

속성 오버라이드에는 다음과 같은 제한 사항이 있습니다.

• 속성 오버라이드는 지정한 요소 이름에 따라 일치하는 속성을 찾습니다.USS 선택자 또는 UQuery를 사용하여 요소를 매칭할 수 없습니다.
• 요소의 binding-path 속성을 오버라이드할 수 있지만, 속성 오버라이드에서는 데이터 바인딩이 작동하지 않습니다.
• 요소의 ‘class’, ‘name’ 또는 ‘style’ 속성을 오버라이드할 수 없습니다.

UXML 템플릿에서 자식 요소를 중첩할 위치 지정

시각적 요소의 ‘content-container’ 속성을 사용하여 UXML 템플릿에서 자식 요소를 중첩할 위치를 지정할 수 있습니다.예를 들어, 다음 UXML 템플릿 파일이 Assets/MyTemplate.uxml인 경우:

<ui:UXML xmlns:ui="UnityEngine.UIElements" ...>
    <ui:Label text="Group Title" name="groupTitle" />
    <ui:VisualElement name="group-container" content-container="anyValue">
         <!--Add child elements here -->
    </ui:VisualElement>
    <ui:VisualElement/>
</ui:UXML>

그런 다음 중첩된 자식 요소와 함께 템플릿을 다음과 같이 적용할 수 있습니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" ...>
    <Template path="Assets/MyTemplate.uxml" name="my-template"/>
    <ui:Instance template="my-template">
        <ui:Label text="Test"/> <!--This label element will be instantiated inside the `group-container` element.-->
    </ui:Instance>
    <ui:Instance template="my-template">
        <ui:Label text="Test"/> <!--This label element will be instantiated in the template -->
    </ui:Instance>
</ui:UXML>

참고:Content-container 속성에 어떤 값이든 제공할 수 있습니다.

추가 리소스

• 템플릿
• 템플릿으로 UXML 인스턴스 사용