Unity2019 UIElement 笔记（三）UXML元素介绍下_unity toolbarmenu

UXML元素

这里的内容来自官方文档：https://docs.unity3d.com/Manual/UIE-ElementRef.html 可以自行观看
以下均来自官方文档
1.均在UnityEngine.UIElements命名空间下
2.无符号表示允许子元素数量是任意数量的VisualElement
3.X字符表示不允许有子元素
4.不作特殊说明，均包含所有VisualElement属性

文本输入

1.TextInputBaseField< TValueType > （X）

所有文本字段的抽象基类

• 继承自 BaseFieldTraits<string, UxmlStringAttributeDescription>
• text：字段的文本值
• max-length：字段可包含的最大字符数。默认值-1设置文本长度没有限制。
• password：一个布尔值，指示是否应显示字段内容（false，默认值）或使用maskCharacter字符显示。
• mask-character：字符使用时显示的字段内容password是true。默认是角色*。
• readonly：boolean指示该字段是只读的（默认值：false）

2.TextField（X）

可编辑的文本
-继承自TextInputBaseField< string >

• multiline：一个布尔值，指示文本字段是在多行（true）还是在一行上显示其文本，忽略文本中的任何换行符（false默认值）

3.IntegerField（X）

整数（32位）值的文本

• 在UnityEditor.UIElements命名空间下
• 继承自BaseFieldTraits<int, UxmlIntAttributeDescription>

4.LongField （X）

长整数（64位）值的文本

• 在UnityEditor.UIElements命名空间下
• 继承自BaseFieldTraits<long, UxmlLongAttributeDescription>

5.FloatField（X）

单精度浮点值的文本

• 在UnityEditor.UIElements命名空间下
• 继承自BaseFieldTraits<float, UxmlFloatAttributeDescription>

6.DoubleField（X）

双精度浮点值的文本

• 在UnityEditor.UIElements命名空间下
• 继承自BaseFieldTraits<double, UxmlDoubleAttributeDescription>

7.Vector2Field（X）

两个文本框，接受按 float 进行编辑的Vector2类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< Vector2 >
• x：X坐标的值
• y：Y坐标的值

8.Vector2IntField（X）

两个文本框，接受按 int 进行编辑的Vector2类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< Vector2Int >
• x：X坐标的值
• y：Y坐标的值

9.Vector3Field（X）

三个文本框，接受按 float 进行编辑的Vector3类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< Vector3 >
• x：X坐标的值
• y：Y坐标的值
• z：Z坐标的值

10.Vector3IntField（X）

三个文本框，接受按 Int 进行编辑的Vector3类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< Vector3Int >
• x：X坐标的值
• y：Y坐标的值
• z：Z坐标的值

11.Vector4Field（X）

四个文本框，接受按 float 进行编辑的Vector4类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< Vector4 >
• x：X坐标的值
• y：Y坐标的值
• z：Z坐标的值
• w：W坐标的值

12.RectField（X）

四个文本框，接受按 float 进行编辑的Rect类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< Rect >
• x：左上角X坐标的值
• y：左上角Y坐标的值
• w：矩形的宽度
• h：矩形的高度

13.RectIIntField（X）

四个文本框，接受按 Int 进行编辑的Rect类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< RectInt >
• x：左上角X坐标的值
• y：左上角Y坐标的值
• w：矩形的宽度
• h：矩形的高度

14.BoundsField（X）

六个文本框，接受按 float 进行编辑的Bounds类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< Bounds >
• cx：中心X坐标的值
• cy：中心Y坐标的值
• cz：中心Z坐标的值
• ex：X的长度
• ey：Y的长度
• ez：Z的长度

15.BoundsIntField（X）

六个文本框，接受按 Int 进行编辑的Bounds类型文本

• 在UnityEditor.UIElements命名空间下
• 继承自 BaseField< BoundsInt >
• cx：中心X坐标的值
• cy：中心Y坐标的值
• cz：中心Z坐标的值
• ex：X的长度
• ey：Y的长度
• ez：Z的长度

简单案例

USS

.fraSmall
{
	width:150px;
	height:20px;
}
.fraBig
{
	width:300px;
	height:50px;
}
1
2
3
4
5
6
7
8
9
10

UXML

  <TextField class="fraSmall" text="TextField"/>
  <editor:IntegerField class="fraSmall"/>
  <editor:LongField class="fraSmall"/>
  <editor:FloatField class="fraSmall"/>
  <editor:DoubleField class="fraSmall"/>
  <editor:Vector2Field class="fraSmall"/>
  <editor:Vector2IntField class="fraSmall"/>
  <editor:Vector3Field class="fraSmall"/>
  <editor:Vector3IntField class="fraSmall"/>
  <editor:Vector4Field class="fraSmall"/>
  <editor:RectField class="fraBig"/>
  <editor:RectIntField class="fraBig"/>
  <editor:BoundsField class="fraBig"/>
  <editor:BoundsIntField class="fraBig"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

结果

这里都算是比较简单的

复杂组件

PropertyField（X）

用于编辑值的标签和字段

• 在UnityEditor.UIElements命名空间下
• binding-path：此元素绑定的属性的路径
• label：该字段的标签

PropertyControl< int/long/float/double/string > （X）

用于编辑字符串类型值的标签和字段

• 在UnityEditor.UIElements命名空间下
• 继承自BaseField< int/long/float/double/string >
• value-type：表示值类型的字符串
• value：该字段的值

简单案例

目前PropertyField有关的案例只有一个，是绑定InspectorElement的

USS

Assets/Resources/tank_inspector_styles.uss

.container {
   background-color: rgb(80, 80, 80);
   flex-direction: column;
}
Label {
   background-color: rgb(80, 80, 80);
}
TextField:hover {
   background-color: rgb(255, 255, 0);
}
FloatField {
   background-color: rgb(0, 0, 255);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

UXML

Assets/Resources/tank_inspector_uxml.uxml

  <VisualElement name="row" class="container">
    <Label text="Tank Script - Custom Inspector" />
    <editor:PropertyField binding-path="tankName" name="tank-name-field" />
    <editor:PropertyField binding-path="tankSize" name="tank-size-field" />
  </VisualElement>
1
2
3
4
5

C#

Assets/TankScript.cs

using UnityEngine;

[ExecuteInEditMode]
public class TankScript : MonoBehaviour
{
   public string tankName = "Tank";
   public float tankSize = 1;

   private void Update()
   {
       gameObject.name = tankName;
       gameObject.transform.localScale = new Vector3(tankSize, tankSize, tankSize);
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Assets/Editor/TankEditor.cs

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(TankScript))]
public class TankEditor : Editor
{
   public override VisualElement CreateInspectorGUI()
   {
       var visualTree = Resources.Load("tank_inspector_uxml") as VisualTreeAsset;
       var uxmlVE = visualTree.CloneTree();
uxmlVE.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Resources/tank_inspector_styles.uss"));
      return uxmlVE;
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果

之后我会再仔细研究

ColorField（X）

颜色选择器

• 在UnityEditor.UIElements命名空间下
• 继承自BaseFieldTraits<Color, UxmlColorAttributeDescription>
• show-eye-dropper：一个布尔值，指示是否显示（true默认值）滴管器（false）。
• show-alpha：一个布尔值，指示是否显示alpha控件（true，默认值）或不显示（false）
• hdr：一个布尔值，指示是使用高动态范围颜色选择器（true）还是正常颜色选择器（false默认值）

CurveField （X）

曲线编辑器

• 在UnityEditor.UIElements命名空间下
• 继承自BaseField< AnimationCurve >

GradientField（X）

渐变编辑器

• 在UnityEditor.UIElements命名空间下
• 继承自BaseField< Gradient >

ObjectField（X）

对象选择器

• 在UnityEditor.UIElements命名空间下
• 继承自BaseField< Object >
• allow-scene-objects：一个布尔值，指示场景对象是否可以选择（true，默认）或不选择（false）

InspectorElement

在Inspector中显示属性的元素

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

简单案例

目前PropertyField有关的案例只有一个，是绑定InspectorElement的

USS

无
1

UXML

  <editor:ColorField />
  <editor:CurveField />
  <editor:GradientField />
  <editor:ObjectField />
  <!--editor:InspectorElement 在Inspector面板生效，就不写了-->
1
2
3
4
5

结果

工具栏

Toolbar

用于保存工具栏的容器

• 在UnityEditor.UIElements命名空间下

ToolbarButton（X）

工具栏按钮

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

ToolbarToggle（X）

工具栏开关

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

ToolbarMenu（X）

工具栏的下拉菜单

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

ToolbarSearchField（X）

工具栏的搜索字段

• 在UnityEditor.UIElements命名空间下

ToolbarPopupSearchField（X）

带有搜索选项弹出菜单的搜索字段

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

ToolbarSpacer（X）

在工具栏按钮之间插入固定数量的空白的元素

• 在UnityEditor.UIElements命名空间下

简单案例

USS

无
1

UXML

  <editor:Toolbar>
    <editor:ToolbarButton text="Button"/>
    <editor:ToolbarToggle text="Toggle"/>
    <editor:ToolbarMenu text="Menu"/>
    <editor:ToolbarSearchField text="SearchField"/>
    <editor:ToolbarPopupSearchField text="popupSearchField"/>
  </editor:Toolbar>
1
2
3
4
5
6
7

结果

工具栏

ListView（X）

显示元素列表

• item-height：列表中每个Item的高度值

ScrollView

可滚动视图，带有水平和垂直滚动条

• mode：滚动视图的模式，默认为 ScrollViewMode.Vertical
• show-horizontal-scroller：一个布尔值，指示是否显示水平滚动条; 默认false
• show-vertical-scroller：一个布尔值，指示是否显示垂直滚动条; 默认false
• horizontal-page-size：水平滚动条的大小
• vertical-page-size：垂直滚动条的大小

TreeView（X）

用于在树层次结构中显示元素的视图

• item-height：列表中每个Item的高度值

PopupWindow

UIElements窗口，显示在其他内容之上

USS

.fra
{
	width:200px;
	height:100px;
}
.fras
{
	width:160px;
	height:80px;
}
1
2
3
4
5
6
7
8
9
10

UXML

  <PopupWindow class="fra" text="wowowo">
    <ScrollView class="fras">
      <Label text="啊"/>
      <Label text="啊"/>
    </ScrollView>
  </PopupWindow>
1
2
3
4
5
6

结果

ListView和TreeView还没有找到使用方法，之后再做补充