Unity2019 UIElement 笔记（二）UXML元素介绍上

最新推荐文章于 2024-05-22 11:23:12 发布

嘉神川优衣

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量8.1k

点赞数 6

分类专栏： Unity笔记文章标签： Unity UXML USS UIElement

Unity笔记专栏收录该内容

37 篇文章 34 订阅

订阅专栏

在上一章中，已经创建了一个最简单的窗口，从这一章开始就来简单介绍UXML的元素。
这里需要说明，新的编辑器拓展需要自学HTML和CSS，如果已有这方面的知识会很轻松。
本人也是第一次使用这些内容，如有不足，请大家指出。

UXML元素

这里的内容来自官方文档：https://docs.unity3d.com/Manual/UIE-ElementRef.html 可以自行观看

基本要素

VisualElement

这是所有视觉元素的基类
在UnityEngine.UIElements命名空间下
允许的子元素：任意数量的VisualElement

在上一章中我们就创建了VisualElement类型根节点，之后将子节点挂在该根节点上

BindadbleElement

继承自VisualElement
在UnityEngine.UIElements命名空间下
允许的子元素：任意数量的VisualElement
可以绑定到一个SerializedProperty上，属性的值和显示的值是同步的

常用元素

以下均来自官方文档
1.均在UnityEngine.UIElements命名空间下
2.无符号表示允许子元素数量是任意数量的VisualElement
3.X字符表示不允许有子元素
4.不作特殊说明，均包含所有VisualElement属性

通用元素

1.Box

根据其内容绘制一个框

2.TextElement （X）

显示文本的元素

3.Label （X）

文本标签

继承自TextElement

4.Image （X）

显示图像

5.IMGUIContainer （X）

绘制IMGUI内容的元素

focus-index 默认值是 0
focusable 默认值是 true

6.Foldout

通过一个toggle控制展开或收起

继承属性 BindableElement

简单案例

USS

.h
{
	height: 150px;
	background-image: resource("unity");
}
.pic
{
	width :50px;
	height:50px;
	background-image: resource("unity");
}

UXML

<Box class ="h">
	<Image class="pic"/>
	<Foldout>
		<Label text="Label"/>
		<TextElement text ="TextElement"/>
    </Foldout>
</Box>

结果

在这里插入图片描述
由于我没有用过IMGUI，请大家自己尝试

模板

1.Template （X）

通过对另一个UXML模板的引用，使用其Instance元素来实例化

name：此元素的字符串标识符
path：要加载的UXML文件的路径

2.Instance （X）

一个模板的实例

template：对Template实例化，命名为name

3.TemplateContainer （X）

模板容器

继承属性 BindableElement
template：此模板的字符串标识符

简单案例

USS

没有

UXML

首先定义一个需要的组件名为portrait

<engine:VisualElement class="portrait">
	<engine:Label name="nameLabel" text="Name"/>
	<engine:Label name="levelLabel" text="42"/>
</engine:VisualElement>

然后实例化该模板

<!--加载一个模板 需要路径(path) 和字符串标识符(name)-->
<Template path="Assets/Editor/portrait/portrait.uxml" name="Portrait"/>
<VisualElement name="players">
	<!--实例化该模板 并命名-->
	<Instance template="Portrait" name="player1"/>
	<Instance template="Portrait" name="player2"/>
	<Instance template="Portrait" name="player3"/>
</VisualElement>

结果

模板：
在这里插入图片描述
实例化后

控制

1.BaseField< T >（X）

所有字段的抽象基类

继承属性 BindableElement
focus-index 默认值是 0
focusable 默认值是 true
label：与字段关联的文本

2.BaseFieldTraits<ValueType, UxmlType>（X）

继承自 BaseField< ValueType >
value：字段的初值，类型为 ValueType

3.Button（X）

标准按钮

继承自TextElement

4.RepeatButton（X）

按下时反复执行操作的按钮

继承自TextElement
delay：执行操作之前的初始延迟（以毫秒为单位）; 默认值是0
interval：每个动作重复之间的间隔（以毫秒为单位）; 默认值是0

目前还没有找到使用RepeatButton的方法

5.Toggle（X）

开关（复选框）

继承自 BaseFieldTraits<bool, UxmlBoolAttributeDescription>
text ：开关右侧的标签

6.Scroller（X）

滚动条

继承自VisualElement
low-value：滚动条的最小值
high-value：滚动条的最大值
direction：Horizontal或Vertical; 默认是Vertical
value：滚动条的位置

7.Slider （X）

滑动条

继承自BaseFieldTraits<float, UxmlFloatAttributeDescription>
low-value：滚动条的最小值
high-value：滚动条的最大值
direction：Horizontal或Vertical; 默认是Horizontal
page-size：滑块的页面大小

8.SliderInt （X）

Int类型的滑动条

继承自BaseFieldTraits<float, UxmlIntAttributeDescription>
low-value：滚动条的最小值
high-value：滚动条的最大值
direction：Horizontal或Vertical; 默认是Horizontal
page-size：滑块的页面大小

9.MinMaxSlider （X）

允许用户指定最小值和最大值的滑块

继承自BaseField
low-limit：滚动条的最小值
high-limit：滚动条的最大值
min-value：滑块光标的最小值
max-value：滑块光标的最大值

10.EnumField （X）

一个只能获取底层字符串值的字段Enum

在UnityEditor.UIElements命名空间下

如果之前只用了xmlns=“UnityEngine.UIElements”
那么在这里需要添加xmlns:editor=“UnityEditor.UIElements”
并在使用的时候需要editor:EnumField

继承自BaseField< Enum >
type：必需，表示底层的C＃类型的字符串 Enum
value：表示字段值的字符串

目前还没有找到显示EnumField的方法

11.MaskField （X）

多选菜单

在UnityEditor.UIElements命名空间下
继承自BaseField< int >
choices：逗号分隔的列表，最多包含32个选项，以显示在弹出菜单中
value：一个整数，表示字段的值为32位掩码

12.LayerField （X）

图层单选菜单

在UnityEditor.UIElements命名空间下
继承自BaseField< int >
value：表示选定图层编号

13.LayerMaskField （X）

图层多选菜单

在UnityEditor.UIElements命名空间下
继承自MaskField

14.TagField （X）

标签单选菜单

在UnityEditor.UIElements命名空间下
继承自BaseField< string >
value：表示Tag值的字符串

15.ProgressBar （X）

进度条

在UnityEditor.UIElements命名空间下
继承自BindableElement
low-value：表示进度条最低值的浮点数（默认值为0）
high-value：表示进度条最高值的浮点数（默认值为100）
title：表示进度条标题的字符串

简单案例

USS

.btn
{
	width :100px;
	height:30px;
}
.scr
{
	height:200px;
}
.sliH
{
	width:100px;
}
.sliV
{
	height:100px;
}
.efi
{
	width:100px;
	height:15px;
}

UXML

  <Button class="btn" text ="Button"/>
  <RepeatButton class="btn" text ="RepeatButton" delay ="1000" interval="1000"/>
  <Toggle text="toggle"/>
  <Scroller class="scr" low-value="0" high-value="400" direction="Vertical" value="0"/>
  <Slider class="sliH" low-value="0" high-value="200" direction="Horizontal" page-size="1"/>
  <SliderInt class="sliV" low-value="0" high-value="200" direction="Vertical" page-size="1"/>
  <MinMaxSlider class="sliH" low-value="0" high-value="200" min-value="0" max-value="200"/>
  <editor:EnumField class="efi" type="EnumTest" value="0"/>
  <editor:MaskField class="efi" choices="one,two,three,four" value="0"/>
  <editor:LayerField class="efi"/>
  <editor:LayerMaskField class="efi"/>
  <editor:TagField class="efi"/>
  <editor:ProgressBar class="efi" low-value="0" high-value="100" title="ProgressBar"/>