【Unity】一覧表示するスクロールビュー(ScrollView)の作り方
はじめに
スクロールビューにはVertical(縦列),Horizontal(横列),Grid(縦横に複数列)の三種類があります。用途に合わせて使分けます。これが実際に作ったテスト動画(VerticalLayout)です。
Vertical Layoutを使って手順解説
-
UIからScrollViewを追加。
ScrollViewが全体。ViewPortが見えるようになる。ViewPort外のコンテンツはマスクで見えないようになっている。Contentが表示するコンテンツの親となる。つまり、Contentの子オブジェクトにImageやButtonなど表示させたいUIを配置していく。 -
スクロールバーは使わない場合は子オブジェクトのScrollbar HorizontalとScrollbar VerticalのImageとScrollbarコンポーネントを無効に。オブジェクトごと削除してもいいが、横スクロールならScrollbar Horizontal、縦ならScrollbar Verticalを残しておかないいけない。
-
ScrollViewの子オブジェクトのContentオブジェクトにContentSizeFitterコンポーネントとVerticalLayoutGroupコンポーネントを追加
LayoutGroupについて解説
VerticalLayoutGroup,HorizontalLayoutGroup→縦横のスクロールでコンテンツのUIを一つずつ並べる。コンテンツのUIとなるオブジェクトにLayout Elementコンポーネントを追加してサイズ調整しなければならない。
Grid Layout Group →縦横のスクロールでコンテンツのUIを複数列または複数行指定して並べる。 Grid Layout GroupでcellsizeでコンテンツUIのサイズ調整する。 並び方はConstraintでFixed Column Countで列数の固定、 Fixed Row Countで行数の固定ができます。
ContentSizeFitter
Content Size Fitterは追加されたコンテンツのサイズを自動で変更する。Min SizeあるいはPreffed Sizeに設定。
-
Content以下にimageオブジェクトを作成。
-
あとは好みに調整する
VerticalLayoutGroupでChildAligmentをUpperCenterなどににして位置を調整。
とかスクロールバーの余白を埋めるためにSpacingをいじったりする↓
最終的にこんな感じに。
Elementを複製すれば自動でスクロールが伸びて、位置も調整させる。
Horizontal Lyaout Group(横にUIを並べていくスクロール)
paddingが始める開始位置の設定。
Spacingがコンテンツの隙間の決定。
使用例
設定項目は以下のような感じです。
Conten以下にButtonの子オブジェクトを追加でフィニッシュ。
Grid Layout Groupの場合(複数列、複数行の縦横スクロール)
GridLayoutGroupをContentにアタッチします。上の画像の一覧の場合は以下のコンポーネント設定です。
paddingが隙間でcellsizeがUIの大きさです。
ConstraintがUIの制限で、FixdCoummCountにするとUIが横に並ぶ数を指定できます。ただし、UIがはみでると画面から見えなくなるのでcellsize等で調整必要です。
バーを削除したい場合の手順
-
まずScrollbarを削除
-
削除しても元々バーがあった場所は自動的に埋まらないのでViewportの大きさを調整する必要がある。
以下のようなスクロールビューを作りたい場合
編集中です。
※上のGifのバーの部分の表示がおかしいですがGifの問題なので無視してください。
記事は以上です。お疲れ様でした😌
Discussion