ユーザーインターフェイスの基本を構築する

このガイドで学べること

このガイドでは、ビジュアルキャンバス内でコンポーネントを配置し、グループ化する方法を学びます。

UI要素の追加

現在選択されているビジュアルコンポーネントにUIコントロールや他のUI要素（テキストなど）を追加するには、ビジュアルキャンバスの上部にある**[+]アイコンをクリックします。これによりノードピッカー**が表示され、UI要素セクションに進むことができます。追加したい要素をクリックすると、現在選択されているコンポーネントに追加されます。

プロパティの編集

UI要素のプロパティを編集するには、ビジュアルキャンバス（または一般的にはノードグラフエディター）内の要素をクリックすると、プロパティパネルが表示されます。ここでは、UI要素のすべてのプロパティを編集できます。

ビジュアル階層

コンポーネントにUI要素を追加すると、ノードグラフエディターにビジュアル階層が構築されていくのが見られます。すべてのUI要素は青いノードとして表されます。ノードエディターのビジュアル階層について知っておくと便利なことがいくつかあります。

• すべてのコンポーネントには、単一のルートUI要素が必要です。これは、ほとんどの場合グループノードです。

• ノードグラフエディター内のUI要素をホバーすると、ビジュアルキャンバス内でそれらを明らかにすることができます。

• 他のデザインツールのレイヤーパネルのように、階層を操作できます。

• ノードピッカーを表示するには、ノードグラフエディターで右クリックします。新しく作成されたUI要素を他のUI要素の子として配置したい場合は、親要素を右クリックしてノードピッカーを表示します。

グルーピングとレイアウト

新しいコンポーネントの配置方法を学んだので、次に重要な概念であるグルーピングを学びましょう。これは、UI要素をグループ化し、グループ下の要素のレイアウトを制御する方法です。ノードピッカーを使用して新しいグループを作成し、階層内の望む位置に配置し、グループの下に配置したいUI要素を選択してドラッグアンドドロップします。

グループノードには、ユーザーインターフェイスのレイアウトに関する多くのオプションが用意されています。レイアウトとグループノードの詳細については、このガイドでさらに学ぶことができます。