本系列文章介绍UIElement知识点,欢迎访问😉

本系列文章使用的Unity版本为2019.3.7f1

以下内容中,可能某些元素的属性解释的不是很充分,这些还需要后面的实际使用才更好了解。

UIElements Samples

官方提供的内置元素使用demo,在Window->UI->UIElements Samples下。通过这个工具,可以很方便地查询到各个内置元素的使用方法。

UXML elements reference

UIElement提供了一些常用的UXML元素供我们使用,在UnityEngine.UIElements和UnityEditor.UIElements命名空间下。

这些自带的元素分为以下几大类:

  • Base elements
  • Utilities
  • Templates
  • Controls
  • Text input
  • Complex widgets
  • Toolbar
  • Views and windows

Base elements

VisualElement

  1. 所有元素的基类
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:无数量限制
  4. 属性
    • class
    • style
    • name
    • picking-mode
    • tooltip
    • focusable
    • tabindex
    • view-data-key

BindableElement

  1. 可以绑定到一个SerializedProperty上,属性的值和显示的值是同步的
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:无数量限制
  4. 属性
    • binding-path: 此元素绑定的属性的路径。

Utilities

Box

  1. Box类似于VisualElement,在内容周围多了一个方框
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:无数量限制
  4. 属性:
    • VisualElement的所有属性

Box 元素示意图

1
2
3
4
5
6
7
8
9
10
11
<?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"
>
<engine:Box>
<engine:Label text="This is Label in Box" />
</engine:Box>
</engine:UXML>

TextElement

  1. 显示文本
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性:
    • VisualElement的所有属性
    • text:显示的文本

TextElement示意图

1
2
3
4
5
6
7
8
9
10
11
12
<?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"
>
<engine:Box>
<engine:Label text="This is Label in Box" />
<engine:TextElement text="This is TextElement in Box" />
</engine:Box>
</engine:UXML>

Label

  1. 文本标签
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性:
    • VisualElement的所有属性

示意图和实例代码同TextElement

Image

  1. 显示图片
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性:
    • VisualElement的所有属性

Image元素示意图

1
2
3
4
5
Image imageElement = new Image();
imageElement.image = AssetDatabase.LoadAssetAtPath<Texture>("Assets/quit_icon.png");
imageElement.sourceRect = new Rect(0,0,128,128);
imageElement.scaleMode = ScaleMode.ScaleToFit;
root.Add(imageElement);

IMGUIContainer

  1. 绘制一个IMGUI的内容,
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性:
    • VisualElement的所有属性
    • focus-index:默认值是0
    • focusable:默认值是true

IMGUI Button 示意图

1
2
3
4
5
6
7
8
9
IMGUIContainer imguiContainer = new IMGUIContainer();
imguiContainer.onGUIHandler = delegate
{
if (GUILayout.Button("This is IMGUI Button"))
{
Debug.LogError("Click");
}
};
root.Add(imguiContainer);

Foldout

  1. 绘制一个具有显示或隐藏其内容的切换按钮。
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:无数量限制
  4. 属性:
    • VisualElement的所有属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//定义一个imgui的button
IMGUIContainer imguiContainer = new IMGUIContainer();
imguiContainer.onGUIHandler = delegate
{
if (GUILayout.Button("This is IMGUI Button"))
{
Debug.LogError("Click");
}
};
//定义一个Foldout
Foldout foldout = new Foldout();
foldout.text = "FoldOut";
//将button加到foldout下
foldout.Add(imguiContainer);
root.Add(foldout);

Templates

Template

  1. 对另一个UXML模板的引用
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性:
    • name: 元素的唯一字符串标识符
    • path: 要加载的UXML文件路径

Instance

  1. 模板实例
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性:
    • template: 要实例化的模板的名称

TemplateContainer

  1. 模板容器
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性:
    • BindableElement的所有属性
    • template: 该模板的字符串标识符

Template 简单案例

  1. 新建一个Template.uxml文件,组件命名为Player,其中包含两个Label
1
2
3
4
5
6
7
8
9
10
11
12
<?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"
>
<engine:VisualElement class="Player">
<engine:Label name="nameLabel" text="Name"/>
<engine:Label name="ageLabel" text="Age"/>
</engine:VisualElement>
</engine:UXML>
  1. 新建一个TemplateDemo.uxml文件,用以实例化该模板。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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"
>
<!--注意模板文件的路径-->
<engine:Template path="Assets/Editor/Template.uxml" name="Player"/>
<engine:VisualElement name="players">
<!--实例化该模板 并命名-->
<!--template的值要跟前面定义的一致-->
<engine:Instance template="Player" name="player1"/>
<engine:Instance template="Player" name="player2"/>
<engine:Instance template="Player" name="player3"/>
</engine:VisualElement>
</engine:UXML>
  1. 使用C#加载TemplateDemo.uxml
1
2
3
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/TemplateDemo.uxml");
VisualElement labelFromUXML = visualTree.CloneTree();
root.Add(labelFromUXML);

模板示例示意图

Controls

BaseField

  1. 所有Field类型元素的抽象基类
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BindableElement的所有属性
    • focus-index:默认值为0
    • focusable:默认值为true
    • label:与field关联的标签文本

BaseFieldTraits<ValueType, UxmlType>

  1. 继承自 BaseField< ValueType >
  2. 属性
    • BaseField< ValueType >的所有属性
    • value:字段的初始值,类型为 ValueType

Button

  1. 标准按钮
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • TextElement的所有属性

RepeatButton

  1. 按下时重复执行动作的按钮
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • TextElement的所有属性
    • delay:按钮执行动作之前的初始延迟(毫秒)。默认值是0
    • interval:重复每个动作之间的毫秒间隔。默认值是0

Toggle

  1. 解释,略
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BaseFieldTraits< bool, UxmlBoolAttributeDescription >的所有属性
    • text:开关右侧的标签文本

Scroller

  1. 滚动条
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • VisualElement的所有属性
    • low-value: 滚动条的最小值
    • high-value: 滚动条的最大值
    • direction: 滑动方向是水平还是竖直,默认是竖直的
    • value:滚动条的位置

Slider

  1. 滑动条,值为浮点数
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BaseFieldTraits< float, UxmlFloatAttributeDescription>的所有属性
    • low-value:滑动条的最小值
    • high-value:滑动条的最大值
    • direction:滑动方向是水平还是竖直,默认是水平的
    • page-size:滑块的页面大小

SliderInt

  1. Int数值的滑动条
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BaseFieldTraits< int, UxmlIntAttributeDescription>的所有属性
    • low-value、high-value、direction、page-size等属性同Slider,只是Value类型是int

MinMaxSlider

  1. 允许用户指定最小值和最大值范围的slider
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BaseField< Vector2>的所有属性
    • low-limit:最小值限制
    • high-limit:最大值限制
    • min-value:滑块的最小值
    • max-value:滑块的最大值

EnumField

  1. 绘制一个枚举类型的字段
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BaseField< Enum >的所有属性

MaskField

  1. 多选菜单
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • choices: List< string >类型,显示在弹出菜单上选项
    • value: 一个整数,将字段的值表示为32位掩码
1
2
MaskField maskField = new MaskField(new List<string>(2) {"Mask1", "Mask2"},0);
root.Add(maskField);

LayerField

  1. 下拉菜单,选择一个Layer
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BaseField< int>的所有属性
    • value: 表示字段值(所选层号)的整数。
1
2
LayerField layerField = new LayerField();
root.Add(layerField);

LayerMaskField

  1. 下拉菜单,可以从中选择多个Layer
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • MaskField的所有属性

TagField

  1. 下拉菜单,可以从中选择一个Tag
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BaseField的所有属性
    • value:选择的Tag
1
2
TagField tagField = new TagField();
root.Add(tagField);

ProgressBar

  1. 进度条
  2. 命名空间:UnityEngine.UIElements
  3. 子元素数量:0
  4. 属性
    • BindableElement的所有属性
    • low-value:表示进度条的最小值的浮动。默认值是0
    • high-value:表示进度条的最大值的浮动。默认值是100。
    • title:表示进度条标题的字符串。
1
2
3
4
ProgressBar progressBar = new ProgressBar();
progressBar.value = 50;
progressBar.title = "Progress Bar";
root.Add(progressBar);

Text input

各种类型的输入型元素,不一一介绍了。以下元素只能在Editor下使用。

  • TextField:可编辑的文本元素
  • IntegerField:32位整数的文本元素
  • LongField:64位整数的文本元素
  • FloatField:Float类型的文本元素
  • DoubleField:Double类型的文本元素
  • Vector2Field:Vector2类型的文本元素(float)
  • Vector2IntField:Vector2类型的文本元素(int)
  • Vector3Field:Vector3类型的文本元素(float)
  • Vector3IntField:Vector3类型的文本元素(int)
  • Vector4Field:Vector4类型的文本元素(float)
  • RectField:包含四个文本字段的集合,它们接受浮点值来编辑矩形的值
  • RectIntField:包含四个文本字段的集合,它们接受整数值来编辑矩形的值。
  • BoundsField:一组六个文本字段,接受浮点值来编辑边框的值。
  • BoundsIntField:包含六个文本字段的集合,它们接受整数值来编辑边框的值。

Complex widgets

以下几个元素只能在Editor下使用

  • ColorField:颜色选择器
  • CurveField:曲线编辑器
  • GradientField:渐变编辑器
  • ObjectField:对象选择器
  • InspectorElement:在Inspector窗口中显示属性的元素

Toolbar

  • Toolbar:保存工具栏项的容器
  • ToolbarButton:工具栏按钮
  • ToolbarToggle:工具栏开关
  • ToolbarMenu:工具栏的下拉菜单
  • ToolbarSearchField:工具栏搜索框
  • ToolbarPopupSearchField:带有搜索选项弹出菜单的搜索字段
  • ToolbarSpacer:在工具栏之间插入固定数量的空白元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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:Toolbar>
<editor:ToolbarButton text="Button"/>
<editor:ToolbarToggle text="Toggle"/>
<editor:ToolbarMenu text="Menu"/>
<editor:ToolbarSearchField text="SearchField"/>
<editor:ToolbarSpacer />
<editor:ToolbarPopupSearchField text="popupSearchField"/>
</editor:Toolbar>
</engine:UXML>

Views and windows

  • ListView:元素列表
  • ScrollView:带有水平和垂直滚动条的可滚动视图。
  • TreeView:用于在树层次结构中显示元素的视图。
  • PopupWindow:一个UIElements窗口,显示在其他内容的顶部。(Editor)

更多的UIElement知识点文章,还在进行中,如有相关内容需要介绍的,可以在下方留言,抽空更新文章~

以上知识分享,如有错误,欢迎指出,共同学习,共同进步,欢迎留言评论!