質問: 複数のテキストを囲む枠のサイズをテキスト幅に合わせたい。 Textを囲むImage画像をTextのサイズに合わせて自動で変更(伸縮)するように見せたい。 ネットで調べたところ1つのTextに対してImageを伸縮する方法はContentSizeFitterを 使って下記の手順でできます。(試してみたこと) (イメージ例1) 1、中が透明な枠画像を作成する 2、Canvas-Text-Imageという親子関係でUIをセットする。 3、ImageにCanvasコンポーネントを追加し、SortOrderを-1にする。 4、アンカープリセットを表示して一番右下を選ぶ。 5、RectTransformコンポーネント内のLeft・Top・Right・Bottomの値に各-5と入れる。 6、TextにContentSizeFitterコンポーネントを追加し、Horizontal/Vertical Fitの 値をPreferred Sizeに変更。 これで1つのテキストの場合は伸縮します。 質問は2つ以上のTextを囲む画像の伸縮をコントロールしたいのです。 (イメージ例2) Textが複数あると子要素としてImageを設定できません。 この場合どうやればできるでしょうか? 尚、2つのTextは文字数が異なる場合が多く多い方の文字数に合わせた幅に合わせたい。 環境) PC: mac Unity2018.2 言語:C# ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/2837be2f6aa9553779317fb826fb5115.png)
回答: ``` Canvas - Image : VerticalLayoutGroup付与(Control Child Sizeオン) - Text - Text ``` こんな感じにすればいいかなと思います。 (もしかしたらTextにContent Size Fitterが必要かもしれません) 【Unity】uGUIの自動レイアウトが分かりにくいと評判なので解説してみる - テラシュールブログ ちなみに枠線との余白はVerticalLayoutGroupのPaddingで調整可能です。 別解としては以下のようにすると、Imageを好きなようにレイアウト出来るので、複雑な配置をしたいならこちらがいいかもしれません。 ``` Canvas - 空オブジェクト : VerticalLayoutGroup付与(Control Child Sizeオン) - Image : LayoutElement付与(Ignore Layoutオン) - Text - Text ```