Input Field
Auto Layout

Scroll Rect

Scroll Rect は多くのスペースを占めるコンテンツを少ない領域に表示する必要があるときに使用することができます。Scroll Rect はそのコンテンツをスクロールする機能を提供します。

通常 Scroll Rect は、その範囲に収まるスクロール可能なコンテンツのみを表示するスクロールビューを作成するために Mask と組み合わせて使用します。またそれに加えて、ドラッグして水平や垂直にスクロールできる Scrollbar を1つや2つ組み合わせることもできます。

Scroll Rect の例
Scroll Rect の例

プロパティー

プロパティー: 説明:
Content 例えば大きな画像など、スクロールする UI 要素の RectTransform への参照です
Horizontal 水平方向へのスクロールを有効にするかどうか
Vertical 垂直方向へのスクロールを有効にするかどうか
Movement Type Unrestricted(無制限), Elastic(弾性), Clamped(制限付き) コンテンツを Scroll Rect の範囲内に強制的に収める場合には Elastic か Clamped を使用してください。Elastic モードはコンテンツが Scroll Rect の端に到達した際にバウンドさせます。
        Elasticity Elastic モードで使用されるバウンド量
Inertia Inertia (慣性)が設定されている場合、コンテンツはドラッグの後ポインターが離されたときに移動し続けます Inertia が設定されていない場合は、コンテンツはドラッグされているときだけ動きます。
        Deceleration Rate Inertia が設定されている場合、コンテンツがどのくらい早く動作を止めるかは Deceleration Rate で決まります 値が 0 であれば動作は即座に止まり、1 であれば速度がまったく落ちないことを意味します。
Scroll Sensitivity マウスのホイールスクロールやトラックパッドのスクロールイベントの感度
Viewport 親 Rect Transform コンテンツのビューポイント Rect Transform への参照
Horizontal Scrollbar オプションの水平のスクロールバー要素への参照
        Visibility スクロールバーが必要ではない場合、バーを自動的に非表示するかどうか さらに任意でビューポイントを適切に拡大するオプションがあります。
        Spacing スクロールバーとビューポイント間のスペース
Vertical Scrollbar オプションの垂直のスクロールバー要素への参照
        Visibility スクロールバーが必要ではない場合、バーを自動的に非表示するかどうか さらに任意でビューポイントを適切に拡大するオプションがあります。
        Spacing スクロールバーとビューポイント間のスペース

イベント

プロパティー: 説明:
On Value Changed Scroll Rect のスクロール位置が変更されたときに呼び出される UnityEvent イベントは ‘Vector2’ 型のダイナミック引数として現在のスクロール位置を送信することができます。

詳細

スクロールビューで重要な要素は、ビューポイント, スクロールするコンテンツ、そして任意に1つか2つ設定する スクロールバーです。

  • ルートにある GameObject に Scroll Rect コンポーネントがあります。
  • ビューポイントに、Maskコンポーネントがあります。ビューポートは、ルートにある GameObject あるいはルートとなる子のそれぞれのゲームオブジェクトのいずれかです。自動でスクロールバーが非表示になる場合、それは子オブジェクトです。ビューポイントの Rect Transform は、Scroll Rect のビューポイントプロパティーで参照する必要があります。
  • すべてのスクロールするコンテンツは、ビューポイントに対して子(単一コンテンツの子のゲームオブジェクト)でなければいけません。Rect Transform のコンテンツは、Scroll Rect の コンテンツ プロパティーで参照する必要があります。
  • スクロールバー - 使用している場合、ルート GameObject に対する子オブジェクトです。スクロールバーの設定についての詳細は Scrollbar を参照してください。スクロールビューでスクロールバーを設定する情報については、以下のセクション スクロールバーの設定 を参照してください。

この画像は、ビューポートがスクロールビューの子である設定を示します。これは GameObject > UI > Scroll View のメニューオプションを使用するとき使われるデフォルトです。

コンテンツをスクロールするために、入力はコンテンツ自身からではなく、ScrollRect の範囲内から受け取らなくてはなりません。

無制限の (Unrestricted) スクロール動作を使用する際には、コンテンツの制御を失う可能性があることに注意してください。弾性 (Elastic) か制限付き (Clamped) の動作を使用する際にはコンテンツが ScrollRect の範囲内から始まるように配置するのが最善策です。そうしない場合、RectTransform がその境界内にコンテンツを移動させようとする、といった好ましくない挙動が起こるかもしれません。

Scrollbar のセットアップ

必要に応じて、Scroll Rect は水平や垂直の Scrollbar と連結することができます。各 Scrollbar は一般的に、ヒエラルキーで Scrollview と同じ階層に配置され、存在する場合は Scroll Rect の Horizontal ScrollbarVertical Scrollbar プロパティーにそれぞれドラッグする必要があります。Horizontal Scrollbar の Direction プロパティーは Left To Right に、Vertical Scrolbar は Bottom To Top に設定する必要があることに注意してください。

スクロールバーがビューポートより小さいのでスクロールする必要がないコンテンツの場合、任意でスクロールバーを非表示にして、隠すことが可能です。自動で非表示になるのはプレイモードでのみ発生することに注意してください。エディットモードではスクロールバーが常に表示されます。これは、そうあるべきでないのに余計なものとしてシーンにマーキングするのを防ぎ、スクロールバーが表示されているときでさえ余裕がある比率でコンテンツをオーサリングするのに役立ちます。

両方、一方のスクロールバーの振る舞いをAuto Hide And Expand Viewに設定した場合、スクロールバーにそれ以外の方法で余分なスペースが取れるようにするために、スクロールバーが隠されたとき自動的にビューポートが拡大されるようにします。このセットアップでは、表示の位置と大きさが Scroll Rect で動き、水平スクロールバー だけでなく 垂直スクロールバーの高さも動かせます。さらに、このセットアップでビューポートと同様にスクロールバーは、Scroll Rect のルートの GameObject の子でなければいけません。

ヒント

  • コンテンツの RectTransform のピボットとアンカーは、スクロールビュー内でコンテンツが拡大や縮小をした場合どのように整列されるかを決定するために使用することができます。コンテンツを上部に整列させる必要があれば、親のアンカーを top に設定し、ピボットを上部に設定します。
  • コンテンツに合わせてその Rect Transform を自動的にサイズ変更させる方法については コンテンツのサイズに合わせた UI 要素を作るを参照してください。
Input Field
Auto Layout