想实现一个菜单分级的功能,专业术语叫做树型菜单,很多应用软件的目录有采用该方式,层次感很强,结构清晰,但UGUI并没有原生的插件,去网上搜了一下,发现相关资源并不多,调试出一大堆Bug,于是自己决定按照unity界面Hierarchy样式做一个,目录结构清晰,可动态添加,删除,修改子菜单,理论上可无限级设置子菜单。
模板效果如下:
思路:
首先发现每个级的ItemPanel(一个单级菜单条)样式是一样的,于是需要一个panel来装所有的itemPanel,
(ItemPanel)
在整个菜单顶部panel上添加vertically layout group组件,使下面的子菜单从上到下依次排列,暂时不用管里面内容的排列,往里添加itemPanel就行,这样就会形成一级菜单目录。
然后在一级菜单下面添加二级菜单,将要添加的二级菜单变成一级菜单的子物体,二级菜单所使用的ItemPanel原则上和一级菜单一样,只不过他变成了一级菜单的子物体。三级四级菜单依次类推,也就是其上一级的子物体。
(效果图)(编辑结构图)
实现过程:
主要有两个类,一个ItemBeanBase,一个ItemPanelBase,其中ItemBeanBase是一个属性类的基类,可根据自己在单个菜单中的需要填充的数据组装成一个属性类。然后就是ItemPanelBase,他是单个菜单ItemPanel的基类,需要每个子菜单ItemPanel都挂载其子类,可根据自己的需要定制继承ItemPanelBase类,该类用于处理每个ItemPanel与父菜单及子菜单的逻辑关系。因此可以根据自己的需要定制ItemPanel的UI样式以及其中内容。
给出ItemPanelBase类和ItemPanel类;
ItemPanel类(继承至ItemPanelBase),重写里面的虚方法InitPanelContent(),实现数据(ItemBean)的定制,挂在每个子菜单ItemPanel上面。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ItemPanelBase : MonoBehaviour
{
private List<ItemPanelBase> childList;//子物体集合
[HideInInspector]
public Button downArrow;//下箭头按钮
public Sprite down, right,dot;
public bool isOpen { get; set; }//子物体开启状态
private Vector2 startSize;//起始大小
private void Awake()
{
childList = new List<ItemPanelBase>();
downArrow = this.transform.Find("ContentPanel/ArrowButton").GetComponent<Button>();
downArrow.onClick.AddListener(() =>
{
if (isOpen)
{
CloseChild();
isOpen = false;
}
else
{
OpenChild();
isOpen = true;
}
});
startSize = this.GetComponent<RectTransform>().sizeDelta;
isOpen = false;
}
//添加子物体到集合
private void AddChild(ItemPanelBase parentItemPanelBase)
{
childList.Add(parentItemPanelBase);
if (childList.Count >= 1)
{
downArrow.GetComponent<Image>().sprite = right;
}
}
/// <summary>
/// 设置父物体,父物体不为一级菜单
/// </summary>
/// <param name="parentItemPanelBase"></param>
public void SetItemParent(ItemPanelBase parentItemPanelBase)
{
this.transform.parent = parentItemPanelBase.transform;
parentItemPanelBase.AddChild(this);
this.GetComponent<VerticalLayoutGroup>().padding = new RectOffset((int)parentItemPanelBase.downArrow.GetComponent<RectTransform>().sizeDelta.x, 0, 0, 0);
if (parentItemPanelBase.isOpen)
{
this.GetComponent<ItemPanelBase>().AddParentSize((int)this.gameObject.GetComponent<RectTransform>().sizeDelta.y);
}
else
{
this.transform.gameObject.SetActive(false);
}
}
/// <summary>
/// 设置父物体,父物体为一级菜单
/// </summary>
/// <param name="tran"></param>
public void SetBaseParent(Transform tran)
{
this.transform.parent = tran;
}
/// <summary>
/// 增加一个子物体后更新Panel大小
/// </summary>
/// <param name="change"></param>
public void UpdateRectTranSize(int change)
{
this.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(startSize.x, this.gameObject.GetComponent<RectTransform>().sizeDelta.y + change);
}
/// <summary>
/// 增加父物体高度
/// </summary>
/// <param name="parentItem"></param>
/// <param name="change"></param>
public void AddParentSize(int change)
{
if (this.transform.parent.GetComponent<ItemPanelBase>() != null)
{
this.transform.parent.GetComponent<ItemPanelBase>().UpdateRectTranSize(change);
this.transform.parent.GetComponent<ItemPanelBase>().AddParentSize(change);
}
}
/// <summary>
/// 关闭子物体列表
/// </summary>
public void CloseChild()
{
if (childList.Count == 0) return;
foreach (ItemPanelBase child in childList)
{
child.gameObject.SetActive(false);
child.GetComponent<ItemPanelBase>().AddParentSize(-(int)child.gameObject.GetComponent<RectTransform>().sizeDelta.y);
}
downArrow.GetComponent<Image>().sprite = right;
}
/// <summary>
/// 打开子物体列表
/// </summary>
public void OpenChild()
{
if (childList.Count == 0) return;
foreach (ItemPanelBase child in childList)
{
child.gameObject.SetActive(true);
child.GetComponent<ItemPanelBase>().AddParentSize((int)child.gameObject.GetComponent<RectTransform>().sizeDelta.y);
}
downArrow.GetComponent<Image>().sprite = down;
}
//填充Item数据
public virtual void InitPanelContent(ItemBeanbase itemBeanbase) { }
}
public class ItemPanel : ItemPanelBase
{
public override void InitPanelContent(ItemBeanbase itemBeanbase)
{
base.InitPanelContent(itemBeanbase);
ItemBean itemBean = (ItemBean)itemBeanbase;
this.transform.Find("ContentPanel/Text").GetComponent<Text>().text = itemBean.name + itemBean.age;
}
}
下面是树型菜单的调用代码:
public class PullDownList : MonoBehaviour
{
private List<GameObject> itemPanelList;
public GameObject itemPanel;
private void Awake()
{
itemPanelList = new List<GameObject>();
}
// Use this for initialization
void Start()
{
for (int i = 0; i < 10; i++)
{
GameObject newItemPanel = Instantiate(itemPanel);
itemPanelList.Add(newItemPanel);
newItemPanel.GetComponent<ItemPanelBase>().SetBaseParent(this.transform);
newItemPanel.GetComponent<ItemPanelBase>().InitPanelContent(new ItemBean("一级菜单" + i, i));
}
for (int i = 0; i < 5; i++)
{
GameObject newItemPanel2 = Instantiate(itemPanel);
itemPanelList.Add(newItemPanel2);
newItemPanel2.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[i].GetComponent<ItemPanelBase>());
newItemPanel2.GetComponent<ItemPanelBase>().InitPanelContent(new ItemBean("二级菜单" + i, i));
}
for (int i = 0; i < 2; i++)
{
GameObject newItemPanel3 = Instantiate(itemPanel);
itemPanelList.Add(newItemPanel3);
newItemPanel3.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[11].GetComponent<ItemPanelBase>());
newItemPanel3.GetComponent<ItemPanelBase>().InitPanelContent(new ItemBean("三级菜单" + i, i));
}
}
private void Update()
{
if (Input.GetKeyUp(KeyCode.S))
{
for (int i = 0; i < 2; i++)
{
GameObject newItemPanel4 = Instantiate(itemPanel);
itemPanelList.Add(newItemPanel4);
newItemPanel4.GetComponent<ItemPanelBase>().SetItemParent(itemPanelList[1].GetComponent<ItemPanelBase>());
newItemPanel4.GetComponent<ItemPanelBase>().InitPanelContent(new ItemBean("二级菜单" + i, i));
}
}
}
}
需要itemPanel的预制体来生成每个子菜单,然后建立一个list保存所有的子菜单项,方便后续操作,也可动态根据添加,删除,修改菜单项,因为采用了vertical layout group组件,所以只需要修改里面的子物体即可实现菜单视图动态更新,不需要刷新操作。
整个菜单初始效果图如下:
左侧为实际效果,右侧为其在unity中的结构目录
上面由于方便看清菜单间层次,没有取消ItemPanel的背景颜色,下面给出对比图
(itemPanel背景颜色存在,方便看清结构)
不同的项目对UI有不同需求,因此这里只是实现了树型菜单的逻辑结构,可根据自己的需要定制UI即内容,可根据需要自己修改ItemPanel预制体的样式即可。
操作GIF图, 很丝滑。。。
整个项目内容比较简单,结构清晰,核心代码只有100多行,可扩展性较强,可根据自己需要对功能做修改,因此不明白的地方可以直接看源码,下面给出unitypackage(2017.3.1导出)的百度云盘链接,由于水平有限,难免有地方出错或者不规范,望多指点。
地址:https://pan.baidu.com/s/1sCHhK2m3xpYoFTUc4Uiksg
提取码:iac9