🖥️

【Unity】データを一覧表示するスクロールビューの作り方

2021/04/25に公開約2,500字

はじめに

スクロールビューにはVertical(縦列),Horizontal(横列),Grid(縦横に複数列)の三種類があります。用途に合わせて使分けます。これが実際に作ったテスト動画(VerticalLayout)です。

https://youtu.be/GJctd3NZLXI

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がコンテンツの隙間の決定。

使用例

https://www.youtube.com/watch?v=H4WN-RM-bqg

設定項目は以下のような感じです。

Conten以下にButtonの子オブジェクトを追加でフィニッシュ。

Grid Layout Groupの場合(複数列、複数行の縦横スクロール)

GridLayoutGroupをContentにアタッチします。上の画像の一覧の場合は以下のコンポーネント設定です。

paddingが隙間でcellsizeがUIの大きさです。

ConstraintがUIの制限で、FixdCoummCountにするとUIが横に並ぶ数を指定できます。ただし、UIがはみでると画面から見えなくなるのでcellsize等で調整必要です。

記事は以上です。お疲れ様でした😌

Discussion

ログインするとコメントできます