Unity 仿QQ列表的折叠菜单

主要用到了GUI的自动布局功能,VerticalLayoutGroup,注意ChildControlsSize 和ChildForceExpand属性设置为 Width

在这里插入图片描述
效果:
在这里插入图片描述
实现代码:

/// <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);

            // 创建子折叠面板
            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.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;
}

TitleItem.cs

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;
    }
}

列表的数据来源是在界面上手动配置的,当然如果想要读取本地或者服务器的数据也是可以的。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值