ビジュアル要素とビジュアルツリーの概要
UI Toolkit の最も基本的な構成要素は、ビジュアル要素です。ビジュアル要素は、親子関係を持つ階層ツリーに整列されます。このツリーはビジュアルツリーと呼ばれます。
下図は、ビジュアルツリーの簡略化された例と、UI Toolkit での描画結果を示しています。
図の Root は、エディター UI の EditorWindow.rootVisualElement とランタイム UI の UIDocument.rootVisualElement を表します。
VisualElement クラスは、ビジュアルツリー内のすべてのノードの基本です。VisualElement 基本クラスには、スタイル、レイアウトデータ、イベントハンドラーなどのプロパティが含まれます。ビジュアル要素は、子および子孫のビジュアル要素を持つことができます。例えば、上の図では、最初の Box ビジュアル要素は、Label、Checkbox、および Slider の 3 つの子ビジュアル要素を持ちます。
インラインスタイルとスタイルシートを使って、ビジュアル要素の外観をカスタマイズできます。また、イベントコールバックを使ってビジュアル要素の動作を変更することもできます。
VisualElement は、コントロールなどの追加の動作や機能を定義するサブクラスに派生します。UI Toolkit には、特殊な動作をするさまざまなビルトインのコントロールが含まれています。コントロールはグラフィカルユーザーインターフェース (GUI) の要素です。例えば、以下のようなものがビルトインコントロールとして用意されています。
コントロールには、コントロールのビジュアルと、コントロールを操作し相互作用するためのスクリプト化されたロジックが含まれます。コントロールは、単一のビジュアル要素で構成される場合と、複数のビジュアル要素の組み合わせで構成される場合があります。例えば、トグルコントロールには、3 つの要素が含まれています。
- テキストラベル
- ボックスの画像
- チェックマークの画像
トグルコントロールの実装では、コントロールの動作を定義します。トグルの状態が true か false かの内部値を持っています。このロジックは、値が変化するときに、チェックマーク画像の可視性を変化させます。
また、ビジュアル要素を組み合わせ、その動作を変更することで、カスタムのコントロール を作成することができます。
UI でコントロールを使用するには、ビジュアルツリーに追加します。