見出し画像

Unity UI入門⑪ | Scroll Viewの使い方 長い一覧をスクロール表示する方法

ファイブボックス

前回は複数の選択肢を展開して表示するUIパーツの一つ、DropDownについて解説しました。

今回も、UnityのUIパーツの1つである Scroll View について解説します。

Scroll Viewを使うと、画面に収まりきらないメニューや一覧を、マウスホイールやドラッグでスクロール表示できます。
ステージ選択、アイテム一覧、ランキング、設定画面、会話ログなどでよく使われるUIです。

今回は、ステージ選択用のButtonを縦に並べたScroll Viewを作ります。
さらに、次の処理もスクリプトから行います。

  • Scroll Viewの一番上と一番下へ移動する

  • Buttonに「ステージ1」「ステージ2」のような番号を設定する

  • クリックされたButtonの番号を取得する


1．Scroll Viewを作成

HierarchyのCanvasを右クリックし、次の順番でScroll Viewを作成します。

UI → Scroll View

作成すると、Hierarchyには次のようなオブジェクトが追加されます。

Scroll View。

今回は縦方向だけを使用するため、Scrollbar Horizontal（横方向のScrollbar）は削除しても構いません。

2．Scroll Viewの構造

Scroll Viewは、複数のUIオブジェクトを組み合わせて作られています。

Scroll View

一番親になるオブジェクトです。
Scroll Rectコンポーネントが付いており、Contentをスクロールさせる処理を管理します。

Viewport

実際に画面へ表示する範囲です。
Content が Viewport の外側にはみ出していても、Maskコンポーネントの効果で Viewport内にある部分だけが表示されます。

Content

スクロールさせる中身を配置する場所です。
Button、Image、TextMeshProなどは、Contentの子オブジェクトとして配置します。

Scrollbar Vertical

現在どの位置を表示しているかを表す縦方向のScrollbarです。
つまみをドラッグして、一覧を上下に移動することもできます。

3．ContentにButtonを追加

Contentを右クリックし、Buttonを作成します。

今回はLegacy のText を使ったButton を使用します。
Buttonの大きさや文字サイズを調整します。

作成したButtonを複製し、今回は8個用意します。
Controlキー（Commandキー）＋Dキーで複製できます。


今回はUIの作り方を確認するため、ButtonはInstantiateを使わず、Hierarchy上で複製します。

Buttonの文字は、あとの課題でスクリプトから設定します。

4．Contentの設定

4-1．Vertical Layout Groupで縦に並べる

配置したButton は Vertical Layout Group を使って整列します。
Content を選択し、Inspectorから以下の方法でコンポーネントを追加。

Add Component → Vertical Layout Group

Vertical Layout Groupを使うと、Contentの子オブジェクトを縦方向に自動で並べられます。

主な設定項目は次のとおりです。

  • Padding：Contentの端に作る余白

  • Spacing：Button同士の間隔

  • Child Alignment：Buttonを揃える位置

  • Control Child Size：子オブジェクトの大きさを自動で調整する

  • Child Force Expand：空いている範囲まで子オブジェクトを広げる

今回のサンプルの設定例は次のとおりです。

  • Spacing：10

  • Child Alignment：Upper Center

  • Control Child Size

    • Width：オン

    • Height：オフ

  • Child Force Expand

    • Width：オン

    • Height：オフ

これで、Contentの子に配置したButtonが縦方向に自動で並びます。

4-2．Content Size Fitterで高さを調整する

次に、Content へ Content Size Fitter を追加します。

Add Component → Content Size Fitter

設定は次のようにします。

  • Horizontal Fit：Unconstrained

  • Vertical Fit：Preferred Size

Vertical FitをPreferred Sizeにすると、配置されているButtonの数に合わせて、Contentの高さが自動で変化します。
Scroll Viewでは、ContentがViewportより大きくならないとスクロールできません。

Vertical Layout GroupでButtonを並べ、Content Size FitterでContentの高さを広げることで、スクロール可能な一覧になります。

4-3．ContentのAnchorとPivot

Contentが上から下へ伸びるように、Rect Transformも確認します。
ContentのAnchorは上側へ設定し、PivotのYを1にします。

  • Pivot
    　X：0.5
    　Y：1

Pivotが中央になっていると、Buttonが増えたときにContentが上下へ広がり、最初の表示位置がずれることがあります。

Pivotを上側にしておくと、Buttonが増えたときにContentが下方向へ伸びます。

5．Scroll Rectの設定

Scroll View本体を選択し、Scroll Rectコンポーネントを確認します。

Content

スクロールさせるContentを設定します。
通常は、最初からViewportの子にあるContentが設定されています。

Horizontal

横方向へスクロールできるかを設定します。
今回は縦方向だけを使用するため、オフにします。

Vertical

縦方向へスクロールできるかを設定します。
今回はオンにします。

Movement Type

端までスクロールしたときの動きを設定します。

  • Unrestricted：制限なく移動する

  • Elastic：端を越えると元の位置へ戻る

  • Clamped：端より外側へ移動しない

今回は、Elastic または Clamped が使いやすいでしょう。

Inertia

ドラッグを離したあとも、勢いを残して移動するかを設定します。
スマートフォンの画面のような動きにしたい場合はオンにします。

Scroll Sensitivity

マウスホイールを動かしたときのスクロール量です。
動きが小さい場合は、値を少し大きくします。

6．Scrollbar Verticalの役割

Scroll Viewの右側には、Scrollbar Verticalがあります。
Scrollbarは、長い内容の中で、現在どの位置を表示しているかを表すUIです。
また、Scrollbarには、Scrollbarコンポーネントがついています。

主な項目は次のとおりです。

  • Direction：値が増える方向

  • Handle Rect：操作するつまみ

  • Value：現在の位置

  • Size：つまみの大きさ

Contentの量が多いほど、Scrollbarのつまみは小さくなります。
Scrollbarは、以前解説したSliderとよく似ています。
ただし、役割には違いがあります。

Sliderは、音量や明るさなどの数値を選択するためのUIです。

Scrollbarは、長い内容の中で現在表示している位置を表し、表示範囲を移動するためのUIです。

ValueやDirectionなどの基本的な考え方はSliderと共通しているため、詳しくはSliderの記事も参考にしてください。

7．スクリプトからコントロール

7-1．一番上と一番下へ移動する

Scroll Viewの表示位置は、スクリプトから変更できます。
今回は、「一番上へ移動するButton」と「一番下へ移動するButton」を作成します。

ScrollViewController という名前でC#スクリプトファイルをを作成します。

using UnityEngine;
using UnityEngine.UI;

public class ScrollViewController : MonoBehaviour
{
    [SerializeField] ScrollRect scrollRect; // ScrollRectコンポーネント

    public void MoveToTop() // 最上部へ移動する関数
    {
        scrollRect.verticalNormalizedPosition = 1f;
    }

    public void MoveToBottom()  //　最後に移動する関数
    {
        scrollRect.verticalNormalizedPosition = 0f;
    }
}

ScrollRectは、Scroll View全体のスクロール処理を管理するコンポーネントです。

verticalNormalizedPosition を使うと、縦方向の表示位置を変更できます。

scrollRect.verticalNormalizedPosition = 1f;

縦方向では、1が一番上です。

scrollRect.verticalNormalizedPosition = 0f;

0が一番下です。

7-2．ScrollViewControllerを設定する

Hierarchyに空のGameObjectを作成します。
名前は ScrollViewController などに変更します。
作成したGameObjectへ、先ほどのスクリプトを追加します。

直近のエディタでは作成したスクリプトファイルをhierarchyにドラッグ＆ドロップしても同じ結果が得られます。

Inspectorに表示されたScroll Rect欄へ、HierarchyのScroll Viewをドラッグして設定します。

Scroll View本体には Scroll Rectコンポーネントが付いているため、Scroll View の GameObject をそのまま登録できます。

7-3．移動用のButtonを作成

Canvasの中に、次の2つのButtonを作成します。

  • 上へ移動するButton

  • 下へ移動するButton

Buttonの文字は、それぞれ「上へ」「下へ」などに変更します。
動きを確認するだけなので、簡易的なもので結構です。

上へ移動するButtonのOn Clickには、次のメソッドを登録します。

ScrollViewController
→ ScrollViewController
→ MoveToTop()

下へ移動するButtonには、次のメソッドを登録します。

ScrollViewController
→ ScrollViewController
→ MoveToBottom()

ゲームを実行してButtonをクリックすると、Scroll Viewの一番上または一番下へ移動します。

7-4．Buttonにステージ番号を設定する

次に、Contentの子に配置したButtonへ、「ステージ1」「ステージ2」のような文字を設定します。

今回はButton自体はHierarchy上で複製し、表示する番号とクリック処理だけをスクリプトから設定します。

作成済みの ScrollViewController を立ち上げて、以下のコードを追記します。

[SerializeField] Transform content; // ContentのTransform

void Start()
{
    //Content内の子オブジェクトの数だけループ
    for (int i = 0; i < content.childCount; i++)
    {
        // Content内の各子オブジェクトのTextコンポーネントを取得してテキストを設定
        content.GetChild(i).GetComponentInChildren<Text>().text = "ボタン " + (i + 1);
    }

}

[SerializeField] で宣言した変数：content には Viewport 配下の Content オブジェクトをAssignしておきます。

次の処理では、content の i 番目の Button を探して、その子要素の Text コンポーネントを取得し、テキストの文字を置き換えています。

content.GetChild(i).GetComponentInChildren<Text>().text = "ボタン " + (i + 1);

プレイボタンを押したタイミングで、ボタンのテキストが連番に変わっているのが確認できると思います。

8．よくあるトラブル

うまく動かないときは、次の点を確認してみてください。


19．今回のまとめ

今回は、Scroll Viewを使って、縦方向にスクロールできるステージ選択画面を作りました。

ポイントは次のとおりです。

Scroll Viewは、ステージ選択、ショップ画面、ランキング、会話ログなど、多くのUIで利用できます。

Vertical Layout GroupやContent Size Fitterと組み合わせることで、項目数が多い一覧も管理しやすくなります。

次回予告

次回は、UnityのUIパーツの中から Input Field について解説します。

Input Fieldを使うと、プレイヤーが名前や文章を入力できるUIを作成できます。

次回は、Input Fieldの作成方法、入力できる文字数や文字の種類の設定、入力された文字をスクリプトから取得する方法を確認します。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

いいなと思ったら応援しよう！

ファイブボックス よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！