Unity UGUI实现折叠菜单功能

其实很简单，一开始自己想复杂了。只需要利用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折叠菜单视频

标签：菜单,void,System,Unity,foldPanel,using,UGUI,public,panel
来源： https://blog.csdn.net/qq_20991149/article/details/123218547