Scroll Rect

Scroll Rect は小さい領域に、多くのスペースを使用するコンテンツを表示する必要がある場合に使用することができます。Scroll Rect はこのコンテンツ中をスクロールする機能を提供します。

普通 Scroll Rect は、目に見える Scroll Rect 内のスクロール可能なコンテンツのみを表示するスクロールビューを作成するために Mask と組み合わせるものです。また、1 つか 2 つ、水平や垂直方向にスクロールするためにドラッグできる Scrollbar と追加で組み合わせることもできます。

プロパティー

イベント

説明

スクロールビューで重要な要素は、ビューポイント, スクロールするコンテンツ、そして任意に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 Scrollbar と Vertical 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 要素を作るを参照してください。