ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

20220329162023

Unity - UI:Scrollbar、Scroll Rect の使い方 -

初めに

 指定した領域をスクロールするために用いる Scrollbar についてまとめます。

Scrollbar とは

 Scrollbar 全体を見るには大きすぎる画像やそのほかのビューをユーザーがスクロールできるようにするための UI です。


Scrollbar のコンポーネント


Interactable、Transition、Navigation

 以前、Toggle の記事で説明をしております。そちらをご覧ください。

fineworks-fine.hatenablog.com

Handle Rect

 Scrollbar のつまみの部分の Image を指定します。デフォルトでは孫オブジェクトである Handle が指定されています。


Direction

 X TO Y の形になっています。X に近づくほど最小値に近づき、Y に近づくほど最大値に近づきます。


Value

 Handle の位置を 0~1で表します。型は float です。

Size

 Scrollbar 全体を 1 としたときの Handle の大きさを表します。自動で調整されます。

Number of Steps

 Handle をスクロールするときのステップ数を表します。0 の場合は滑らかに動き、正の整数 n にすると n 段階でスクロールされます。

On Value Changed

 Value が変化したとき、すなわち Scrollbar を動かしたときに呼び出される関数を指定します。

Scroll Rect

 Scrollbar を使う際、Scroll Rect をいっしょに用います。


Content

 スクロールしたい Image や Panel などのオブジェクトの Rect Transform を指定します。スクロールしたいオブジェクトをドラッグ&ドロップすれば指定できます。

Horizontal、Vertical

 Horizontal、Vertical にチェックがはいっている(true にしておく)とそれぞれ水平方向、垂直方向へのスクロールが有効になります。

Movement Type

 Content の動き方を次の三つから指定できます。

プロパティ 機能
Unrestricted(無制限) Scroll Rect の範囲外にも動かすことができます
Elastic(弾性) Scroll Rect の範囲内に強制的に収めることができます。端に到達した際バウンドさせます。
Clamped(制限付き) Scroll Rect の範囲内に強制的に収めることができます。端に到達すると Content を止めます

 Elastic を選択したとき、Elasticity を設定できます。

(Elasticity 0.1 の場合)

(Elasticity 0.9 の場合)

Inertia

 慣性のことです。チェックが入っていると慣性がはたらき、ドラッグの後ポインターが離されたとき動き続けます。
 Deceleration Rate はどのくらい早く動作を止めるかを表します。0 であれば即座に止まり、1 であれば速度がまったく落ちないことを意味します。

Scroll Sensitivity

 ホイールのスクロールとパッドのスクロールイベントに対する感度を表します。

Viewport、Horizontal Scrollbar、Vertical Scrollbar

 Viewport は親 Rect Transform コンテンツのビューポイント Rect Transform への参照を指定します。
 Horizontal Scrollbar、Vertical Scrollbar にはそれぞれ水平方向、水力方向の Scrollbar を参照します。

Scrollbar、Scroll Rect の使い方

 今回は 親の Image より大きい子の Image をスクロールできるようにします。

  • Image の子オブジェクトを下の画像のように作る


  • 子の Image (上の画像では ContentImage )の大きさを親の Image(上の画像では ParentImage)より大きくする
  • 親の Image に Scroll Rect、Mask をつける

  • Content、Viewport、Scrollbar を取得する

 Scrollbar が水平方向ならば Horizontal、垂直方向ならば Vertical にドラッグ&ドロップします。

  • Scroll Rect の使わない方向のチェックを外す

 この記事では、垂直方向にスクロールさせるため、Vertical のチェックを外しておきます。

(実行)

補足

 Mask を親オブジェクトに付けましたが、Rect Mask 2D でも可能です。

最後に

 記事内ででてきた Mask について、以前まとめております。興味があればぜひご覧ください。
fineworks-fine.hatenablog.com