uGUI スクロールしてないときはバーをフェードアウト

Scroll Rect

• スクロールバーを簡単に指定できるが、スクロールバーは常に表示されてて、Scrollbar の intaractable もマウスオーバーの時のリアクションしかないっぽい?

• 以下を見るとOnBeginDrag や OnEndDrag などの Functionはある。
  http://docs.unity3d.com/460/Documentation/ScriptReference/UI.ScrollRect.html

• ということで ScrollRect を継承して、ドラッグされてない時はスクロールバーを非表示にするようにスクリプトを組んでみる。

Image

• スクロールバーのハンドルは Image で表示されていて、フェードイン/アウトは以下でできる。
  http://docs.unity3d.com/460/Documentation/ScriptReference/UI.Graphic.CrossFadeAlpha.html

• 入力があったらフェードイン。

• 入力のないときにスクロールの velocityが一定値以下になったらフェードアウトにする。

スクリプト

ScrollRectPlus.cs

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class ScrollRectPlus : ScrollRect {　// ScrollRectを継承
    private Image scrollHandle; // スクロールバーのHandle(Image)
    private bool isScroll = false, isDrag = false; // フラグ

    protected override void Awake (){
        base.Awake ();
        // HandleのImageを取得
        scrollHandle = verticalScrollbar.gameObject.GetComponentInChildren<Image>();
    }

    protected override void OnEnable(){
        base.OnEnable ();
        scrollHandle.CrossFadeAlpha (0.0f, 0.0f, true);
    }

    void Update(){
        if (Mathf.Abs(velocity.y) < 10f) {
            if(!isDrag && isScroll){
                scrollHandle.CrossFadeAlpha (0.0f, 0.25f, true); // フェードアウト
                isScroll = false;
            }
        }
    }

    public override void OnBeginDrag(PointerEventData eventData){
        base.OnBeginDrag (eventData);
        isDrag = true;
        isScroll = true;

        scrollHandle.CrossFadeAlpha (0.5f, 0.25f, true);  // フェードイン
    }

    public override void OnEndDrag(PointerEventData eventData){
        base.OnEndDrag (eventData);
        isDrag = false;
    }
}

使い方

• ScrollRect の代わりに上記スクリプトをコンポーネントに追加。オペレーションはScrollRect と同様。
• Scrollbar の Image コンポーネントは削除する。(Image は Handleのみ)
• Scrollbar の intaractable は Off にする。

課題

• 上記はドラッグベースでありスクロールベースではないので、スクロールホイールに対応していない。