【Unity】UIElements Expansions: CardView / CardList

UIElements Expansions是Unity Editor的扩展资产。

UIElements Expansions: CardView / CardList

UIElements Expansions: CardView / CardList」系列强烈支持「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: CardView / CardList」主要支持以下功能。

  • UIElements Expansions通用功能
    • 全局样式表
    • 检查器自动转换功能
    • 添加标签/功能
  • CardView
  • CardList
  • 响应式设计

UIElements Expansions通用功能

请参阅以下页面。

CardView

您可以在Unity编辑器的检查器或编辑器窗口中放置卡片类型的设计小部件。

DivVisualElement一样,您可以在卡内编写UXML标签,因此您可以将小部件用于各种目的。

您还可以在单击后描述处理,也可以像按钮一样操作。

通过使用UXML的模板功能,可以将外部模板原样用于卡小部件的内部设计。

CardList

通过将序列化List或数组指定为「binding-path」,将自动生成与内部元素数量对应的卡列表。

如果您将自己的类用于List或数组元素,则每个元素的值都会自动绑定到每个卡,因此您可以实现与ListView和ReorderableList不同的List/数组表示方法。

与UIElements Expansions的其他标签「BindableImage」「BindableLabel」结合使用时,您还可以直观地显示绑定的值。此外,如果与「PropertyField」结合使用,则可以在卡中设置每个值。

也可以使用「按钮处理」或「模板功能」以及CardView中的功能。

响应式设计

UIElements Expansions:CardView / CardList」具有用于「UIElements Expansions: Responsive Grid」的响应对应功能作为标准。

特别是在CardList中,您可以感受到效果。

使用类似Bootstrap的网格系统,您可以指定当窗口大小很大时是否并排排列,即使窗口大小变小,也会自动更改垂直和结构。

利用方法

导入

请从Unity Asset Store购买。

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

CardView

它可以通过描述UXML标签来使用。有「直接填写内容」的方法和「使用模板」的方法2种使用方法。

直接填写内容

创建与UXML标记的CardView在「editor:Card」标记如下:

<editor:Card>
  <editor:Image class="image" src="https://storage.googleapis.com/mathru-net.appspot.com/1/1bcdffd502f7e496966b76f63e8d738c.png" />
  <engine:H2 text="CardView" />
  <engine:Label text="CardView made by UIElements" />
</editor:Card>

使用模板

可以使用UXML模板系统指定卡的内容,如下所示。

<engine:Template path="Assets/Masamune/UIElements.Expansions.CardView/Assets/Styles/CardItem.uxml" name="Card"/>
<editor:Card template="Card" />
// CardItem.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"
>
  <editor:BindableImage class="image" src="https://storage.googleapis.com/mathru-net.appspot.com/1/1bcdffd502f7e496966b76f63e8d738c.png" />
  <engine:H2 text="CardView" />
  <engine:Label text="CardView made by UIElements" />
</engine:UXML>

首先,通过使用「engine:Template」标签指定模板并使用「editor:Card」标签中的「template」属性指定指定的模板名称,该模板的设计将显示为卡片内容的设计。

指定单击动作

通过指定单击行为,可以执行单击时的处理。

从脚本中指定时,可以通过将处理添加到「clickable」来完成,如下所示。

/// <summary>
/// Class Responsive Demo
/// </summary>
public class ClickableDemo : EditorWindow {
   ...
   private void OnEnable( ) {
      // Get card element
      Card card = this.rootVisualElement.Q<Card>( );
      // Click processing added
      card.clickable.clicked += ( ) => {
         Something processing
      };
   }
   ...
}

您还可以通过指定「汇编名称(可省略)」「类型名称(包含namespace)」「方法名称」从UXML指定处理。

<engine:Template path="Assets/Masamune/UIElements.Expansions.CardView/Assets/Styles/CardItem.uxml" name="Card"/>
<editor:Card template="Card" assembly="UnityEditor" type="UnityEditor.EditorApplication" method="Beep" />
<editor:Card assembly="UnityEngine" type="Application" method="OpenURL" value="https://mathru.net">
  <editor:BindableImage class="image" src="https://storage.googleapis.com/mathru-net.appspot.com/1/2019/10/aa1b8f88d3633c2b2dba247141923c60.png" />
  <engine:H2 text="mathru.net" />
  <engine:Label text="I accept plug-in development and development orders for Unity and WordPress. And I also accept requests for music production and video production." />
</editor:Card>

使用Binding-path

您可以通过将「binding-path」属性添加到「editor:Card」标签来检索和展开序列化的值。

<engine:Template path="Assets/Masamune/UIElements.Expansions.CardView/Assets/Styles/CardItem.uxml" name="Card"/>
<editor:Card template="Card" binding-path="序列化变量名" />

行为取决于变量的类型。

变量类型行为
字符串(string)
数值(int,float)
Vector等的值类型
每个值都绑定。
可通过「binding-path="value"」获得
序列化类可以使用「binding-path="变量名"」获取类内部的序列化性值
值型数组/List切换到CardList模式。创建数组/列表元素数的卡,并将值绑定到每个元素。绑定的值可以通过「binding-path="value"」获取
序列化类的数组/List切换到CardList模式。创建数组/列表元素数的卡,并将值绑定到每个元素。绑定的值可以通过「binding-path="类中序列化变量的名称"」获取

CardList

如果绑定的值是数组或List,则切换到CardList模式。

CardList模式下,将创建数组/List元素的卡,并将值绑定到每个元素。

响应式设计

UIElements Expansions:CardView / CardList」对应响应式。您还可以使用「UIElements Expansions: Responsive Grid」网格系统类。

另外,通过指定类「.child-*」,可以从UXML指定每个CardList卡的宽度。在以下示例中,通过指定「class="child-md-6"」,最多可在旁边放置2个卡。

<engine:Template path="Assets/Masamune/UIElements.Expansions.CardView/Assets/Styles/CardItem.uxml" name="Card"/>
<editor:Card template="Card" binding-path="List" class="child-md-6" />

总结

UIElements Expansions: {AssetName}」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。

通过使用CardView和CardList,您可以轻松地在检查器或编辑器窗口上实现丰富且易于理解的设计,如现代网站。

该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。

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

发表评论

电子邮件地址不会被公开。