前回の記事ではuGUIのスクロール機能を拡張し、要素数が増減した時に幅などをソースコード上で計算するのではなくContent Size FitterやHorizontal Layout Groupの仕組みを説明しました。

スクロール機能は奥が深く、新卒で初めてUnityを扱った筆者にとって理解がしづらかった部分がたくさんあります。

本記事では前回の状態から簡易的なスライダー機能を搭載する方法について記載します。

下記では右方向のスライダー機能を紹介しますが、似た処理を行うことで左方向にも対応が可能です。

本記事の目標
実装
解説
- Slideメソッド
- CalcPerStepメソッド
まとめ
おわりに

本記事の目標

前回作成したスクロール機能の右側に右矢印のボタンを配置しました。

このボタンを1回クリックすると要素1個分スクロールするようになります。

ボタンを押す前	ボタンを押した後

実装

下記に示すSampleButton.csをボタンにアタッチします。 _scrollRectと_contentRectTransformにはそれぞれ下記を指定します。

using UnityEngine;
using UnityEngine.UI;

public class SampleButton : MonoBehaviour
{
    private Button _button;
    [SerializeField] private ScrollRect _scrollRect;
    [SerializeField] private RectTransform _contentRectTransform;

    private void Start()
    {
        _button = GetComponent<Button>();
        _button.onClick.AddListener(() => Slide());
    }
    private void OnDestroy() => _button.onClick.RemoveAllListeners();

    private void Slide()
    {
        Vector2 currentPos = _scrollRect.normalizedPosition;
        // スクロール範囲を制限していないと一時的に範囲外となり見た目が崩れるため
        // 0～1の範囲に収まるようにする
        currentPos.x = Mathf.Clamp(currentPos.x + CalcPerStep(), 0, 1);
        _scrollRect.normalizedPosition = currentPos;
    }

    private float CalcPerStep()
    {
        var contentWidth = _contentRectTransform.rect.width;

        var scrollRectTransform = _scrollRect.GetComponent<RectTransform>();
        var scrollHiddenWidth = contentWidth - scrollRectTransform.rect.width;

        var contentCount = _contentRectTransform.childCount;
        var hiddenCount = scrollHiddenWidth / contentWidth * contentCount;

        return 1 / hiddenCount;
    }
}