Buat daftar dan pemandangan pohon

Daftar dan tampilan pohon adalah fitur umum dalam desain UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary. Anda dapat menggunakan UI Toolkit untuk membuat daftar dan tampilan pohon di dalam jendela editor kustom atau runtime. Contoh ini menunjukkan bagaimana membuat daftar dan pandangan pohon di dalam jendela editor kustom. Anda mengkonfigurasi struktur daftar dan pohon dengan UXML dan kemudian secara dinamis mengisinya di skrip C # Anda.

Contoh gambaran

Contoh ini menciptakan empat jendela Editor yang menampilkan berikut:

• Daftar planet dengan kolom tunggal
• Daftar planet dengan dua kolom
• Pemandangan pohon planet
• Pemandangan pohon planet dengan dua kolom

Anda dapat menemukan file yang lengkap yang contoh ini menciptakan di Repositori GitHub ini.

Prerequisites

Panduan ini adalah untuk pengembang yang akrab dengan Unity, UI Toolkit, dan C # scripting.

Panduan ini merujuk konsep berikut:

• UXML
• Pembuat UI
• Column
• ListView
• TreeView
• MultiColumnListView
• MultiColumnTreeView

Buat data di C#

Buat data dalam skrip C# yang terdiri dari dua kelompok planet dan root nodesPerubahan hierarki animasi yang memungkinkan Unity untuk menetapkan konsistensi antara klip Animasi untuk model generik. Hal ini juga memungkinkan Unity untuk benar campuran antara Animasi yang belum diberi wewenang “di tempat” (yang ada, di mana seluruh Model bergerak posisi dunia sambil memikat). More info
Lihat di Glossary untuk tampilan pohon.

1. Buat proyek di Unity dengan template apa pun.

2. Pada Project windowJendela yang menunjukkan isi folder Assets (Project tab) More info
   Lihat di Glossary Anda, buat folder bernama Editor.

3. Di folder Editor, buat skrip C# bernama PlanetsWindow.cs.

4. Ganti isi PlanetsWindow.cs dengan berikut:

   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;
           }
       }
   }
   

Buat tampilan daftar

Untuk membuat tampilan daftar, pertama gunakan pembuat UI untuk membuat kontrol UI ListView. Kemudian, buat jendela editor kustom dengan ListView dan menentukan di mana untuk mendapatkan data untuk daftar dalam skrip C #. Akhirnya, referensi file UXML ke skrip C#.

1. Klik kanan pada folder Editor.

2. Pilih Create > UI Toolkit > Editor Window.

3. Dalam kotak C#, masukkan PlanetsListView dan menghapus kotak centang AS. Ini menciptakan dua file: PlanetsListView.uxml dan PlanetsListView.cs.

4. Double-klik PlanetsListView.uxml untuk membukanya di UI Builder.

5. Di jendela Hierarchy, hapus kontrol Label dan tambahkan kontrol ListView.

6. Pilih kontrol ListView di jendela Hierarchy.

7. Di jendela InspectorJendela Unity yang menampilkan informasi tentang Pengaturan GameObject yang dipilih saat ini, aset atau proyek, memungkinkan Anda untuk memeriksa dan mengedit nilai. More info
   Lihat di Glossary, set Fixed Item Height ke 20.

8. Simpan perubahan Anda. PlanetsListView.uxml Anda harus terlihat seperti berikut:

   <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. Ganti isi PlanetsListView.cs dengan berikut:

   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. Dalam Unity, pilih PlanetsListView.cs di jendela Proyek, lalu tarik PlanetsListView.uxml ke bidang Uxml di Inspector.

11. Dari menu, pilih Planets > Standard List untuk melihat daftar planet.

Buat tampilan daftar dengan beberapa kolom

Untuk membuat tampilan daftar dengan beberapa kolom, pertama membuat kontrol UI MultiColumnListView, dan menentukan jumlah kolom dan judul kolom dalam file UXML. Kemudian buat jendela editor kustom dengan MultiColumnListView dan menentukan di mana untuk mendapatkan data untuk daftar di setiap kolom dalam skrip C#. Akhirnya, referensi file UXML ke skrip C#.

1. Klik kanan pada folder Editor.

2. Pilih Create > UI Toolkit > UI Document untuk membuat file UXML dan nama sebagai PlanetsMultiColumnListView.uxml.

3. Buka PlanetsMultiColumnListView.uxml dalam editor teks.

4. Ganti isi PlanetsMultiColumnListView.uxml dengan berikut:

   <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. Dalam folder Editor, buat file C# bernama PlanetsMultiColumnListView.cs.

6. Ganti isi PlanetsMultiColumnListView.cs dengan berikut:

   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. Dalam Unity, pilih PlanetsMultiColumnListView.cs di jendela Proyek.

8. Seret PlanetsMultiColumnListView.uxml ke bidang Uxml di Inspector.

9. Dari menu, pilih Planets > Multicolumn List untuk melihat daftar dua kolom. Satu kolom memiliki daftar planet. Kolom lain memiliki toggles yang menunjukkan apakah planet ini diisi.

Buat tampilan pohon

Untuk membuat tampilan pohon dalam editor kustom, pertama-tama membuat kontrol UI TreeView dalam file UXML. Kemudian buat jendela editor kustom dengan TreeView dan menentukan di mana untuk mendapatkan data untuk node pohon skrip C #. Akhirnya referensi file UX ke skrip C#.

1. Dalam folder Editor, buat file UXML bernama PlanetsTreeView.uxml.

2. Ganti isi PlanetsTreeView.uxml dengan berikut:

   <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. Dalam folder Editor, buat file C# bernama PlanetsTreeView.cs.

4. Ganti isi PlanetsTreeView.cs dengan berikut:

   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. Dalam Unity, pilih PlanetsTreeView.cs di jendela Proyek.

6. Seret PlanetsTreeView.uxml ke bidang Uxml di Inspector.

7. Dari menu, pilih Planets > Standard Tree untuk melihat dua daftar planet yang dikelompokkan oleh node. Setiap node memiliki panah di sebelahnya. Jika Anda memilih panah, jendela menunjukkan planet dalam kelompok.

Buat tampilan pohon dengan beberapa kolom

Untuk membuat tampilan pohon dengan beberapa kolom di editor kustom, pertama menciptakan kontrol UI MultiColumnTreeView dan menentukan kolom dalam file UXML. Kemudian buat jendela editor kustom dengan MultiColumnTreeView dan menentukan di mana untuk mendapatkan data untuk setiap kolom dalam skrip C #. Akhirnya, referensi file UXML ke skrip C#.

1. Dalam folder Editor, buat file UXML bernama PlanetsMultiColumnTreeView.uxml.

2. Ganti isi PlanetsMultiColumnTreeView.uxml dengan berikut:

   <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. Dalam folder Editor, buat file C# bernama PlanetsMultiColumnTreeView.cs.

4. Ganti isi PlanetsMultiColumnTreeView.cs dengan berikut:

   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. Dalam Unity, pilih PlanetsMultiColumnTreeView.cs di jendela Proyek.

6. Seret PlanetsMultiColumnTreeView.uxml ke bidang Uxml di Inspector.

7. Pilih Planets > Multicolumn Tree untuk melihat daftar dengan dua kolom. Kolom pertama memiliki dua daftar planet yang dikelompokkan oleh node. Setiap node memiliki panah di sebelahnya. Jika Anda memilih panah, jendela menunjukkan daftar planet dan toggles dalam kelompok itu.

Sumber daya tambahan

• Controls
• Kontrol referensi