Unity

ドロップダウンアイテムの一覧を表示したときに選択しているアイテムが先頭にくるようにスクロールする

Siden oppdatert :
ページ作成日 :

現在表示しているページは選択中の表示言語には対応しておりません。

検証環境

Windows
  • Windows 11
Unity エディター
  • 2020.3.25f1

この Tips の前提設定

この Tips の説明の前提として以下の設定を事前に行っています。

ドロップダウンのアイテム一覧を表示したときは常に一番上のアイテムが表示される

ドロップダウンアイテムの数がドロップダウンエリアよりも大きい場合スクロールが表示されますが、 その際最初に表示されるアイテムは必ず一番上にあるアイテムとなります。

これは下の方にあるアイテムを選択している状態で展開したときも同様です。

しかし、人によっては展開した時点で選択しているアイテムを一番上に表示してほしい場合もあります。 これに対応するには以下の追加設定を行う必要があります。

ドロップダウン展開時に選択しているアイテムが一番上に来るようにスクロールする

この処理はスクリプトによって行います。プロジェクトにスクリプトを追加し名前は DropdownScroll としますが名前は任意です。

スクリプトエディターを開いたら以下のように入力します。

using UnityEngine;
using UnityEngine.UI;    // 追加

public class DropdownScroll : MonoBehaviour
{
  public void Start()
  {
    // スクロールの計算に必要な各コンポーネントを取得
    var dropdown = GetComponentInParent<Dropdown>();
    var scrollRect = gameObject.GetComponent<ScrollRect>();
    var viewport = transform.Find("Viewport").GetComponent<RectTransform>();
    var contentArea = transform.Find("Viewport/Content").GetComponent<RectTransform>();
    var contentItem = transform.Find("Viewport/Content/Item").GetComponent<RectTransform>();

    // 選択しているアイテムの位置や表示領域をもとに選択アイテムまでスクロールすべき量を計算する
    var areaHeight = contentArea.rect.height - viewport.rect.height;
    var cellHeight = contentItem.rect.height;
    var scrollRatio = (cellHeight * dropdown.value) / areaHeight;
    scrollRect.verticalNormalizedPosition = 1.0f - Mathf.Clamp(scrollRatio, 0.0f, 1.0f);
  }
}

コードの内容はそこまで複雑な事はしておらず、 ドロップダウンを展開したとき選択しているアイテムが一番上に来るようにスクロールする位置を計算して設定しています。

Start メソッドに記述しているのはドロップダウンが展開されるたびに初期化処理が動作すること前提としているためです。

コードを保存したらこのスクリプトを Dropdown の Template にアタッチします。

Temolate 配下のオブジェクトはゲーム実行後ドロップダウンを展開したタイミングで生成されるので、 アタッチしたコンポーネントも展開のタイミングで初期化処理が実行されます。 また、ドロップダウンが閉じられると展開されたオブジェクトが破棄され、 再度展開すると再び生成されるので展開のたびに初期化処理が実行されることとなります。

では実行してみてください。

何も対処していないドロップダウンは前述のとおり下にあるアイテムを選択している状態で展開しても選択しているアイテムは見えません。 一方対処したドロップダウンを展開すると選択しているアイテムが見えるところまでスクロールされている状態で表示されることを確認できると思います。