【Unity】UIElements Expansions: Tabs / Accordion

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通用功能

请参阅以下页面。

【Unity】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相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。

如果您有兴趣,请务必考虑一下,因为它在资产商店出售！

发表评论

您的电子邮箱地址不会被公开。

前の記事

【Unity】UIElements Expansions: C…

次の記事

【Unity】UIElements Expansions: M…