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 にする。

課題

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