其实很简单,一开始自己想复杂了。只需要利用VerticalLayout Group组件嵌套就可以了。
使用了一个ScrollView 组件,一个标题面板TitleItem,一个子面板panelItem和最终显示的子项dataItem,下面把具体的设置和代码贴出来,照着做很简单就可以实现一个折叠菜单的效果,打开菜单的效果使用了DOTween插件。
下面是具体代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
/// <summary>
/// 折叠菜单
/// </summary>
public class FoldPanel : MonoBehaviour
{
[SerializeField]
private GameObject panelItem; // 折叠页
[SerializeField]
private TitleItem titleItem;
[SerializeField]
private DataItem dataItem;
public List<FoldData> dataList = new List<FoldData>();
private void Start()
{
Create();
}
public void Create()
{
for (int i = 0; i < dataList.Count; i++)
{
// 创建标题
TitleItem title = Instantiate(titleItem).GetComponent<TitleItem>();
title.SetTitle(dataList[i].titleName);
title.transform.SetParent(this.transform);
title.gameObject.SetActive(true);
// 创建子折叠面板
GameObject panel = Instantiate(panelItem);
panel.transform.SetParent(this.transform);
// 260是折叠页的宽度,30DataItem的高度
//panel.GetComponent<RectTransform>().sizeDelta = new Vector3(260, 30 * dataList[i].data.Count);
title.SetFoldPanel(panel);
panel.SetActive(false);
// 创建折叠页数据
for (int j = 0; j < dataList[i].data.Count; j++)
{
DataItem item = Instantiate(dataItem).GetComponent<DataItem>();
item.transform.SetParent(panel.transform);
item.gameObject.SetActive(true);
item.SetInfo(dataList[i].data[j]);
}
}
}
}
[System.Serializable]
public class FoldData
{
public string titleName;
public List<ItemData> data;
}
[System.Serializable]
public class ItemData
{
public string userName;
//public string imageName;
//public Sprite imageName;
}
using DG.Tweening;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class TitleItem : MonoBehaviour, IPointerClickHandler
{
[SerializeField]
private Text title;
[SerializeField]
//private Transform arrow;
public bool isFold = true; // 是否是折叠状态
public Transform foldPanel;
public void OnPointerClick(PointerEventData eventData)
{
if (isFold)
{
isFold = false;
//arrow.DORotate(Vector3.zero, 0.1f);
if (foldPanel != null)
{
foldPanel.gameObject.SetActive(true);
foldPanel.DOScaleY(1, 0.1f);
}
}
else
{
isFold = true;
//arrow.DORotate(new Vector3(0, 0, 90), 0.1f);
if (foldPanel != null)
{
foldPanel.DOScaleY(0, 0.1f).OnComplete(() => { foldPanel.gameObject.SetActive(false); });
}
}
}
public void SetTitle(string _titleName)
{
title.text = _titleName;
}
public void SetFoldPanel(GameObject panel)
{
foldPanel = panel.transform;
}
}
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class DataItem : MonoBehaviour
{
public Text text;
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
}
public void SetInfo(ItemData data)
{
this.text.text= data.userName;
}
}
最终实现的效果如下:
<iframe allowfullscreen="true" data-mediaembed="csdn" id="sZfpssVU-1646148190542" src="https://live.csdn.net/v/embed/187291"></iframe>UGUI折叠菜单视频