バージョン: 6000+
ListView コントロールは、 リストの作成に最も効率的な方法です 。この例では、ランタイムバインディングを使用して ListView をリストにバインドする方法を示します。ランタイムバインディングは、ランタイム UI とエディター UI の両方をサポートします。この例ではデモとして、エディターウィンドウに ListView を表示します。
この例では、ListView とリストを作成します。ListView をリストにバインドするには、ListView のバインディングデータソースにリストを含むプロパティを設定します。
この例で作成する完成したファイルは、この GitHub リポジトリ にあります。
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下の点を理解しておいてください。
Item オブジェクトのリストを持つ List オブジェクトの例を作成します。各 Item には、name と enabled プロパティが含まれます。
runtime-binding-listview という名前のフォルダーを作成し、すべてのファイルを保存します。runtime-binding-listview フォルダーに、Scripts という名前のフォルダーを作成し、すべての C# スクリプトを保存します。Scripts フォルダーに、以下の内容の C# スクリプトを作成し ExampleItemObject.cs と命名します。 using System;
using System.Collections.Generic;
using UnityEngine;
public class ExampleItemObject
{
public List<Item> items = new();
public void Reset()
{
items = new List<Item>{
new() { name = "Use Local Server", enabled = false },
new() { name = "Show Debug Menu", enabled = false },
new() { name = "Show FPS Counter", enabled = true },
};
}
public struct Item
{
public bool enabled;
public string name;
}
}
UI Builder でリスト項目のテンプレートを作成します。各項目には Toggle と TextField を追加します。これらを Item オブジェクトの enabled および name プロパティにバインドします。
runtime-binding-listview フォルダーに、UXML という名前のフォルダーを作成します。
UXML フォルダーに、ListViewItem.uxml という名前の UXML ファイルを作成します。
ListViewItem.uxml ファイルをダブルクリックして、UI Builder で開きます。
Hierarchy パネルで、VisualElement を追加します。
VisualElement の子として Toggle を追加します。
VisualElement の子として TextField を追加します。
Toggle と TextField のラベルテキストを削除します。
VisualElement の Flex direction を Row に設定します。
Toggle の Inspector パネルで、以下を行います。
Value を右クリックし、Add binding を選択します。
Add Binding ウィンドウで、Data Source Path を enabled に設定します。
TextField の Inspector パネルで、以下を行います。
name に設定します。UXML ファイルを保存します。完成した UXML ファイルは以下のようになります。
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:VisualElement name="VisualElement" style="flex-direction: row;">
<ui:Toggle>
<Bindings>
<ui:DataBinding property="value" data-source-path="enabled" />
</Bindings>
</ui:Toggle>
<ui:TextField placeholder-text="filler text">
<Bindings>
<ui:DataBinding property="value" data-source-path="name" />
</Bindings>
</ui:TextField>
</ui:VisualElement>
</ui:UXML>
UI Builder で ListView UI を作成し、項目テンプレートを ListViewItem.uxml に設定します。
UXML フォルダーに、UIListView.uxml という名前の UXML ファイルを作成します。
UIListView.uxml ファイルをダブルクリックして、UI Builder で開きます。
Hierarchy パネルで、ListView を追加します。
ListView の Inspector パネルで、以下を行います。
Virtualization Method を Dynamic Height に設定します。
Reorder Mode を Animated に設定します。
Item Template を ListViewItem.uxml に設定します。
Binding Source Selection Mode を Auto Assign に設定します。
Reorderable チェックボックスをオンにします。
Show Add Remove Footer チェックボックスをオンにします。
Header Title を Items に設定します。
Show Foldout Header チェックボックスをオンにします。
UXML ファイルを保存します。完成した UXML ファイルは以下のようになります。
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:ListView binding-source-selection-mode="AutoAssign" item-template="ListViewItem.uxml" />
</ui:UXML>
ListView を含むカスタムエディターウィンドウを作成し、List の items プロパティにバインドします。この例では、C# スクリプトでバインディングソースを設定します。次のように、ListView 要素内の UXML ファイルにバインディングソースを手動で設定することもできます。
<ui:ListView>
<Bindings>
<ui:DataBinding property="itemsSource" data-source-path="items" />
</Bindings>
</ui:ListView>
Scripts フォルダーに、Editor という名前のフォルダーを作成します。Editor フォルダーに、以下の内容の C# スクリプトを作成し ListViewTestWindow.cs と命名します。 using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor;
using UnityEditor.UIElements;
using System.Collections.Generic;
using Unity.Properties;
internal class ListViewTestWindow : EditorWindow
{
// This example sets the itemTemplate and bindingSourceSelectionMode in the UXML file.
// If you want to set them in the C# script, declare an itemLayout field of type VisualTreeAsset
// and then set the "Item Layout" to "ListViewItem.uxml" in the Inspector window.
//[SerializeField] private VisualTreeAsset itemLayout;
[SerializeField] private VisualTreeAsset editorLayout;
ExampleItemObject m_ExampleItemObject;
[MenuItem("Window/ListViewTestWindow")]
static void Init()
{
ListViewTestWindow window = EditorWindow.GetWindow<ListViewTestWindow>();
window.Show();
}
void CreateGUI()
{
m_ExampleItemObject = new();
editorLayout.CloneTree(rootVisualElement);
var listView = rootVisualElement.Q<ListView>();
// This example sets the itemTemplate and bindingSourceSelectionMode in the UXML file.
// You can also set them in the C# script like the following:
// listView.itemTemplate = itemLayout;
// listView.bindingSourceSelectionMode = BindingSourceSelectionMode.AutoAssign;
// Set the binding source to the ExampleItemObject instance.
listView.dataSource = m_ExampleItemObject;
// Set the itemsSource binding to the items property of the List object.
// You can also set the itemsSource binding manually in the UXML file and comment out this line.
// Refer to the next section for how to set binding in UXML.
listView.SetBinding("itemsSource", new DataBinding() {dataSourcePath = new PropertyPath("items")});
m_ExampleItemObject.Reset();
}
}
エディターウィンドウには、ExampleItemObject.cs で定義された項目にバインドされた ListView が表示されます。Item の enabled または name プロパティの値を ExampleItemObject.cs で更新すると、変更が自動的に ListView に反映されます。