Unity UGUI自定义树形菜单（TreeView）

最新推荐文章于 2023-03-20 21:05:43 发布
最新推荐文章于 2023-03-20 21:05:43 发布
阅读量4k 收藏 6
点赞数
文章标签： unity

先上几张效果图：

        


如果你需要的也是这种效果，那你就来对地方了！


目前，我们这个树形菜单展现出来的功能如下：

1、可以动态配置数据源；

2、点击每个元素的上下文菜单按钮（也就是图中的三角形按钮），可以收缩或展开它的子元素；

3、可以单独判断某一元素的复选框是否被勾选，或者直接获取当前树形菜单中所有被勾选的元素；

4、树形菜单统一控制其下所有子元素按钮的事件分发；

5、可自动调节的滚动视野边缘，根据当前可见的子元素数量进行横向以及纵向的伸缩；


一、首先，我们先制作子元素的模板（Template），也就是图中菜单的单个元素，用它来根据数据源动态克隆出多个子元素，这里的话，很显然我们的模板是由两个Button加一个Toggle和一个Text组成的，如下：


ContextButton    TreeViewToggle     TreeViewButton(TreeViewText)



图中的text是一个文本框，用于描述此元素的名称或内容，它们对应的结构就是这样：




二、我们的每个子元素都会携带一个TreeViewItem脚本，用于描述自身在整个树形菜单中与其他元素的父子关系，而整个树形菜单的控制由TreeViewControl来实现，首先，TreeViewControl会根据提供的数据源来生成所有的子元素，当然，改变数据源之后进行重新生成的时候也是这个方法，干的事情很简单，就是用模板不停的创建元素，并给他们建立父子关系：

[csharp] view plain copy
print ?
  1. /// <summary>  
  2.     /// 生成树形菜单  
  3.     /// </summary>  
  4.     public void GenerateTreeView()  
  5.     {  
  6.         //删除可能已经存在的树形菜单元素  
  7.         if (_treeViewItems != null)  
  8.         {  
  9.             for (int i = 0; i < _treeViewItems.Count; i++)  
  10.             {  
  11.                 Destroy(_treeViewItems[i]);  
  12.             }  
  13.             _treeViewItems.Clear();  
  14.         }  
  15.         //重新创建树形菜单元素  
  16.         _treeViewItems = new List<GameObject>();  
  17.         for (int i = 0; i < Data.Count; i++)  
  18.         {  
  19.             GameObject item = Instantiate(Template);  
  20.   
  21.             if (Data[i].ParentID == -1)  
  22.             {  
  23.                 item.GetComponent<TreeViewItem>().SetHierarchy(0);  
  24.                 item.GetComponent<TreeViewItem>().SetParent(null);  
  25.             }  
  26.             else  
  27.             {  
  28.                 TreeViewItem tvi = _treeViewItems[Data[i].ParentID].GetComponent<TreeViewItem>();  
  29.                 item.GetComponent<TreeViewItem>().SetHierarchy(tvi.GetHierarchy() + 1);  
  30.                 item.GetComponent<TreeViewItem>().SetParent(tvi);  
  31.                 tvi.AddChildren(item.GetComponent<TreeViewItem>());  
  32.             }  
  33.   
  34.             item.transform.name = ”TreeViewItem”;  
  35.             item.transform.FindChild(”TreeViewText”).GetComponent<Text>().text = Data[i].Name;  
  36.             item.transform.SetParent(TreeItems);  
  37.             item.transform.localPosition = Vector3.zero;  
  38.             item.transform.localScale = Vector3.one;  
  39.             item.transform.localRotation = Quaternion.Euler(Vector3.zero);  
  40.             item.SetActive(true);  
  41.   
  42.             _treeViewItems.Add(item);  
  43.         }  
  44.     }  
/// <summary>
    /// 生成树形菜单
    /// </summary>
    public void GenerateTreeView()
    {
        //删除可能已经存在的树形菜单元素
        if (_treeViewItems != null)
        {
            for (int i = 0; i < _treeViewItems.Count; i++)
            {
                Destroy(_treeViewItems[i]);
            }
            _treeViewItems.Clear();
        }
        //重新创建树形菜单元素
        _treeViewItems = new List<GameObject>();
        for (int i = 0; i < Data.Count; i++)
        {
            GameObject item = Instantiate(Template);

            if (Data[i].ParentID == -1)
            {
                item.GetComponent<TreeViewItem>().SetHierarchy(0);
                item.GetComponent<TreeViewItem>().SetParent(null);
            }
            else
            {
                TreeViewItem tvi = _treeViewItems[Data[i].ParentID].GetComponent<TreeViewItem>();
                item.GetComponent<TreeViewItem>().SetHierarchy(tvi.GetHierarchy() + 1);
                item.GetComponent<TreeViewItem>().SetParent(tvi);
                tvi.AddChildren(item.GetComponent<TreeViewItem>());
            }

            item.transform.name = "TreeViewItem";
            item.transform.FindChild("TreeViewText").GetComponent<Text>().text = Data[i].Name;
            item.transform.SetParent(TreeItems);
            item.transform.localPosition = Vector3.zero;
            item.transform.localScale = Vector3.one;
            item.transform.localRotation = Quaternion.Euler(Vector3.zero);
            item.SetActive(true);

            _treeViewItems.Add(item);
        }
    }


三、树形菜单生成完毕之后此时所有元素虽然都记录了自身与其他元素的父子关系，但他们的位置都是在Vector3.zero的，毕竟我们的菜单元素在创建的时候都是一股脑儿的丢到原点位置的，创建君可不管这么多元素挤在一堆会不会憋死，好吧，之后规整列队的事情就交给刷新君来完成了，刷新君玩的一手好递归，它会遍历所有元素并剔除不可见的元素（也就是点击三角按钮隐藏了），并将它们一个一个的重新排列整齐，子排在父之后，孙排在子之后，以此类推……它会遍历每个元素的子元素列表，发现子元素可见便进入子元素列表，发现孙元素可见便进入孙元素列表：

[csharp] view plain copy
print ?
  1. /// <summary>  
  2.     /// 刷新树形菜单  
  3.     /// </summary>  
  4.     public void RefreshTreeView()  
  5.     {  
  6.         _yIndex = 0;  
  7.         _hierarchy = 0;  
  8.   
  9.         //复制一份菜单  
  10.         _treeViewItemsClone = new List<GameObject>(_treeViewItems);  
  11.   
  12.         //用复制的菜单进行刷新计算  
  13.         for (int i = 0; i < _treeViewItemsClone.Count; i++)  
  14.         {  
  15.             //已经计算过或者不需要计算位置的元素  
  16.             if (_treeViewItemsClone[i] == null || !_treeViewItemsClone[i].activeSelf)  
  17.             {  
  18.                 continue;  
  19.             }  
  20.   
  21.             TreeViewItem tvi = _treeViewItemsClone[i].GetComponent<TreeViewItem>();  
  22.   
  23.             _treeViewItemsClone[i].GetComponent<RectTransform>().localPosition = new Vector3(tvi.GetHierarchy() * HorizontalItemSpace, _yIndex,0);  
  24.             _yIndex += (-(ItemHeight + VerticalItemSpace));  
  25.             if (tvi.GetHierarchy() > _hierarchy)  
  26.             {  
  27.                 _hierarchy = tvi.GetHierarchy();  
  28.             }  
  29.   
  30.             //如果子元素是展开的，继续向下刷新  
  31.             if (tvi.IsExpanding)  
  32.             {  
  33.                 RefreshTreeViewChild(tvi);  
  34.             }  
  35.   
  36.             _treeViewItemsClone[i] = null;  
  37.         }  
  38.   
  39.         //重新计算滚动视野的区域  
  40.         float x = _hierarchy * HorizontalItemSpace + ItemWidth;  
  41.         float y = Mathf.Abs(_yIndex);  
  42.         transform.GetComponent<ScrollRect>().content.sizeDelta = new Vector2(x, y);  
  43.   
  44.         //清空复制的菜单  
  45.         _treeViewItemsClone.Clear();  
  46.     }  
  47.     /// <summary>  
  48.     /// 刷新元素的所有子元素  
  49.     /// </summary>  
  50.     void RefreshTreeViewChild(TreeViewItem tvi)  
  51.     {  
  52.         for (int i = 0; i < tvi.GetChildrenNumber(); i++)  
  53.         {  
  54.             tvi.GetChildrenByIndex(i).gameObject.GetComponent<RectTransform>().localPosition = new Vector3(tvi.GetChildrenByIndex(i).GetHierarchy() * HorizontalItemSpace, _yIndex, 0);  
  55.             _yIndex += (-(ItemHeight + VerticalItemSpace));  
  56.             if (tvi.GetChildrenByIndex(i).GetHierarchy() > _hierarchy)  
  57.             {  
  58.                 _hierarchy = tvi.GetChildrenByIndex(i).GetHierarchy();  
  59.             }  
  60.   
  61.             //如果子元素是展开的，继续向下刷新  
  62.             if (tvi.GetChildrenByIndex(i).IsExpanding)  
  63.             {  
  64.                 RefreshTreeViewChild(tvi.GetChildrenByIndex(i));  
  65.             }  
  66.   
  67.             int index = _treeViewItemsClone.IndexOf(tvi.GetChildrenByIndex(i).gameObject);  
  68.             if (index >= 0)  
  69.             {  
  70.                 _treeViewItemsClone[index] = null;  
  71.             }  
  72.         }  
  73.     }  
/// <summary>
    /// 刷新树形菜单
    /// </summary>
    public void RefreshTreeView()
    {
        _yIndex = 0;
        _hierarchy = 0;

        //复制一份菜单
        _treeViewItemsClone = new List<GameObject>(_treeViewItems);

        //用复制的菜单进行刷新计算
        for (int i = 0; i < _treeViewItemsClone.Count; i++)
        {
            //已经计算过或者不需要计算位置的元素
            if (_treeViewItemsClone[i] == null || !_treeViewItemsClone[i].activeSelf)
            {
                continue;
            }

            TreeViewItem tvi = _treeViewItemsClone[i].GetComponent<TreeViewItem>();

            _treeViewItemsClone[i].GetComponent<RectTransform>().localPosition = new Vector3(tvi.GetHierarchy() * HorizontalItemSpace, _yIndex,0);
            _yIndex += (-(ItemHeight + VerticalItemSpace));
            if (tvi.GetHierarchy() > _hierarchy)
            {
                _hierarchy = tvi.GetHierarchy();
            }

            //如果子元素是展开的，继续向下刷新
            if (tvi.IsExpanding)
            {
                RefreshTreeViewChild(tvi);
            }

            _treeViewItemsClone[i] = null;
        }

        //重新计算滚动视野的区域
        float x = _hierarchy * HorizontalItemSpace + ItemWidth;
        float y = Mathf.Abs(_yIndex);
        transform.GetComponent<ScrollRect>().content.sizeDelta = new Vector2(x, y);

        //清空复制的菜单
        _treeViewItemsClone.Clear();
    }
    /// <summary>
    /// 刷新元素的所有子元素
    /// </summary>
    void RefreshTreeViewChild(TreeViewItem tvi)
    {
        for (int i = 0; i < tvi.GetChildrenNumber(); i++)
        {
            tvi.GetChildrenByIndex(i).gameObject.GetComponent<RectTransform>().localPosition = new Vector3(tvi.GetChildrenByIndex(i).GetHierarchy() * HorizontalItemSpace, _yIndex, 0);
            _yIndex += (-(ItemHeight + VerticalItemSpace));
            if (tvi.GetChildrenByIndex(i).GetHierarchy() > _hierarchy)
            {
                _hierarchy = tvi.GetChildrenByIndex(i).GetHierarchy();
            }

            //如果子元素是展开的，继续向下刷新
            if (tvi.GetChildrenByIndex(i).IsExpanding)
            {
                RefreshTreeViewChild(tvi.GetChildrenByIndex(i));
            }

            int index = _treeViewItemsClone.IndexOf(tvi.GetChildrenByIndex(i).gameObject);
            if (index >= 0)
            {
                _treeViewItemsClone[index] = null;
            }
        }
    }

我这里将所有的元素复制了一份用于计算位置，主要就是为了防止在进行一轮刷新时某个元素被访问两次或以上，因为刷新的时候会遍历所有可见元素，如果第一次访问了元素A（元素A的位置被刷新），根据元素A的子元素列表访问到了元素B（元素B的位置被刷新），一直到达子元素的底部后，当不存在更深层次的子元素时，那么返回到元素A之后的元素继续访问，这时在所有元素列表中元素B可能在元素A之后，也就是说元素B已经通过父元素访问过了，不需要做再次访问，他的位置已经是最新的了，而之后根据列表索引很可能再次访问到元素B，如果是这样的话元素B的位置又要被刷新一次，甚至多次，性能影响不说，第二次计算的位置已经不是正确的位置了（总之也就是一个计算逻辑的问题，没看明白可以直接忽略）。


四、菜单已经创建完毕并且经过了一轮刷新，此时它展示出来的就是这样一个所有子元素都展开的形状（我在demo中指定了数据源，关于数据源怎么设置在后面）：




我们要在每个元素都携带的脚本TreeViewItem中对自身的那个三角形的上下文按钮监听，当鼠标点击它时它的子元素就会被折叠或者展开：

[csharp] view plain copy
print ?
  1. /// <summary>  
  2.     /// 点击上下文菜单按钮，元素的子元素改变显示状态  
  3.     /// </summary>  
  4.     void ContextButtonClick()  
  5.     {  
  6.         if (IsExpanding)  
  7.         {  
  8.             transform.FindChild(”ContextButton”).GetComponent<RectTransform>().localRotation = Quaternion.Euler(0, 0, 90);  
  9.             IsExpanding = false;  
  10.             ChangeChildren(this, false);  
  11.         }  
  12.         else  
  13.         {  
  14.             transform.FindChild(”ContextButton”).GetComponent<RectTransform>().localRotation = Quaternion.Euler(0, 0, 0);  
  15.             IsExpanding = true;  
  16.             ChangeChildren(this, true);  
  17.         }  
  18.   
  19.         //刷新树形菜单  
  20.         Controler.RefreshTreeView();  
  21.     }  
  22.     /// <summary>  
  23.     /// 改变某一元素所有子元素的显示状态  
  24.     /// </summary>  
  25.     void ChangeChildren(TreeViewItem tvi, bool value)  
  26.     {  
  27.         for (int i = 0; i < tvi.GetChildrenNumber(); i++)  
  28.         {  
  29.             tvi.GetChildrenByIndex(i).gameObject.SetActive(value);  
  30.             ChangeChildren(tvi.GetChildrenByIndex(i), value);  
  31.         }  
  32.     }  
/// <summary>
    /// 点击上下文菜单按钮，元素的子元素改变显示状态
    /// </summary>
    void ContextButtonClick()
    {
        if (IsExpanding)
        {
            transform.FindChild("ContextButton").GetComponent<RectTransform>().localRotation = Quaternion.Euler(0, 0, 90);
            IsExpanding = false;
            ChangeChildren(this, false);
        }
        else
        {
            transform.FindChild("ContextButton").GetComponent<RectTransform>().localRotation = Quaternion.Euler(0, 0, 0);
            IsExpanding = true;
            ChangeChildren(this, true);
        }

        //刷新树形菜单
        Controler.RefreshTreeView();
    }
    /// <summary>
    /// 改变某一元素所有子元素的显示状态
    /// </summary>
    void ChangeChildren(TreeViewItem tvi, bool value)
    {
        for (int i = 0; i < tvi.GetChildrenNumber(); i++)
        {
            tvi.GetChildrenByIndex(i).gameObject.SetActive(value);
            ChangeChildren(tvi.GetChildrenByIndex(i), value);
        }
    }

IsExpanding做为每个元素的字段用于设置或读取自身子元素的显示状态，这里根据改变的状态会递归循环此元素的所有子元素及孙元素，让他们可见或隐藏。


五、对所有的子元素进行统一的事件分发，这里主要就有鼠标点击这一个事件：


每个元素都会注册这个事件：（TreeViewItem.cs）

[csharp] view plain copy
print ?
  1. void Awake()  
  2.     {  
  3.         //上下文按钮点击回调  
  4.         transform.FindChild(”ContextButton”).GetComponent<Button>().onClick.AddListener(ContextButtonClick);  
  5.         transform.FindChild(”TreeViewButton”).GetComponent<Button>().onClick.AddListener(delegate () {  
  6.             Controler.ClickItem(gameObject);  
  7.         });  
  8.     }  
void Awake()
    {
        //上下文按钮点击回调
        transform.FindChild("ContextButton").GetComponent<Button>().onClick.AddListener(ContextButtonClick);
        transform.FindChild("TreeViewButton").GetComponent<Button>().onClick.AddListener(delegate () {
            Controler.ClickItem(gameObject);
        });
    }
树形菜单控制器统一分发：（TreeViewControl.cs）

[csharp] view plain copy
print ?
  1. public delegate void ClickItemdelegate(GameObject item);  
  2.     public event ClickItemdelegate ClickItemEvent;  
  3.   
  4. /// <summary>  
  5.     /// 鼠标点击子元素事件  
  6.     /// </summary>  
  7.     public void ClickItem(GameObject item)  
  8.     {  
  9.         ClickItemEvent(item);  
  10.     }  
public delegate void ClickItemdelegate(GameObject item);
    public event ClickItemdelegate ClickItemEvent;

/// <summary>
    /// 鼠标点击子元素事件
    /// </summary>
    public void ClickItem(GameObject item)
    {
        ClickItemEvent(item);
    }


六、获取元素的复选框状态判断是否被勾选：


根据元素名称进行筛选，获取此元素的选中状态，如果存在同名元素的话这个可能不好使：

[csharp] view plain copy
print ?
  1. /// <summary>  
  2.     /// 返回指定名称的子元素是否被勾选  
  3.     /// </summary>  
  4.     public bool ItemIsCheck(string itemName)  
  5.     {  
  6.         for (int i = 0; i < _treeViewItems.Count; i++)  
  7.         {  
  8.             if (_treeViewItems[i].transform.FindChild(“TreeViewText”).GetComponent<Text>().text == itemName)  
  9.             {  
  10.                 return _treeViewItems[i].transform.FindChild(“TreeViewToggle”).GetComponent<Toggle>().isOn;  
  11.             }  
  12.         }  
  13.         return false;  
  14.     }  
/// <summary>
    /// 返回指定名称的子元素是否被勾选
    /// </summary>
    public bool ItemIsCheck(string itemName)
    {
        for (int i = 0; i < _treeViewItems.Count; i++)
        {
            if (_treeViewItems[i].transform.FindChild("TreeViewText").GetComponent<Text>().text == itemName)
            {
                return _treeViewItems[i].transform.FindChild("TreeViewToggle").GetComponent<Toggle>().isOn;
            }
        }
        return false;
    }

返回树形菜单中所有被勾选的子元素名称集合：

[csharp] view plain copy
print ?
  1. /// <summary>  
  2.     /// 返回树形菜单中被勾选的所有子元素名称  
  3.     /// </summary>  
  4.     public List<string> ItemsIsCheck()  
  5.     {  
  6.         List<string> items = new List<string>();  
  7.   
  8.         for (int i = 0; i < _treeViewItems.Count; i++)  
  9.         {  
  10.             if (_treeViewItems[i].transform.FindChild(“TreeViewToggle”).GetComponent<Toggle>().isOn)  
  11.             {  
  12.                 items.Add(_treeViewItems[i].transform.FindChild(”TreeViewText”).GetComponent<Text>().text);  
  13.             }  
  14.         }  
  15.   
  16.         return items;  
  17.     }  
/// <summary>
    /// 返回树形菜单中被勾选的所有子元素名称
    /// </summary>
    public List<string> ItemsIsCheck()
    {
        List<string> items = new List<string>();

        for (int i = 0; i < _treeViewItems.Count; i++)
        {
            if (_treeViewItems[i].transform.FindChild("TreeViewToggle").GetComponent<Toggle>().isOn)
            {
                items.Add(_treeViewItems[i].transform.FindChild("TreeViewText").GetComponent<Text>().text);
            }
        }

        return items;
    }



七、接下来是我们的数据格式TreeViewData，树形菜单的数据源是由这个格式组成的集合：


[csharp] view plain copy
print ?
  1. /// <summary>  
  2.     /// 当前树形菜单的数据源  
  3.     /// </summary>  
  4.     [HideInInspector]  
  5.     public List<TreeViewData> Data = null;  
/// <summary>
    /// 当前树形菜单的数据源
    /// </summary>
    [HideInInspector]
    public List<TreeViewData> Data = null;

每一个TreeViewData代表一个元素，Name为显示的文本内容，ParentID为它指向的父元素在整个数据集合中的索引，从0开始，-1代表不存在父元素的根元素，当然有时候数据源并不是这个样子的，可能是XML，可能是json，不过都可以通过解析数据源之后再变换成这种方式：

[csharp] view plain copy
print ?
  1. /// <summary>  
  2. /// 树形菜单数据  
  3. /// </summary>  
  4. public class TreeViewData  
  5. {  
  6.     /// <summary>  
  7.     /// 数据内容  
  8.     /// </summary>  
  9.     public string Name;  
  10.     /// <summary>  
  11.     /// 数据所属的父ID  
  12.     /// </summary>  
  13.     public int ParentID;  
  14. }  
/// <summary>
/// 树形菜单数据
/// </summary>
public class TreeViewData
{
    /// <summary>
    /// 数据内容
    /// </summary>
    public string Name;
    /// <summary>
    /// 数据所属的父ID
    /// </summary>
    public int ParentID;
}


八、属性面板的参数：


Template：当前树形菜单的元素模板；

TreeItems：当前树形菜单的元素根物体，自动指定的，这个别去动；

VerticalItemSpace：相邻元素之间的纵向间距；

HorizontalItemSpace：不同层级元素之间的横向间距；

ItemWidth：元素的宽度，若自行修改过Template，这里的值需要自己去计算Template的大概宽度；

ItemHeight：元素的高度，若自行修改过Template，这里的值需要自己去计算Template的大概高度；



九、我已经将TreeView打包成了一个插件，在Unity中导入他，便可以直接使用TreeView：


导入TreeView.unitypackage以后，先在场景中创建一个Canvas（画布），然后右键直接创建TreeView：




之后在其他脚本中拿到这个TreeView，直接为他指定数据源（我这里是手动生成，篇幅有点长）：

[csharp] view plain copy
print ?
  1. //生成数据  
  2.         List<TreeViewData> datas = new List<TreeViewData>();  
  3.   
  4.         TreeViewData data = new TreeViewData();  
  5.         data.Name = ”第一章”;  
  6.         data.ParentID = -1;  
  7.         datas.Add(data);  
  8.   
  9.         data = new TreeViewData();  
  10.         data.Name = ”1.第一节”;  
  11.         data.ParentID = 0;  
  12.         datas.Add(data);  
  13.   
  14.         data = new TreeViewData();  
  15.         data.Name = ”1.第二节”;  
  16.         data.ParentID = 0;  
  17.         datas.Add(data);  
  18.   
  19.         data = new TreeViewData();  
  20.         data.Name = ”1.1.第一课”;  
  21.         data.ParentID = 1;  
  22.         datas.Add(data);  
  23.   
  24.         data = new TreeViewData();  
  25.         data.Name = ”1.2.第一课”;  
  26.         data.ParentID = 2;  
  27.         datas.Add(data);  
  28.   
  29.         data = new TreeViewData();  
  30.         data.Name = ”1.1.第二课”;  
  31.         data.ParentID = 1;  
  32.         datas.Add(data);  
  33.   
  34.         data = new TreeViewData();  
  35.         data.Name = ”1.1.1.第一篇”;  
  36.         data.ParentID = 3;  
  37.         datas.Add(data);  
  38.   
  39.         data = new TreeViewData();  
  40.         data.Name = ”1.1.1.第二篇”;  
  41.         data.ParentID = 3;  
  42.         datas.Add(data);  
  43.   
  44.         data = new TreeViewData();  
  45.         data.Name = ”1.1.1.2.第一段”;  
  46.         data.ParentID = 7;  
  47.         datas.Add(data);  
  48.   
  49.         data = new TreeViewData();  
  50.         data.Name = ”1.1.1.2.第二段”;  
  51.         data.ParentID = 7;  
  52.         datas.Add(data);  
  53.   
  54.         data = new TreeViewData();  
  55.         data.Name = ”1.1.1.2.1.第一题”;  
  56.         data.ParentID = 8;  
  57.         datas.Add(data);  
  58.   
  59.         //指定数据源  
  60.         TreeView.Data = datas;  
//生成数据
        List<TreeViewData> datas = new List<TreeViewData>();

        TreeViewData data = new TreeViewData();
        data.Name = "第一章";
        data.ParentID = -1;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.第一节";
        data.ParentID = 0;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.第二节";
        data.ParentID = 0;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.1.第一课";
        data.ParentID = 1;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.2.第一课";
        data.ParentID = 2;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.1.第二课";
        data.ParentID = 1;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.1.1.第一篇";
        data.ParentID = 3;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.1.1.第二篇";
        data.ParentID = 3;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.1.1.2.第一段";
        data.ParentID = 7;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.1.1.2.第二段";
        data.ParentID = 7;
        datas.Add(data);

        data = new TreeViewData();
        data.Name = "1.1.1.2.1.第一题";
        data.ParentID = 8;
        datas.Add(data);

        //指定数据源
        TreeView.Data = datas;

然后生成树形菜单，连带刷新一次：

[csharp] view plain copy
print ?
  1. //重新生成树形菜单  
  2.         TreeView.GenerateTreeView();  
  3.         //刷新树形菜单  
  4.         TreeView.RefreshTreeView();  
//重新生成树形菜单
        TreeView.GenerateTreeView();
        //刷新树形菜单
        TreeView.RefreshTreeView();

然后注册子元素的鼠标点击事件（委托类型为返回值void，带一个Gameobject类型参数，参数item为被鼠标点中的那个元素的gameobject）：

[csharp] view plain copy
print ?
  1. //注册子元素的鼠标点击事件  
  2.         TreeView.ClickItemEvent += CallBack;  
  3.   
  4. void CallBack(GameObject item)  
  5.     {  
  6.         Debug.Log(”点击了 ” + item.transform.FindChild(“TreeViewText”).GetComponent<Text>().text);  
  7.     }  
//注册子元素的鼠标点击事件
        TreeView.ClickItemEvent += CallBack;

void CallBack(GameObject item)
    {
        Debug.Log("点击了 " + item.transform.FindChild("TreeViewText").GetComponent<Text>().text);
    }

以及要获取某一元素的勾选状态：

[csharp] view plain copy
print ?
  1. bool isCheck = TreeView.ItemIsCheck(“第一章”);  
  2.             Debug.Log(”当前树形菜单中的元素 第一章 ” + (isCheck?“已被选中！”:“未被选中！”));  
bool isCheck = TreeView.ItemIsCheck("第一章");
            Debug.Log("当前树形菜单中的元素 第一章 " + (isCheck?"已被选中！":"未被选中！"));

和获取所有被勾选的元素：

[csharp] view plain copy
print ?
  1. List<string> items = TreeView.ItemsIsCheck();  
  2.             for (int i = 0; i < items.Count; i++)  
  3.             {  
  4.                 Debug.Log(”当前树形菜单中被选中的元素有：” + items[i]);  
  5.             }  
List<string> items = TreeView.ItemsIsCheck();
            for (int i = 0; i < items.Count; i++)
            {
                Debug.Log("当前树形菜单中被选中的元素有：" + items[i]);
            }



效果图如下：



插件链接：http://download.csdn.net/detail/qq992817263/9750031

请注意Unity的版本为5.5.0！

梦里梦外不相同
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Unity实现QQ列表折叠菜单
08-19
主要为大家详细介绍了Unity实现QQ列表折叠菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ASP.NET基础教程-TreeView树控件-如何使用TreeView树控件结点前的复选框
weixin_34151004的博客
01-06 136
在向树控件添加结点之前将结点对象的CheckBox属性设置为true node.CheckBox=true;当点击树控件结点前的CheckBox时private void Treeqxlb_Check(object sender, Microsoft.Web.UI.WebControls.TreeViewClickEventArgs e){ //如果点击的结点为主结点...
UnityUI折叠伸缩列表的实现
qq_40795166的博客
03-26 2436
参考链接http://gad.qq.com/article/detail/289294 链接：https://pan.baidu.com/s/1BfM78fy4hE0cXK6VTH6RxQ 提取码：ggd9 复制这段内容后打开百度网盘手机App，操作更方便哦 ...
将数据库数据绑定到treeview上
netfuns的专栏
02-19 989
一种将顺序结构数据绑定到树形结构的的方法。 代码：using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web
黑马程序员_Winform控件概要
ziyanjupan的专栏
07-20 630
ComboBox：可下拉的文本框 Dr
Unity UGUI实现折叠菜单功能
qq_20991149的博客
03-01 6796
其实很简单，一开始自己想复杂了。只需要利用VerticalLayout Group组件嵌套就可以了。 使用了一个ScrollView 组件，一个标题面板TitleItem，一个子面板panelItem和最终显示的子项dataItem,下面把具体的设置和代码贴出来，照着做很简单就可以实现一个折叠菜单的效果,打开菜单的效果使用了DOTween插件。 下面是具体代码 using System.Collections; using System.Collections.Gen..
Unity3D利用VerticalLayoutGroup组件制作(折叠菜单、树状菜单)
xunideshijie的博客
07-08 2659
先上效果图 本文利用VerticalLayoutGroup组件动态生成目录，目录数据由文件目录转换而成。无需其他设置 直接上代码 中共两个脚本
Unity 中实现一个简单的可折叠菜单
Sun.ME的博客
11-01 5474
Unity3D 中使用UGUI实现可折叠菜单
Unity面板扩展Fold_Out
PcmXhy的博客
03-20 725
FoldOut、HelpBox 的使用注意事项
Unity（UGUI）做一个三级下拉菜单列表（树形下拉菜单）。
03-28
最新项目需求要求做一个三级下拉菜单列表（树形下拉菜单）。但UGUI并没有原生的插件，只能自己实现。思路每个级的ItemPanel（一个单级菜单条）样式是一样的，于是需要一个panel来装所有的itemPanel，在整个菜单 顶部panel上添加vertically layout group组件，使下面的子菜单从上到下依次排列
三状态树视图控件（CustomTreeView）
06-02
由C#编写的显示三种状态的树视图控件，详细介绍请查看压缩包中ReadMe文件。
Unity UGUI自定义树形菜单（TreeView）GitHub配套.UnityPackage
10-17
5.5.0版本Open_csdn文章名为_Unity UGUI自定义树形菜单（TreeView） 解决“当把所有的二级菜单折叠后，再展开，本来属于第一个二级菜单的三级菜单的内容就会显示全部显示在最后一个二级菜单的尾部。”
UnityTreeView
08-12
基于UGUI开发的树形菜单,能够实现自动排布,自适应布局等,能够节约您大量的开发时间无版本限制,现在降价大促销!!!
Super TreeView 1.24（Unity树形图组件，含说明文档，截止至上传日期时的最新版本）
07-16
截止至2019.07.16的最新版本，优秀的Unity可视化树形图组件，详情见开发文档。 AssetStore资源连接（含视频）：https://assetstore.unity.com/packages/tools/gui/ugui-super-treeview-86571 PS：若发现资源版本与...
UGUI Super TreeView V1.24.zip
03-09
u3d UGUI Super TreeView 分享， 5.5.4或更高可用 Features: - Support 3 animation effects of TreeView expanding or collapsing: Immediate, Scale and Clip. （It can expand items immediately, or expand ...
unity 的 TreeView
07-08
unity 的 treeview，可以自定义节点大小或统一节点大小 自定义介个或统一间隔
2023年加湿器市场分析.pptx
最新发布
04-18
行业分析报告
Skeleton-Low Poly 低多边形骨架模型Unity插件美术资源包unitypackage
04-18
Skeleton-Low Poly 低多边形骨架模型Unity插件美术资源包unitypackage 支持Unity版本2019.4.29或更高 直接的低多边形骨架。 特点： - 低多边形（9k tris，8.5） - 适用于 Unity 5 及更高 版本 - 完全装配 - 包括一个 fbx 格式的模型 - PBR 纹理 - 高清纹理
unity自定义树形菜单
06-23
Unity的自定义树形菜单是基于EditorGUILayout的GUI实现的。首先，我们需要扩展Editor类并使用MenuCommand属性，以及EditorGUI类，来为自定义菜单添加菜单项和功能选项。然后，我们可以使用GUILayout实现垂直排列的树...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值