Unity
uGUI

uGUIのScroll Viewをはじめてみる

More than 3 years have passed since last update.

Unity5.3.1f1のScroll Viewを調べてみました。

今回は縦にスクロールするものを作ってみます。


実装


初期配置

メニューバーの「GameOjbect」→「UI」→「Scroll View」を選択。

ざっくり説明すると


  • Scroll Viewは一番上の親

  • Viewportは見える範囲を制御(==マスク)

  • Contentは実際スクロール内のアイテム。この下に複数のGameObjectを配置する感じ。

  • Scrollbar Horizontalは横のスライダー

  • Scrollbar Verticalは縦のスライダー

ScrollView1.PNG


縦限定のScroll Viewにする

今回は縦のスクロール限定なので、横スライダー(==Scroll Horizontal)を消します。

ScrollView3.PNG


  • Horizontalのチェックを外す

  • Horizontal ScrollbarがMissingになっていたらNone

  • ImageのNone(==必須ではないのでお好みで)

ScrollView5.PNG

今回はわかりやすくするため、Heightを大きくしておきました。

ScrollView6.PNG


Viewportの設定

ScrollView7.PNG

ここの設定は必須ではないですが、わかりやすくするため下記のようにしておきます。


  • Maskのチェックを外します

  • ImageをNone

ScrollView8.PNG


Contentの設定

縦のスクロールは上にあわせると都合がよいことがあるので、AnchorsとPivotは図のようにしました。

ScrollView9.PNG

Textをいれてみました。

ScrollView10.PNG

Content Size Filterをいれます。

縦スクロールの場合はVetical Fitをいれます。値はPreferred Size。

このコンポーネントはよくわかっていないんですが、オブジェクトのサイズを自動調整してくれる感じらしいのです。

ScrollView11.PNG

なので、この設定するとHeightがTextの大きさで自動調整されてこんな風になります。

地味に大切な機能だったり。

ScrollView12.PNG


完成

Sceneにみるとこんな感じ。

Maskが外れているので範囲外が表示されています。

ScrollView13.PNG