Day - 04. UI Toolkit 살펴 보기

Loading UXML from C#

 

UXML 템플릿에서 사용자 인터페이스를 빌드하려면 먼저 템플릿을 VisualTreeAsset에 로드해야 합니다.

var template = EditorGUIUtility.Load("path/to/file.uxml") as VisualTreeAsset;

또는 

var template = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("path/to/file.uxml");

 

그런 다음 이것이 나타내는 시각적 트리를 빌드하고 상위 요소에 연결할 수 있습니다.

 

template.CloneTree(parentElement, slots);

위의 문장에서 템플릿의 <UXML> 요소는 VisualElement로 변환되지 않습니다.

대신 모든 자식이 parentElement에 의해 지정된 요소에 연결됩니다.

 

 

템플릿이 인스턴스화되면 UQuery: Unity의 JQuery/Linq 구현을 사용하여 시각적 요소 트리에서 특정 요소를 검색할 수 있습니다.

 

예를 들어 다음 코드는 새 EditorWindow를 만들고 UXML 파일을 콘텐츠로 로드하는 방법을 보여줍니다.

 

반응형

 

실습 하기 

 

이전 시간에 했던 템플릿부터 복습 

 

1. 템플릿 uxml파일을 하나 만들고 

2. 템플릿을 사용할 PlayerWindow.uxml파일 생성 

3. PlayerWindow.cs파일 생성 (Editor폴더에)

4. 실행하고 결과를 확인 

---

 

1. 템플릿 uxml파일을 하나 만들고 (PlayerTemplate.uxml)

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements">
  <Label name="player-name-label" text="default name" />
  <Label name="player-score-label" text="default score" />
</UXML>

 

 

2. 템플릿을 사용할 PlayerWindow.uxml파일 생성 

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Template src="PlayerTemplate.uxml" name="PlayerTemplate" />
  <Instance name="player1" template="PlayerTemplate">
    <AttributeOverrides element-name="player-name-label" text="Alice" />
    <AttributeOverrides element-name="player-score-label" text="2" />
  </Instance>
  <Instance name="player2" template="PlayerTemplate">
    <AttributeOverrides element-name="player-name-label" text="Bob" />
    <AttributeOverrides element-name="player-score-label" text="1" />
  </Instance>
</UXML>

 

 

3. PlayerWindow.cs파일 생성 (Editor폴더에) 하고 수정 

using UnityEditor;
using UnityEngine.UIElements;

public class PlayerWindow : EditorWindow
{
    [MenuItem("Window/Player Window")]
    public static void ShowWindow()
    {
        EditorWindow w = EditorWindow.GetWindow(typeof(PlayerWindow));

        VisualTreeAsset uiAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/PlayerWindow.uxml");
        VisualElement ui = uiAsset.CloneTree();

        w.rootVisualElement.Add(ui);
    }

    void OnGUI()
    {
        // Nothing to do here, unless you need to also handle IMGUI stuff.
    }
}

 

 

4. 실행하고 결과를 확인 

---

참고

https://docs.unity3d.com/Manual/UIE-LoadingUXMLcsharp.html