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

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

UIElement EditorWindow

本篇文章介绍如何在Editor下使用UIElement开发编辑器。

新建Editor文件夹,找到Assets->Create->UIElements菜单,或者在Project窗口鼠标右键Create->UIElements,该菜单下包含了以下三个菜单项。

  • USS File
  • UXML Template
  • Editor Window

USS

USS全称Unity Style Sheets,定义设置视觉元素的尺寸和外观的样式属性。
使用该菜单,会在当前目录下新建一个uss后缀的文件。

UXML

UXML文件是定义用户界面逻辑结构的文本文件。UXML文件中使用的格式受到HTML(超文本标记语言)、XAML(可扩展应用程序标记语言)和XML(可扩展标记语言)的启发。
使用该菜单,会在当前目录下新建一个uxml后缀的文件。

Editor Window

使用该菜单,会弹出以下窗口,显而易见,通过这个窗口能够快速创建图中的三类文件。

UIElement Editor Window Creator示意图

  • Open files in Editor once created:一旦创建好后就打开文件。

TestEditor窗口示意图

创建完后,Unity已经帮我们加上了三行文字,然后工程里多了三个相应的文件,并在菜单栏中也多了一条:Window->UIElements—>TestEditor(我在创建时输入的测试名TestEditor)。

那么,接下来详细说明一下这个EditorWindow是如何工作的。

C#部分

代码介绍会以注释的形式写在下方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;

public class TestEditor : EditorWindow
{
//基础的MenuItem做法,不介绍了
[MenuItem("Window/UIElements/TestEditor")]
public static void ShowExample()
{
TestEditor wnd = GetWindow<TestEditor>();
wnd.titleContent = new GUIContent("TestEditor");
}

public void OnEnable()
{
//在编辑器中,每个EditorWindow都有一个rootVisualElement属性,它表示层次结构的顶层VisualElement。元素需要作为子元素添加到这个根,以便系统绘制它们。
VisualElement root = rootVisualElement;

//创建一个Label并加到root中进行绘制,Label的文字内容是Hello World! From C#,正如我们在示意图看到的第一行。
VisualElement label = new Label("Hello World! From C#");
root.Add(label);

//加载创建出来的UXML文件,并克隆到root中。
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/TestEditor.uxml");
VisualElement labelFromUXML = visualTree.CloneTree();
root.Add(labelFromUXML);

//加载创建出来的USS文件
var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/TestEditor.uss");
//创建一个Label,并使用加载USS样式
VisualElement labelWithStyle = new Label("Hello World! With Style");
//加到root上进行渲染。
labelWithStyle.styleSheets.Add(styleSheet);
root.Add(labelWithStyle);
}
}

从这部分代码中可以看出来,使用代码创建了两个Label,其中一个没有使用USS样式,后面一个使用了USS样式,正如示意图中看到的那样,第一行无样式(默认样式),第三行是蓝色的字号偏大。那么问题来,中间一行Label,从哪里来?

[ps:再以不用手写Layout了🤣🤣🤣]

UXML部分

UXML文件内容如下:

1
2
3
4
5
6
7
8
9
<?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:Label text="Hello World! From UXML" />
</engine:UXML>

我们目前只关注其中的<engine:Label text=”Hello World! From UXML” />,这行代码创建了一个Label,文字内容为Hello World! From UXML。那么很显然了,C#部分代码中是在创建两个Label中间Load并add的UXML文件,因此该Label渲染在那两个Label中间。那如果把Load UXML的相关代码放到最前面,这行UXML Label就应该渲染在最前面了。

USS部分

UXML文件内容如下:

1
2
3
4
5
Label {
font-size: 20px;
-unity-font-style: bold;
color: rgb(68, 138, 255);
}

该样式文件里定义了一个Label,其中字号20,粗体,颜色(68、138、255)。更多的样式及其属性,后面另行介绍。

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

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