UnityでScroll View内に配置したオブジェクトや
Scroll ViewのContentのサイズを自動調整する方法の備忘録です。
縦方向に並べてオブジェクトを配置する場合
Scroll Viewを配置する
まずは、Scroll Viewを配置しないと始まらないのでシーンにScroll Viewを配置します。
Vertical Layout Group、Content Size Fitterをアタッチ
Scroll ViewのContentに
Vertical Layout GroupとContent Size Fitterの2つをアタッチします。
次に、Content Size FitterのVertical FitをPrefferd Sizeに変更します。
またVertical Layout FitterのPaddingやSpacingの値を変更すれば、オブジェクト間の間隔などレイアウトの微調整ができるのでお好みで調整してみましょう。
Content内にオブジェクトを配置
Content内に適当なオブジェクトを複数個配置します。配置するオブジェクトはButtonでもImageでも何でもいいですが、ここではButtonを配置してみました。
すると、Buttonが自動的に縦方向に並べられContentの縦方向サイズも自動的に調整されます。
ここでゲームを実行してみます。
ボタンが縦並びになっていて、ScrollViewのContentの縦幅もそれに合わせたサイズになっています。
Content内のオブジェクトを無効化すると？
Content内に無効化されたオブジェクトがある場合は、有効なオブジェクトだけが自動的に配列されます。
また、ゲーム起動中にContent内のオブジェクトを有効化、無効化するとその都度オブジェクト配置やContentのサイズが自動調整されます。
上の動画では、クリックされたボタンが消える(無効化される)ようにしてあります。ボタンが無効化されると、有効になっているボタンだけが再度配置し直されています。
おまけ 縦横方向の配置を自動調整
先ほどは縦方向に並べる場合のやり方の紹介でしたが、次は縦横方向の配置を自動調整する方法です。
Grid Layout Group、Content Size Fitterをアタッチ
Scroll ViewのContentに、Grid Layout GroupとContent Size Fitterの2つをアタッチします。
Content Size FitterのVertical FitとHorizontal Fitの2箇所をPrefferd Sizeに変更します。
Grid Layout Groupの設定
Grid Layout Groupの設定でPaddingやSpacingを調整します。Cell Sizeを調整するとContent内のオブジェクトの大きさを調整できます。
Constraintの内容を変更するとオブジェクトの配列のしかたが変わりますが、個人的にはFixed Column Countに設定してConstraintを適当な数値にすると使いやすいかと思っています。
ここではConstraintを5に設定しています。
あとはContent内にオブジェクトをどんどん置いていきましょう。ここでもButtonを配置しています。
Content内にButtonを複製していくと自動的に横方向に並べて配置されますが、Constraintを5にしたので横方向には5個まで並べて配置されます。
6個目からは一段下の左側に配置され、以降は5個配置するごとに1段ずつ下へ・・・
という感じに配置されていきます。
上の動画では、Contentの子オブジェクトButtonを複製しています。(Buttonを選択してCtrl+Dでオブジェクトを複製)
ただ複製するだけで、わざわざオブジェクトの大きさや位置を調整せずとも勝手に綺麗に並んでくれます。
最後に
以前に私が制作したガラクタと女神でもScrollViewを使っていますが、実はこんな便利な自動調整ができる事を知らなかったので、オブジェクトを配置するたびにわざわざ位置や大きさを手動調整しておりました。
次のゲームに活かすために備忘録を残した次第です。
