WisdomSoft - for your serial experiences.

スクロールバー

スライダーによく似た GUI で、主にコンテンツのスクロール処理に用い垂れるスクロールバーを紹介します。

幅のあるつまみ

スライダーとほぼ同じ機能を提供する GUI としてスクロールバーがあります。スクロールバーも指定範囲から単一の数値を選択する GUI ですが、つまみに幅がある点でスライダーと異なります。一般的には、その名前の通り一定の表示範囲内にあるコンテンツのビュー領域をスクロールするために応用されます。

スライダーと同様に、スクロールバーも垂直スクロールバーと水平スクロールバーがあります。垂直スクロールバーを描画するには VerticalScrollbar() メソッドを用います。

GUI クラス VerticalScrollbar() メソッド
public static float VerticalScrollbar(
	Rect position,
	float value, float size,
	float topValue, float bottomValue
)
public static float VerticalScrollbar(
	Rect position,
	float value, float size,
	float topValue, float bottomValue,
	GUIStyle style
)

position パラメータには垂直スクロールバーの位置とサイズを表す範囲を指定します。value パラメータにはつまみの位置を表す現在の値、size パラメータにつまみの範囲、topValue パラメータにはバーの最上部が対応する値、bottomValue パラメータにはバーの最下部が対応する値を指定します。style パラメータはスクロールバーの GUI スタイルを指定します。このメソッドは新しい選択された値を結果として返します。

同様に、水平スクロールバーを描画するには HorizontalScrollbar() メソッドを用います。

GUI クラス HorizontalScrollbar() メソッド
public static float HorizontalScrollbar(
	Rect position,
	float value, float size,
	float leftValue, float rightValue
)
public static float HorizontalScrollbar(
	Rect position,
	float value, float size,
	float leftValue, float rightValue,
	GUIStyle style
)

position パラメータには水平スクロールバーの位置とサイズを表す範囲を指定します。value パラメータにはつまみの位置を表す現在の値、size パラメータにつまみの範囲、leftValue パラメータにはバーの左端が対応する値、rightValue パラメータにはバーの右端が対応する値を指定します。style パラメータはスクロールバーの GUI スタイルを指定します。このメソッドは新しい選択された値を結果として返します。

つまみの幅は、バーの最小値と最大値の差の絶対値との比になります。例えばスクロールバーの最小値が 0、最大値が 100 のとき、つまみの幅を表す size パラメータの値が 25 であれば、描画されるつまみはスクロールバー全体の 25% を占めることになり、選択可能な値は 0 ~ 75 の範囲となります。

コード1
using UnityEngine;

public class Test : MonoBehaviour 
{
	void OnGUI()
	{
		Rect rect1 = new Rect(10, 10, 30, 200);
		GUI.VerticalScrollbar(rect1, 0, 25, 0, 100);

		Rect rect2 = new Rect(40, 10, 400, 30);
		GUI.HorizontalScrollbar(rect2, 45, 10, 0, 100);
	}
}
実行結果
コード1 実行結果

コード1は垂直スクロールバーと水平スクロールバーを表示するスクリプトです。それぞれ、バーの最小値に 0、最大値に 100 を指定しています。

例えば水平スクロールバーには、現在の値を 45、つまみの幅を 10 としているため、つまみはバーの中心に表示されます。このプログラムでは、スクロールバーの値を 45 で固定しているため、つまみを動かすことはできません。ユーザーがつまみを動かすには、メソッドが返した値を次の OnGUI() メソッドで設定します。

コード2
using UnityEngine;

public class Test : MonoBehaviour 
{
	private float value = 0;
	void OnGUI()
	{
		Rect rect1 = new Rect(10, 10, 400, 30);
		value = GUI.HorizontalScrollbar(rect1, value, 10, 0, 100);
		
		Rect rect2 = new Rect(10, 40, 400, 30);
		GUI.Label(rect2, "Value=" + value);
	}
}
実行結果
コード2 実行結果

コード2は HorizontalScrollbar() メソッドが返した値を value 変数に保存し、HorizontalScrollbar() メソッドの第2パラメータに value 変数を渡しています。これによって、ユーザーが操作した値が次のフレームの描画に反映され、つまみが正しく移動します。