【Unity】UIElements Expansions: Router

Table of contents

UIElements Expansions是Unity Editor的扩展资产。

UIElements Expansions: Router

「UIElements Expansions: Router」系列强烈支持「UIElements」,开始与Unity 2019.1。

所谓UIElements

UIElements是从Unity 2019.1开始引入的替换当前Unity编辑器的GUI系统(IMGUI)的功能。

您可以创建Unity的GUI,就像使用HTML和CSS创建网页一样,组合Unity的HTML「UXML」和Unity的样式表「USS」。

当然,您可以像以前一样在编辑器脚本中为编辑器编写处理,并且有像jQuery这样的方法,因此您可以创建像HTML5这样的动态GUI。

在未来,计划不仅取代编辑器,还取代运行时GUI(当前uGUI),并且有望留给未来的Unity GUI。

只是潜力很高,但由于它刚刚推出,它还没有足够的功能来充分利用它。

「UIElements Expansions」是一种强烈支持其缺失部分的资产。

此「UIElements Expansions: Router」主要支持以下功能。

UIElements Expansions通用功能
- 全局样式表
- 检查器自动转换功能
- 添加标签/功能
- 附加类
路由功能

UIElements Expansions通用功能

请参阅以下页面。

【Unity】UIElements Expansions

路由功能

路由功能是一个简单功能。将路由路径与放置在项目中的UXML文件关联。

但是,通过与「RoutableButton」和「BindableButton」结合使用,可以在UXML文件的显示区域「Page」标签和UXML文件之间切换,可以在Unity编辑器中引入简单的页面转换机制。这将是可能的。

利用方法

导入

请从Unity Asset Store购买。

购买后可从「我的资产」导入。

通过路由进行页面迁移

要通过路由功能进行页面转换,您需要做三个准备工作。

将UXML文件与路由路径相关联
向显示区域添加Page标签
切换按钮的排列

将UXML文件与路由路径相关联

有三种方法可以将UXML文件与路由路径相关联。

直接描述路由器标签的路径
使用Import标签,加载描述路由器标签的UXML文件
使用path属性为每个UXML文件描述路径

直接描述路由器标签的路径

您能写入路由路径到UXML文件,直接地与engine:Router标记页转换。path属性描述uxml的文件路径(从Assets下面描述),name属性描述路由路径。

<engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/RouterTag1.uxml" name="/uielements/router/router-tag-1" />
<engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/RouterTag2.uxml" name="/uielements/router/router-tag-2" />

使用Import标签,加载描述路由器标签的UXML文件

使用engine:Import标签,您可以加载UXML文件,其中包含路由器标签。path指定要加载到属性中的UXML文件的路径(Assets以下)。用于在项目中批量管理路由路径。

<engine:Import path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/RouterSettings.uxml" />

// RouterSettings.uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../../../../../UIElementsSchema/UIElements.xsd"
>

  <!-- Directly refer uxml file and path by router tag -->
  <engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/ImportTag1.uxml" name="/uielements/router/import-tag-1" />
  <engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/ImportTag2.uxml" name="/uielements/router/import-tag-2" />
  <engine:Router path="Assets/Masamune/UIElements.Expansions.Router/Assets/Styles/Articles/ImportTag3.uxml" name="/uielements/router/import-tag-3" />

</engine:UXML>

使用path属性为每个UXML文件描述路径

使用engine:UXML标记的path属性为每个文件描述路由路径。在下面的示例中的路由路径指定「/uielements/router」。

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../../../../../UIElementsSchema/UIElements.xsd"
    path="/uielements/router"
>
  <engine:H1 text="This is Index uxml" />
  <engine:Label text="Path is /uielements/router." />
  <engine:Label text="Click the button to switch pages." />
</engine:UXML>

向显示区域添加Page标签

创建显示区域并且查看路由的UXML文件。

engine:Page描述标签并描述要在path属性中显示的UXML文件的路由路径。在下面的示例中,您首先将看到在路径的UXML文件「/uielements/router」。(所以你会看到「This is Index uxml」)

<!-- 显示路由到/uielements/router的UXML文件 -->
<engine:Page class="col-12" path="/uielements/router" name="main">
</engine:Page>

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../../../../../UIElementsSchema/UIElements.xsd"
    path="/uielements/router"
>
  <engine:H1 text="This is Index uxml" />
  <engine:Label text="Path is /uielements/router." />
  <engine:Label text="Click the button to switch pages." />
</engine:UXML>

切换按钮的排列

通过设置「RoutableButton」和「BindableButton」,您可以在单击按钮时切换Page标签中显示的UXML文件。

描述要切换到每个按钮的path属性的路由路径,以及要切换到target属性的Page标签的名称。

<!-- 将name="main"的内容切换到路由到/uielements/router/router-tag-1的UXML文件 -->
<engine:RoutableButton text="RouterTag1" path="/uielements/router/router-tag-1" target="main" />
<!-- 将name="main"的内容切换到路由到/uielements/router/router-tag-2的UXML文件 -->
<editor:BindableButton text="RouterTag2" path="/uielements/router/router-tag-2" target="main" />

<!-- 首先显示路由到/uielements/router的UXML文件 -->
<engine:Page class="col-12" path="/uielements/router" name="main">
</engine:Page>

由于可以安装多个页面标签,因此如果可以正确使用名称,则可以仅切换页面的部分信息。