UnityのuGUIの自動レイアウト機能で、LayoutElementの大きさを可変させたい

Question

###大きさが可変するLayoutElementをつくりたい

縦にノードが追加されていくScrollViewを最終的につくりたい。
ノードの数は一定ではなく、実行中に増減する。
画面のサイズにあわせて、同じ比率で、つまり、画面サイズがちょっと変わっても、
UIのレイアウトが大きくずれることがないようにScrollViewをつくりたい。

▲ 実行中 EditorのGameViewの大きさを変更すると…

▲ 画面サイズが小さくなると、ScrollViewの大きさは変わるのにノードの大きさは変わらない

###発生している問題

Canvasの子要素にあるUI要素は、RectTransformのアンカーを打って、offsetを0にすれば、画面サイズにおける比率によって、サイズが可変するUI要素として表示させることが出来る。
でもLayoutElementの場合、Elementの大きさはLayoutGroupが計算した値をサイズにとる。
RectTransformが、可変するUI要素を想定して設計されている以上、ScrollRectのContent以下の子要素も、可変する自動レイアウトとして設定できる方法が用意されているはずである。

###試したこと
ノードにアンカーを打ち、ContentSizeFitterコンポーネントをContentに追加して、HorizontalFitとVerticalFitの両方をPrefferedSizeに設定した。
なんとなく、大きさは可変しているようだが、ScrollViewが広くなったら、余白が大きくなるだけだった。
ノードの大きさにはさして変化がなく、他のUI要素のように、画面の大きさが変わるのにあわせてグイグイ大きさが変わるわけではなかった。

そうではなく、例えば、ScrollViewの横幅に合わせてノードも横に長くなったりしてほしい。縦幅に関しては現状で満足している。

他のRectTransformオブジェクトのように、ScrollViewの範囲が大きくなったら、それに合わせてノードも大きくなってほしい。
小さくなった時には、当然ノードも小さく表示されるようになってほしい。

どなたか、uGUIの自動レイアウト機能について、知識を授けていただけないでしょうか。

*訂正 : 画像ではCanvasから水色の矢印が引かれていますが間違いです。正しくは、その下のScrollViewから矢印が引かれ、ScrollViewオブジェクトのInspectorに矢印を向けています。

###追記

ひとつ気になっていたことでしたが、ContentのContentSizeFitterコンポーネントに
このような警告が表示されていました。

このメッセージについて検索したところ、次のような公式マニュアルを発見しました。

https://docs.unity3d.com/ja/current/Manual/HOWTO-UIFitContentSize.html

どうやら、ContentSizeFitterとLayoutGroupはお互いにノードの大きさを変更しようとして競合することがあるようです。

この情報をもとに、ContentSizeFitterをリムーブして、VerticalLayoutGroupだけを残しました。

すると、画面が大きくなるのに合わせて、横幅が伸びてScrollViewいっぱいに、推奨サイズに近くなるべく大きくなってくれるようになりました。
しかし、今度は縦の幅が、画面が小さくなるのに比例して縦長に伸びるようになってしまいました。

###なぜこの問題にこだわっているか

この問題を解決したかったのは、例えば下図のような状態では、端末に合わせて画面サイズを変更し、UIが大きさを変えた時に、GUIが機能しなくなってしまう恐れがあったからです。

▲ 文字が見えなくなってしまっている

もし図のような状態になれば、ButtonやToggleコンポーネントがアタッチされていても、押せなかったり、何のボタンなのか文字が見えないことでわからない、ユーザーにはバグのように見えてしまう、など潜在的な不安要素を残します。

いただいた回答をもとにトライした結果、一応ボタンが隠れていて見えないとか、押せないといったことは、ご覧のとおりなくなりました。ですが、まだ完璧にコントロールできているとは言えません。
画面が小さくなった時に、ノードが縦長になるということは、GUIのレイアウトが変わってしまっていますから、見やすいデザインを考える上では障害になります。

改めて、縦の長さについて、画面が小さくなっても、同じくらいの比率を保った矩形を、自動レイアウトに出力させる方法について質問させていただきます。

Answer 1

こんにちは。
あなたの質問文章を読ませていただきました。
私の対処法でいくと（写真を貼れません、ごめんなさい）
HierarchyのCanvasをクリックし
一番右のInspectorの画面に移ります。その中の
[canvas Scaler(Script]のところを見てください。
そして
[UI Scale Mode]のところを{Scale With Screen Size}に変更してください。
これで基本、形は崩れないと思います。

Answer 2

Nodeのプレハブの設定で、Rect Transformのstretchを画像のように設定して、
Layout Elementの設定で、Preferred Heightのみ設定してみたらどうでしょう。

Comments

[camblian]

ご回答ありがとうございます。
ご提案いただいた方法を試してみたところ、Nodeの横幅がまったくない状態で表示されました。
高さだけのすっごく細いUIのように表示されてしまったので、どうやら横の幅もなにか値をいれてやらなければならないようです。
またなぜか、アンカープリセットが固定されており、変更できませんでした。
何度やっても同じプリセットが自動的に選択されてしまいます。

このことから「誰かアンカーの位置を決めているヤツがいるのでは」と思い立ち、おそらくそれは"VerticalRayoutGroup"か"ContentSizeFitter"のどちらかだと思い、そのあたりで色々やっているうちに少し前進が見られたので追記したいと思います。