MRが楽しい

MRやVRについて学習したことを書き残す

ScrollViewに複数のボタンを等間隔で配置してサイズを自動調整する

本日は Unity の小ネタ枠です。
ScrollViewに複数のボタンを等間隔で配置してサイズを自動調整する方法を記事にします。
f:id:bluebirdofoz:20220206002435j:plain

ContentSizeFilterとVerticalLayoutGroup

ボタンを等間隔に配置するために VerticalLayoutGroup を、サイズの自動調整のために ContentSizeFilterを利用します。
・VerticalLayoutGroup
docs.unity3d.com
・ContentSizeFilter
docs.unity3d.com

サンプルシーンの作成

Hierarchy で[右クリック -> UI -> ScrollView]で ScrollView オブジェクトを追加します。
f:id:bluebirdofoz:20220206002517j:plain

以下の通り、ScrollView は縦方向を Stretch で詰めたレイアウトで設定しました。
f:id:bluebirdofoz:20220206002530j:plain

ContentSizeFilterとVerticalLayoutGroupの設定

ScrollView では[Content]オブジェクトにスクロール内のコンテンツを配置します。
f:id:bluebirdofoz:20220206002543j:plain

ここのボタン配置やサイズ調整を自動化するため、[Content]オブジェクトに ContentSizeFilter と VerticalLayoutGroup を設定します。
縦方向のサイズを自動調整するため、ContentSizeFilter の[VerticalFit]を[PrefernedSize]に設定しました。
f:id:bluebirdofoz:20220206002552j:plain

これで設定は完了です。
後は[Content]オブジェクト配下にオブジェクトを追加すると、オブジェクト間の間隔と[Content]オブジェクトのサイズが自動調整されます。

コンテンツを追加する

試しに複数のボタンオブジェクトを追加してみました。
ボタンの配置が自動で設定されていることが分かります。
f:id:bluebirdofoz:20220206002603j:plain

オブジェクト間の間隔や端のオフセットを調整したい場合は VerticalLayoutGroup の[Padding]と[Spacing]を変更して調整可能です。
f:id:bluebirdofoz:20220206002613j:plain

画面の縦幅を超える数のオブジェクトを配置してみました。
[Content]オブジェクトの高さが自動調整され、スクロールが有効になることが確認できます。
f:id:bluebirdofoz:20220206002623j:plain