ここまで読んでいただきありがとうございます！折り畳みできるUIの作り方、2ページ目です！
もう一度目次を貼って、その後、実際に折り畳み機能をUIに実装する方法をご紹介していきたいと思います！！
折り畳み機能の実装方法
前提となる環境は、1ページ目の最初で構築できているかと思いますので、そこから進行していきたいと思います！
まだの方は、上記の目次からすこし振り返っていただけると幸いです。
ではでは、早速手を動かしていきましょう！
①UIの配置
折り畳み機能を実際に実装するUIを生成・配置しましょう。
Scroll Viewの中のオブジェクト、Contentの下に空オブジェクトを配置（名前は適当に決めてます）、その下にImageを二つ、うち一つのImageにbuttonを配置します。
buttonを置かなかったImageを折り畳む部分にする予定です。
折り畳むImageは今回、わかりやすいように赤色に変えてます。
空オブジェクトを置いた時点で、ContentのVertical Layout Group(垂直レイアウトグループ)の効果で私の場合幅が確定されてたりするので、あまりRect Transformで何か弄った記憶がないのですが、いかがでしょうか。
とりあえず、折り畳むImageと折り畳まないImageが重ならないように（別に重なってもいい気がしますがわかりにくいので…！）していただけたらいいかと思います。
②空オブジェクトにコンポーネントを追加
先ほどの工程と、場合によっては前後する内容かもしれませんが、空オブジェクトにコンポーネントをいくつか追加します。
Vertical Layout GroupとContent Size Fitterですね。各種、設定は上の画像の通り。
Vertical Layout Groupを設置する意味は「あー、縦に並べるんだなー」とご理解いただけるかと思うのですが、問題はContent Size Fitterですよね。
まぁ私も正直、はっきり理解できているわけではないのですが、Content Size Fitterコンポーネントは親オブジェクトにつけるコンポーネントで、親オブジェクトが子オブジェクトにアンカーを合わす？みたいな感じの機能らしいです。
1ページで書いた、折り畳みを開けたら下のImageと重なった悲劇は、折り畳み部分を表示した際にアンカーが変わらなかったことが原因だと思われますので、変わるようにしておきます。
③スクリプトを作成
上の画像にもありますが、空オブジェクトにアタッチするスクリプトを作成しないといけません。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class FoldingSystem : MonoBehaviour
{
//折り畳み部分を取得
GameObject FoldinfImage;
//折り畳み部分を表示するか非表示にするか
bool OpenFold = false;
//ボタンの画像を回転
RectTransform button;
VerticalLayoutGroup contentLayout;
void Start()
{
FoldinfImage = transform.Find("Image2").gameObject;
button = transform.Find("Image/Button").GetComponent();
contentLayout = GameObject.Find("Content").GetComponent();
}
void Update()
{
}
public void OnClickSetInfo()
{
if (OpenFold)
{
button.localRotation = Quaternion.Euler(0, 0, -90);
FoldinfImage.SetActive(false);
StartCoroutine("LayoutRenewal");
OpenFold = false;
}
else
{
button.localRotation = Quaternion.Euler(0, 0, 90);
FoldinfImage.SetActive(true);
StartCoroutine("LayoutRenewal");
OpenFold = true;
}
contentLayout.enabled = false;
contentLayout.enabled = true;
}
IEnumerator LayoutRenewal()
{
//1フレーム停止
yield return null;
//再開後の処理
contentLayout.enabled = false;
contentLayout.enabled = true;
}
} オブジェクトの名前だけ、ちょっと確認してください…。
名前違うと取得できなくてエラーになってしまうので…。
このスクリプトはたいしたことはしてないのですが、要するにボタンを押すと折り畳み部分が表示されて、その後ContentのVertical Layout Groupを一度外してまたつけてます。
これで一回リセットされた扱いになって、Layoutを再構築した結果、折り畳み部分が実装されるという寸法ですね。
なお、コールチンを使いましたが、これはなぜかわかりませんが、普通に書き連ねた場合うまく処理されなかったからです。これはいまだにわからない…。
そしてこれは本当についでなのですが、スクリプト内でボタンの画像を180度回転させています。
今回ボタンに使わせてもらった画像のソースは、有名なStandard Assetsの中に入ってました。もしStandard Assetsを知らない方がいたら、結構便利なCameraとか入ってるので見てみてください。
④スクリプトをアタッチ＆Buttonの設定
スクリプトができたら、空オブジェクトにアタッチして、あとはButtonにちゃんと処理をつけてあげましょう。これで完成です！
一つ下にこのUIセットを複製して、下にオブジェクトがある状態で試してみましょう。
最後に
このブログも、結構記事書いてきたような気がします。
まぁ備忘録的に書く分には三日坊主にならないみたいですし、この気持ちを忘れず続けていこうと思います！
0 件のコメント:
コメントを投稿