CN117270854A - 一种基于ugui的树形折叠结构页签创建方法和系统 - Google Patents

Abstract

本发明提供一种基于UGUI的树形折叠结构页签创建方法和系统，涉及计算机软件技术领域，所述方法包括：基于UGUI创建根画布，并创建根节点；在根节点下添加表示父页签和子页签的节点按钮；导入子页签组控制脚本和总页签控制脚本；为根节点添加所述总页签控制脚本控制所述节点按钮，并为父页签节点按钮添加按钮交互逻辑；对所述子页签分组，并基于子页签组控制脚本将分组后的各个子页签组分别与对应的所述父页签进行关联，最后根据需求添加交互事件。本申请通过编写脚本进行树形折叠结构页签的创建，简化了树形折叠结构页签的创建过程，降低了工作量，提高了开发效率和准确率。

Description

一种基于UGUI的树形折叠结构页签创建方法和系统

技术领域

本发明涉及计算机软件技术领域，特别涉及一种基于UGUI的树形折叠结构页签创建方法和系统。

背景技术

在现代计算机界面设计中，树形折叠结构页签被广泛用于组织和呈现层次化信息，如文件目录结构、导航菜单等。Unity是一种流行的游戏开发引擎，它提供了UGUI（UnityGraphical User Interface）用于创建用户界面。现有技术中，使用Unity UGUI创建复杂的树形折叠结构页签需要手动处理大量的UI元素和交互逻辑，因此会耗费大量时间和精力，效率低并且正确率低。

发明内容

本发明第一方面提供了一种基于UGUI的树形折叠结构页签创建方法，以解决现有技术中使用Unity UGUI创建树形折叠结构页签需要人工处理，效率低并且错误率高的问题。该方法包括：

创建一个画布作为根画布，在所述根画布上创建根节点；

在所述根节点下添加节点按钮，所述节点按钮包括父页签节点按钮和子页签节点按钮，所述父页签节点按钮和父页签一一对应关联，所述子页签节点按钮和子页签一一对应关联；

导入子页签组控制脚本和总页签控制脚本，其中，编写所述总页签控制脚本时，首先获取所述根节点下所有的所述子页签节点按钮，通过循环遍历计算每个所述子页签节点按钮的高度，并获得所有的所述子页签节点按钮的总高度，其次获取所述根节点下的所有所述子页签组，控制所述子页签组中各子页签里面元素的显示和隐藏；最后将以下两个步骤封装成LayoutButtons()方法，再将所述LayoutButtons()方法添加到Update()方法中执行：

步骤一、将所述总高度赋值给根目录，使根目录UI的高度等于所述总高度；遍历总页签，排除隐藏的页签，筛选出显示的页签；

步骤二、计算所述显示的页签的显示位置，把所述显示位置的Vector2值赋值给所述显示的页签的锚点位置；

对所述根节点添加所述总页签控制脚本，所述总页签控制脚本用于控制所述节点按钮；

对所述子页签进行分组得到各个子页签组，并基于所述子页签组控制脚本将各个所述各子页签组分别与对应的父页签进行关联。

进一步的，使用Unity UGUI的UI元素创建工具创建所述节点按钮。

进一步的，对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，使得所述父页签关联的所述父页签节点按钮被点击时，实现所述子页签组中子页签的显示和隐藏。

进一步的，所述基于所述子页签组控制脚本将各个所述各子页签组分别与对应的父页签进行关联，包括：

对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，所述子页签组控制脚本包括预留的子页签节点列表；

将所述父页签对应的所述子页签组中的子页签拖入所述子页签节点列表中。

进一步的，对所述根节点添加所述总页签控制脚本后，对所述子页签节点按钮和所述父页签节点按钮添加交互事件。

本发明第二方面提供了一种基于UGUI的树形折叠结构页签创建系统，用于解决现有技术中使用Unity UGUI创建树形折叠结构页签需要人工处理，效率低并且错误率高的技术问题。所述系统包括：

根节点创建模块，用于创建一个画布作为根画布，在所述根画布上创建根节点；

页签创建模块，用于在所述根节点下添加节点按钮，所述节点按钮包括父页签节点按钮和子页签节点按钮，所述父页签节点按钮和父页签一一对应关联，所述子页签节点按钮和子页签一一对应关联；

脚本导入模块，用于导入子页签组控制脚本和总页签控制脚本，其中，编写所述总页签控制脚本时，首先获取所述根节点下所有的所述子页签节点按钮，通过循环遍历计算每个所述子页签节点按钮的高度，并获得所有的所述子页签节点按钮的总高度，其次获取所述根节点下的所有所述子页签组，控制所述子页签组中各子页签里面元素的显示和隐藏；最后将以下两个步骤封装成LayoutButtons()方法，再将所述LayoutButtons()方法添加到Update()方法中执行：

步骤一、将所述总高度赋值给根目录，使根目录UI的高度等于所述总高度；遍历总页签，排除隐藏的页签，筛选出显示的页签；

步骤二、计算所述显示的页签的显示位置，把所述显示位置的Vector2值赋值给所述显示的页签的锚点位置；

页签分组模块，用于对所述子页签进行分组得到各个子页签组，并基于所述子页签组控制脚本将各个所述子页签组分别与对应的所述父页签进行关联。

所述页签创建模块中，使用Unity UGUI的UI元素创建工具，在所述根节点下创建所述节点按钮。

本发明第三方面提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任意的一种基于UGUI的树形折叠结构页签创建方法。

本发明第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述任意的一种基于UGUI的树形折叠结构页签创建方法的计算机程序。

与现有技术相比，本说明书实施例采用的上述至少一个技术方案能够达到的有益效果至少包括：本发明通过编写页签控制脚本，基于脚本实现树形折叠结构页签的创建，简化了树形折叠结构页签的创建过程，降低了工作量，减少了错误的可能性，并且节省了时间。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本发明实施例提供的一种基于UGUI的树形折叠结构页签创建方法流程示意图；

图2是本发明实施例提供的一种基于UGUI的树形折叠结构页签创建系统结构示意图；

图3是本发明实施例提供的一种计算机设备示意图；

图4是本发明实施例提供的单个子页签组脚本添加及子页签列表拖入示意图；

图5是本发明实施例提供的根节点控制脚本添加示意图；

图中附图标记：200、基于UGUI的树形折叠结构页签创建系统；201、根节点创建模块；202、页签创建模块；203、脚本导入模块；204、页签分组模块；301、存储器；302、处理器。

具体实施方式

下面结合附图对本申请实施例进行详细描述。

以下通过特定的具体实例说明本申请的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本申请的其他优点与功效。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。本申请还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本申请的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本发明实施例提供一种基于UGUI的树形折叠结构页签创建方法，通过编写页签控制脚本，基于脚本实现树形折叠结构页签的创建，简化了树形折叠结构页签的创建过程，降低了工作量，减少了错误的可能性，并且节省了时间。

如图1所示，本实施例提供的一种基于UGUI的树形折叠结构页签创建方法的具体实施步骤包括：

步骤S100：创建一个画布作为根画布，在所述根画布上创建根节点；

具体实施时，本实施例基于UGUI进行用户界面的创建，首先创建一个空的UI画布（Canvas）作为根画布，用于承载整个树形折叠结构页签，并在根画布上创建一个顶层的父级UI元素TreeRoot，用于表示树的根节点；

步骤S200：在所述根节点下添加节点按钮，所述节点按钮包括父页签节点按钮和子页签节点按钮，所述父页签节点按钮和父页签一一对应关联，所述子页签节点按钮和子页签一一对应关联；

具体实施时，使用Unity UGUI的UI元素创建工具创建需要的多个Button UI元素，即节点按钮，用于表示子页签、父页签的内容。

步骤S300：导入子页签组控制脚本TreeBtns.cs和总页签控制脚本TreeBtnContr.cs；其中，编写所述总页签控制脚本时，首先获取所述根节点下所有的所述子页签节点按钮，通过循环遍历计算每个所述子页签节点按钮的高度，并获得所有的所述子页签节点按钮的总高度，其次获取所述根节点下的所有所述子页签组，控制所述子页签组中各子页签里面元素的显示和隐藏；最后将以下两个步骤 封装成LayoutButtons()方法，再将所述LayoutButtons()方法添加到Update()方法中执行：

步骤一、将所述总高度赋值给根目录，使根目录UI的高度等于所述总高度；遍历总页签，排除隐藏的页签，筛选出显示的页签；

步骤二、计算所述显示的页签的显示位置，把所述显示位置的Vector2值赋值给所述显示的页签的锚点位置；

进一步的，步骤S300中，对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，使得所述父页签关联的所述父页签节点按钮被点击时，实现所述子页签组中子页签的显示和隐藏。

具体实施时，编写子页签组控制脚本TreeBtns.cs步骤包括：获取一个父页签节点按钮，为父页签节点按钮添加需要的子页签节点按钮；再为父页签节点按钮添加按钮交互逻辑，使父页签节点按钮点击一次后隐藏子页签节点按钮，再点击显示子页签节点按钮，通过点击所述父页签节点按钮实现子页签节点按钮的显示和隐藏；其中，子页签节点按钮的显示和隐藏控制代码如下：

void StateSmallBtn(bool b)

{

for (int i = 0; i<smallBtnList.Count; i++)

{

smallBtnList[i].SetActive(b);

}

}

编写所述总页签控制脚本TreeBtnContr.cs的方法包括：

（1）获取所述根节点下所有的所述子页签节点按钮，使用GetComponentsInChildren<Button>()方法计算单个子页签节点按钮（ButtonUI元素）的高度（GetComponent<RectTransform>().rect.height属性），通过循环遍历计算所述子页签节点按钮的高度，获得所述子页签节点按钮的总高度；

具体的，步骤（1）中根节点中子页签节点按钮的总高度计算的脚本代码如下：

private float GetTotalHeight()

{

float totalHeight = 0f;

foreach (Button button in buttons)

{

totalHeight +=(button.GetComponent<RectTransform>().rect.height+VofsetY);

}

return totalHeight;

}

（2）获取所述根节点下的所有所述子页签组，控制所述子页签组中各子页签里面元素的显示和隐藏；

具体的，步骤（2）中控制所述子页签组中各子页签里面元素的显示和隐藏代码如上述步骤S300中“子页签节点按钮的显示和隐藏控制代码”所述。

（3）将步骤（1）中计算获得的所述总高度赋值给根目录，使根目录UI的高度等于总高度；遍历总页签，排除隐藏的页签，筛选出显示的页签；计算所述显示的页签的显示位置，把所述显示位置的Vector2值赋值给所述显示的页签的锚点位置anchoredPosition；

具体的，步骤（3）中显示的页签的显示位置计算的代码如下：

private void LayoutButtons()

{

float totalHeight = GetTotalHeight();

float yOffset = totalHeight;

foreach (Button button in buttons)

{

RectTransform buttonRect = button.GetComponent<RectTransform>();

if (button.gameObject.activeSelf)

{

yOffset -= (buttonRect.rect.height+ VofsetY);

buttonRect.anchoredPosition = new Vector2(buttonRect.anchoredPosition.x, yOffset + buttonRect.rect.height / 2f);

}

}

rectTransform.sizeDelta = new Vector2(rectTransform.sizeDelta.x,totalHeight);

}

（4）将上述步骤（3）封装成LayoutButtons()方法，再将LayoutButtons()方法添加到Update()方法中执行。

通过以上4个步骤，使得每次点击父页签节点按钮隐藏显示子页签节点按钮的时候就会动态计算每个子页签节点按钮的位置，最终呈现出树形结构页签的展开和缩进等效果。

步骤S400：对所述根节点添加所述总页签控制脚本，所述总页签控制脚本用于控制所述节点按钮；

具体实施时，为根节点TreeRoot添加脚本TreeBtnContr.cs，并设置好页签垂直间隔和是否需要缩进选项。

步骤S500：对所述子页签进行分组得到各个子页签组，并基于所述子页签组控制脚本将各个所述子页签组分别与对应的所述父页签进行关联；

进一步的，步骤S500中，所述基于所述子页签组控制脚本将各个所述各子页签组分别与对应的父页签进行关联，包括：

步骤S510：对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，所述子页签组控制脚本包括预留的子页签节点列表；

步骤S520：将所述父页签对应的所述子页签组内的子页签拖入所述子页签节点列表中。

具体而言，对子页签进行分组，使得每个父页签对应有一个页签组，将父页签添加TreeBtn.cs脚本，把每个父页签对应的子页签UI拖入脚本预留的smallBtnList类表中。如图4所示，给每个父页签节点按钮上添加脚本TreeBtns，再把对应的子页签节点按钮拖入父页签节点按钮的SmallBtnList属性的两个元素中，作为父子关系的绑定。

步骤S600：对所述根节点添加所述总页签控制脚本后，对所述子页签节点按钮和所述父页签节点按钮添加交互事件。

具体实施时，所述交互事件包括鼠标单击事件、鼠标悬停事件等。如图5所示，给根节点添加控制脚本，用于控制整个菜单组件的内部逻辑的计算和处理。其中开放两个可编辑属性，一个是可编辑垂直按钮之间的间隔距离；另一个是编辑选择一个父页签后其他父、子页签是否缩进的功能。

基于同一发明构思，本发明实施例中还提供了一种基于UGUI的树形折叠结构页签创建系统，如下面的实施例所述。由于一种基于UGUI的树形折叠结构页签创建系统解决问题的原理与一种基于UGUI的树形折叠结构页签创建方法相似，因此一种基于UGUI的树形折叠结构页签创建系统的实施可以参见一种基于UGUI的树形折叠结构页签创建方法的实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图2是本发明实施例的基于UGUI的树形折叠结构页签创建系统200的一种结构框图，如图2所示，包括：

根节点创建模块201，用于创建一个画布作为根画布，在所述根画布上创建根节点；

页签创建模块202，用于在所述根节点下添加节点按钮，所述节点按钮包括父页签节点按钮和子页签节点按钮，所述父页签节点按钮和父页签一一对应关联，所述子页签节点按钮和子页签一一对应关联；

脚本导入模块203，用于导入子页签组控制脚本和总页签控制脚本，其中，编写所述总页签控制脚本时，首先获取所述根节点下所有的所述子页签节点按钮，通过循环遍历计算每个所述子页签节点按钮的高度，并获得所有的所述子页签节点按钮的总高度，其次获取所述根节点下的所有所述子页签组，控制所述子页签组中各子页签里面元素的显示和隐藏；最后将以下两个步骤封装成LayoutButtons()方法，再将所述LayoutButtons()方法添加到Update()方法中执行：

步骤一、将所述总高度赋值给根目录，使根目录UI的高度等于所述总高度；遍历总页签，排除隐藏的页签，筛选出显示的页签；

步骤二、计算所述显示的页签的显示位置，把所述显示位置的Vector2值赋值给所述显示的页签的锚点位置；

页签分组模块204，用于对所述子页签进行分组得到各个子页签组，并基于所述子页签组控制脚本将分组后的各子页签组分别与对应的父页签进行关联。

进一步的，页签创建模块202还用于使用Unity UGUI的UI元素创建工具创建所述节点按钮。

进一步的，脚本导入模块203还用于对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，使得所述父页签关联的所述父页签节点被点击时，实现所述子页签节点中子页签的显示和隐藏。

进一步的，页签分组模块204还用于：

对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，所述子页签组控制脚本包括预留的子页签节点列表；

将所述父页签对应的所述子页签组中的子页签拖入所述子页签节点列表中。

进一步的，页签分组模块204还用于对所述根节点添加所述总页签控制脚本后，对所述子页签节点按钮和所述父页签节点按钮添加交互事件。

在本实施例中，还提供了一种计算机设备，如图3所示，包括存储器301、处理器302及存储在存储器301上并可在处理器302上运行的计算机程序，所述处理器302执行所述计算机程序时实现上述任意的一种基于UGUI的树形折叠结构页签创建方法。

具体的，该计算机设备可以是计算机终端、服务器或者类似的运算装置。

在本实施例中，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述任意的一种基于UGUI的树形折叠结构页签创建方法的计算机程序。

具体的，计算机可读存储介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机可读存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读存储介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

本发明通过以上实施例实现了如下技术效果：

1、本发明通过编写页签控制脚本，基于脚本实现树形折叠结构页签的创建，简化了树形折叠结构页签的创建过程，降低了工作量，减少了错误的可能性，提高了开发效率；

2、本申请通过控制子页签的显示和隐藏，并计算出实时的每个页签位置和状态，最终呈现出树形结构页签的展开和缩进等效果；

3、本申请基于Unity UGUI，这是一个跨平台的用户界面工具，使用本申请提供的创建树形折叠结构页签的方法可以轻松在不同操作系统和设备上运行，而无需额外的适配工作，这提高了应用程序或游戏的可移植性；鼓励使用标准化的界面元素和交互模式，从而为用户提供一致的用户体验，这有助于减少用户困惑，并提高用户对应用程序或游戏的满意度；

4、由于本申请提供了一种标准化的创建方式，减少了项目中的定制代码和特定解决方案的使用，降低了维护成本，在更新或修复问题时，只需要在一个地方进行修改，而不必修改多个部分。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明实施例可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种基于UGUI的树形折叠结构页签创建方法，其特征在于，所述方法包括：

创建一个画布作为根画布，在所述根画布上创建根节点；

在所述根节点下添加节点按钮，所述节点按钮包括父页签节点按钮和子页签节点按钮，所述父页签节点按钮和父页签一一对应关联，所述子页签节点按钮和子页签一一对应关联；

导入子页签组控制脚本和总页签控制脚本，其中，编写所述总页签控制脚本时，首先获取所述根节点下所有的所述子页签节点按钮，通过循环遍历计算每个所述子页签节点按钮的高度，并获得所有的所述子页签节点按钮的总高度，其次获取所述根节点下的所有所述子页签组，控制所述子页签组中各子页签里面元素的显示和隐藏；最后将以下两个步骤封装成LayoutButtons()方法，再将所述LayoutButtons()方法添加到Update()方法中执行：

步骤一、将所述总高度赋值给根目录，使根目录UI的高度等于所述总高度；遍历总页签，排除隐藏的页签，筛选出显示的页签；

步骤二、计算所述显示的页签的显示位置，把所述显示位置的Vector2值赋值给所述显示的页签的锚点位置；

对所述根节点添加所述总页签控制脚本，所述总页签控制脚本用于控制所述节点按钮；

对所述子页签进行分组得到各个子页签组，并基于所述子页签组控制脚本将各个所述子页签组分别与对应的所述父页签进行关联。

2.根据权利要求1所述的一种基于UGUI的树形折叠结构页签创建方法，其特征在于，所述在所述根节点下添加节点按钮，包括：

使用Unity UGUI的UI元素创建工具，在所述根节点下创建所述节点按钮。

3.根据权利要求1所述的一种基于UGUI的树形折叠结构页签创建方法，其特征在于，所述方法还包括：

对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，使得所述父页签关联的所述父页签节点按钮被点击时，实现所述子页签组中子页签的显示和隐藏。

4.根据权利要求1所述的一种基于UGUI的树形折叠结构页签创建方法，其特征在于，基于所述子页签组控制脚本将各个所述子页签组分别与对应的所述父页签进行关联，包括：

对每个所述子页签组对应的所述父页签添加所述子页签组控制脚本，所述子页签组控制脚本包括预留的子页签节点列表；

将所述父页签对应的所述子页签组包括的子页签拖入所述子页签节点列表中。

5.根据权利要求1所述的一种基于UGUI的树形折叠结构页签创建方法，其特征在于，对所述根节点添加所述总页签控制脚本后，还包括：

对所述子页签节点按钮和所述父页签节点按钮添加交互事件。

6.一种基于UGUI的树形折叠结构页签创建系统，其特征在于，包括：

根节点创建模块，用于创建一个画布作为根画布，在所述根画布上创建根节点；

页签创建模块，用于在所述根节点下添加节点按钮，所述节点按钮包括父页签节点按钮和子页签节点按钮，所述父页签节点按钮和父页签一一对应关联，所述子页签节点按钮和子页签一一对应关联；

脚本导入模块，用于导入子页签组控制脚本和总页签控制脚本，其中，编写所述总页签控制脚本时，首先获取所述根节点下所有的所述子页签节点按钮，通过循环遍历计算每个所述子页签节点按钮的高度，并获得所有的所述子页签节点按钮的总高度，其次获取所述根节点下的所有所述子页签组，控制所述子页签组中各子页签里面元素的显示和隐藏；最后将以下两个步骤封装成名为LayoutButtons()的方法，再将所述LayoutButtons()方法添加到Update()方法中执行：

步骤一、将所述总高度赋值给根目录，使根目录UI的高度等于所述总高度；遍历总页签，排除隐藏的页签，筛选出显示的页签；

步骤二、计算所述显示的页签的显示位置，把所述显示位置的Vector2值赋值给所述显示的页签的锚点位置；

页签分组模块，用于对所述子页签进行分组得到各个子页签组，并基于所述子页签组控制脚本将各个所述子页签组分别与对应的所述父页签进行关联。

7.根据权利要求6所述的一种基于UGUI的树形折叠结构页签创建系统，其特征在于，所述页签创建模块，还用于使用Unity UGUI的UI元素创建工具，在所述根节点下创建所述节点按钮。

8.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至5中任一项所述的一种基于UGUI的树形折叠结构页签创建方法。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有执行权利要求1至5中任一项所述的一种基于UGUI的树形折叠结构页签创建方法的计算机程序。