Table of contents
UIElements Expansions是Unity Editor的扩展资产。
UIElements Expansions: Navigation
「UIElements Expansions: Navigation」系列强烈支持「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: Navigation」主要支持以下功能。
- UIElements Expansions通用功能
- 全局样式表
- 检查器自动转换功能
- 添加标签/功能
- 附加类
- 导航
- 响应对应
- 侧导航
UIElements Expansions通用功能
请参阅以下页面。
导航

在「UIElements Expansions:Navigation」中,可以安装您在网站上经常看到的「标题导航」等。
您可以在页眉中设置页面标题和菜单,并可以在菜单中设置鼠标悬停弹出的子菜单。
每个菜单都允许您在单击时执行静态方法或切换页面。
由于您可以执行静态方法,您还可以使用Application.OpenURL打开外部站点,或者运行ExecuteMenuItem来运行Unity菜单。
响应对应

头导航支持响应,通过减小窗口大小,菜单部分看起来像手风琴菜单。
您无需进行任何特殊设置,可以使用在标题导航中设置的菜单,包括子菜单。
侧导航

「UIElements Expansions:Navigation」可以使用应用程序和网站上常见的「侧导航」。
在「侧导航」中,通过单击按钮从侧面显示菜单。
由于您可以在菜单中自由编写UXML标签,因此您不仅可以放置菜单,还可以放置图像和配置文件。
显示/隐藏侧面导航显示为动画,如现代HTML网站和应用程序。
利用方法
导入

请从Unity Asset Store购买。
购买后可从「我的资产」导入。
导航
要设置「标题导航」,请使用「editor:Navigation」标签。「editor:Navigation」将标题和菜单内容嵌套在标签中。
<editor:Navigation>
Any contents
</editor:Navigation>
使用「engine:Label」标签描述标题,并使用「editor:BindableButton」描述菜单。如果要构建子菜单,请描述「editor:MenuGroup」标签并在其中设置「editor:BindableButton」或「editor:MenuGroup」。
<!-- Navigation -->
<editor:Navigation sidenav-target="sidenav">
<!-- Navigation Title -->
<engine:Label text="UIElements Expansions: Navigation" />
<!-- Menu 1 -->
<editor:BindableButton text="UIElements Expansions" assembly="UnityEditor" type="UnityEditor.EditorApplication" method="ExecuteMenuItem" value="Masamune/UIElements Expansions" />
<!-- Menu 2 -->
<editor:MenuGroup text="Links">
<!-- SubMenu 1 -->
<editor:BindableButton text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
<!-- SubMenu 2 -->
<editor:BindableButton text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
<!-- SubMenu 3 -->
<editor:MenuGroup text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net">
<editor:BindableButton text="Masamune framwork" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/masamune/" />
<editor:BindableButton text="UIElements Expansions" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/uielements/" />
</editor:MenuGroup>
</editor:MenuGroup>
</editor:Navigation>
「MenuGroup」可以像BindableButton一样设置「assembly」和「方法」等属性。
如果已设置,则执行单击与BindableButton相同的操作时指定的操作,并在鼠标悬停时显示子菜单。如果未设置,则在鼠标悬停时显示子菜单,单击时不执行任何操作。
响应对应
「标题导航」将自动响应。没有特别设定。
侧导航
侧导航的设置方法
「侧导航」使用「editor:Sidenav」标签。
<editor:Sidenav>
Any contents
</editor:Sidenav>
内部可以自由设置UXML标签。当您捏「engine:ScrollView」时,如下例所示,您可以在侧面导航中滚动,因此即使内部内容较多也没有问题。
<editor:Sidenav>
<engine:ScrollView>
<editor:BindableImage src="https://storage.googleapis.com/media.mathru.net/1/2019/10/7e24dc4f39aafb5a70dbb55aa8fd84de.png" />
<engine:H1 text="mathru.net" />
<editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
<editor:BindableButton class="list" text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
<editor:BindableButton class="list" text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
</engine:ScrollView>
</editor:Sidenav>
您还可以通过将其与「engine:Template」结合使用来使用模板。这允许您使用外部UXML文件。
<engine:Template path="Assets/.../Sidenav.uxml" name="Sidenav" />
<editor:Sidenav template="Sidenav" />
侧面导航显示
如果要显示侧面导航,请使用基于BindableButton的标签,例如「BindableButton」或「BindableIconButton」。
<editor:BindableButton text="Show" target="sidenav" control="show" />
<editor:Sidenav name="sidenav">
<engine:ScrollView>
<editor:BindableImage src="https://storage.googleapis.com/media.mathru.net/1/2019/10/7e24dc4f39aafb5a70dbb55aa8fd84de.png" />
<engine:H1 text="mathru.net" />
<editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
<editor:BindableButton class="list" text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
<editor:BindableButton class="list" text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
</engine:ScrollView>
</editor:Sidenav>
将「editor:Sidenav」标签设置为「name」属性,并将与「BindlableButton」中设置的「name」属性相同的名称设置为「target」属性。然后通过将「control」设置为「show」属性来显示指定的侧面导航。
头部导航和侧面导航的组合
如果要在头部导航的适当位置安装侧面导航激活按钮,可以使用「editor:Navigation」标签的「sidenav-target」属性。显示具有指定名称的侧面导航的按钮位于头部导航中。
<editor:Navigation sidenav-target="sidenav">
<engine:Label text="UIElements Expansions: Navigation" />
<editor:BindableButton text="UIElements Expansions" assembly="UnityEditor" type="UnityEditor.EditorApplication" method="ExecuteMenuItem" value="Masamune/UIElements Expansions" />
<editor:MenuGroup text="Links">
<editor:BindableButton text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
<editor:BindableButton text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
<editor:MenuGroup text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net">
<editor:BindableButton text="Masamune framwork" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/masamune/" />
<editor:BindableButton text="UIElements Expansions" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net/unity/uielements/" />
</editor:MenuGroup>
</editor:MenuGroup>
</editor:Navigation>
<editor:Sidenav name="sidenav">
<engine:ScrollView>
<editor:BindableImage src="https://storage.googleapis.com/media.mathru.net/1/2019/10/7e24dc4f39aafb5a70dbb55aa8fd84de.png" />
<engine:H1 text="mathru.net" />
<editor:BindableButton class="list" text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
<editor:BindableButton class="list" text="YouTube Channel" assembly="UnityEngine" type="Application" method="OpenURL" value="https://www.youtube.com/c/mathrunetchannel" />
<editor:BindableButton class="list" text="Unity Asset Store" assembly="UnityEngine" type="Application" method="OpenURL" value="https://assetstore.unity.com/publishers/45031" />
</engine:ScrollView>
</editor:Sidenav>
总结
「UIElements Expansions: Navigation」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。
此外,通过使用导航功能,可以在编辑器窗口等中正确地向用户提供菜单。
该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。
如果您有兴趣,请务必考虑一下,因为它在资产商店出售!