Version: 2023.2
言語: 日本語
ListView を使ってリストへバインドする
カスタムコントロールをバインドする

ListView を使わないでリストへバインドする

Version: 2023.2+

ListView を使わなくても、リストにバインドすることができます。そのためには、各要素をシリアル化されたオブジェクトの配列の項目にバインドし、配列のサイズの値を追跡します。配列のサイズは、元に戻す操作やリセットの操作など、特定の状況下で変化する可能性があります。

この例では、ListView を使わないでリストへバインドする方法を紹介します。

例の概要

この例は、TexturePreviewElements のリストを作成し、そのリストを Texture2D オブジェクトの基礎となるリストにバインドします。

You can find the completed files that this example creates in this GitHub repository.

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

リストを含むオブジェクトを作成する

リストを含む C# クラスを作成します。このリストがバインディングのターゲットです。

  1. Unity で任意のテンプレートでプロジェクトを作成します。
  2. Project ウィンドウに、bind-to-list-without-ListView という名前のフォルダーを作成し、ファイルを保存します。
  3. TexturePackAsset.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

[!code-cs]

カスタムコントロールの作成とスタイル設定

2D テクスチャアセットへの参照を表すカスタムコントロールを C# で作成し、USS でスタイルを設定します。

  1. フォルダーに Editor という名前のフォルダーを作成します。
  2. Editor フォルダーに、TexturePreviewElement.cs という C# スクリプトを作成します。
  3. TexturePreviewElement.cs の内容を以下に置き換えます。

[!code-cs]

  1. Editor フォルダーに、Resources という名前のフォルダーを作成します。
  2. Resources フォルダーに texture_preview_element.uss という名の StyleSheet を作成し、そのコンテンツを以下に置き換えます。

[!code-css]

カスタムエディターを作成しバインディングを設定する

C# スクリプトでカスタムエディターを作成し、アセットを作成します。

UI の TexturePreviewElements の数が変わるときにテクスチャリストのサイズを変更するには、SetupList() メソッドを呼び出し、シリアル化されたリストのエントリを走査します。

TexturePreviewElement をテクスチャのリストにバインドするには、BindProperty()TexturePackAsset.textures のプロパティ名で呼び出します。

  1. Editor フォルダーに、TexturePackEditor.cs という名の C# スクリプトを作成し、そのコンテンツを以下と置き換えます。

[!code-cs]

  1. texture_pack_editor.uxml という名の UI ドキュメントを作成し、そのコンテンツを以下に置き換えます。

[!code-xml]

  1. Project ウィンドウで TexturePackEditor.cs を選択します。
  2. Inspector で texture_pack_editor.uxmlビジュアルツリーアセット にドラッグします。

バインディングのテスト

  1. メニューから、Assets > Create > UIToolkitExamples > TexturePackAsset を選択してください。これで、 New Texture Pack Asset という名前のアセットが作成されます。
  2. Project ウィンドウで New Texture Pack Asset を選択します。これにより、Inspector に 4 つの TexturePreviewElement 要素が表示されます。
  3. これらの要素に 2D イメージアセットを割り当てるか、 Add (追加) ボタンを使用して新しい要素を追加します。Inspector UI で変更を加えると、TexturePackAsset.textures オブジェクトのプロパティが変更されます。

****ヒント**: いくつかのテクスチャをインポートして、リストの異なるエントリに割り当てるには、この無料の Playground プラグイン を利用してください。

その他の参考資料

ListView を使ってリストへバインドする
カスタムコントロールをバインドする