環境について
Unityバージョン：2019.4.18f1
Visual Studio Community 2019バージョン：16.9.1
前提状況設定
記事を進行するにあたって、折り畳みUIを実際に設置することになる状況・環境の設定をしたいと思います。
要は縦にスクロールできて、UIを複製したら縦一列に増産されるようなものができていたらオッケーなので、わかる人は読みとばしてください。
↑こういうのができていたら大丈夫です…！
では箇条書きでUIの設定諸々を説明していきますが、別にScroll Viewの使い方を説明する記事ではないので、ちょっと不安がある方はわかりやすく解説してあるサイトの記事をお探しください…。
①Canvas、Canvasの子にScroll Viewを設置
②縦にスクロールできたらいいので、Scrollbar Horizontalは削除！
③Scrollbar Horizontalの削除で発生した不都合なところを諸々調整していく
↑Scroll ViewはHorizontal（水平）のチェックマークを外して…
↑Scrollbar VerticalはRect Transformをいい感じに弄る
④Contentオブジェクトの各種コンポーネントの追加・変更
この辺は人によってどんな感じにするか好みがあると思うのですが、私はこんな感じですね。
Content Size Fitterコンポーネントをつけて垂直フィットをPreferred Sizeに、Vertical Layout Groupをつけて諸々調整、あとはいい感じにRect Transformを弄りました。
これで最初のGIFのような環境は完成しました。
適当にImageでも作って複製して、試してみてください。
私はこんな感じで作ったのですが、ほかのブログとかを見てるとMaskコンポーネントを手ずから、能動的につけておられる方もいるみたいですね。
私の使っているUnityのバージョンだと、Viewpointというオブジェクトに最初からついてるのですが、もしどこにもなかったらそのあたりに付与されることをおすすめします。
まぁその辺の調整は各自ということで…。
記事の主題じゃないことにやる気が出なくてですね…、申し訳ない…(*- -)(*_ _)ペコリ
各種方法論の模索
さて、やっと環境整備ができたところで、方法論の模索です。
私も自分で実装する前に、手っ取り早く人様のものを借りようと調べて回り、それを断念してからは色々と自分で弄って回ったわけですが、以下の方法でも折り畳み実装できるよ、という感じで、いくつか見つけた方法をご紹介したいと思います。
①アセットストア
探してて出てきたのですが、どうやらアセットストアにそれっぽいのがあるみたいですね！
私は購入しなかったのですが、こういうものを使う方法もあるかと思います。
（買ってないので本当に求める機能を持っているかもわかりませんが…）
②InstantiateとDestroy
アセットストアを使わないとなると、頑張って自作するしかありません。
となると、一番簡単な方法はもう単純に、Scroll Viewに並べたImageとは別に、折り畳み部分のプレハブを作っておいて、それをInstantiateなりDestroyする方法でしょう。
…まぁ、選択肢としては思いついていましたが、実際に私がこの道を考慮することはありませんでした。（なので、本当にできるか検証していません。もしかしたらこれでできない可能性もありますが、たぶんできる！）
選択肢としてあったにもかかわらず、そもそも考慮に入れなかったのは、処理が重いだろうなと考えたからです。
折り畳みUIを伸ばしたり畳んだりといった操作は、連続して何度も行うことも状況として想定されますが、そのたびにInstantiateやDestroyし続けていたら…とんでもない処理量になるんじゃないですかね…。
※SetActive()
InstantiateとDestroyが処理重そう、と言われたら、次に考えるところはここだと思います。
オブジェクトの表示と非表示を変えるだけならまだ処理も軽くできるというアイデアはいいのですが、今回の設定で、真っ正直にSetActiveというのは必ず失敗します。
こんな感じで…↓
赤い色のImageのUIを作ってみましたが、見ての通りの惨状です…。
折り畳みメニューといえば、こういうものを想像しませんか…？↓
上の折り畳みメニューを開けたら、下の項目がズイッと下に降りて…みたいな。
まぁ往々にして現実は想像よりも厳しいものですが、今回も簡易的な方法では解決の道を探すのは難しいようです。
ああ、結論から言いますと、次のページで紹介させていただく、私がなんとか折り畳みを実装する際に使用した方法では、このSetActiveを使います。
簡単にエディターで弄るだけでは不可能だったものも、スクリプトを書いていろいろと設定すればなんとかなるってもんです╭( ･ㅂ･)و
ということで、次のページからは、実際に私がどうやって折り畳みメニューを実装したか、その方法について解説したいと思います。
長い記事になるため、ページを分割させていただいたのですが、ご覧いただけると幸いです(*- -)(*_ _)ペコリ
0 件のコメント:
コメントを投稿