質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.19%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 9,344

tkmnusr

score 335

前提・実現したいこと

ContentSizeFitterコンポーネントの使い方がわかりません。

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

  • 親として、背景となる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でそのページを読むことができず、詳しい内容は分かりませんでした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/21 23:00

    返信が遅くなり申し訳ありません。
    検証してみました。
    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]をオンにする。

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

    キャンセル

  • 2017/06/22 04:51 編集

    スクリプトリファレンスの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」のパターンが妥当そうですね。いずれマニュアルも更新されるでしょうか...?

    キャンセル

  • 2017/06/23 22:44

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る