Unity中利用UIWidgets插件创建我们自定的树形结构

1.首先将我们自定义的节点的类编写出来,例如

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UIWidgets;

/// <summary>
/// 首先创建一个自定义的类,让它继承TreeViewItem
/// </summary>
public class MyTreeItem :TreeViewItem  
{
    /// <summary>
    /// 自定义的一个字段 
    /// </summary>
    string data;

    public string Data
    {
        get 
        { 
            return data;
        }
        set 
        {
            data = value;
            //这个很重要,一定要将自定义的属性添加到事件当中
            Changed("Data");
        }
    }

    //构造函数
    public MyTreeItem(string itemName, Sprite itemIcon, string itemData)
        : base(itemName, itemIcon)
    {
        this.data = itemData;
    }

}

2.在scene场景中操作如下:Canvas---UI--UIWidgets--COLLECTIONS---TreeView;
3.编写创建树形结构的代码,代码如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UIWidgets;
using System.IO;
public class MyCustomTreeTest : MonoBehaviour {
    //
    public TreeView m_tree;
    string[] itemNames = new string[] { "", "", "", "" };
    string[] names = new string[] { "赵二", "赵三", "赵四", "赵一", "王二", "王三", "王四", "李二", "李一", "钱二" };
    void Start () {
        //CreateByDefaultItemOne();
        CreateByDefaultIten();
    }


    //使用插件默认的DefaultIten来创建树形结构
    public void CreateByDefaultItemOne()
    {
        //创建父节点
        ObservableList<TreeNode<TreeViewItem>> Nodes = new ObservableList<TreeNode<TreeViewItem>>();
        //创建第一层的节点
        for (int i = 0; i < itemNames.Length; i++)
        {
            ObservableList<TreeNode<TreeViewItem>> childNodes = new ObservableList<TreeNode<TreeViewItem>>();
            TreeViewItem item = new TreeViewItem(itemNames[i], null);
            TreeNode<TreeViewItem> node1 = new TreeNode<TreeViewItem>(item, childNodes);
            Nodes.Add(node1);

        }
        //赋值
        m_tree.Nodes = Nodes;

    }

    public void CreateByDefaultIten()
    {
        ObservableList<TreeNode<TreeViewItem>> nodesList_1 = new ObservableList<TreeNode<TreeViewItem>>();
        for (int i = 0; i < itemNames.Length; i++)
        {            
            ObservableList<TreeNode<TreeViewItem>> nodesList_2 = new ObservableList<TreeNode<TreeViewItem>>();        
            for (int j = 0; j < names.Length; j++)
            {
                //如果有第三层,就以此类推来写就好
                //ObservableList<TreeNode<TreeViewItem>> nodesList_3 = new ObservableList<TreeNode<TreeViewItem>>();   
                //如果当前字符串中包含指定的字符串则返回TRUE
                if (names[j].Contains(itemNames[i]))
                {
                    //使用插件默认脚本
                    //TreeViewItem item_1 = new TreeViewItem(names[j], null);
                    //使用自定义脚本
                    var item_1 = new MyTreeItem(names[j]+j.ToString(), null, j.ToString());
                    TreeNode<TreeViewItem> node_2 = new TreeNode<TreeViewItem>(item_1, null);
                    //将符合条件的添加到对应的节点下
                    nodesList_2.Add(node_2);
                }
            }
            TreeViewItem item = new TreeViewItem(itemNames[i], null);
            TreeNode<TreeViewItem> nodes_1 = new TreeNode<TreeViewItem>(item, nodesList_2);
            nodesList_1.Add(nodes_1);
        }

        m_tree.Nodes = nodesList_1;
    }


    /// <summary>
    /// 点击Item的方法
    /// </summary>
    /// <param name="index"></param>
    /// <param name="item"></param>
    public void OnSelect(int index, ListViewItem item)
    {
        TreeViewComponent componentItem = item as TreeViewComponent;
        //自定义的
        MyTreeItem customItem = componentItem.Item as MyTreeItem;
        Debug.Log("Selected: " + index + "; name: " + customItem.Name + "; value: " + customItem.Value + "; data: " + customItem.Data);
    }
    

}

4.将MyCustomTreeTest这个脚本拖放到Canvas下,将脚本中的m_tree赋值为第二步创建的树形结构预制,点击运行即可

posted @ 2018-05-30 11:53  nanyang0310  阅读(3564)  评论(0编辑  收藏  举报