複数の解像度のためのUI設計
World Space UIの作成

コンテンツのサイズに合わせたUI要素を作る

Suggest a change

Success!

Thank you for helping us improve the quality of Unity Documentation. Although we cannot accept all submissions, we do read each suggested change from our users and will make updates where applicable.

Close

Sumbission failed

For some reason your suggested change could not be submitted. Please try again in a few minutes. And thank you for taking the time to help us improve the quality of Unity Documentation.

Close

Cancel

通常,そののRectトランスフォームでのUI要素を配置する際,その位置と大きさを手動で指定されています(親Rectトランスフォームで,必要に応じて伸ばす動作を含みます)。

しかし,時には矩形を自動的にUI要素の内容に合わせてサイズを変更したい場合があります。これはContent Size Fitterと呼ばれるコンポーネントを追加することで行うことができます。

テキストのサイズに合わせる

その上にテキストの内容に合わせてテキストコンポーネントにRectトランスフォームするためには,テキストコンポーネントを持つ同じゲームオブジェクトにContent Size Fitterコンポーネントを追加します。その後,水平フィット,垂直フィットの両方を優先設定してください。

それはどのように動作するか?

何ここで起こることは,そのレイアウト要素としてテキストコンポーネントファンクションは,その最小と望ましいサイズはどのくらいなのかといった情報を提供することができます。手動レイアウトでは,この情報は使用されません。Content Size Fitterはレイアウトコントローラの1種で,それはレイアウト要素によって提供されるレイアウト情報を聞いて,Rectトランスフォームのサイズをコントロールします。

ピボットを忘れない

UI要素が自動的に自分のコンテンツに合わせてサイズ変更された場合,あなたは Rectのピボット変換に特別な注意を払う必要があります。要素のサイズが変更されるとき,ピボットは場所にとどまっているので,ピボット位置を設定して要素が拡大または縮小するかを制御することができます。例えば,ピボット中心にある場合,要素はその後,すべての方向に均等に拡大し,ピボットが左上隅にある場合,要素は右下に展開されます。

子テキストを持つUI要素のサイズに合わせる

それの上にText要素で背景画像と子ゲームオブジェクトを持つボタンのようなUI要素を持っている場合,おそらく,いくらかのpaddingで全UI要素がテキストのサイズに合うことを望むでしょう。

これを行うために,最初にUI要素に水平レイアウトグループを追加した後,Content Size Fitterにも追加します。水平フィット,垂直フィット両方を優先設定します。あなたは追加し,paddingプロパティを使用して,水平レイアウトグループのpaddingを調整することができます。

なぜ水平レイアウトグループを使うのでしょうか?それは同様に垂直レイアウトGroupでもありたので - 単独の子だけがあるなら,これらは同じ結果になります。

それはどのように動作するか?

水平(または垂直)レイアウトグループは,レイアウトコントローラとして,レイアウト要素として,両方機能しています。最初に,それはグループ内の子らが提供するレイアウト情報を聞きます - この場合,子のテキストで。それから,グループはすべての子を含むためにどれくらい多くなければならないか(なるべく,最低でも)について決定し,そして,最小限のサイズと推奨サイズに関するこの情報を提供するレイアウト要素として機能します。

水平(または垂直)レイアウトグループが提供するこの場合は - Content Size Fitter は同じゲームオブジェクト上の任意のレイアウト要素から提供されるレイアウト情報を聞きます。その設定に応じて,この情報に基づき,Rectトランスフォームの大きさを制御します。

いったんRectトランスフォームのサイズが設定されると,水平(または垂直)レイアウトグループはその子らの使用可能なスペースに応じて位置とサイズを確認します。その子ら位置とサイズを制御する方法の詳細については,水平レイアウトグループについてのページを参照してください。

レイアウトグループの子らそれぞれのサイズに合わせて作る

あなたは(水平または垂直)レイアウトグループがあり,それぞれの内容に合わせて,グループ内のUI要素を望む場合,あなたは何をしますか?

あなたは,Content Size Fitterを各々の子に付けることができません。 理由はContent Size Fitter がそれ自身のRectトランスフォームの制御を望んでおりますが,親のレイアウトグループも子のRectトランスフォームの制御を望んでいます。これでは対立を引き起こし,結果は未定義の動作をしてしまいます。

しかし,それはどちらかは不要です。親のレイアウトグループはすでにそれぞれの子をコンテンツのサイズに合わせて作ることができます。あなたがする必要なことは,レイアウトグループの子のForce Expand togglesを無効にすることです。子らがあまりにも自分自身にレイアウトグループをしている場合,あなたもそれらの子Child Force Expand togglesを無効にする必要があります。

子らがもはや柔軟に幅を拡大しないならば,彼らのアライメントはChild Alignment settingを使用してレイアウトグループで設定することができます。

仮に,追加の利用可能なスペースを埋めるために子を展開したいけれど,いない場合はどうしたら良いでしょうか?展開したい子に Layout Element コンポーネントを追加し,それらの Layout Element の Flexible Width か Flexible Height プロパティを有効にすることで,簡単に管理することができます。

それはどのように動作するか?

ゲームオブジェクトは,それぞれがレイアウト最低限の情報は,推奨サイズと柔軟なサイズを提供する複数のコンポーネントを持つことができます。優先システムは,他のものより有効になる値を決定します。レイアウト要素コンポーネントはテキスト,イメージおよびレイアウトグループコンポーネントよりも高い優先度を持っているので,それらが提供する任意のレイアウト情報の値を上書きするために使用することができます。

レイアウトグループが子によって提供されるレイアウト情報を察知すると,上書きされた flexible size を考慮にいれた大きさを取ります。その後,子の大きさをコントロールする時にはそれらの preferred size より大きくはなりません。しかし,レイアウトグループの Child Force Expand オプションが有効であれば,子の flexible size は最低でも常に 1 に設定されます。

更に詳しく

このページではいくつかの一般的な使用例を提示しました。より深い自動レイアウトシステムに関する説明については UI Auto Layout ページをご覧下さい。

複数の解像度のためのUI設計
World Space UIの作成