UI Toolkit の最も基本的な構成要素は、ビジュアル要素です。ビジュアル要素は、親子関係を持つ階層ツリーに整列されます。下図は、階層ツリーの簡略化された例と、UI Toolkit での描画結果を示しています。
VisualElement クラスは、ビジュアルツリーのすべてのノードの基本になります。VisualElement
基本クラスは、スタイル、レイアウトデータ、イベントハンドラーなど、すべてのコントロールに共通のプロパティを含んでいます。ビジュアル要素は、子や子孫のビジュアル要素を持つことができます。例えば、上の図では、最初の Box
ビジュアル要素は、 Label
、Checkbox
、Slider
の 3 つの子ビジュアル要素を持っています。
スタイルシートを使って、ビジュアル要素の外観をカスタマイズできます。また、イベントコールバックを使ってビジュアル要素の動作を変更することもできます。
VisualElement
は、コントロールなどの追加の動作や機能を定義するサブクラスに派生します。UI Toolkit には、特殊な動作をするさまざまなビルトインのコントロールが含まれています。例えば、以下のようなものがビルトインコントロールとして用意されています。
また、ビジュアル要素を組み合わせ、その動作を変更することで、カスタムのコントロールを作成することができます。ビルトインコントロールのリストは、コントロールのリファレンス ページを参照してください。
パネルは、ビジュアルツリーの親オブジェクトです。ビジュアルツリーは、ツリー内のビジュアル要素を描画するために、パネルに接続する必要があります。すべてのパネルは、エディターウィンドウなどのウィンドウに属します。パネルは、フォーカス制御やビジュアルツリーのイベントディスパッチも行います。
ビジュアルツリーの全ての要素は、ビジュアルツリーを保持するパネルへの直接の参照を保持しています。VisualElement
のパネルとの接続を確認するには、この要素の panel
プロパティをテストします。ビジュアル要素が接続されていない場合、テストは null
を返します。
ビジュアルツリー内の要素の描画順序は、深さ優先検索に従います。子のビジュアル要素は親要素の上に重ねて表示されます。また、子要素は兄弟リストの順に描画されます。描画順序は以下の通りです。
下の図は、上の例の描画順序を示しています。
ビジュアル要素の描画順序を変更するには、以下の機能を使用します。
兄弟姉妹のビジュアル要素に関しては、以下を使用します。
UI Toolkit では強力なレイアウトシステムを用い、個々の要素のスタイルプロパティのレイアウトのパラメーターに基づいて、個々の要素の位置やサイズを自動的に計算します。詳細は、レイアウトエンジンのページ を参照してください。
UI Toolkit には 2 種類の座標があります。
各ビジュアル要素は、その位置を計算するために使用する座標系を決定します。どの座標系を使用するかは、要素のスタイルシートで設定できます。
以下のコードは、コードを使ってビジュアル要素の座標空間と位置を設定する方法を示しています。
var newElement = new VisualElement();
newElement.style.position = Position.Relative;
newElement.style.left = 15;
newElement.style.top = 35;
要素の原点は左上の角です。
レイアウトシステムは、各要素の VisualElement.layout
プロパティ (タイプ Rect
) を計算します。これには要素の最終的な位置が含まれます。要素の相対位置または絶対位置が考慮されます。
layout.position
は親の座標空間に相対的に、ポイントで表されます。
各 VisualElement
には、要素の位置と回転に追加のローカルオフセットを加えるために使用するトランスフォームプロパティ (ITransform
) があります。このオフセットは、計算されたレイアウトプロパティでは示されません。デフォルトでは、transform
は同一です。
worldBound
プロパティを使用して、レイアウト位置とトランスフォームの両方を考慮に入れて VisualElement
の最終的なウィンドウ空間座標を取得します。この位置には、ウィンドウのヘッダーの高さが含まれます。
以下のコードサンプルでは、相対位置と絶対位置の違いを示しています。自動レイアウトシステムを使って、ウィンドウにボックスを加え、その位置を計算しています。あるボックスは、相対的なオフセットの 25 px
、別のボックスは、絶対的な位置の 25 px, 25 px
を示しています。
この例を実際に見るには、以下を行います。
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class PositioningTestWindow : EditorWindow
{
[MenuItem("Window/UI Toolkit/Positioning Test Window")]
public static void ShowExample()
{
var wnd = GetWindow<PositioningTestWindow>();
wnd.titleContent = new GUIContent("Positioning Test Window");
}
public void CreateGUI()
{
for (int i = 0; i < 2; i++)
{
var temp = new VisualElement();
temp.style.width = 70;
temp.style.height = 70;
temp.style.marginBottom = 2;
temp.style.backgroundColor = Color.gray;
rootVisualElement.Add(temp);
}
// 相対的ポジショニング
var relative = new Label("Relative\nPos\n25, 0");
relative.style.width = 70;
relative.style.height = 70;
relative.style.left = 25;
relative.style.marginBottom = 2;
relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f);
rootVisualElement.Add(relative);
for (int i = 0; i < 2; i++)
{
var temp = new VisualElement();
temp.style.width = 70;
temp.style.height = 70;
temp.style.marginBottom = 2;
temp.style.backgroundColor = Color.gray;
rootVisualElement.Add(temp);
}
// 絶対的ポジショニング
var absolutePositionElement = new Label("Absolute\nPos\n25, 25");
absolutePositionElement.style.position = Position.Absolute;
absolutePositionElement.style.top = 25;
absolutePositionElement.style.left = 25;
absolutePositionElement.style.width = 70;
absolutePositionElement.style.height = 70;
absolutePositionElement.style.backgroundColor = Color.black;
rootVisualElement.Add(absolutePositionElement);
}
}
VisualElement.layout.position
と VisualElement.layout.transform
プロパティはローカル座標系と親座標系間の変換方法を定義します。
VisualElementExtensions 静的クラスでは、座標系間で点や矩形を変換する以下の拡張メソッドを提供します。
WorldToLocal
は、Panel
空間の Vector2
または Rect
を要素内の参照に変換します。LocalToWorld
は Vector2
または Rect
を Panel
空間参照に変換します。ChangeCoordinatesTo
は要素のローカル空間の Vector2
または Rect
を別の要素のローカル空間に変換します。Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.