Unity用UGUI实现简单的TreeView

36 篇文章 1 订阅

创建TreeItem使用的Prefab

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

场景中创建一个TreeView

在这里插入图片描述
在这里插入图片描述

全部代码

public class TreeView : MonoBehaviour
{
    [SerializeField] private GameObject ItemPrefab;
    public Action<TreeItem> OnItemClick;
    public void LoadTree(IEnumerable<TreeItem> treeTtems)
    {
        LoadTree(treeTtems, transform);
    }
    private void LoadTree(IEnumerable<TreeItem> treeTtems, Transform _itemParentTran, TreeItem _itemParent = null)
    {
        foreach (TreeItem treeItem in treeTtems)
        {
            var itemTran = Instantiate(ItemPrefab, _itemParentTran).GetComponent<RectTransform>();
            var itemButton = itemTran.Find("Content").GetComponent<Button>();
            var headText = itemButton.transform.Find("Text").GetComponent<Text>();
            headText.text = treeItem.Name;
            if (treeItem.Height == 0) treeItem.Height = ItemPrefab.GetComponent<RectTransform>().sizeDelta.y;
            treeItem.transform = itemTran;
            treeItem.parent = _itemParent;
            itemButton.onClick.AddListener(() =>
            {
                treeItem.IsOpen = !treeItem.IsOpen;

                itemTran.DOSizeDelta(new Vector2(itemTran.sizeDelta.x, treeItem.GetRealHeight()), 0.2f);

                treeItem.parent.ResetHeight();

                OnItemClick?.Invoke(treeItem);
            });
            var childParent = itemTran.Find("Children");
            if (treeItem.Children != null && treeItem.Children.Count() > 0)
            {
                LoadTree(treeItem.Children, childParent, treeItem);
            }
            if (treeItem.IsOpen) itemTran.sizeDelta = new Vector2(itemTran.sizeDelta.x, treeItem.GetRealHeight());

            LayoutRebuilder.ForceRebuildLayoutImmediate(itemTran);
        }
    }
}
/// <summary>
/// TreeView的Item
/// </summary>
public class TreeItem
{
    /// <summary>
    /// TreeItem的<see cref="Transform"/>
    /// </summary>
    public Transform transform { get; set; }
    /// <summary>
    /// TreeItem的父级
    /// </summary>
    public TreeItem parent { get; set; }
    public int Id { get; set; }
    public string Name { get; set; }
    /// <summary>
    /// 子级集合
    /// </summary>
    public IEnumerable<TreeItem> Children { get; set; }
    /// <summary>
    /// 是否展开/打开
    /// </summary>
    public bool IsOpen { get; set; }
    /// <summary>
    /// 高度,如果没有指定则获取Prefab的高度
    /// </summary>
    public float Height { get; set; }
}
public static class TreeItemBaseExtension
{
    /// <summary>
    /// 获取真实高度(包含子列表的高度)
    /// </summary>
    /// <param name="item"></param>
    /// <returns></returns>
    public static float GetRealHeight(this TreeItem item)
    {
        float tempHeight = 0f;
        getChildrenHeight(item, ref tempHeight);
        return tempHeight;
    }
    private static void getChildrenHeight(TreeItem treeItem, ref float height)
    {
        height += treeItem.Height;
        if (treeItem.IsOpen && treeItem.Children != null)
        {
            foreach (var item in treeItem.Children)
            {
                getChildrenHeight(item, ref height);
            }
        }
    }
    /// <summary>
    /// 刷新父级高度
    /// </summary>
    /// <param name="treeItem"></param>
    public static void ResetHeight(this TreeItem treeItem)
    {
        if (treeItem != null)
        {
            var rect = treeItem.transform.GetComponent<RectTransform>();

            rect.DOSizeDelta(new Vector2(rect.sizeDelta.x, treeItem.GetRealHeight()), 0.2f);

            treeItem.parent.ResetHeight();
        }
    }
    /// <summary>
    /// 是否存在子列表
    /// </summary>
    /// <param name="treeItem"></param>
    /// <returns></returns>
    public static bool HasChild(this TreeItem treeItem)
    {
        return treeItem.Children != null;
    }
}

调用

        treeView.LoadTree(list);
        treeView.OnItemClick += item =>
        {
            if (!item.HasChild())
                Debug.Log(item.Name);
        };
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Super ScrollView for UGUI提供基于UGUI ScrollRect的可轻松定制的ScrollView。它是一组C#脚本,可帮助您创建所需的ScrollView。这是非常强大的和高度优化的性能。 文件 Android演示应用程序 演示: - 聊天消息列表演示 - 水平画廊演示 - 垂直画廊演示 - GridView演示 - PageVew演示 - TreeVew演示 - 与稠粘头演示的TreeView - 旋转日期选择器 - 更改项目高度演示 - 下拉刷新演示 - 拉起来加载更多的演示 - 点击加载更多演示 - 选择并删除演示 - GridView删除项目演示 - 顶部到底部的演示 - 自下而上的演示 - 从左到右的演示 - 右侧演示 - 响应GridView演示 - TreeViewWithChildrenIndent演示 特征: - ListView和GridView和TreeView - 无限的项目 - 项目在不同的大小(高度/宽度) - 具有不同预制的物品 - 在初始时间大小未知的项目 - 垂直滚动视图(从上到下,从下到上) - 水平滚动视图(从左到右,从右到左) - 项目填充 - 滚动到指定的项目 - 滚动到具有偏移量的项目 - 项目计数在运行时更改 - 项目大小(高度/宽度)在运行时更改 - 物品捕捉到视口中的任何位置 - 项目循环,如微调 - 添加/删除项目 - 全部删除/删除所有项目 - 刷新并重新加载项目 - 使用池缓存项目,不要在运行时销毁项目 - 有效回收物品 - 平台无关 - UGUI支持 - 支持Unity平台(IOS / Android / Mac / PC / Console / Winphone / WebGL ...)
Unity中使用UGUI实现装备合成树的步骤如下: 1. 设计装备合成树的结构:装备合成树是一个有层级关系的树形结构,每个节点代表一个装备,节点之间通过合成关系连接。可以使用脚本或者数据结构来定义装备节点和合成关系。 2. 创建UI界面:在Unity中创建一个Canvas对象,并添加需要的UI元素,比如按钮、文本等,用来显示装备合成树。 3. 绘制节点:使用UGUI提供的Button或者Image等UI组件,绘制每个装备节点的图标,并设置对应的合成信息和按钮事件等。 4. 布局节点:根据装备合成树的结构,将装备节点按照层级和位置进行布局,可以使用UGUI中的Layout组件来实现自动布局。 5. 添加交互:为每个装备节点的按钮添加事件监听,当点击某个装备节点时,根据节点的合成信息刷新树的显示内容,比如显示合成材料和合成结果等。 6. 更新合成树:当成功合成某个装备后,需要更新装备合成树的结构和显示内容,可以使用脚本来实现树的动态更新。 7. 状态管理:根据游戏逻辑和玩家行为,需要考虑装备合成树节点的状态管理,比如显示已拥有的装备节点和未解锁的装备节点等。 8. 界面优化:为了提升用户体验,可以考虑添加特效、动画和过渡效果等,使装备合成树的界面更加活跃和吸引人。 通过上述步骤,在Unity中使用UGUI可以实现一个功能完善的装备合成树界面,为玩家提供更好的游戏体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呼呼突突

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值