MultiColumnTreeView
MultiColumnTreeView は、複数の列を持つ表形式やグリッド形式のデータを表示するのによく使用される UI コントロールです。構造化された形式でデータを表示するには、MultiColumnTreeView を使用します。各行はアイテムまたはエントリーを表し、各列はそのアイテムの特定の属性またはプロパティを表します。
MultiColumnTreeView を作成する
UXML と C# で MultiColumnTreeView を作成できます。以下の C# の例では、2 つの列を持つ MultiColumnTreeView を作成します。
var multiColumnTreeView = new MultiColumnTreeView();
multiColumnTreeView.columns.Add(new Column { title = "Name", width = 20 });
multiColumnTreeView.columns.Add(new Column { title = "Power", width = 80 });
コレクションビューの更新
コレクションビューを更新するには、通常、RefreshItems または RefreshItem メソッドを呼び出します。ただし、以下の場合は、代わりに Rebuild を呼び出してコレクションビューを更新します。
-
データソースの型を変更する場合 (
List<float>からList<Vector3>への変更など)。 -
makeItemまたはdestroyItemに変更を加える場合。
ノート: Rebuild を呼び出すと、コレクションビューが完全に再構築されますが、高コストになる可能性があります。RefreshItems または RefreshItem を呼び出すと、コレクションビューは更新されるだけであるため、コストが抑えられます。
MultiColumnTreeView をデータにバインドする
MultiColumnTreeView をデータソースにバインドして、指定したデータに基づいて行と列に自動的に入力できます。例については、リストビューとツリービューの作成 を参照してください。
MultiColumnTreeView をソートする
デフォルトのアルゴリズムを使用して MultiColumnTreeView のソートを有効にすることができます。デフォルトのソート処理が遅くて要件を満たしていない場合は、カスタムアルゴリズムを実装できます。
ソートを有効にしたら、1 つの列を基準にソートする場合は、その列のヘッダーをクリックします。複数の列をソートするには、Ctrl キー (macOS の場合は Cmd) を押しながら列をクリックします。ソートを無効にするには、Shift キーを押しながら列をクリックします。
デフォルトソート
デフォルトのアルゴリズムを使用したソートを有効にするには、sortingMode 属性を ColumnSortingMode.Default に設定し、ソース内のインデックスで 2 つのアイテムを比較する Column.comparison を実装します。
例については、MultiColumnTreeView のデフォルトソート例 を参照してください。
カスタムソート
カスタムソートを実装するには、sortingMode 属性を ColumnSortingMode.Custom に設定し、columnSortingChanged コールバックを実装します。コールバックでは、sortColumns を使用してリストを適宜並べ替え、アイテムのソースが更新されたら RefreshItems() をトリガーします。
sortColumns 属性は、ソートされた列の現在の状態です。ソートされた順に列が表示されます。列 1、列 2、列 3 の順にソートする場合、sortedColumns リストは [1, 2, 3] になります。列 3、列 2、列 1 の順にソートする場合、sortedColumns リストは [3, 2, 1] になります。
MultiColumnTreeView のドラッグアンドドロップ操作を実装する
ドラッグアンドドロップは、UI デザインにおける一般的な機能です。ドラッグアンドドロップ操作を実装するには、以下のメソッドをオーバーライドします。
-
canStartDragをオーバーライドして項目のドラッグを有効にします。 -
setupDragAndDropをオーバーライドしてドラッグする項目を設定します。 -
dragAndDropUpdateをオーバーライドして項目状態の変更を取得します。ドラッグ位置やその他の条件に基づいて、特定のアクションを実行できます。 -
handleDropをオーバーライドしてドラッグアンドドロップ動作をコントロールします。
ドラッグアンドドロップの操作中に、ドラッグによるアイテムの並べ替えを有効にできます。有効にするには、UI Builder、UXML、C# で reorderable 属性を true に設定します。
例についてはウィンドウ間でのドラッグアンドドロップリストとツリービューの作成を参照してください。
MultiColumnTreeView に関するよくある質問
MultiColumnTreeView コントロールに関するよくある質問は以下のとおりです。
画面に表示される行のインデックスを取得できますか?
このための専用 API はありません。bindItem コールバックと unbindItem コールバックを使用して、これらのインデックスを追跡できます。
ビューに表示されている行のリストを取得できますか?
このための専用 API はありません。UQuery を使用して、関心がある要素を取得できます。
ビューコントローラーのオーバーライドされた関数は base.Method を必ず呼び出す必要がありますか?
このメソッドは、デフォルト動作を拡張する場合にのみ呼び出します。
行にトグルを加えました。行を選択してもその行に飛ばないのはなぜですか?
デフォルトでは、行が選択されるのは、マウスダウンイベントが行のコンテンツによって消費されない場合に限られます。この場合、トグルはイベントの伝播を停止します。これを修正するには、SetSelection を呼び出すトグルに TrickleDown を持つ PointerDownEvent コールバックを登録します。
ビューでの選択がユーザーによって変更されたときには、コールバックをどのようにして受けとればよいでしょうか?
必要に応じて、selectedIndicesChanged コールバックを使用して、インデックスに基づいてデータを取得することをお勧めします。selectionChanged を使用することもできますが、値型データの場合は、オブジェクトのリストが返され、ボックス化割り当てが生じる可能性があることに注意してください。
ID からインデックスへの変換やその逆方向の変換はどのようにしますか。
BaseTreeViewController.GetIndexForId と BaseTreeViewController.GetIdForIndex を使用します。
水平の MultiColumnTreeView を作成できますか。
MultiColumnTreeView コントロールは水平のレイアウトと仮想化をサポートしません。要素を水平にレイアウトするには、ScrollView と flex-direction: row を使用することをお勧めします。
例
- リストビューとツリービューの作成: ListView、TreeView、MultiColumnListView、MultiColumnTreeView を使用して、リストビューとツリービューを作成します。
C# 基本クラスと名前空間
C# クラス: MultiColumnTreeView
名前空間: UnityEngine.UIElements
基本クラス: BaseTreeView
メンバー UXML 属性
この要素は以下のメンバー属性を持ちます。
| 名前 | 型 | 説明 |
|---|---|---|
columns |
UIElements.Columns+UxmlSerializedData |
複数の列を持つヘッダーの列のコレクション。 |
sort-column-descriptions |
UIElements.SortColumnDescriptions+UxmlSerializedData |
デフォルトでソートされている列のコレクション。 |
sorting-enabled |
boolean |
複数の列を持つヘッダーでソートが有効化されているかどうか。このプロパティは廃止される予定です。代わりに sortingMode を使用します。 |
sorting-mode |
UIElements.ColumnSortingMode |
列のソート方法を示します。ソートを有効にするには、ColumnSortingMode.Default または ColumnSortingMode.Custom に設定します。Default モードは、MultiColumnController が提供するソートアルゴリズムを使用して、インデックスを処理します。columnSortingChanged イベントに応答して、独自のソートを Custom モードで実装することもできます。ノート: ソートされた列が 1 つ以上ある場合、並べ替えは一時的に無効になります。 |
継承された UXML 属性
この要素は基本クラスから以下の属性を継承します。
| 名前 | 型 | 説明 |
|---|---|---|
auto-expand |
boolean |
true の場合、アイテムはツリービューに追加されるときに自動的に展開されます。 |
binding-path |
string |
バインドされるべきターゲットプロパティのパス。 |
fixed-item-height |
float |
リスト内の 1 つのアイテムの高さ (ピクセル単位)。 コレクションビューが機能するように、 virtualizationMethod を FixedHeight に設定する場合はこのプロパティを設定する必要があります。virtualizationMethod を DynamicHeight に設定する場合は、このプロパティがデフォルトの高さとして機能し、アイテムを配置する前に、必要なアイテム数とスクロール可能な領域を計算するのに役立ちます。アイテムの高さの想定最小値に設定する必要があります。 |
focusable |
boolean |
要素がフォーカス可能である場合は true。 |
reorderable |
boolean |
ユーザーがリストアイテムをドラッグして並べ替えることができるかどうかを示す値を取得または設定します。 デフォルト値は false で、canStartDrag、setupDragAndDrop、dragAndDropUpdate、handleDrop を実装するときに、ユーザーが他のビューとの間でアイテムをドラッグできるようにします。この値を true に設定すると、ユーザーはリスト内のアイテムを並べ替えることができます。 |
selection-type |
UIElements.SelectionType |
選択タイプを制御します。 デフォルト値は SelectionType.Single です。コレクションビューを設定して選択を無効にすると、現在の選択がすべてクリアされます。 |
show-alternating-row-backgrounds |
UIElements.AlternatingRowBackground |
このプロパティは、コレクションビューの行の背景色を変えるかどうかを制御します。AlternatingRowBackground enum から値を取得します。 |
show-border |
boolean |
このプロパティを有効にすると、コレクションビューの周囲に境界線を表示します。 true に設定すると、コレクションビューが内部で使用するスクロールビューの周囲に境界線が表示されます。 |
tabindex |
int |
フォーカスリングでフォーカス可能なものをソートするために使用される整数。0 以上の値である必要があります。 |
virtualization-method |
UIElements.CollectionVirtualizationMethod |
スクロールバーが表示されているときにこのコレクションに使用する仮想化メソッド。CollectionVirtualizationMethod enum から値を取得します。デフォルト値は FixedHeight です。固定の高さを使用する場合は、fixedItemHeight プロパティを指定します。高さを固定するとパフォーマンスは向上しますが、コンテンツの柔軟性は低下します。DynamicHeight を使用する場合、コレクションは実際の高さが計算されるまで待機します。動的な高さは柔軟性に優れていますが、パフォーマンスは劣ります。 |
この要素は VisualElement から以下の属性も継承します。
| 名前 | 型 | 説明 |
|---|---|---|
content-container |
string |
子要素はそれに追加されますが、通常は要素自体と同じです。 |
data-source |
Object |
この VisualElement にデータソースを割り当て、継承されたデータソースをオーバーライドします。このデータソースはすべての子に継承されます。 |
data-source-path |
string |
データソースから値へのパス。 |
data-source-type |
System.Type |
この VisualElement に割り当て可能なデータソースのタイプ。 この情報は、設計時に有効なデータソースを指定できない場合に、データソースパスフィールドを補完するヒントとして UI Builder でのみ使用されます。 |
language-direction |
UIElements.LanguageDirection |
要素のテキストの向きを示します。値は要素の子に伝播されます。 languageDirection を RTL に設定すると、テキストの反転と改行/折り返しの適切な処理による、右から左へ (RTL) の基本サポートが追加されます。ただし、包括的な RTL サポートは提供されません。これには、文字の並べ替えを含むテキストシェーピングと OpenType フォント機能のサポートが必要になるためです。将来のアップデートでは、言語、スクリプト、フォント機能の仕様を処理するための追加の API を含む、包括的な RTL サポートが予定されています。 このプロパティの RTL 機能を拡張するには、Unity Asset Store で入手可能なサードパーティ製のプラグインを探し、 ITextElementExperimentalFeatures.renderedText を利用してください。 |
name |
string |
この VisualElement の名前。 このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。 |
picking-mode |
UIElements.PickingMode |
mouseEvents または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。 |
style |
string |
VisualElement スタイルの値を設定します。 |
tooltip |
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-tree-view |
TreeView 要素の USS クラス名。 Unity はこの USS クラスを TreeView 要素のすべてのインスタンスに追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのツリービューに影響します。 |
itemUssClassName |
.unity-tree-view__item |
TreeView アイテム要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのアイテム要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemToggleUssClassName |
.unity-tree-view__item-toggle |
TreeView アイテムトグル要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのアイテムトグル要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemIndentsContainerUssClassName |
.unity-tree-view__item-indents |
TreeView インデントコンテナ要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのインデントコンテナ要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemIndentUssClassName |
.unity-tree-view__item-indent |
TreeView インデント要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのインデント要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemContentContainerUssClassName |
.unity-tree-view__item-content |
TreeView アイテムコンテナ要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのアイテムコンテナ要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
ussClassName |
.unity-collection-view |
BaseVerticalCollectionView 要素の USS クラス名。 Unity はこの USS クラスを BaseVerticalCollectionView 要素のすべてのインスタンスに追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての BaseVerticalCollectionView に影響します。 |
borderUssClassName |
.unity-collection-view--with-border |
境界線を持つ BaseVerticalCollectionView 要素の USS クラス名。 Unity は、BaseVerticalCollectionView 要素のインスタンスの BaseVerticalCollectionView.showBorder プロパティが true に設定されている場合に、この USS クラスをインスタンスに追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての BaseVerticalCollectionView に影響します。 |
itemUssClassName |
.unity-collection-view__item |
BaseVerticalCollectionView 要素内のアイテム要素の USS クラス名。 Unity はこの USS クラスを BaseVerticalCollectionView にあるすべてのアイテム要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテム要素に影響します。 |
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 |
ドラッグホバー時にアイテム要素に適用される USS クラス名。 Unity は、ドラッグ中のアイテム要素にこの USS クラスを追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての BaseVerticalCollectionView アイテムに影響します。 |
itemSelectedVariantUssClassName |
.unity-collection-view__item--selected |
BaseVerticalCollectionView 内で選択されたアイテム要素の USS クラス名。 Unity はこの USS クラスを BaseVerticalCollectionView の選択された要素すべてに追加します。 BaseVerticalCollectionView.selectionType プロパティは、選択できる要素の数が 0 個、1 個、または複数かを決定します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての BaseVerticalCollectionView アイテムに影響します。 |
itemAlternativeBackgroundUssClassName |
.unity-collection-view__item--alternative-background |
BaseVerticalCollectionView 内の奇数行の USS クラス名。 Unity は、 BaseVerticalCollectionView.showAlternatingRowBackgrounds プロパティが ContentOnly または All に設定されている場合に、BaseVerticalCollectionView 内のすべての奇数アイテムにこの USS クラスを追加します。showAlternatingRowBackgrounds プロパティがこれらの値のいずれかに設定されている場合、奇数のアイテムは偶数のアイテムとは異なる背景色で表示されます。この USS クラスは、奇数のアイテムと偶数のアイテムを区別するために使用されます。showAlternatingRowBackgrounds プロパティを None に設定すると、USS クラスは追加されず、それに依存するスタイルや動作は無効になります。 |
listScrollViewUssClassName |
.unity-collection-view__scroll-view |
BaseVerticalCollectionView のスクロールビューの USS クラス名。 Unity はこの USS クラスを BaseVerticalCollectionView のスクロールビューに追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての BaseVerticalCollectionView スクロールビューに影響します。 |
disabledUssClassName |
.unity-disabled |
ローカルで無効にされた要素の USS クラス名。 |
Inspector または UI Toolkit Debugger の Matching Selectors セクション を使用して、階層のすべてのレベルで VisualElement のコンポーネントに影響する USS セレクターを確認することもできます。