【Unity uGUI】Scrollbarコンポーネントを徹底解説


Scrollbarコンポーネント


この記事は uGUIシリーズ の7回目です。今回は Scrollbar について解説します。

※使用しているUnityのバージョンは5.5.0f3です。

Scrollbarとは


Scrollbarは、指定した領域をスクロールするためのUIです。
一画面で表示しきれない大きい画像や長いテキストなどの表示に使用します。
※ちなみに Slider はマウスなどでドラッグすることによって設定した範囲の数値を選択できるUIです。

プロパティの解説

Scrollbarコンポーネントのプロパティについて解説しておきます。

■Interactable

■Transition

■Navigation

上記3つについては他のコンポーネントと共通ですので、こちらのエントリーを参考にしてください。
UnityのButtonの使い方

■Handle Rect

Scrollbarのハンドル(つまみ)部分のImageを指定します。
Imageコンポーネントを持つオブジェクトをD&Dで紐づけましょう。

■Direction

Scrollbarの向きを変更します。
Left To Right(Valueが0のとき、Handleが左端にくる)
Right To Left(Valueが0のとき、Handleが右端にくる)
Bottom To Top(Valueが0のとき、Handleが下端にくる)
Top To Bottom(Valueが0のとき、Handleが上端にくる)

■Value

Handleの位置が(0.0~1.0)で表される。データ型はfloat。

■Size

Scrollbar全体を1.0としたときのHandleのサイズ。
自動で調整されるため、Contentが大きくなれば、Sizeは小さくなる。

■Number Of Steps

Handleを段階的にスクロールするときのステップ数。
0でHandleは滑らかに移動する。値を大きくするとHandleの位置は段階的に動く。

■On Value Chenged (Single)

Scrollbarを動かしたとき(Valueが変化したとき)にコールされるメソッドを指定します。

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

using UnityEngine;

public class Scrollbar_Test : MonoBehaviour {

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

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

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

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

5.シーンを再生してScrollbarを動かすと、メソッドが呼ばれます。

Scrollbarの使い方


次はScrollbarを使ってみましょう。

1.Panelを用意する

Panelを2つ、入れ子で用意します。
名前がまぎらわしいので、子要素の方はViewport(Panel)としておきます。

PanelのAnchorsを下図のように設定します。
(Rect Transformの詳しい解説は こちら からどうぞ)
Min X = 0.2、Max X = 0.8、Min Y = 0.2、Max Y = 0.8

Viewport(Panel)のAnchor Presetsstretch-stretchに変更します。

2.Viewport(Panel)の子要素にTextを作成する

コンテンツ用のTextオブジェクトです。

3.Textコンポーネントの設定とContent Size Fitterの追加

作成したTextオブジェクトのTextコンポーネントに下図の設定をします。

Anchor Presetsstretch-stretchに変更
Pivotx=0.5 y=1 に設定
Textには改行を含む文字列を複数行記述
Vertical OverflowOverfrowに変更
Best Fitにチェックをいれる
Content Size Fitterコンポーネントを追加して、Vertical FitPreferred Sizeに変更

4.表示領域のマスク設定(Rect Mask 2D)

Textの行数を増やすと、下図のようにテキストがViewport(Panel)からはみ出してしまいます。
はみ出した部分は Rect Mask 2D コンポーネントを使って、表示されないようにしましょう。

Viewport(Panel)にRect Mask 2Dを追加します。

Panelのサイズからはみ出している部分の表示がマスクされました。

5.Scrollbarの作成

Panelの子要素にScrollbarを作成します。

今回はScrollbarを縦向きで使用するため、ScrollbarコンポーネントのDirectionBottom To Top に変更します。
縦にしたら適当な位置に配置しましょう。

6.Scroll Rectコンポーネントの追加と設定

PanelにScroll Rect コンポーネントを追加し、下図の設定をします。

Contentにコンテンツを紐づける。今回の場合はText
Viewportにスクロールさせたい領域を紐づける。今回の場合はViewport(Panel)
Vertical Scrollbarに垂直方向用のScrollbarオブジェクトを紐づける。今回の場合はScrollbar

7.完成

シーンを再生してスクロールを確認してみましょう。

補足

■Content Size Fitterについて

Content Size Fitterは自身のレイアウト要素のサイズを管理するコンポーネントです。
例えば、Textが改行を繰り返して縦方向に長くなると、Textがコンテンツからはみ出してしまいます(Vertical Overfrow を Overfrowにした場合)が、Content Size Fitterを使用すると要素の大きさに応じてRect Transformの値を自動調整してくれます。
ただし、サイズ調整はPivotの位置を基準とするため、Pivotが中心のときサイズは上下左右に等しく拡大されます。
Pivotの位置を上辺中央などに設定すれば、サイズは下方向にのみ拡大されます。
(※Unconstrainedに設定している場合、拡大されません。)

■Rect Mask 2Dについて

Rect Mask 2Dは2次元空間用のマスクです。
通常のマスクに比べて動作が軽量であるため、UIなどの表示を切り分ける場合はこちらがおススメです。

■Scroll Rectについて

Scroll Rectコンポーネントは、表示する内容(Content)と、それを表示するための領域(Viewport)と、スクロールバー(Scrollbar)、この3つのオブジェクトを紐づけるために使用します。
Scroll Rectが設定されているオブジェクトのRect Transformの領域内では、Scrollbarの代わりにドラッグ&ムーブや、マウスホイールでスクロールすることができます。
そのため、Scroll Rectコンポーネントを追加するオブジェクト(場所)やRect Transformの値の持ち方には注意しましょう。

 以上です。
最後までお読みいただきありがとうございます。

最近よく読まれている記事

【Unity】Unite 2017 Tokyo セッションスライド一覧 ★注目★
【Unity】SE兼ITスクールの講師がUnite2017の気になる講演をピックアップしてみた
【Unity】Physic MaterialのFrictionを1より大きくしたらどうなるのか検証してみた

Unityの記事一覧にもどる

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

PAGE TOP