ContentSizeFitterコンポーネントの使い方がわからない。

Question

###前提・実現したいこと
ContentSizeFitterコンポーネントの使い方がわかりません。

ContentSizeFitterコンポーネントは、子のオブジェクトの大きさに応じて、親のオブジェクトをリサイズすることができて、
親オブジェクトのほうにContentSizeFitterコンポーネントをアタッチするという考え方で合っていますか？

この考え方が正しければ、子のテキストオブジェクトの大きさが変わった際に、
親のImageオブジェクトがリサイズされるという実装ができると思うのですが、
こちらの記事では、子オブジェクトにImageオブジェクトを、親オブジェクトにテキストオブジェクトを設置しています。

テキストオブジェクトの大きさに応じて、背景のImageオブジェクトをリサイズするというやり方は
上記の記事のやり方しかないのでしょうか？

また、上記の記事で、ImageオブジェクトにCanvasコンポーネントをアタッチする意味もわかりません。

上記の記事の要件を満たす実装に、もっと簡単な方法があるのではないか？と思ってしまいます。
ご教授のほど宜しくお願い致します。

Answer 1

本家のマニュアルでは、背景となるオブジェクトの子としてテキストオブジェクトを配置する例が紹介されており（日本語版は翻訳がちょっと珍妙だったので、英語版の方がいいかもしれません）、こちらはご質問者さんの考え方に沿っていると思います。

• 親として、背景となるImageなどのオブジェクトを配置
• 親の子としてTextなどのオブジェクトを配置
• 親にHorizontal Layout Group（子オブジェクトを垂直に並べたい場合はVertical Layout Group）をアタッチ、適宜PaddingやSpacingで親と子、子同士の余白を設定
• さらにControl Child Sizeにチェックを入れると、親のサイズに合わせて子のサイズが調節される
• 親にContent Size Fitterをアタッチ、Horizontal FitやVertical FitをPreferred Sizeに設定

これで子オブジェクトのサイズに合わせた大きさになるよう親オブジェクトが伸縮するかと思います。また、Control Child Sizeがチェックされていれば、子のテキストが変化して最適サイズが変わっても、自動的に追従して伸縮するでしょう。

ご提示のサイトの方のアプローチは、「TextオブジェクトにContent Size Fitterをアタッチして、Textオブジェクトのサイズをコンテンツ（入力されているテキスト）に応じて伸縮させ、さらに子のImageオブジェクトのサイズを親のTextオブジェクトに追従するように設定する」という考え方かと思います。
UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダードの113ページを参考にされたそうですが、Amazonでそのページを読むことができず、詳しい内容は分かりませんでした。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
いろいろ検証してみました。

親オブジェクトにContent Size Fitterを使う際は、同時に親オブジェクトにHorizontal Layout Group、もしくはVertical Layout Groupなどをアタッチしなければ効果がないのですか？
下記サイトでは、
>ContentSizeFitter は、Text、Image、(省略)のような ILayoutElement コンポーネントを 1 つ以上持つゲームオブジェクトに使用することができます。
https://docs.unity3d.com/jp/540/ScriptReference/UI.ContentSizeFitter.html
と書かれていますが、何故か親オブジェクトにImageでContentSizeFitterのアタッチ、子オブジェクトにTextという構造では、サイズが調整される動作になりませんでした。

また、Horizontal Layout Groupをアタッチした場合でも、Content Size FitterのHorizontal FitもしくはVertical FitのPreferred Sizeの設定だけでは、背景のImageのサイズが調整されないように見えました。
Content Size FitterのHorizontal Fitを設定した場合は、Layout GroupのControl Child SizeのWidthにもチェックをしないとImageの幅がサイズ調整されず、
Content Size FitterのVertical Fitを設定した場合は、Layout GroupのControl Child SizeのHeightにもチェックをしないとImageの高さがサイズ調整されないように見えましたが、
Control Child Sizeのチェックなしで、子オブジェクトのサイズに応じて、親オブジェクトのサイズを調整することは可能なのでしょうか？

また、Control Child Sizeに限って、マニュアルに掲載されていないようなのですが、Control Child Sizeのマニュアルの説明は存在しますか？
https://docs.unity3d.com/jp/540/Manual/script-HorizontalLayoutGroup.html
https://docs.unity3d.com/jp/540/Manual/script-VerticalLayoutGroup.html

疑問点がたくさんあり、申し訳ありません。何卒宜しくお願い致します。

[Bongo]

マニュアルで言及されているImage、Textというのは、Content Size Fitterをアタッチしたのと同じオブジェクトにアタッチされた「Textコンポーネント」や「Imageコンポーネント」を指すものと考えられます。
ですので、たとえばTextオブジェクト（これはTextコンポーネントを持っている）やImageオブジェクト（これはImageコンポーネントを持っている）に対してContent Size Fitterをアタッチ、Preferred Sizeにすると、それらが持つTextコンポーネントやImageコンポーネントに応じたサイズにオブジェクトのサイズが調整されるようになります。
階層上の子オブジェクトは、ただ配置しただけではサイズ計算の考慮対象にならないため、別途親オブジェクトにレイアウトグループコンポーネントをアタッチし、これらを併用してサイズ制御する必要があるのかと思います。

Control Child Sizeをオンにしないと自動サイズ調整が行われない件ですが、これについてはTextオブジェクトは素の状態ではサイズが固定されており、テキストを書き換えてもサイズが変化しないため、それに対して親がサイズ調整した結果、サイズ調整が行われていないように見えるのではないでしょうか。
たとえば親オブジェクトのControl Child Sizeをオフにして、警告が出ますがあえて無視して子のTextオブジェクトにContent Size Fitterをアタッチし、それをPreferred Sizeに設定すれば、入力されたテキストに応じてTextオブジェクトが伸縮し、併せて親オブジェクトも伸縮するようになり、これでも意図通りの動きになるかと思います。

マニュアルにControl Child Sizeの言及がないのは、確かに気になりますね...
http://answers.unity3d.com/questions/1310953/layout-group-changes-in-55-breaking-changes-please.htmlの方は開発中のコードが誤ってコミットされた可能性を考えておられるようですが、もしかするとControl Child Sizeは使うべきではないかもしれません。
となると、今回の目的を達するには何が最適解になるんでしょうかね...?
最初の回答で挙げさせていただいたマニュアルの例も、テキストの内容が可変の場合には言及されていないようですし、親と子の両方にContent Size Fitterをアタッチするのも未定義動作になるとの記述があるのでなるべく避けたいところです。
ことによっては、ご質問者さんの挙げられた、親子関係を逆転させる方法が実は一番安全なのかもしれません。

http://tsubakit1.hateblo.jp/entry/2017/05/14/163456に自動レイアウト関連の機能が解説されていましたので、ご参考になるかと思います。
「分かりにくいと評判」とのことですが、確かに使いこなすには慣れが必要そうですね。

[退会済みユーザー]

返信が遅くなり申し訳ありません。
検証してみました。
Textオブジェクトは素の状態ではサイズが固定されていることを知りませんでした、
ありがとうございます。
Textオブジェクト単体にContent Size Fitterをアタッチして、サイズ変更されるのも確認できました。
また入れ子にする場合は、子オブジェクトの情報を得るために、レイアウトグループコンポーネントをアタッチする必要があるのですね。
URLのご提示ありがとうございます。とても勉強になります。
Control Child Sizeが誤ってコミットされたものだとしたら困りますね。
親子関係を逆転させる方法は個人的にあまり好きでないので使いたくない所です。
Control Child Sizeを使用する方向で考えています。

Control Child Sizeをオンにしないと自動サイズ調整が行われない件に関しても、
おそらく理解できたと思うのですが、
親オブジェクトと子オブジェクトが連動してサイズ変更される原理が、完全に理解できませんでした。
下記のように考えてみたのですが、いかがですか？

①Control Child Sizeがオンにしてあるので、子オブジェクトが親オブジェクトのサイズに一致するようになる。

②Content Size FitterのHorizontal FitもしくはVertical FitをPreferred Sizeに設定されているので、
　子オブジェクトに対して、親オブジェクトのサイズ調整が行われる。

③Control Child Sizeがオンにしてあるので、子オブジェクトが手順②の親オブジェクトのサイズに一致するようになる。

という順番で連動するのかと考えてみました。
(Control Child Sizeによるリサイズは、親より大きくならないので、①②③の順序になるのかと思いました。)
また、下記のように考えています。こちらも合っていますか？

・子オブジェクトのサイズに合わせて親オブジェクトのサイズが調整される。
　→親オブジェクトのContent Size FitterのPreferred Sizeによる設定。

・親オブジェクトのサイズに合わせて子オブジェクトのサイズが調整される
　→親オブジェクトのLayout Group系のControl Child Sizeがオンになっていることによる設定。

この際、下記のように丸暗記してしまえばよいだけなのかもしれませんが、
できれば原理を理解したいです。

・Textオブジェクトの文字量や文字サイズに応じて、
　Textオブジェクトのサイズと背景のImageオブジェクトのサイズを自動調整するようにするには、
　Textオブジェクトの親オブジェクトにImageオブジェクトを持たせ、
　親のImageオブジェクトに、[Content Size Fitter]コンポーネントをアタッチして[Preferred Size]を
設定し、
　さらにImageオブジェクトにLayout Group系のコンポーネントをアタッチさせて、
[Control Child Size]をオンにする。

毎回すみません。
ご教授いただければ幸いです。

[Bongo]

スクリプトリファレンスのhttps://docs.unity3d.com/ScriptReference/UI.HorizontalOrVerticalLayoutGroup.htmlにはchildControlWidth、childControlHeightの記載がありました。バージョン5.5以降（2017.1にも）のリファレンスには載っているようで、マニュアル側の対応が遅れているだけなのでしょうかね?

「・子オブジェクトのサイズに合わせて親オブジェクトのサイズが調整される。→親オブジェクトのContent Size FitterのPreferred Sizeによる設定。」については私も同様の認識です（厳密に言えば「Layout Groupが最適サイズを求める→Content Size Fitterがその最適サイズになるよう伸縮させる」のような段階を踏むのだろうと思いますが）。

Control Child Sizeの件の①（および「・親オブジェクトのサイズに合わせて子オブジェクトのサイズが調整される」）についてですが、私も当初の投稿ではそのように書いたものの、リファレンスとテラシュールブログさんの記事から想像するに、親オブジェクトのサイズに一致させるというよりも、先のコメントで挙げた親子両方にContent Size Fitterをアタッチした時に子の側のContent Size Fitterがやっていることを、親のLayout Groupがやってくれる動作のような気がします。ただし、「子にContent Size Fitter」の場合と異なり「Control Child Sizeによるリサイズは親より大きくならない」という制約（テラシュールブログさんが紹介されている、テキストを伸ばしていくとTextとWindowが右に伸び続けるのではなく、Textの親の親であるContentに合わせて折り返す動き）も加味した上で、子のサイズが決定されるようです。
対して「子にContent Size Fitter」の場合、「子は自身の親がどうであるかに関係なく自身の最適サイズを決定→親は子の最適サイズを見て自身の最適サイズを決定」という手順を踏むように見えます。

「親子関係の逆転」を行わないでやるには「親にLayout Group（適宜Control Child Size使用）とContent Size Fitter」のパターンが妥当そうですね。いずれマニュアルも更新されるでしょうか...?

[退会済みユーザー]

返信が遅くなり申し訳ありません。
ご回答ありがとうございます。

リファレンスのご提示ありがとうございます。
掲載されていたのですね。

なるほど、親のLayout GroupのControl Child Sizeをオンにしたときの件ですが、確かに「親オブジェクトのサイズに合わせて子オブジェクトのサイズが調整される」と考えるよりかは、
「Control Child Sizeによるリサイズは親より大きくならない」という制約のもと、
子オブジェクトに、Content Size Fitterをアタッチして、そのContent Size Fitterが行うサイズ調整を、
親のLayout GroupのControl Child Sizeをオンにした設定が行っていると考える方が辻褄が合いますね。

今回のレイアウトの動き、自分にはとても難しかったですが、ご回答者様にいただいたご回答により理解することができました。ありがとうございます。
最後まで丁寧なご解説ありがとうございました。