ikoan unity 開発メモ

Unityに関するアレコレを日々つづっていこうと思います

自動配置でないScrollView

環境

Unity2018.2.14f1

概要

uGUIのScroll Viewを検索してみると、大体が子要素を整列させている例しか上がっていないです。
子要素を自動で配置させた上で、ちゃんとスクロールさせる機能が欲しかったので調べてみました。

実装

まずは通常通りにScrollViewを実装してみます。
UI > Scroll Viewを作成するとCanvas以下に
「Scroll View」 > 「Viewport」 > 「Content」
が作成されます。
このContent以下に子要素を作成していくことでスクロールする画面を作成することができます。
スクロールエリアの描画範囲はViewportの情報によって制御されます。ここでマスクのOn/Offも設定できます。

さてここで一つ問題が。
単純にContent以下に子要素を複数配置した後にスクロールしても、「」を「」にしていた場合、スクロール位置が初期位置に戻ってしまう状態になってしまいました。
これだとスクロールしているとは言えませんね・・・

どうもスクロールできる範囲はContentのHeightが鍵になっているようです。
他のサイトさんでスクロール機能の実装方法を見てみると、Contentに「Vertical Layout Group」と「Content Size Fitter」をセットしています。確かにこれを追加すると、スクロール機能がうまくいき、それはContent Size FitterがHeightを自動計算しているからのようなんです。
実際にRectTransformのHeightパラメータのところが数値入力できないようになっていますね。
しかし、これだと、子要素が自動整列されてしまいます。
これだと求めるものとは、すこし異なってしまいますね。

自動レイアウトはVertical Layout Groupの機能なので、これをつけなければ自動でレイアウトされることもないのですが、それですとサイズをとってくれないのか、Content Size FitterのHeightも0のままとなってしまいます。
同様に子要素にLayout Elementをつけて、Ignore layoutにチェックをしても、サイズ計算などがされないようで、同じくContentのHeightが0のままとなります。

どうしたものかと悩んだ挙句、考えついた解決方法は下記の2通りでした。
1)子要素の中の一番親となる要素をあらかじめ大きくセットし、その大きな要素の中で自由に配置したいオブジェクトを配置する。
2)ContentのHeightを手動計算。

1)の方法は子要素同士のY位置が重なる場合にうまく行かなさそうだったので、一旦2)で実装しました。
※とは言ったものの、1)の方がうまくいくかも・・・
ここでContents以下の全要素の高さを取得する方法ですが・・・、いい方法が思いつかなかったので、とりあえずは適当に計算するようにしました。
その数値をHeightにセットします。
mContent.deltaSize = Vector2.up * [高さ];

これでいい感じにスクロールさせることができました!