UI Builder で UI を作成する方法を学ぶために、まずこの例を使って始めましょう。
UI Builder で UI を作成するには、以下の手順を行います。
始める前に、以下の点を理解しておいてください。
この例では、リストビューのランタイム UI の作成 の例のメインビューを作成します。背景としてルート要素を作成し、2 つのコンテナを作成します。1 つのコンテナには文字名リストが保存され、もう 1 つのコンテナには文字の詳細が保存されます。文字詳細コンテナでは、背景フレームと前景フレームを加えます。最後に、文字名のラベルを 2 つ加えます。この例では、文字名リスト入力 UI は作成しません。
新しいプロジェクトを作成し、画面全体を覆うルートビジュアル要素を作成します。ルート要素に背景色を設定し、すべての子要素をスクリーンの中央に配置します。
Unity で任意のテンプレートでプロジェクトを作成します。
Window > UI Toolkit > UI Builder を選択します。
UI Builder ウィンドウの Viewport ウィンドウの左上で、File > New を選択して新しい UXML ドキュメントを作成します。
MainView.uxml
と名前を付けて保存します。
Library の VisualElement を Hierarchy ウィンドウにドラッグします。
ヒント: コントロールをダブルクリックして Hierarchy ウィンドウに加えることもできます。
Hierarchy ウィンドウから要素を選択します。
Inspector ウィンドウで、Flex > Grow を 1
に設定します。これにより、flex-grow
プロパティが 1
に設定され、画面全体を覆うようになります。
すべての子要素を中央に揃えるには、Align Items と Justify Content の両方を Center
に設定します。
Background > Color と移動し #732526
に設定します。
ルート要素の下に新しい VisualElement を作成します。この要素は、UI の左右のセクションの親コンテナになります。
Library の VisualElement を Hierarchy ウィンドウのルート VisualElement にドラッグします。
Hierarchy ウィンドウから要素を選択します。
Inspector ウィンドウで Flex > Direction に移動し row
に設定します。
Size > Height に移動し、350
ピクセルに設定します。
コンテナの子要素として ListView を追加し、文字名を保存します。
Library の ListView を Hierarchy ウィンドウのコンテナ VisualElement にドラッグします。
Hierarchy ウィンドウから要素を選択します。
Inspector ウィンドウで、Name を CharacterList
に設定します。
Size > Width を 230
ピクセルに設定します。
Margin & Padding > Margin > Right に移動し 6
ピクセルに設定します。
Background > Color を #6E3925
に設定します。
Border > Color を #311A11
に設定します。
Border > Width を 4
ピクセルに設定します。
Border > Radius を 15
ピクセルに設定します。
文字の詳細コンテナを保持するために、#CharacterList
と同じ親の下に新しい VisualElement を追加します。この目的は、ユーザーが左側のリストから文字を選択すると、その文字の縦向き画像、名前、クラスを表示することです。
Library から VisualElement を Hierarchy ウインドウのコンテナ要素にドラッグします。これは、右側のすべての要素を保存するコンテナです。
Hierarchy ウィンドウから要素を選択します。
Inspector ウィンドウで、Align > Align Items を flex-end
に設定します。
Align > Justify Content を space-between
に設定します。
右のコンテナの子として別の VisualElement を追加します。
Hierarchy ウィンドウから要素を選択します。
Size > Width を 276
ピクセルに設定します。
Align セクションで、Align Items と Justify Content の両方を center
に設定します。
Margin & Padding > Padding を 8
ピクセルに設定します。
Background > Color を #AA5939
に設定します。
Border > Color を #311A11
に設定します。
Border > Width を 4
ピクセルに設定します。
Border > Radius を 15
ピクセルに設定します。
これで、UI レイアウトは以下の画像のようになります。
個々の UI コントロールを文字詳細コンテナに追加します。最初のステップは、文字の縦向き画像の背景を追加することです。
Library の VisualElement を文字詳細コンテナにドラッグします。
Hierarchy ウィンドウから要素を選択します。
Size セクションで、Width と Height の両方を 120
ピクセルに設定します。
Margin & Padding > Padding を 4
ピクセルに設定します。
Background > Color を #FF8554
に設定します。
文字詳細コンテナは、文字名リストコンテナと同じボーダースタイルを使用します。両方のコンテナに適用する USS クラスを作成します。
MainView.uss
という名前を付けて保存します。.border
と入力します。.border
セレクターが StyleSheet ウィンドウに表示されます。.border
を選択します。#311A11
に設定します。2
ピクセルに設定します。15
ピクセルに設定します。.border
を文字詳細コンテナ VisualElement にドラッグします。.border
を文字名リストコンテナ VisualElement にドラッグします。文字詳細コンテナの次は、実際の画像の前景を加えます。
Library の VisualElement を文字詳細コンテナにドラッグします。
Hierarchy ウィンドウから要素を選択します。
Name を CharacterPortrait
に設定します。
Flex > Grow を 1
に設定し、画像が利用可能なスペースをすべて使えるようにします。
Background > Scale Mode を scale-to-fit
に設定します。すると、正しいアスペクト比を保ちながら、画像を拡大縮小して要素のサイズに合わせることができます。
2 つのラベルコントロールを文字詳細コンテナに加え、選択された文字名とクラスを表示します。
Library の Label を Hierarchy ウィンドウの文字詳細コンテナにドラッグします。
Name
を CharacterName
に設定します。
Library の Label を Hierarchy ウィンドウの文字詳細コンテナにドラッグします。
Name
を CharacterClass
に設定します。
#CharacterName
要素を選択します。
Text > Font Style を B
に設定します。
Text > Size を 18
ピクセルに設定します。
Viewport ウィンドウで、File > Save を選択して MainView.uxml
に変更を保存します。
UI Builder では、要素の数がまだ少ないうちは、要素を作成してインラインスタイルだけを実験的に使用することができます。より複雑な UI を構築するようになると、スタイルシートを使用してスタイルを管理する方が簡単です。UI Builder では、インラインのスタイルをスタイルシートに抽出できます。
.background
と入力します。.background
クラスセレクターが作成され、ルートのビジュアル要素の UI ドキュメント (UXML) が更新され、インラインスタイルの代わりにクラスセレクターが使用されます。Create a list view runtime UI の例の作業を続けたい場合は、他のすべての要素のスタイルを抽出する手順を繰り返し、指示に従って例を作成できます。
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.