UIElement(现更名为UI ToolKit但是程序集名称还是UIElement)是Unity新推出的一种UI解决方案,目标是一站式解决Editor+Runtime的UI设计需求,使用C# + HTML的形式进行开发,其中HTML用以定义UI样式和内容,C#引用HTML定义内容+绑定数据,并且与GamePlay进行交互。
我们来看看他的底层是怎么样的:
上面提到UIElement使用RMGUI的模式,并且基于其做了按需更新的模式达到性能优化的效果,但目前Unity编辑器拓展主流仍然是Immediate Mode GUI (IMGUI)的形式,他不保存任何状态写起来非常爽快,但是问题就是需要每帧无差别的收集所有VB/IB然后进行绘制操作,相比RMGUI按需更新的模式就比较消耗性能。
首先在Assets下创建一个名为Editor的文件夹,和编辑器有关的监本都要创建在这个文件夹下。然后在Editor文件夹下右键——Create——UIElement Editor Window,然后就会出现C#,UXML,USS三个文件。
C#
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class TestEditorWindow : EditorWindow
{
[MenuItem("Window/UIElements/TestEditorWindow")]
public static void ShowExample()
{
TestEditorWindow wnd = GetWindow();
wnd.titleContent = new GUIContent("TestEditorWindow");
}
public void OnEnable()
{
//创建根节点
VisualElement root = rootVisualElement;
//读取UXML
var visualTree = AssetDatabase.LoadAssetAtPath("Assets/Editor/TestEditorWindow.uxml");
//读取USS
var styleSheet = AssetDatabase.LoadAssetAtPath("Assets/Editor/TestEditorWindow.uss");
//创建新的子节点
VisualElement labelFromUXML = visualTree.CloneTree();
//为UXML添加USS样式
labelFromUXML.styleSheets.Add(styleSheet);
//将子节点添加到根节点
root.Add(labelFromUXML);
}
}
UXML
主要关注Label text这一行,指定了当前标签的文本内容。
CSS
Label {
font-size: 20px;
-unity-font-style: bold;
color: rgb(68, 138, 255);
}
css则指定了当前标签的具体样式。
在上一章中我们就创建了VisualElement类型根节点,之后将子节点挂在该根节点上
1.均在UnityEngine.UIElements命名空间下
2.无符号表示允许子元素数量是任意数量的VisualElement
3.X字符表示不允许有子元素
4.不作特殊说明,均包含所有VisualElement属性
根据其内容绘制一个框
显示文本的元素
文本标签
显示图像
绘制IMGUI内容的元素
用法示例:
viewElement.Q().onGUIHandler += OnDrawCustomGUI;
private void OnDrawCustomGUI()
{
EditorGUILayout.BeginHorizontal();
EditorGUILayout.LabelField("TestIMGUI");
if (GUILayout.Button("Button"))
{
Debug.LogError("TestIMGUI");
}
EditorGUILayout.EndHorizontal();
}
通过一个toggle控制展开或收起
USS
.h
{
height: 150px;
background-image: resource("Assets/Editor/Sample1/unity.png");
}
.pic
{
width :50px;
height:50px;
background-image: resource("Assets/Editor/Sample1/unity.png");
}
resource里面指定的是当前需要显示图片所在的位置
UXML
C#侧的代码与之前一样,加载出对应的UXML和USS并应用。
结果
1.Template (X)
通过对另一个UXML模板的引用,使用其Instance元素来实例化
2.Instance (X)
一个模板的实例
3.TemplateContainer (X)
模板容器
模板UXML定义为portrait.uxml
在另一个UXML使用时
C#侧的代码去掉了之前加载USS部分的代码。
结果
此功能可以用在一些较为常用的通用功能绘制等部分,避免大量冗余代码,后续的使用只需要实例化模板部分即可。
BaseField< T >(X)
所有字段的抽象基类
- 继承属性 BindableElement
- focus-index 默认值是 0
- focusable 默认值是 true
- label:与字段关联的文本
BaseFieldTraits(X)
- 继承自 BaseField< ValueType >
- value:字段的初值,类型为 ValueType
Button(X)
标准按钮
- 继承自TextElement
RepeatButton(X)
按下时反复执行操作的按钮
- 继承自TextElement
- delay:执行操作之前的初始延迟(以毫秒为单位); 默认值是0
- interval:每个动作重复之间的间隔(以毫秒为单位); 默认值是0
Toggle(X)
开关(复选框)
- 继承自 BaseFieldTraits
- text :开关右侧的标签
Scroller(X)
滚动条
- 继承自VisualElement
- low-value:滚动条的最小值
- high-value:滚动条的最大值
- direction:Horizontal或Vertical; 默认是Vertical
- value:滚动条的位置
Slider (X)
滑动条
- 继承自BaseFieldTraits
- low-value:滚动条的最小值
- high-value:滚动条的最大值
- direction:Horizontal或Vertical; 默认是Horizontal
- page-size:滑块的页面大小
SliderInt (X)
Int类型的滑动条
- 继承自BaseFieldTraits
- low-value:滚动条的最小值
- high-value:滚动条的最大值
- direction:Horizontal或Vertical; 默认是Horizontal
- page-size:滑块的页面大小
MinMaxSlider (X)
允许用户指定最小值和最大值的滑块
- 继承自BaseField
- low-limit:滚动条的最小值
- high-limit:滚动条的最大值
- min-value:滑块光标的最小值
- max-value:滑块光标的最大值
EnumField (X)
一个只能获取底层字符串值的字段Enum
- 继承自BaseField< Enum >
- type:必需,表示底层的C#类型的字符串 Enum
- value:表示字段值的字符串
MaskField (X)
多选菜单
- 在UnityEditor.UIElements命名空间下
- 继承自BaseField< int >
- choices:逗号分隔的列表,最多包含32个选项,以显示在弹出菜单中
- value:一个整数,表示字段的值为32位掩码
LayerField (X)
图层单选菜单
- 在UnityEditor.UIElements命名空间下
- 继承自BaseField< int >
- value:表示选定图层编号
LayerMaskField (X)
图层多选菜单
- 在UnityEditor.UIElements命名空间下
- 继承自MaskField
TagField (X)
标签单选菜单
- 在UnityEditor.UIElements命名空间下
- 继承自BaseField< string >
- value:表示Tag值的字符串
ProgressBar (X)
进度条
- 在UnityEditor.UIElements命名空间下
- 继承自BindableElement
- low-value:表示进度条最低值的浮点数(默认值为0)
- high-value:表示进度条最高值的浮点数(默认值为100)
- title:表示进度条标题的字符串
简单案例3
USS
.btn
{
width :100px;
height:30px;
}
.scr
{
height:200px;
}
.sliH
{
width:100px;
}
.sliV
{
height:100px;
}
.efi
{
width:100px;
height:15px;
}
UXML
结果
文本输入
1.TextInputBaseField< TValueType > (X)
所有文本字段的抽象基类
- 继承自 BaseFieldTraits
- 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
4.LongField (X)
长整数(64位)值的文本
- 在UnityEditor.UIElements命名空间下
- 继承自BaseFieldTraits
5.FloatField(X)
单精度浮点值的文本
- 在UnityEditor.UIElements命名空间下
- 继承自BaseFieldTraits
6.DoubleField(X)
双精度浮点值的文本
- 在UnityEditor.UIElements命名空间下
- 继承自BaseFieldTraits
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的长度
简单案例4
.fraSmall
{
width:150px;
height:20px;
}
.fraBig
{
width:300px;
height:50px;
}
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:该字段的值
简单案例5
.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);
}
C#及对应Editor下的脚本:
[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);
}
}
[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("Assets/Resources/tank_inspector_styles.uss"));
return uxmlVE;
}
}
ColorField(X)
颜色选择器
- 在UnityEditor.UIElements命名空间下
- 继承自BaseFieldTraits
- 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
简单案例6
工具栏相关
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命名空间下
简单案例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窗口,显示在其他内容之上
.fra
{
width:200px;
height:100px;
}
.fras
{
width:160px;
height:80px;
}
官方案例
大家可以通过Unity Hub下载最新Unity2019.2.0b版本,然后通过Windows > UI > UIElements Samples打开。
在这里可以看到常用组件用法的Sample。
你可能感兴趣的:(Unity编辑器扩展,unity,UIElement)