UI Builder の使用準備

UI Builder で UI を作成する方法を学ぶために、まずこの例を使って始めましょう。

UI Builder で UI を作成するには、以下の手順を行います。

1. 新しい UI ドキュメント (UXML) を作成します。
2. 要素を加えて UI 階層を作成します。
3. Inspector で属性とスタイルのプロパティを設定します。
4. 複数の要素が同じスタイルプロパティを必要になってきたら、USS スタイルシートとセレクターを作成 します。
5. UI をテストし、結果に満足したら インラインのスタイルプロパティを USS クラスに抽出します。
6. UI ドキュメント (UXML) を保存します。

要件

始める前に、以下の点を理解しておいてください。

• ビジュアル要素とビジュアルツリーについて
• UXML について
• USS について
• UI Builder のインターフェース概要

例の概要

この例では、リストビューのランタイム UI の作成 の例のメインビューを作成します。背景としてルート要素を作成し、2 つのコンテナを作成します。1 つのコンテナには文字名リストが保存され、もう 1 つのコンテナには文字の詳細が保存されます。文字詳細コンテナでは、背景フレームと前景フレームを加えます。最後に、文字名のラベルを 2 つ加えます。この例では、文字名リスト入力 UI は作成しません。

ルート要素の作成

新しいプロジェクトを作成し、画面全体を覆うルートビジュアル要素を作成します。ルート要素に背景色を設定し、すべての子要素をスクリーンの中央に配置します。

1. Unity で任意のテンプレートでプロジェクトを作成します。

2. Window > UI Toolkit > UI Builder を選択します。

3. UI Builder ウィンドウの Viewport ウィンドウの左上で、File > New を選択して新しい UXML ドキュメントを作成します。

   

4. MainView.uxml と名前を付けて保存します。

5. Library の VisualElement を Hierarchy ウィンドウにドラッグします。

   

   ヒント: コントロールをダブルクリックして Hierarchy ウィンドウに加えることもできます。

6. Hierarchy ウィンドウから要素を選択します。

7. Inspector ウィンドウで、Flex > Grow を 1 に設定します。これにより、flex-grow プロパティが 1 に設定され、画面全体を覆うようになります。

   

8. すべての子要素を中央に揃えるには、Align Items と Justify Content の両方を Center に設定します。

   

9. Background > Color と移動し #732526 に設定します。

   

親コンテナの作成

ルート要素の下に新しい VisualElement を作成します。この要素は、UI の左右のセクションの親コンテナになります。

1. Library の VisualElement を Hierarchy ウィンドウのルート VisualElement にドラッグします。

   

2. Hierarchy ウィンドウから要素を選択します。

3. Inspector ウィンドウで Flex > Direction に移動し row に設定します。

4. Size > Height に移動し、350 ピクセルに設定します。

   

文字名リストコンテナの作成

コンテナの子要素として ListView を追加し、文字名を保存します。

1. Library の ListView を Hierarchy ウィンドウのコンテナ VisualElement にドラッグします。

2. Hierarchy ウィンドウから要素を選択します。

3. Inspector ウィンドウで、Name を CharacterList に設定します。

   

4. Size > Width を 230 ピクセルに設定します。

5. Margin & Padding > Margin > Right に移動し 6 ピクセルに設定します。

   

6. Background > Color を #6E3925 に設定します。

7. Border > Color を #311A11 に設定します。

8. Border > Width を 4 ピクセルに設定します。

9. Border > Radius を 15 ピクセルに設定します。

   

文字詳細コンテナの作成

文字の詳細コンテナを保持するために、#CharacterList と同じ親の下に新しい VisualElement を追加します。この目的は、ユーザーが左側のリストから文字を選択すると、その文字の縦向き画像、名前、クラスを表示することです。

1. Library から VisualElement を Hierarchy ウインドウのコンテナ要素にドラッグします。これは、右側のすべての要素を保存するコンテナです。

2. Hierarchy ウィンドウから要素を選択します。

3. Inspector ウィンドウで、Align > Align Items を flex-end に設定します。

4. Align > Justify Content を space-between に設定します。

   

5. 右のコンテナの子として別の VisualElement を追加します。

6. Hierarchy ウィンドウから要素を選択します。

7. Size > Width を 276 ピクセルに設定します。

8. Align セクションで、Align Items と Justify Content の両方を center に設定します。

9. Margin & Padding > Padding を 8 ピクセルに設定します。

   

10. Background > Color を #AA5939 に設定します。

11. Border > Color を #311A11 に設定します。

12. Border > Width を 4 ピクセルに設定します。

13. Border > Radius を 15 ピクセルに設定します。

これで、UI レイアウトは以下の画像のようになります。

文字ポートレートの背景の作成

個々の UI コントロールを文字詳細コンテナに追加します。最初のステップは、文字の縦向き画像の背景を追加することです。

1. Library の VisualElement を文字詳細コンテナにドラッグします。

2. Hierarchy ウィンドウから要素を選択します。

3. Size セクションで、Width と Height の両方を 120 ピクセルに設定します。

4. Margin & Padding > Padding を 4　ピクセルに設定します。

5. Background > Color を #FF8554 に設定します。

   

ボーダースタイル用の USS クラスの作成

文字詳細コンテナは、文字名リストコンテナと同じボーダースタイルを使用します。両方のコンテナに適用する USS クラスを作成します。

1. StyleSheet ウィンドウで、+ > Create New USS を選択します。
2. MainView.uss という名前を付けて保存します。
3. Add new selector… フィールドをクリックし .border と入力します。.border セレクターが StyleSheet ウィンドウに表示されます。
4. StyleSheet ウィンドウで .border を選択します。
5. Inspector ウィンドウで、Border > Color を #311A11 に設定します。
6. Border > Width を 2 ピクセルに設定します。
7. Border > Radius を 15 ピクセルに設定します。
8. StyleSheet ウィンドウから .border を文字詳細コンテナ VisualElement にドラッグします。
9. StyleSheet ウィンドウから .border を文字名リストコンテナ VisualElement にドラッグします。
10. 文字名リストコンテナ VisualElement を選択します。
11. Inspector ウィンドウで、Border を右クリックし、Unset を選択して、以前設定したインラインスタイルを削除します。

文字縦向き画像の前景を作成する

文字詳細コンテナの次は、実際の画像の前景を加えます。

1. Library の VisualElement を文字詳細コンテナにドラッグします。

2. Hierarchy ウィンドウから要素を選択します。

3. Name を CharacterPortrait に設定します。

4. Flex > Grow を 1 に設定し、画像が利用可能なスペースをすべて使えるようにします。 Background > Scale Mode を scale-to-fit に設定します。すると、正しいアスペクト比を保ちながら、画像を拡大縮小して要素のサイズに合わせることができます。

   

ラベルの作成

2 つのラベルコントロールを文字詳細コンテナに加え、選択された文字名とクラスを表示します。

1. Library の Label を Hierarchy ウィンドウの文字詳細コンテナにドラッグします。

2. Name を CharacterName に設定します。

3. Library の Label を Hierarchy ウィンドウの文字詳細コンテナにドラッグします。

4. Name を CharacterClass に設定します。

   

5. #CharacterName 要素を選択します。

6. Text > Font Style を B に設定します。

7. Text > Size を 18 ピクセルに設定します。

   

8. Viewport ウィンドウで、File > Save を選択して MainView.uxml に変更を保存します。

インラインスタイルの抽出

UI Builder では、要素の数がまだ少ないうちは、要素を作成してインラインスタイルだけを実験的に使用することができます。より複雑な UI を構築するようになると、スタイルシートを使用してスタイルを管理する方が簡単です。UI Builder では、インラインのスタイルをスタイルシートに抽出できます。

1. ルートのビジュアル要素を選択します。
2. Inspector ウィンドウの Style Class List フィールドに、クラス名として .background と入力します。
3. Extract Inlined Styles to New Class を選択します。これにより、ルート要素に設定したインラインスタイルで .background クラスセレクターが作成され、ルートのビジュアル要素の UI ドキュメント (UXML) が更新され、インラインスタイルの代わりにクラスセレクターが使用されます。
4. Viewport ウィンドウで、File > Save を選択します。

Create a list view runtime UI の例の作業を続けたい場合は、他のすべての要素のスタイルを抽出する手順を繰り返し、指示に従って例を作成できます。

その他の参考資料

• UI Builder を使ったスタイル要素