Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
26
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Organization

uGUIのScroll Viewをはじめてみる

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
26
Help us understand the problem. What are the problem?