いんでぃーづ

ゲームメインのブレブレブログ。ゲーム,Unity,デザイン,UI/UX

Unity UI : 要素数に応じてスクロール領域が自動で変わるスクロールビューの設定

{スポンサーリンク}

メニュー画面とかで使いたいこんな感じのスクロール領域の作り方。

f:id:sugar_affordance:20191009104514g:plain

Scroll View をシーンに追加

Hierarchy ビューで Create > UI > Scroll View とクリックしてシーンにスクロールビューを追加します。

f:id:sugar_affordance:20191009104024p:plain:w480

するとデフォルトのスクロールビューが以下のような構造でシーンに作成されるはず。

f:id:sugar_affordance:20191009104105p:plain

今回は横方向に伸ばしていきたいので、縦スクロールを向こうにしてスクロールバーを削除しました。

Content 要素に Layout Group と Content Size Fitter を追加する

作成されたビューの Content というGameObjectに、Horizontal Layout GroupVertical Layout Group コンポーネントを追加します。
これは横、縦一列に並べるためのコンポーネントです。

加えて、Content Size Fitter コンポーネントも追加。

以下のような状態になります。

f:id:sugar_affordance:20191009104343p:plain

Content Size Fitter はスクロールしたい方向の設定を Min Size もしくは Preffered Size に設定します。

Content 要素以下にリスト要素を追加する

エディタ上で要素を増やしていくとこんなかんじ。

f:id:sugar_affordance:20191009104423g:plain

スクロールの初期位置を調節する

要素が多いと列の中央部が初期位置として表示されてしまいます。
上寄せ、左寄せで初期表示したい場合は、RectTransform の Pivot をそちら側に寄せることで対応可能です。


“Unity” and Unity logos are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere, and are used under license.


免責事項

当サイトの広告バナー、リンクによって提供される情報、サービス内容について、当サイトは一切の責任を負いません。

また、当サイトの情報を元にユーザ様が不利益を被った場合にも、当サイトは一切の責任を負いません。

すべて自己責任でお願いします。