ListView を使わないでリストへバインドする
バージョン: 2023.2 以降
ListView を使わなくても、リストにバインドすることができます。そのためには、各要素をシリアル化されたオブジェクトの配列の項目にバインドし、配列のサイズの値を追跡します。配列のサイズは、元に戻す操作やリセットの操作など、特定の状況下で変化する可能性があります。
この例では、ListView を使わないでリストへバインドする方法を紹介します。
例の概要
この例は、TexturePreviewElements のリストを作成し、そのリストを Texture2D オブジェクトの基礎となるリストにバインドします。
この例で作成する完成したファイルは、こちらの GitHub リポジトリ にあります。
必要な要件
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下の点を理解しておいてください。
リストを含むオブジェクトを作成する
リストを含む C# クラスを作成します。このリストがバインディングのターゲットです。
- Unity で任意のテンプレートでプロジェクトを作成します。
- Project ウィンドウで
bind-to-list-without-ListViewという名前のフォルダーを作成し、ファイルを保存します。 -
TexturePackAsset.csという名前の C# スクリプトを作成し、そのコンテンツを以下のように置き換えます。
using System.Collections.Generic;
using UnityEngine;
namespace UIToolkitExamples
{
[CreateAssetMenu(menuName = "UIToolkitExamples/TexturePackAsset")]
public class TexturePackAsset : ScriptableObject
{
public List<Texture2D> textures;
public void Reset()
{
textures = new() { null, null, null, null };
}
}
}
カスタムコントロールの作成とスタイル設定
2D テクスチャアセットへの参照を表す C# を使用してカスタムコントロールを作成し、USS でスタイルを設定します。
- フォルダーに、
Editorという名前のフォルダーを作成します。 -
Editor フォルダーに、
TexturePreviewElement.csという名前の C# スクリプトを作成します。 -
TexturePreviewElement.csのコンテンツを以下のように置き換えます。
using System;
using UnityEditor.UIElements;
using UnityEngine;
using UnityEngine.UIElements;
using Object = UnityEngine.Object;
namespace UIToolkitExamples
{
[UxmlElement]
public partial class TexturePreviewElement : BindableElement, INotifyValueChanged<Object>
{
public static readonly string ussClassName = "texture-preview-element";
Image m_Preview;
ObjectField m_ObjectField;
Texture2D m_Value;
public TexturePreviewElement()
{
AddToClassList(ussClassName);
// Create a preview image.
m_Preview = new Image();
Add(m_Preview);
// Create an ObjectField, set its object type, and register a callback when its value changes.
m_ObjectField = new ObjectField();
m_ObjectField.objectType = typeof(Texture2D);
m_ObjectField.RegisterValueChangedCallback(OnObjectFieldValueChanged);
Add(m_ObjectField);
styleSheets.Add(Resources.Load<StyleSheet>("texture_preview_element"));
}
void OnObjectFieldValueChanged(ChangeEvent<Object> evt)
{
value = evt.newValue;
}
public void SetValueWithoutNotify(Object newValue)
{
if (newValue == null || newValue is Texture2D)
{
// Update the preview Image and update the ObjectField.
m_Value = newValue as Texture2D;
m_Preview.image = m_Value;
// Notice that this line calls the ObjectField's SetValueWithoutNotify() method instead of just setting
// m_ObjectField.value. This is very important; you don't want m_ObjectField to send a ChangeEvent.
m_ObjectField.SetValueWithoutNotify(m_Value);
}
else throw new ArgumentException($"Expected object of type {typeof(Texture2D)}");
}
public Object value
{
get => m_Value;
// The setter is called when the user changes the value of the ObjectField, which calls
// OnObjectFieldValueChanged(), which calls this.
set
{
if (value == this.value)
return;
var previous = this.value;
SetValueWithoutNotify(value);
using (var evt = ChangeEvent<Object>.GetPooled(previous, value))
{
evt.target = this;
SendEvent(evt);
}
}
}
}
}
-
Editor フォルダーに
Resourcesとい名前のフォルダーを作成します。 -
Resources フォルダーに、
texture_preview_element.ussという名前の StyleSheet を作成し、そのコンテンツを以下のように置き換えます。
.texture-preview-element {
width: 200px;
height: 200px;
}
.texture-preview-element > .unity-image {
flex-grow: 1;
}
カスタムエディターを作成しバインディングを設定する
C# スクリプトでカスタムエディターを作成し、アセットを作成します。
UI の TexturePreviewElements の数が変わるときにテクスチャリストのサイズを変更するには、SetupList() メソッドを呼び出し、シリアル化されたリストのエントリーを走査します。
各 TexturePreviewElement をテクスチャのリストにバインドするには、プロパティ名を TexturePackAsset.textures にして BindProperty() を呼び出します。
-
Editor フォルダーに、
TexturePackEditor.csという名前の C# スクリプトを作成し、そのコンテンツを以下のように置き換えます。
using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine;
using UnityEngine.UIElements;
namespace UIToolkitExamples
{
[CustomEditor(typeof(TexturePackAsset))]
public class TexturePackEditor : Editor
{
[SerializeField]
VisualTreeAsset m_VisualTreeAsset;
public override VisualElement CreateInspectorGUI()
{
var editor = m_VisualTreeAsset.CloneTree();
var container = editor.Q(className: "preview-container");
SetupList(container);
// Watch the array size to handle the list being changed
var propertyForSize = serializedObject.FindProperty(nameof(TexturePackAsset.textures) + ".Array");
propertyForSize.Next(true); // Expand to obtain array size
editor.TrackPropertyValue(propertyForSize, prop => SetupList(container));
editor.Q<Button>("add-button").RegisterCallback<ClickEvent>(OnClick);
return editor;
}
void SetupList(VisualElement container)
{
var property = serializedObject.FindProperty(nameof(TexturePackAsset.textures) + ".Array");
var endProperty = property.GetEndProperty();
property.NextVisible(true); // Expand the first child.
var childIndex = 0;
// Iterate each property under the array and populate the container with preview elements
do
{
// Stop if we've reached the end of the array
if (SerializedProperty.EqualContents(property, endProperty))
break;
// Skip the array size property
if (property.propertyType == SerializedPropertyType.ArraySize)
continue;
TexturePreviewElement element;
// Find an existing element or create one
if (childIndex < container.childCount)
{
element = (TexturePreviewElement)container[childIndex];
}
else
{
element = new TexturePreviewElement();
container.Add(element);
}
element.BindProperty(property);
++childIndex;
}
while (property.NextVisible(false)); // Never expand children.
// Remove excess elements if the array is now smaller
while (childIndex < container.childCount)
{
container.RemoveAt(container.childCount - 1);
}
}
void OnClick(ClickEvent evt)
{
var property = serializedObject.FindProperty(nameof(TexturePackAsset.textures));
property.arraySize += 1;
serializedObject.ApplyModifiedProperties();
}
}
}
-
texture_pack_editor.uxmlという名前の UI ドキュメントを作成し、そのコンテンツを以下のように置き換えます。
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xmlns="UnityEngine.UIElements" example="UIToolkitExamples" editor-extension-mode="True">
<ui:ScrollView>
<ui:VisualElement class="preview-container" style="flex-wrap: wrap; flex-direction: row; justify-content: space-around;" />
</ui:ScrollView>
<ui:Button name="add-button" text="Add" />
</ui:UXML>
- Project ウィンドウで TexturePackEditor.cs を選択します。
- Inspector で texture_pack_editor.uxml を Visual Tree Asset にドラッグします。
バインディングのテスト
- メニューから、Assets > Create > UIToolkitExamples > TexturePackAsset の順に選択します。これで、New Texture Pack Asset という名前のアセットが作成されます。
- Project ウィンドウで、New Texture Pack Asset を選択します。これにより、Inspector に 4 つの TexturePreviewElement 要素が表示されます。
- これらの要素に 2D 画像アセットを割り当てるか、Add ボタンを使用して新しい要素を追加します。Inspector UI で変更を加えると、
TexturePackAsset.texturesオブジェクトのプロパティが変更されます。
ヒント: 一部のテクスチャをインポートし、リスト内の異なるエントリーに割り当てるには、無料の Playground アセットストアプラグイン を試してみてください。