本日は Unity の小ネタ枠です。
ScrollViewに複数のボタンを等間隔で配置してサイズを自動調整する方法を記事にします。
ContentSizeFilterとVerticalLayoutGroup
ボタンを等間隔に配置するために VerticalLayoutGroup を、サイズの自動調整のために ContentSizeFilterを利用します。
・VerticalLayoutGroup
docs.unity3d.com
・ContentSizeFilter
docs.unity3d.com
サンプルシーンの作成
Hierarchy で[右クリック -> UI -> ScrollView]で ScrollView オブジェクトを追加します。
以下の通り、ScrollView は縦方向を Stretch で詰めたレイアウトで設定しました。
ContentSizeFilterとVerticalLayoutGroupの設定
ScrollView では[Content]オブジェクトにスクロール内のコンテンツを配置します。
ここのボタン配置やサイズ調整を自動化するため、[Content]オブジェクトに ContentSizeFilter と VerticalLayoutGroup を設定します。
縦方向のサイズを自動調整するため、ContentSizeFilter の[VerticalFit]を[PrefernedSize]に設定しました。
これで設定は完了です。
後は[Content]オブジェクト配下にオブジェクトを追加すると、オブジェクト間の間隔と[Content]オブジェクトのサイズが自動調整されます。
コンテンツを追加する
試しに複数のボタンオブジェクトを追加してみました。
ボタンの配置が自動で設定されていることが分かります。
オブジェクト間の間隔や端のオフセットを調整したい場合は VerticalLayoutGroup の[Padding]と[Spacing]を変更して調整可能です。
画面の縦幅を超える数のオブジェクトを配置してみました。
[Content]オブジェクトの高さが自動調整され、スクロールが有効になることが確認できます。