【Unity】スクロールビューの使い方｜等間隔にレイアウト

本記事を読むと以下の実行ができます

スクロールビューの使い方をマスターできる。

Unityのスクロールビュー（ScrollView）は、UI要素をスクロール可能にする便利な機能です。

特に、ゲームやアプリのメニュー画面、ランキング表示、チャットウィンドウなどでよく使われます。

しかし、「スクロールビューの使い方が分からない」・「要素を等間隔にレイアウトしたい」と悩む人も多いでしょう。

本記事では、Unityのスクロールビューの基本的な使い方、要素を適切に配置する方法、スクロールの遅延や重さの解決策について詳細に解説します。

また、自動スクロールの実装、パフォーマンスを最適化するテクニックも紹介します。

スクロールビュー（ScrollView）

ScrollViewは、コンテンツが画面サイズを超える場合に、
スクロール可能な領域を提供するUIコンポーネントです。

主に以下のような場面で活用されます。

UIの中にスライダーがあります。
スライダーはゲージとなる一方で、スクロールビューは一覧を表示します。

【Unity】スライダーで制限時間ゲージ、HPバー、音量調整

制限時間ゲージやHP・体力バー、音量調整の用途でUnityでスライダーの使い方を解説します。sliderを離したとき・押したときの処理やデザインの変更、シーン切り替えなどを合わせて紹介します。

alicia-ing.com

2024.10.23

スクロールビューの使い方

スクロールビューは、Hierarchyウィンドウの「UI」から「Scroll View」で追加します。

作成したスクロールビューが小さいので、画面にサイズが合うようにします。
自分でWidthとHeightを調整してもよいですが、「Anchor Presets」でサイズ変更もできます。

「Altキー」を押しながら、縦（高さ）を画面に自動調整を指示します。

【Unity】プラットフォームに適した画面サイズの変更とUI設置

Unityで画面サイズとUI設置を最適化する方法を解説。各プラットフォームやノベルゲーム、パズルゲーム、RPGなど各ゲームに合わせた画面比率で画面のサイズを変えて、さらに動的なUI操作のヒントを提供します。

alicia-ing.com

2024.10.23

Layout Group

スクロールビュー内に画像UIのようなコンテンツを入れるには、
Viewportの配下「Content」の子要素にする必要があります。

しかし、ただ要素を入れるだけではオブジェクトが重なってしまう問題が発生します。

そこで、「Layout Group」のcomponentを使用して要素を配置します。

縦方向のスクロールではマウスのスクロールと対応しやすいので、
ユーザーがストレスなく操作しやすくなります。

スクロールできない

Layout Groupを設定し、配列を整えました。
しかし、スクロールバーが消えて、下まで進めてもコンテンツが元に戻ってしまう。

原因は、「Content」の大きさが適切ではないということです。
決まった情報をプレイヤーに提供するならばはじめからサイズ指定が有効ですが、
プレイヤーの行動によって情報量が増えるならば大きさを指定することは難しいです。

スクロールバーをコンテンツに応じて変えるときは、
componentから「Content Size Fitter」を追加します。

Content Size Fitterは、UI 要素（RectTransform）のサイズをその内容に応じて自動調整するための Layout Component です。

今回のようにScrollViewのContentに適用して、子要素に応じたサイズ変更を行うのに使われます。
特に、Layout Groupと併用すると効果的です。

スクロールが重い

初期のスクロールビューでは、スクロールしてもコンテンツが全く動きません。

要素が多すぎて動きが重いということもありますが、
基本的には「Scroll Sensitivity」で解決できます。

まとめ

また、ユーザーの操作なしにスクロールを自動で行う場合、以下のように Lerp を活用できます。

void Update()
{
    scrollRect.verticalNormalizedPosition = Mathf.Lerp(scrollRect.verticalNormalizedPosition, 0, Time.deltaTime * 0.5f);
}