리스트 및 트리 뷰 생성

리스트 및 트리 뷰는 UI 디자인의 일반적인 기능입니다.UI 툴킷을 사용하여 커스텀 에디터 창 또는 런타임 안에 리스트 및 트리 뷰를 생성할 수 있습니다.이 예시는 커스텀 에디터 창 안에 리스트 및 트리 뷰를 생성하는 방법을 보여줍니다.UXML로 리스트 및 트리의 구조를 설정한 다음 C# 스크립트에서 이를 동적으로 채웁니다.

개요 예시

이 예시에서는 다음을 표시하는 4개의 에디터 창을 생성합니다.

• 하나의 열이 있는 행성 리스트
• 두 개의 열이 있는 행성 리스트
• 행성의 트리 뷰
• 두 개의 열이 있는 행성의 트리 뷰

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

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.

• UXML
• UI 빌더
• Column
• ListView
• TreeView
• MultiColumnListView
• MultiColumnTreeView

C#에 데이터 생성

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

1. 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.

2. 프로젝트(Project) 창에서 Editor라는 이름의 폴더를 만듭니다.

3. Editor 폴더에 PlanetsWindow.cs라는 이름의 C# 스크립트를 생성합니다.

4. 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;
   
       // Nested interface that can be either a single planet or a group of planets.
       protected interface IPlanetOrGroup
       {
           public string name
           {
               get;
           }
   
           public bool populated
           {
               get;
           }
       }
   
       // Nested class that represents a planet.
       protected class Planet :IPlanetOrGroup
       {
           public string name
           {
               get;
           }
   
           public bool populated
           {
               get;
           }
   
           public Planet(string name, bool populated = false)
           {
               this.name = name;
               this.populated = populated;
           }
       }
   
       // Nested class that represents a group of planets.
       protected class PlanetGroup :IPlanetOrGroup
       {
           public string name
           {
               get;
           }
   
           public bool populated
           {
               get
               {
                   var anyPlanetPopulated = false;
                   foreach (Planet planet in planets)
                   {
                       anyPlanetPopulated = anyPlanetPopulated || planet.populated;
                   }
                   return anyPlanetPopulated;
               }
           }
   
           public readonly IReadOnlyList<Planet> planets;
   
           public PlanetGroup(string name, IReadOnlyList<Planet> planets)
           {
               this.name = name;
               this.planets = planets;
           }
       }
   
       // Data about planets in our solar system.
       protected static readonly List<PlanetGroup> planetGroups = new List<PlanetGroup>
       {
           new PlanetGroup("Inner Planets", new List<Planet>
           {
               new Planet("Mercury"),
               new Planet("Venus"),
               new Planet("Earth", true),
               new Planet("Mars")
           }),
           new PlanetGroup("Outer Planets", new List<Planet>
           {
               new Planet("Jupiter"),
               new Planet("Saturn"),
               new Planet("Uranus"),
               new Planet("Neptune")
           })
       };
   
       // Expresses planet data as a list of the planets themselves.Needed for ListView and MultiColumnListView.
       protected static List<Planet> planets
       {
           get
           {
               var retVal = new List<Planet>(8);
               foreach (var group in planetGroups)
               {
                   retVal.AddRange(group.planets);
               }
               return retVal;
           }
       }
   
       // Expresses planet data as a list of TreeViewItemData objects.Needed for TreeView and MultiColumnTreeView.
       protected static IList<TreeViewItemData<IPlanetOrGroup>> treeRoots
       {
           get
           {
               int id = 0;
               var roots = new List<TreeViewItemData<IPlanetOrGroup>>(planetGroups.Count);
               foreach (var group in planetGroups)
               {
                   var planetsInGroup = new List<TreeViewItemData<IPlanetOrGroup>>(group.planets.Count);
                   foreach (var planet in group.planets)
                   {
                       planetsInGroup.Add(new TreeViewItemData<IPlanetOrGroup>(id++, planet));
                   }
   
                   roots.Add(new TreeViewItemData<IPlanetOrGroup>(id++, group, planetsInGroup));
               }
               return roots;
           }
       }
   }
   

리스트 뷰 생성

리스트 뷰를 생성하려면 먼저 UI 빌더를 사용하여 ListView UI 컨트롤을 생성합니다.그런 다음 ListView로 커스텀 에디터 창을 생성하고 C# 스크립트에서 리스트의 데이터를 가져올 위치를 정의합니다.마지막으로, UXML 파일을 C# 스크립트에 참조합니다.

1. Editor 폴더에서 오른쪽 클릭합니다.

2. Create > UI Toolkit > Editor Window를 선택합니다.

3. C# 박스에 PlanetsListView를 입력하고 USS 체크박스를 선택 취소합니다.이렇게 하면PlanetsListView.uxml 및 PlanetsListView.cs의 두 개 파일이 생성됩니다.

4. PlanetsListView.uxml을 더블 클릭하여 UI 빌더에서 엽니다.

5. 계층(Hierarchy) 창에서 레이블 컨트롤을 삭제하고 ListView 컨트롤을 추가합니다.

6. 계층 창에서 ListView 컨트롤을 선택합니다.

7. 인스펙터(Inspector) 창에서 Fixed Item Height를 20으로 설정합니다.

8. 변경 사항을 저장합니다.PlanetsListView.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:ListView fixed-item-height="20" />
   </ui:UXML>
   

9. 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>();
   
           // Set ListView.itemsSource to populate the data in the list.
           listView.itemsSource = planets;
   
           // Set ListView.makeItem to initialize each entry in the list.
           listView.makeItem = () => new Label();
   
           // Set ListView.bindItem to bind an initialized entry to a data item.
           listView.bindItem = (VisualElement element, int index) =>
               (element as Label).text = planets[index].name;
       }
   }
   

10. Unity의 프로젝트 창에서 PlanetsListView.cs를 선택한 다음 PlanetsListView.uxml을 인스펙터의 Uxml 필드로 드래그합니다.

11. 메뉴에서 Planets > Standard List를 선택하여 행성의 리스트를 확인합니다.

열이 여러 개 있는 리스트 뷰 생성

열이 여러 개 있는 리스트 뷰를 생성하려면, 먼저 MultiColumnListView UI 컨트롤을 생성하고 UXML 파일에 열 수와 열 제목을 정의합니다.그런 다음 MultiColumnListView로 커스텀 에디터 창을 생성하고 C# 스크립트에서 각 열의 리스트에 대한 데이터를 가져올 위치를 정의합니다.마지막으로, UXML 파일을 C# 스크립트에 참조합니다.

1. Editor 폴더에서 오른쪽 클릭합니다.

2. Create > UI Toolkit > UI Document를 선택하여 UXML 파일을 생성하고 이름을 PlanetsMultiColumnListView.uxml로 지정합니다.

3. 텍스트 편집기에서 PlanetsMultiColumnListView.uxml을 엽니다.

4. PlanetsMultiColumnListView.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:MultiColumnListView fixed-item-height="20">
           <!-- Columns and Column aren't Visual Elements or controls.They are considered attributes of MultiColumnListView.-->
           <ui:Columns>
               <ui:Column name="name" title="Name" width="80" />
               <ui:Column name="populated" title="Populated?" width="80" />
           </ui:Columns>
       </ui:MultiColumnListView>
   </ui:UXML>
   

5. Editor 폴더에 PlanetsMultiColumnListView.cs라는 이름의 C# 파일을 생성합니다.

6. 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>();
   
           // Set MultiColumnListView.itemsSource to populate the data in the list.
           listView.itemsSource = planets;
   
           // For each column, set Column.makeCell to initialize each cell in the column.
           // You can index the columns array with names or numerical indices.
           listView.columns["name"].makeCell = () => new Label();
           listView.columns["populated"].makeCell = () => new Toggle();
   
           // For each column, set Column.bindCell to bind an initialized cell to a data item.
           listView.columns["name"].bindCell = (VisualElement element, int index) =>
               (element as Label).text = planets[index].name;
           listView.columns["populated"].bindCell = (VisualElement element, int index) =>
               (element as Toggle).value = planets[index].populated;
       }
   }
   

7. Unity의 프로젝트 창에서 PlanetsMultiColumnListView.cs를 선택합니다.

8. PlanetsMultiColumnListView.uxml을 인스펙터의 Uxml 필드로 드래그합니다.

9. 메뉴에서 Planets > Multicolumn List를 선택하여 두 개의 열 리스트를 확인합니다.한 열에는 행성 리스트가 있습니다.다른 열에는 행성이 채워져 있는지를 나타내는 토글이 있습니다.

트리 뷰 생성

커스텀 에디터에서 트리 뷰를 생성하려면, 먼저 UXML 파일에서 TreeView UI 컨트롤을 생성합니다.그런 다음 TreeView로 커스텀 에디터 창을 생성하고 C# 스크립트에서 트리 노드의 데이터를 가져올 위치를 정의합니다.마지막으로 UXML 파일을 C# 스크립트에 참조합니다.

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

2. 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>
   

3. Editor 폴더에 PlanetsTreeView.cs라는 이름의 C# 파일을 생성합니다.

4. 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>();
   
           // Call TreeView.SetRootItems() to populate the data in the tree.
           treeView.SetRootItems(treeRoots);
   
           // Set TreeView.makeItem to initialize each node in the tree.
           treeView.makeItem = () => new Label();
   
           // Set TreeView.bindItem to bind an initialized node to a data item.
           treeView.bindItem = (VisualElement element, int index) =>
               (element as Label).text = treeView.GetItemDataForIndex<IPlanetOrGroup>(index).name;
       }
   }
   

5. Unity의 프로젝트 창에서 PlanetsTreeView.cs를 선택합니다.

6. PlanetsTreeView.uxml을 인스펙터의 Uxml 필드로 드래그합니다.

7. 메뉴에서 Planets > Standard Tree를 선택하여 노드별로 그룹화된 두 개의 행성 리스트를 확인합니다.각 노드 옆에는 화살표가 있습니다.화살표를 선택하면 창에 그룹의 행성이 표시됩니다.

열이 여러 개 있는 트리 뷰 생성

커스텀 에디터에서 열이 여러 개 있는 트리 뷰를 생성하려면, 먼저 UXML 파일에서 MultiColumnTreeView UI 컨트롤을 생성하고 열을 정의합니다.그런 다음 MultiColumnTreeView로 커스텀 에디터 창을 생성하고 C# 스크립트에서 각 열의 데이터를 가져올 위치를 정의합니다.마지막으로, UXML 파일을 C# 스크립트에 참조합니다.

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

2. 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">
           <!-- Columns and Column aren't Visual Elements or controls; they are considered attributes of MultiColumnListView.-->
           <ui:Columns>
               <ui:Column name="name" title="Name" width="120" />
               <ui:Column name="populated" title="Populated?" width="80" />
           </ui:Columns>
       </ui:MultiColumnTreeView>
   </ui:UXML>
   

3. Editor 폴더에 PlanetsMultiColumnTreeView.cs라는 이름의 C# 파일을 생성합니다.

4. 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>();
   
           // Call MultiColumnTreeView.SetRootItems() to populate the data in the tree.
           treeView.SetRootItems(treeRoots);
   
           // For each column, set Column.makeCell to initialize each node in the tree.
           // You can index the columns array with names or numerical indices.
           treeView.columns["name"].makeCell = () => new Label();
           treeView.columns["populated"].makeCell = () => new Toggle();
   
           // For each column, set Column.bindCell to bind an initialized node to a data item.
           treeView.columns["name"].bindCell = (VisualElement element, int index) =>
               (element as Label).text = treeView.GetItemDataForIndex<IPlanetOrGroup>(index).name;
           treeView.columns["populated"].bindCell = (VisualElement element, int index) =>
               (element as Toggle).value = treeView.GetItemDataForIndex<IPlanetOrGroup>(index).populated;
       }
   }
   

5. Unity의 프로젝트 창에서 PlanetsMultiColumnTreeView.cs를 선택합니다.

6. PlanetsMultiColumnTreeView.uxml을 인스펙터의 Uxml 필드로 드래그합니다.

7. Planets > Multicolumn Tree를 선택하여 두 개의 열이 있는 리스트를 확인합니다.첫 번째 열에는 노드별로 그룹화된 두 개의 행성 리스트가 있습니다.각 노드 옆에는 화살표가 있습니다.화살표를 선택하면 창에 해당 그룹의 행성과 토글 리스트가 표시됩니다.

추가 리소스

• 복합 리스트 뷰 생성
• ListView 런타임 UI 생성