【Unity連載】uGUI(Slider)の使い方を詳しく解説


uGUI(Slider)の使い方を詳しく解説


Sliderはマウスなどでドラッグすることによって設定した範囲から数値を選択できるUIです。
他にも、長文や大きい画像を表示する際に、画像・テキストのスクロールのためにも使用されます。

ugui_slider

Sliderオブジェクトの構成


Sliderオブジェクトはデフォルトで以下のコンポーネント構成となっています。
(UIオブジェクトは、Transformの代わりに Rect Transform を持ちます。)
WS000728
Rect Transform以外にはSliderコンポーネントしか持っていません。

そして、Sliderコンポーネント自体には画像を表示する機能は無いため、それらは全てSlider以下の子要素を組み合わせて実装されます。
WS000729

Sliderの子要素の「Background」と、孫要素の「Fill」と「Handle」は Image オブジェクトです。

● Backgroudは移動範囲のImageを管理します。
ここで指定した範囲をクリックするとSliderを動かすことができます。
WS000732

● Fillはスライドして満たされた範囲のImageを管理します。
Fill Area内でAnchorが変化して動きます。
WS000733

● HandleはつまみのImageを管理します。
Handle Slide Area内でAncorが変化して動きます。
WS000734

● Fill AreaはFillの可動域を指定するため、Rect Transformのみを持ちます。

● Handle Slide AreaはHandleの可動域です。同じくRect Transformのみで構成されます。

プロパティ


次は、Sliderコンポーネントの各プロパティについて見ていきます。
Interactable から Navigation までのプロパティは Buttonコンポーネント全く同じですので、こちらの記事を参考にしてください。
⇒ 【Unity連載】uGUI(Button)の使い方を詳しく解説

■Fill Rect
Fill(Sliderを満たしていく部分)のオブジェクトを選択します。
デフォルトでは子要素のFillが指定されます。

■Handle Rext
Handle(Sliderのつまみ部分)のオブジェクトを選択します。
デフォルトでは子要素のHandleが指定されます。

■Direction
DirectionではSliderの向きを変更できます。
WS000730
※水平⇔垂直の変更では、WidthとHeightも自動で変更されます。

■Min Value
Sliderの最小値を設定出来ます。Valueが取れる最小の値です。
Whole NumbersがfalseであればFloatを設定でき、trueであればIntに制限されます。

■Max Value
Sliderの最大値を設定出来ます。Valueが取れる最大の値です。
Whole NumbersがfalseであればFloatを設定でき、trueであればIntに制限されます。

■Whole Numbers
チェックを入れるとSliderの値を整数(Int)に制限します。

■Value
ValueはSliderの現在の数値です。シーン再生中にハンドルをスライドさせると値が連動して変化します。
Sliderの値をスクリプトから取得したい場合や、スクリプトからSliderを操作する場合は、このプロパティを使用します。

	float num = GetComponent<Slider>().value;

■On Value Changed (Single)
On Value Changed (Single) では、Sliderの状態が変わったときにメソッドを呼び出すことができます。
スクリプトからSliderの値をリアルタイムで取得したい場合などに使用します。

1.なんでも良いので以下のような publicメソッド をもつクラスを作成しましょう。

using UnityEngine;

public class Slider_Test : MonoBehaviour {

	public void Hoge() {
		Debug.Log("Slide");
	}
}

2.On Value Changed (Single) 右下の 「+」マークを押下して、Listを追加します。

3.上記で作成したスクリプトファイルのコンポーネント、もしくはスクリプトがアタッチされたオブジェクト(プロジェクトビューのプレハブも可)を紐づけます。

4.No Function のプルダウンから、クラス名 → publicメソッド名を探します。
※ メソッドのアクセス権がpublicでないと表示されないので注意しましょう。(登録後にprivateにしても実行はできる)

5.シーンを再生してSliderを切り替えるとメソッドが呼ばれます。

以上が、uGUIのSliderです。

  • このエントリーをはてなブックマークに追加

PAGE TOP