Version: 2022.3
言語: 日本語
UXML 要素 LongField
UXML 要素 MaskField

UXML 要素 ListView

ListView は、アイテムのリストにリンクして表示する、垂直方向にスクロール可能な領域です。　

ノート: 水平垂直方向の Scroller 要素は、UI Toolkit の標準的な Scroller です。

ListView を紐づける

複雑なデータを含む ListView を作成し、ビジュアル要素に紐づけたい場合は、以下のようにします。

  • makeItem と bindItem を使用して ListView をデータに紐づけし、適切なコールバックを登録し、必要に応じてリンクされたデータソースを変更します。
  • unbindItem を使用して、ListView の要素を再利用し、データの紐づけを解除します。
  • destroyItem を使用して、登録されているコールバックを消去します。

ListViewと ScrollView の比較

ScrollView コントロールを使用すると、ListView を使用するのと同じ機能を作成することができます。ただし、以下のような場合は、ListView の方が ScrollView よりも効率的です。

  • リストアイテムを入力する
  • アイテムの高さを管理する
  • オブジェクトへの紐づけとその解除
  • ページを埋めるために必要なビジュアル要素の数のインスタンス化する
  • ビジュアル要素をリサイクルし、メモリ処理を最適化する

アイテムの高さを設定

アイテムの高さを利用してコンテンツを駆動する方法を変更するには、VirtualizationMethod を使用します。

  • VirtualizationMethod.FixedHeight すべてのアイテムの高さを同じにします。
  • VirtualizationMethod.DynamicHeight アイテムに様々な高さを持たせることができます。

スクロール速度を制御する

ListView のスクロールスピードをコントロールするには、USS のビルトイン変数 --unity-metrics-single_line-height をオーバーライドします。デフォルト値は 18px です。以下は例です。

:root {
--unity-metrics-single_line-height: 500px;
}

重要: CloneTree() をパラメーターなしで使用する場合、あるいは Instantiate() を使用する場合、行の高さの伝搬を停止する TemplateContainer が追加されます。代わりに CloneTree(root) を使用してください。

例

ListView の使い方を学ぶ最良の方法は、例を試してみることです。

  • 単純な ListView の例を見るには、Unity で Window > UI Toolkit > Samples > List View を選択します。
  • 複雑なリストビューを作成: 複雑なデータを持つ ListView を作成し、ListView をビジュアル要素に紐づけます。
  • ListView でリストに紐づけ: トグルのリストを作成し、そのリストを GameSwitch オブジェクトの基礎のリストに紐づけます。　

C# の基本クラスと名前空間

C# クラス: ListView
名前空間: UnityEngine.UIElements
基本クラス: BaseListView

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

名前 型 説明
binding-path string バインドされるべきターゲットプロパティのパス。
fixed-item-height int リスト内の 1 つのアイテムの高さをピクセル単位で指定します。

コレクションビューを機能させるためには、このプロパティは、virtualizationMethod が FixedHeight に設定されている場合に設定する必要があります。virtualizationMethodが DynamicHeight の場合に設定すると、デフォルトの高さとして機能し、アイテムがレイアウトされる前に、必要なアイテムの数とスクロール可能な領域を計算するのに役立ちます。アイテムの予想される最小の高さに設定する必要があります。
focusable boolean 要素がフォーカス可能である場合は true。
header-title string このプロパティは、showFoldoutHeader を使用する場合の折り込みヘッダーのテキストを制御します。
reorder-mode UIElements.ListViewReorderMode このプロパティは、リストビューのドラッグアンドドロップモードを制御します。

デフォルト値は Simple です。このプロパティが Animated に設定されている場合、Unity はすべてのアイテムの前にドラッグハンドルを追加し、ドラッグアンドドロップ操作でアイテムの並び替えが発生すると、アニメーションでアイテムをプッシュします。複数のアイテムの並べ替えは、Simple ドラッグモードでのみサポートされます。
reorderable boolean ユーザーがリストアイテムをドラッグして順序を変更できるかどうかを示す値を取得または設定します。

デフォルト値は false で、canStartDrag、setupDragAndDrop、dragAndDropUpdate、および handleDrop 実装している場合、他のビューへアイテムをドラッグ、または、他のビューからアイテムをドラッグすることが可能になります。この値を true 設定すると、ユーザーがリスト内のアイテムを並べ替えることができます。
selection-type UIElements.SelectionType 選択タイプを制御します。

デフォルト値は SelectionType.Single です。コレクションビューで選択を無効に設定すると、現在の選択はすべて消去されます。
show-add-remove-footer boolean このプロパティは、リストビューにフッターを加えるかどうかを制御します。

デフォルト値は false です。このプロパティが true に設定されると、Unity はスクロールビューの下にフッターを加えます。このフッターには 2 つのボタンが含まれます。“+” ボタンは、クリックすると、リストビューの最後にアイテムを 1つ追加します。“-” ボタンは、クリックすると選択されているアイテムをすべて削除するか、何も選択されていない場合は最後のアイテムを削除します。
show-alternating-row-backgrounds UIElements.AlternatingRowBackground このプロパティは、コレクションビューの行の背景色を交互に表示するかどうかを制御します。AlternatingRowBackgroundenum から値を取ります。| |show-border|boolean|このプロパティを有効にすると、コレクションビューの周囲に境界線が表示されます。<br /> <br /> true に設定すると、コレクションビューが内部に使用する ScrollView の周囲に境界線が表示されます。| |show-bound-collection-size|boolean|このプロパティは、リストビューがコレクションサイズ (アイテム数) を表示するかどうかを制御します。<br /><br />デフォルト値はtrueです。このプロパティがtrueに設定されている場合、Unity はリストの最初のアイテムとしてコレクションサイズを表示しますが、リストインデックスに含まれる実際のリストアイテムにはしません。リストインデックス 0 を問い合わせると、Unity はコレクションサイズではなく、最初の実際のリストアイテムを返します。showFoldoutHeaderをtrueに設定すると、代わりにコレクションサイズフィールドがヘッダーに含まれます。このプロパティはデータソースが正しくリンクされているかどうかを示すので、ListView のデバッグに使用できます。本番環境では、コレクションサイズが ListView の行アイテムとして表示されることはほとんどありません。<br /> <br />UnityEditor.UIElements.BindingExtensions.Bindを参照してください。| |show-foldout-header|boolean|このプロパティは、リスト ビューに展開または折りたたむことができる折り込み形式でヘッダーを表示するかどうかを制御します。<br /> <br /> デフォルト値はfalseです。 このプロパティがtrueに設定されている場合、Unity はリスト ビューの階層に折り畳みを加え、新しく作成された折り畳みの中にスクロールビューを移動します。 この折り込み部分のテキストは、ListView のheaderTitleプロパティで変更できます。showBoundCollectionSizeがtrueに設定されている場合、フィールドをリストの一部として使用する代わりに、ヘッダーには配列サイズを制御する TextField が含まれます。| |tabindex|int|フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。| |virtualization-method|[UIElements.CollectionVirtualizationMethod](../ScriptReference/UIElements.CollectionVirtualizationMethod.html)|スクロールバーが表示されているときにこのコレクションに使用する仮想化メソッド。CollectionVirtualizationMethodenum から値を取ります。<br /><br />デフォルト値はFixedHeightです。固定の高さを使用する場合は、fixedItemHeightプロパティを指定します。固定の高さの方がパフォーマンスは高くなりますが、コンテンツに対する柔軟性は低くなります。DynamicHeight` を使用する場合、コレクションは実際の高さが計算されるまで待機します。動的な高さはより柔軟ですが、パフォーマンスは低くなります。

この要素は、VisualElement から以下の属性も継承します。

名前 型 説明
content-container string 子要素はそれに追加されますが、通常は要素自体と同じです。
name string この VisualElement の名前。

このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。
picking-mode UIElements.PickingMode mouseEvents または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。
style string この要素のスタイルオブジェクトへの参照。

C# でこのオブジェクトに書き込まれた USS ファイルまたはインラインスタイルから計算されたデータが含まれます。
toolbar string ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。
usage-hints UIElements.UsageHints VisualElement の高レベルの使用パターンを指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切なUsageHints を指定することを考慮することをお勧めしますが、特定の条件下 (例えば、ターゲットプラットフォームのハードウェア制限など) では、いくつかの UsageHints が内部的に無視される可能性があることに留意してください。
view-data-key string ビューデータの永続性 (ツリーの展開状態、スクロール位置、ズームレベルなど) に使用されます。

これは、ビューデータストアからビューデータを保存/ロードするために使用されるキーです。このキーを設定しないと、この VisualElement の永続性が無効になります。

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

C# プロパティ USS セレクター 説明
ussClassName .unity-list-view Unity はこの USS クラスを ListView 要素のすべてのインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての ListView に影響します。
itemUssClassName .unity-list-view__item ListView 要素の item 要素の USS クラス名。

Unity はこの USS クラスを ListView が含む全ての item 要素に加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての item 要素に影響します。
emptyLabelUssClassName .unity-list-view__empty-label ListView が空の時に表示されるラベルの USS クラス名。

Unity は、ListView が空の場合に表示されるラベルにこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての空のラベルに影響します。
reorderableUssClassName .unity-list-view__reorderable 並べ替え可能なアニメーション化された ListView 要素の USS クラス名。

Unity はこの USS クラスを ListView 要素のすべてのインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての ListView に影響します。
reorderableItemUssClassName .unity-list-view__reorderable-item 並べ替え可能なアニメーション化された ListView の item 要素の USS クラス名。

reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のすべての要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての要素に影響します。
reorderableItemContainerUssClassName .unity-list-view__reorderable-item__container 並べ替え可能なアニメーション化された ListView の iten コンテナの USS クラス名。

reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のすべての item コンテナに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての item コンテナに影響します。
reorderableItemHandleUssClassName .unity-list-view__reorderable-handle 並べ替え可能なアニメーション化された ListView のドラッグハンドルの USS クラス名。

reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のドラッグハンドルに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての要素に影響します。
reorderableItemHandleBarUssClassName .unity-list-view__reorderable-handle-bar 並べ替え可能なアニメーション化された ListView のドラッグハンドルバーの USS クラス名。

reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のドラッグハンドルバーに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての要素に影響します。
footerUssClassName .unity-list-view__footer ListView のフッターの USS クラス名。

Unity はこの USS クラスを footer 要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての ListView に影響します。
foldoutHeaderUssClassName .unity-list-view__foldout-header ListView のヘッダーの USS クラス名。

Unity はこの USS クラスを ListVIew の foldout 要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての foldout に影響します。
arraySizeFieldUssClassName .unity-list-view__size-field foldout ヘッダーが有効な場合、ListView の size field の USS クラス名。

showFoldoutHeader が true に設定されている場合、Unity はこの USS クラスを ListView の size field 要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての size field に影響します。
listViewWithHeaderUssClassName .unity-list-view--with-header foldout ヘッダーが有効な場合、ListView のUSS クラス名。

showFoldoutHeader が true に設定されている場合、Unity はこの USS クラスを ListView に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての list に影響します。
listViewWithFooterUssClassName .unity-list-view--with-footer add/remove footer が有効な場合、ListView のUSS クラス名。

showAddRemoveFooter が true に設定されている場合、Unity はこの USS クラスを ListView に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての list に影響します。
scrollViewWithFooterUssClassName .unity-list-view__scroll-view--with-footer add/remove footer が有効な場合、scroll view のUSS クラス名。

showAddRemoveFooter が true に設定されている場合、Unity はこの USS クラスを BaseListView の scroll view に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての list に影響します。
ussClassName .unity-collection-view BaseVerticalCollectionView 要素の USS クラス名。

Unity はこの USS クラスを BaseVerticalCollectionView 要素のすべてのインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
borderUssClassName .unity-collection-view--with-border 境界を持つ BaseVerticalCollectionView 要素の USS クラス名。

インスタンスの BaseVerticalCollectionView.showBorder プロパティが true に設定されている場合、Unity はこの USS クラスを BaseVerticalCollectionView 要素のインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリー内のスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
itemUssClassName .unity-collection-view__item BaseVerticalCollectionView 要素の item 要素の USS クラス名。

Unity はこの USS クラスを BaseVerticalCollectionView が含む全ての item 要素に加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての item 要素に影響します。
dragHoverBarUssClassName .unity-collection-view__drag-hover-bar ドラッグホバーバーの USS クラス名。

Unity は、ユーザーがリスト内のアイテムをドラッグするときに表示されるバーにこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
dragHoverMarkerUssClassName .unity-collection-view__drag-hover-marker 深度を示すために使用されるドラッグホバー円形マーカーの USS クラス名。

Unity は、ユーザーがリスト内のアイテムをドラッグするときに表示されるバーにこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
itemDragHoverUssClassName .unity-collection-view__item--drag-hover ドラッグホバー時に item 要素に適用される USS クラス名。

Unity は、item 要素がドラッグされると、この USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリー内のスタイルシートの横または下に位置するすべての BaseVerticalCollectionView アイテムに影響します。
itemSelectedVariantUssClassName .unity-collection-view__item--selected BaseVerticalCollectionView で選択された item 要素の USS クラス名です。

Unity はこの USS クラスを BaseVerticalCollectionView の選択された要素に加えます。BaseVerticalCollectionView.selectionType プロパティは、0 個、1 個、またはそれ以上の要素を選択できるかを決定します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての BaseVerticalCollectionView アイテムに影響します。
itemAlternativeBackgroundUssClassName .unity-collection-view__item--alternative-background BaseVerticalCollectionView の奇数行の USS クラス名。

BaseVerticalCollectionView.showAlternatingRowBackgrounds プロパティが ContentOnly または All に設定されている場合、Unity はこの USS クラスを BaseVerticalCollectionView 内のすべての奇数番号のアイテムに加えます。showAlternatingRowBackgrounds プロパティがこれらの値のいずれかに設定されている場合、奇数番号の項目は、偶数番号のアイテムとは異なる背景色で表示されます。この USS クラスは、奇数番号のアイテムと偶数番号のアイテムを区別するために使用されます。showAlternatingRowBackgrounds プロパティが None に設定されている場合、USS クラスは追加されず、USS クラスに依存するスタイルや動作は無効になります。
listScrollViewUssClassName .unity-collection-view__scroll-view BaseVerticalCollectionView のスクロールビューの USS クラス名。

Unity はこの USS クラスを BaseVerticalCollectionView のスクロールビューに加えます。このクラスに適用されたスタイルは、ビジュアルツリー内のスタイルシートの横または下にあるすべての BaseVerticalCollectionView スクロールビューに影響します。
disabledUssClassName .unity-disabled ローカルで無効にされた要素の USS クラス名。

また、Inspector や UI Toolkit Debugger の Matching Selectors セクション を使用して、どの USS セレクターが VisualElementのコンポーネントに影響するかを、階層のすべてのレベルで確認することもできます。

その他の参考資料

UXML 要素 LongField
UXML 要素 MaskField
Copyright © 2023 Unity Technologies
优美缔软件（上海）有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。
公安部备案号:
31010902002961