Version: 2023.1
言語: 日本語
UI Builder のインターフェース概要
エレメントを使う

UI Builder の使用準備

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

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

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

要件

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

例の概要

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

最終的なメインビューのレイアウト
最終的なメインビューのレイアウト

ルート要素の作成

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

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

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

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

    UI Builder のファイルメニュー
    UI Builder のファイルメニュー
  4. MainView.uxml と名前を付けて保存します。

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

    Library からドラッグして新しい要素を作成
    Library からドラッグして新しい要素を作成

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

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

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

    Flex プロパティを設定
    Flex プロパティを設定
  8. すべての子要素を中央に揃えるには、Align ItemsJustify Content の両方を Center に設定します。

    子を中央に揃える
    子を中央に揃える
  9. Background > Color と移動し #732526 に設定します。

    ルート要素の背景色
    ルート要素の背景色

親コンテナの作成

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

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

    子の VisualElement を加える
    子の VisualElement を加える
  2. Hierarchy ウィンドウから要素を選択します。

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

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

    中央コンテナのプロパティ
    中央コンテナのプロパティ

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

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

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

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

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

    内部に空の要素を持つ背景コンテナ
    内部に空の要素を持つ背景コンテナ
  4. Size > Width230 ピクセルに設定します。

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

    文字リストの Size と Margin の折りたたみ部分
    文字リストの Size と Margin の折りたたみ部分
  6. Background > Color#6E3925 に設定します。

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

  8. Border > Width4 ピクセルに設定します。

  9. Border > Radius15 ピクセルに設定します。

    スタイルを設定した文字リスト
    スタイルを設定した文字リスト

文字詳細コンテナの作成

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

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

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

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

  4. Align > Justify Contentspace-between に設定します。

    コンテンツプロパティの調整
    コンテンツプロパティの調整
  5. 右のコンテナの子として別の VisualElement を追加します。

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

  7. Size > Width276 ピクセルに設定します。

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

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

    文字詳細コンテナのプロパティ
    文字詳細コンテナのプロパティ
  10. Background > Color#AA5939 に設定します。

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

  12. Border > Width4 ピクセルに設定します。

  13. Border > Radius15 ピクセルに設定します。

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

空の文字詳細パネル
空の文字詳細パネル

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

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

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

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

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

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

  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 > Width2 ピクセルに設定します。
  7. Border > Radius15 ピクセルに設定します。
  8. StyleSheet ウィンドウから .border を文字詳細コンテナ VisualElement にドラッグします。
  9. StyleSheet ウィンドウから .border を文字名リストコンテナ VisualElement にドラッグします。
  10. 文字名リストコンテナ VisualElement を選択します。
  11. Inspector ウィンドウで、Border を右クリックし、Unset を選択して、以前設定したインラインスタイルを削除します。

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

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

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

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

  3. NameCharacterPortrait に設定します。

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

    縦向き画像用のVisualElement
    縦向き画像用のVisualElement

ラベルの作成

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

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

  2. NameCharacterName に設定します。

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

  4. NameCharacterClass に設定します。

    名前とクラスのラベルを加えます
    名前とクラスのラベルを加えます
  5. #CharacterName 要素を選択します。

  6. Text > Font StyleB に設定します。

  7. Text > Size18 ピクセルに設定します。

    フォントの設定を変更する
    フォントの設定を変更する
  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 のインターフェース概要
エレメントを使う