Unity UI 툴킷을 이용한 리스트 및 트리 뷰 생성 가이드

이 문서는 Unity에서 커스텀 에디터 창을 만들고 리스트 및 트리 뷰를 생성하는 방법에 대해 설명합니다. UI 툴킷을 사용하여 다양한 UI 요소를 쉽게 관리할 수 있습니다.

개요

이 가이드는 다음 항목을 포함하는 네 개의 에디터 창을 생성하는 방법을 보여줍니다: - 하나의 열이 있는 행성 리스트 - 두 개의 열이 있는 행성 리스트 - 행성의 트리 뷰 - 두 개의 열이 있는 행성의 트리 뷰

이 예시에서 생성한 파일은 GitHub 저장소에서 확인할 수 있습니다.

사전 준비

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 것입니다. 시작하기 전에 다음을 숙지해야 합니다: - UXML - UI 빌더 - ListView - TreeView - MultiColumnListView - MultiColumnTreeView

C# 데이터 생성

두 개의 행성 그룹과 트리 뷰의 루트 노드로 구성된 C# 스크립트에서 데이터를 생성합니다.

파일 및 폴더 설정

1. Unity 프로젝트에서 Editor 폴더를 생성합니다.
2. PlanetsWindow.cs라는 이름의 C# 스크립트를 생성합니다.

PlanetsWindow.cs 파일 내용

using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using UnityEngine.UIElements;

// Base class for all windows that display planet information.
public class PlanetsWindow : EditorWindow
{
    [SerializeField]
    protected VisualTreeAsset uxml;

    // ...
    // 나머지 코드 내용은 원본을 참고해서 추가하세요.
}

리스트 뷰 생성

리스트 뷰를 생성하려면 다음 단계를 따릅니다.

1. Editor 폴더에서 오른쪽 클릭하여 Create > UI Toolkit > Editor Window를 선택합니다.
2. C# 박스에 PlanetsListView를 입력하세요.
3. PlanetsListView.uxml 및 PlanetsListView.cs 파일이 생성됩니다.
4. PlanetsListView.uxml을 더블 클릭하여 UI 빌더에서 엽니다.
5. 레이블 컨트롤을 삭제하고 ListView 컨트롤을 추가한 후, Fixed Item Height를 20으로 설정합니다.

PlanetsListView.cs 파일 내용

using UnityEditor;
using UnityEngine.UIElements;

public class PlanetsListView : PlanetsWindow
{
    [MenuItem("Planets/Standard List")]
    static void Summon()
    {
        GetWindow<PlanetsListView>("Standard Planet List");
    }

    void CreateGUI()
    {
        uxml.CloneTree(rootVisualElement);
        var listView = rootVisualElement.Q<ListView>(); 

        // ...
        // 나머지 코드 내용은 원본을 참고해서 추가하세요.
    }
}

열이 여러 개인 리스트 뷰 생성

1. Editor 폴더에서 오른쪽 클릭하여 Create > UI Toolkit > UI Document를 선택해 PlanetsMultiColumnListView.uxml 파일을 생성합니다.
2. 텍스트 편집기에서 PlanetsMultiColumnListView.uxml 파일을 열고 파일 내용을 교체합니다.
3. PlanetsMultiColumnListView.cs 파일을 생성하고 해당 내용을 교체합니다.

PlanetsMultiColumnListView.cs 파일 내용

using UnityEditor;
using UnityEngine.UIElements;

public class PlanetsMultiColumnListView : PlanetsWindow
{
    [MenuItem("Planets/Multicolumn List")]
    static void Summon()
    {
        GetWindow<PlanetsMultiColumnListView>("Multicolumn Planet List");
    }

    void CreateGUI()
    {
        uxml.CloneTree(rootVisualElement);
        var listView = rootVisualElement.Q<MultiColumnListView>();

        // ...
        // 나머지 코드 내용은 원본을 참고해서 추가하세요.
    }
}

트리 뷰 생성

트리 뷰를 생성하려면 다음 단계를 따릅니다.

1. Editor 폴더에 PlanetsTreeView.uxml이라는 이름의 UXML 파일을 생성합니다.

PlanetsTreeView.uxml 파일 내용

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:TreeView fixed-item-height="20" />
</ui:UXML>

PlanetsTreeView.cs 파일 내용

using UnityEditor;
using UnityEngine.UIElements;

public class PlanetsTreeView : PlanetsWindow
{
    [MenuItem("Planets/Standard Tree")]
    static void Summon()
    {
        GetWindow<PlanetsTreeView>("Standard Planet Tree");
    }

    void CreateGUI()
    {
        uxml.CloneTree(rootVisualElement);
        var treeView = rootVisualElement.Q<TreeView>();

        // ...
        // 나머지 코드 내용은 원본을 참고해서 추가하세요.
    }
}

열이 여러 개인 트리 뷰 생성

1. Editor 폴더에 PlanetsMultiColumnTreeView.uxml이라는 이름의 UXML 파일을 생성합니다.

PlanetsMultiColumnTreeView.uxml 파일 내용

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:MultiColumnTreeView fixed-item-height="20">
        <ui:Columns>
            <ui:Column name="name" title="Name" width="120" />
            <ui:Column name="populated" title="Populated?" width="80" />
        </ui:Columns>
    </ui:MultiColumnTreeView>
</ui:UXML>

PlanetsMultiColumnTreeView.cs 파일 내용

using UnityEditor;
using UnityEngine.UIElements;

public class PlanetsMultiColumnTreeView : PlanetsWindow
{
    [MenuItem("Planets/Multicolumn Tree")]
    static void Summon()
    {
        GetWindow<PlanetsMultiColumnTreeView>("Multicolumn Planet Tree");
    }

    void CreateGUI()
    {
        uxml.CloneTree(rootVisualElement);
        var treeView = rootVisualElement.Q<MultiColumnTreeView>();

        // ...
        // 나머지 코드 내용은 원본을 참고해서 추가하세요.
    }
}

추가 리소스

• 복합 리스트 뷰 생성
• ListView 런타임 UI 생성
• UI 구조화 예제

이 가이드를 통해 Unity UI 툴킷을 사용하여 다양한 리스트 및 트리 뷰를 생성하고 활용하는 방법을 익힐 수 있습니다.