ツリービューを使用すると、階層データを系統樹のような構造で表示できます。これは強力で柔軟なコントロールであり、一般に親子関係やネスト構造を持つデータを表示するために使用されます。
項目の単純なリスト (階層ツリーではない) が必要な場合は、ListView コントロールの使用を検討してください。
ツリービューは、UI Builder、UXML、C# で作成できます。以下の例では基本的なツリービューを作成します。
var treeView = new TreeView();
コレクションビューを更新するには、通常、RefreshItems または RefreshItem メソッドを呼び出します。ただし、以下の場合は、代わりに Rebuild を呼び出してコレクションビューを更新します。
List<float> から List<Vector3> への変更など)。makeItem または destroyItem に変更を加える場合。
ノート: Rebuild を呼び出すと、コレクションビューが完全に再構築されますが、高コストになる可能性があります。RefreshItems または RefreshItem を呼び出すと、コレクションビューは更新されるだけであるため、コストが抑えられます。
ツリービューをデータソースにバインドできます。データソースは、オブジェクトのリストまたは文字列のリストです。
以下の例では、ツリービューをカスタムタイプにバインドします。
treeView.makeItem = () => new VisualElement();
treeView.bindItem = (i) =>
{
var c = treeView.GetItemDataForIndex<MyCustomType>(i);
};
ノート: 上の例では、TreeView.bindItem がインデックスを受け取ります。(ID ではなく) インデックスを GetItemDataForIndex<T> とともに使用する必要があります。
ドラッグアンドドロップは、UI デザインにおける一般的な機能です。ドラッグアンドドロップ操作を実装するには、以下のメソッドをオーバーライドします。
canStartDrag をオーバーライドして項目のドラッグを有効にします。setupDragAndDrop をオーバーライドしてドラッグする項目を設定します。dragAndDropUpdate をオーバーライドして項目状態の変更を取得します。ドラッグ位置やその他の条件に基づいて、特定のアクションを実行できます。handleDrop をオーバーライドしてドラッグアンドドロップ動作をコントロールします。ドラッグアンドドロップの操作中に、ドラッグによるアイテムの並べ替えを有効にできます。有効にするには、UI Builder、UXML、C# で reorderable 属性を true に設定します。
例についてはウィンドウ間でのドラッグアンドドロップリストとツリービューの作成を参照してください。
ツリービューの階層を設定するには、T がツリーのデータの種類である TreeViewItemData<T> を宣言し、SetRootItems API でソースを設定します。例えば、以下の UXML 構造体があるとします。
<UXML xmlns="UnityEngine.UIElements">
<TreeView class="the-uxml-treeview" fixed-item-height="20" />
</UXML>
ツリービューの階層は以下のように設定できます。
/// <sample>
// Create some list of data, here simply numbers in a few foldouts
var items = new List<TreeViewItemData<string>>(10);
for (var i = 0; i < 10; i++)
{
var itemIndex = i * 10 + i;
var treeViewSubItemsData = new List<TreeViewItemData<string>>(10);
for (var j = 0; j < 10; j++)
treeViewSubItemsData.Add(new TreeViewItemData<string>(itemIndex + j + 1, $"Data {i+1}-{j+1}"));
var treeViewItemData = new TreeViewItemData<string>(itemIndex, $"Data {i+1}", treeViewSubItemsData);
items.Add(treeViewItemData);
};
// The "makeItem" function will be called as needed
// when the TreeView needs more items to render
Func<VisualElement> makeItem = () => new Label();
// As the user scrolls through the list, the TreeView object
// will recycle elements created by the "makeItem"
// and invoke the "bindItem" callback to associate
// the element with the matching data item (specified as an index in the list)
Action<VisualElement, int> bindItem = (e, i) =>
{
var item = treeView.GetItemDataForIndex<string>(i);
var id = treeView.GetIdForIndex(i);
((Label)e).text = $"ID {id} - {item}";
};
treeView.SetRootItems(items);
treeView.makeItem = makeItem;
treeView.bindItem = bindItem;
treeView.selectionType = SelectionType.Multiple;
treeView.Rebuild();
// Callback invoked when the user double clicks an item
treeView.itemsChosen += (selectedItems) =>
{
Debug.Log("Items chosen: " + string.Join(", ", selectedItems));
};
// Callback invoked when the user changes the selection inside the TreeView
treeView.selectedIndicesChanged += (selectedIndices) =>
{
var log = "IDs selected: ";
foreach (var index in selectedIndices)
{
log += $"{treeView.GetIdForIndex(index)}, ";
}
Debug.Log(log.TrimEnd(',', ' '));
};
/// </sample>
この例を Unity でライブ体験するには、Window > UI Toolkit > Samples の順に移動します。
以下は、ツリービューの制御に関するよくある質問です。
画面に表示される行のインデックスを取得できますか?
このための専用 API はありません。bindItem コールバックと unbindItem コールバックを使用して、これらのインデックスを追跡できます。
ビューに表示されている行のリストを取得できますか?
このための専用 API はありません。UQuery を使用して、関心がある要素を取得できます。
ビューコントローラーのオーバーライドされた関数は base.Method を必ず呼び出す必要がありますか?
このメソッドは、デフォルト動作を拡張する場合にのみ呼び出します。
行にトグルを加えました。行を選択してもその行に飛ばないのはなぜですか?
デフォルトでは、行が選択されるのは、マウスダウンイベントが行のコンテンツによって消費されない場合に限られます。この場合、トグルはイベントの伝播を停止します。これを修正するには、SetSelection を呼び出すトグルに TrickleDown を持つ PointerDownEvent コールバックを登録します。
ビューでの選択がユーザーによって変更されたときには、コールバックをどのようにして受けとればよいでしょうか?
必要に応じて、selectedIndicesChanged コールバックを使用して、インデックスに基づいてデータを取得することをお勧めします。selectionChanged を使用することもできますが、値型データの場合は、オブジェクトのリストが返され、ボックス化割り当てが生じる可能性があることに注意してください。
ID からインデックスへ、またはその逆に変換する方法を教えてください。
BaseTreeViewController.GetIndexForId と BaseTreeViewController.GetIdForIndex を使用してください。
ツリービューは水平にできますか?
ツリービューコントロールは水平レイアウトと仮想化をサポートしません。要素を水平にレイアウトする flex-direction: row には、スクロールビューの使用をお勧めします。
C# クラス: TreeView
名前空間: UnityEngine.UIElements
基本クラス: BaseTreeView
この要素は以下のメンバー属性を持ちます。
| 名前 | 型 | 説明 |
|---|---|---|
item-template |
UIElements.VisualTreeAsset |
ツリー内で再利用および再バインドする各要素を構成する UXML テンプレート。このテンプレートは、makeItem 定義を置き換えるように設計されています。 |
この要素は基本クラスから以下の属性を継承します。
| 名前 | 型 | 説明 |
|---|---|---|
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 |
mouseEvent または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。 |
style |
string |
VisualElement スタイルの値を設定します。 |
tooltip |
string |
ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。 |
usage-hints |
UIElements.UsageHints |
VisualElement の意図されている使用パターンの概要を指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響せず、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切な UsageHints を指定することを考慮するようお勧めしますが、特定の条件下 (例: ターゲットプラットフォームのハードウェア制限) では、一部の UsageHints が内部的に無視される可能性があることに留意してください。 |
view-data-key |
string |
ビューデータの永続性 (ツリーの展開状態、スクロール位置、ズームレベルなど) に使用されます。 このキーは、ビューデータストアからビューデータを保存およびロードするために使用されます。このキーを設定しないと、関連する VisualElement の永続性が無効になります。詳細については、ビューデータの永続性を参照してください。 |
以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。
| C# プロパティ | USS セレクター | 説明 |
|---|---|---|
ussClassName |
.unity-tree-view |
TreeView 要素の USS クラス名。 Unity はこの USS クラスを TreeView 要素のすべてのインスタンスに追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのツリービューに影響します。 |
itemUssClassName |
.unity-tree-view__item |
ツリービューのアイテム要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのアイテム要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemToggleUssClassName |
.unity-tree-view__item-toggle |
ツリービューのアイテムトグル要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのアイテムトグル要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemIndentsContainerUssClassName |
.unity-tree-view__item-indents |
ツリービューのインデントコンテナ要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのインデントコンテナ要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemIndentUssClassName |
.unity-tree-view__item-indent |
ツリービューのインデント要素の USS クラス名。 Unity はこの USS クラスをツリービューのすべてのインデント要素に追加します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemContentContainerUssClassName |
.unity-tree-view__item-content |
ツリービューのアイテムコンテナ要素の 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 セレクターを確認することもできます。