【Unity】データを一覧表示するスクロールビューの作り方
はじめに
スクロールビューにはVertical(縦列),Horizontal(横列),Grid(縦横に複数列)の三種類があります。用途に合わせて使分けます。これが実際に作ったテスト動画(VerticalLayout)です。
VerticalLayOutを使って手順解説
1.UIからScrollViewを追加。
ScrollViewが全体。ViewPortが見えるようになる。ViewPort外のコンテンツはマスクで見えないようになっている。Contentが表示するコンテンツの親となる。つまり、Contentの子オブジェクトにImageやButtonなど表示させたいUIを配置していく。
2.スクロールバーは使わない場合は子オブジェクトのScrollbar HorizontalとScrollbar VerticalのImageとScrollbarコンポーネントを無効に。オブジェクトごと削除してもいいが、横スクロールならScrollbar Horizontal、縦ならScrollbar Verticalを残しておかないいけない。
3.ScrollViewの子オブジェクトのContentオブジェクトにContentSizeFitterコンポーネントとGridLayoutGroupコンポーネントを追加
LayoutGroupについて解説
VerticalLayoutGroup,HorizontalLayoutGroup→縦横のスクロールでコンテンツのUIを一つずつ並べる。コンテンツのUIとなるオブジェクトにLayout Elementコンポーネントを追加してサイズ調整しなければならない。
Grid Layout Group →縦横のスクロールでコンテンツのUIを複数列または複数行指定して並べる。 Grid Layout GroupでcellsizeでコンテンツUIのサイズ調整する。 並び方はConstraintでFixed Column Countで列数の固定、 Fixed Row Countで行数の固定ができます。
Content Size Fitterは追加されたコンテンツのサイズを自動で変更する。Min SizeあるいはPreffed Sizeに設定。
5.Content以下にimageオブジェクトを作成。
6.あとは好みに調整する
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等で調整必要です。
記事は以上です。お疲れ様でした😌
Discussion