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

「UIElements Expansions:Tabs / Accordion」通过在Unity或Unity编辑器中的选项卡和选项卡之间切换来添加页面转换功能。
它可以通过使用TabGroup和Tab标签,Instance标签或「UIElements Expansions:Router」路由功能来实现。
由于可以仅通过描述UXML标签来切换选项卡和页面转换,因此可以非常容易地实现它。
由于可以在任何地方放置要切换到选项卡的页面,因此可以将选项卡放在标题上,如网页,或将选项卡放在页脚上,如应用程序。
手风琴

「UIElements Expansions:Tabs / Accordion」为Unity和Unity编辑器提供了通过手风琴组件切换显示的功能。
手风琴是您在网页和应用程序中看到的UI之一。
先只显示项目。单击其中一个项目时,该项目的内容将滑动并显示。
当您单击另一个项目时,它是一个组件,当您隐藏已显示的项目内容时,将显示您单击的新项目。
它被称为手风琴,因为它看起来像正在演奏手风琴。
「UIElements Expansions:Tabs / Accordion」可以通过将AccordionGroup和Accordion标签相结合来实现此功能。
利用方法
导入

请从Unity Asset Store购买。
购买后可从「我的资产」导入。
标签
基本的利用方法
基本上它只能通过在TabGroup标签下放置Tab标签来使用。
<engine:TabGroup>
<engine:Tab text="Tab1" />
<engine:Tab text="Tab2" />
<engine:Tab text="Tab3" />
<engine:Tab text="Tab4" />
</engine:TabGroup>
在上面的示例中,有四个选项卡。
选项卡动作设置
在第一个例子中,我们只设置了一个标签。选项卡中设置操作。
Tab标签继承了Button标签,您可以像Button和BindableButton一样设置操作。
从脚本设置时,请从clickable属性设置事件。
/// <summary>
/// Class Clickable Demo
/// </summary>
public class ClickableDemo : EditorWindow {
...
private void OnEnable( ) {
// Get tab element
Tab tab = this.rootVisualElement.Q<Tab>();
// Click processing added
tab.clickable.clicked += () => {
Something processing
};
}
...
}
您还可以像BindableButton一样从UXML设置操作。
<engine:Tab text="mathru.net" assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net" />
上述示例使用assembly和type、method和value属性调用静态方法。这调用了Unity的Application.OpenURL并跳过到外部链接。
切换页面
使用Tab切换页面时,您可以使用Template和Instance的组合。
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab1.uxml" name="Tab1" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab2.uxml" name="Tab2" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab3.uxml" name="Tab3" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Tab4.uxml" name="Tab4" />
<engine:TabGroup style="border-width:1px 1px 0;border-color:#fff;margin:10px 10px 0;" class="primary" >
<engine:Tab text="Tab1" path="Tab1" target="main" active="true" />
<engine:Tab text="Tab2" path="Tab2" target="main" />
<engine:Tab text="Tab3" path="Tab3" target="main" />
<engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>
<engine:Instance template="Tab1" name="main" style="padding:10px;border-width:1px;border-color:#fff;margin: 0 10px 10px;overflow:hidden;" />
通过在Tab标签中指定path和target属性,您可以在Instance标签中显示由Template标签读取的外部UXML文件,如上例所示。
path属性指定读取模板的name属性,target属性指定要显示的Instance标签的name属性。
初始位置设置
您可以通过将Tab标签的active属性设置为true来选择最初处于活动状态的选项卡。
<engine:Tab text="Tab1" path="Tab1" target="main" active="true" />
设计设置
TabGroup和Tab标记可以设置「UIElements Expansions」系列常见的其他颜色类。
<engine:TabGroup class="danger">
<engine:Tab text="Tab1" path="Tab1" target="main" active="true" />
<engine:Tab text="Tab2" path="Tab2" target="main" />
<engine:Tab text="Tab3" path="Tab3" target="main" />
<engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>
在上述示例中,该选项卡的活动颜色为红色。
此外,对于选项卡,可以使用underline类。underline类不会更改所有背景的颜色,但会在标签下显示彩色条。请和彩色等级一起使用。
<engine:TabGroup class="primary underline">
<engine:Tab text="Tab1" path="Tab1" target="main" active="true" />
<engine:Tab text="Tab2" path="Tab2" target="main" />
<engine:Tab text="Tab3" path="Tab3" target="main" />
<engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>
它还支持Masamune Framework的IconFont和Localzie,并提供IconTab和LocalizeTab标签。可以分别用于图标显示、翻译对应用。
<engine:TabGroup class="primary underline">
<engine:IconTab icon="fa-user" path="Tab1" target="main" active="true" />
<engine:LocalizeTab text="Localization key" path="Tab2" target="main" />
<engine:Tab text="Tab3" path="Tab3" target="main" />
<engine:Tab text="Tab4" path="Tab4" target="main" />
</engine:TabGroup>
手风琴
基本的利用方法
基本上,我们在AccordionGroup标签下放置Accordion标签并使用它。
<engine:AccordionGroup>
<engine:Accordion name="accordion1">
Accordion Contents
</engine:Accordion>
<engine:Accordion name="accordion2">
Accordion Contents
</engine:Accordion>
</engine:AccordionGroup>
Accordion标签可以像VisualElement标签一样将UXML标签放入其中,并描述要在Accordion标签中显示的每个内容。
手风琴的切换
您可以使用BindableButton(或派生标签,如BindableIconButton或BindableLocalizeButton)切换手风琴。
<engine:AccordionGroup>
<editor:BindableButton text="Show Accordion 1" control="show" target="accordion1" />
<engine:Accordion name="accordion1">
Accordion Contents
</engine:Accordion>
<editor:BindableButton text="Show Accordion 2" control="show" target="accordion2" />
<engine:Accordion name="accordion2">
Accordion Contents
</engine:Accordion>
</engine:AccordionGroup>
通过分别指定BindableButton的control和target属性来控制手风琴。control属性指定show,target属性指定要显示的手风琴的name属性。这将显示您指定的target手风琴。
使用模板
Accordion标签允许您使用模板将另一个UXML文件显示为内容。
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Accordion3.uxml" name="Accordion3" />
<engine:Template path="Assets/Masamune/UIElements.Expansions.TabsAccordion/Assets/Styles/Articles/Accordion4.uxml" name="Accordion4" />
<engine:AccordionGroup>
<editor:BindableButton text="Show Accordion 3" control="show" target="accordion3" />
<engine:Accordion name="accordion3" template="Accordion3" />
<editor:BindableButton text="Show Accordion 4" control="show" target="accordion4" />
<engine:Accordion name="accordion4" template="Accordion4" />
</engine:AccordionGroup>
在Template标签中预先指定外部UXML文件,并在Accordion标签的template属性中指定name属性。
总结
「UIElements Expansions: Tabs / Accordion」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。
您还可以使用选项卡和手风琴构建更易于理解的UI。它将广泛用于手册和教程。
该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。
如果您有兴趣,请务必考虑一下,因为它在资产商店出售!