Unity

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

More than 3 years have passed since last update.


Scroll Rect


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

  • 以下を見るとOnBeginDrag や OnEndDrag などの Functionはある。

    http://docs.unity3d.com/460/Documentation/ScriptReference/UI.ScrollRect.html


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



Image


スクリプト


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


課題


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