1 折り畳み機能とは
こういうもののこと↓↓
buttonを押すと下に出てきて、もう一回押すと収納される、みたいな。
下に出したとき、これに合わせて、そのさらに下にあった要素も下に下がってくれる、といったもの。
語彙力がなくて申し訳ない…。
2 準備
縦一列に要素を並べるScroll Viewでの使用を想定している。
こういうのができていたら、前提となる状況の理解としては問題ない。
ちゃんとした手順説明が必要な方はこちら。
3 実装方法
UIの配置だが、まずScroll ViewのContentに空オブジェクトを配置する。
その空オブジェクトにImageを二つ、うち一つのImageの子にButtonを一つ配置。
今回は、折り畳み部分に該当するImageのUIの色を、わかりやすく赤色にしてみた。
後は一番上の空オブジェクトに、いくつかコンポーネント追加。
Content Size Fitterをつける意味が気になる方は、先ほど挙げたブログを2ページまでじっくり読んでほしい。
ざっくりいうと、子オブジェクトに合わせて親のアンカーを弄れるようにしないと、折り畳み部分が下のオブジェクトと重なったりしてしまうから。
UIの細かい配置は個々お任せで。
私はButtonを右端に寄せてみた。
4 スクリプト
後はこのスクリプトを空オブジェクトにアタッチすれば完成。
Buttonを180度回転させるプログラムも組んであるが、不要ならば消してほしい。
FoldingSystem.cs
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をオンオフして、レイアウトを再構築させるような処理。
なぜかコールチンなしで普通に書き連ねても動かない。なんでかなぁ…。
↧