UIElements笔记

简介

        这个是Unity官方在2019版本中为了解决编辑器模式下创建扩展编辑器窗口的UI不方便而创建的一套系统,主要是用来取代之前在OnGUI中将页面的创建和逻辑全混在一起的做法,当然根据官方的说法,这套UI系统将来将成为统一的主要UI框架,既可以在编辑器模式和运行模式下都可以使用UIElements创建UI
学习方式:https://docs.unity3d.com/Manual/UIE-ElementRef.html(官方文档)
https://blog.csdn.net/qq_43500611/article/details/99291826(博客)

主要结构

UIElements借鉴了前端网页的面板构建方式,包含了标签式预言、样式表、动态上下文事件、数据持久性等功能
在Editor文件夹下右键——Create——UIElement Editor Window,然后就会出现C#,UXML,USS三个文件。

C#代码说明

public void OnEnable()
{
//1.创建根节点
VisualElement root = rootVisualElement;
//2.读取UXML
var visualTree =
AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Test.uxml");
//3.读取USS
var styleSheet =
AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/Test.uss");
//4.创建新的子节点
VisualElement labelFromUXML = visualTree.CloneTree();
//5.为UXML添加USS样式
labelFromUXML.styleSheets.Add(styleSheet);
//6.将子节点添加到根节点
root.Add(labelFromUXML);
}

VisualElement

这是所有视觉元素的基类
在UnityEngine.UIElements命名空间下
允许的子元素:任意数量的VisualElement
在上一章中我们就创建了VisualElement类型根节点,之后将子节点挂在该根节点上

UQuery

UQuery提供了一组方法来从UIElements中检索元素。
UQuery基于JQuery或Linq,但UQuery旨在尽可能地限制动态内存分配,这样可以在移动平台上实现。
要使用UQuery检索元素,使用UQueryExtensions.Q或初始化QueryBuilder用UQueryExtensions.Query

注册事件回调

注册事件回调的优点是,它允许自定义现有类的单个实例的行为。注册事件回调的缺点是性能较差,因为执行时间较长,因为每当收到事件时,都会检查注册的事件应该执行哪个回调。

//注册函数
myElement.RegisterCallback<MouseDownEvent>(MyCallback);
myElement.RegisterCallback<MouseDownEvent, MyType>(MyCallbackWithData, myData);
//回调
void MyCallback(MouseDownEvent evt) { /* ... */ }
void MyCallbackWithData(MouseDownEvent evt, MyType data) { /* ... */ }
//删除回调
myElement.UnregisterCallback()

为了避免两次执行已注册的回调,请使用optional RegisterCallback指定在哪个阶段执行回调。

默认情况下,在目标阶段和冒泡阶段执行已注册的回调,该默认行为可确保父元素在其子元素之后作出反应。例如,如果您希望父级首先做出反应,要覆盖其子级的行为,则应使用以下TrickleDown.TrickleDown选项注册回调:

myElement.RegisterCallback<MouseDownEvent>(MyCallback, TrickleDown.TrickleDown);

UXML元素介绍

简单编写UXML

以下代码展示了一个简单面板:

<?xml version="1.0" encoding="utf-8"?>
<UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="UnityEngine.UIElements"
    xsi:noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../UIElementsSchema/UnityEngine.UIElements.xsd">
    <Label text="Select something to remove from your suitcase:"/>
    <Box>
        <Toggle name="boots" label="Boots" value="false" />
        <Toggle name="helmet" label="Helmet" value="false" />
        <Toggle name="cloak" label="Cloak of invisibility" value="false"/>
    </Box>
    <Box>
        <Button name="cancel" text="Cancel" />
        <Button name="ok" text="OK" />
    </Box>
</UXML>

文件的第一行是XML的声明,声明是可选的,如果要包含声明,则必须位于第一行,并且不得在其前面显示其他内容或空格。version属性必需,encoding属性可选,如果包含encoding,则必须声明字符编码。

下一行开始定义根目录< UXML >,在UIElement中,元素在UnityEngine.UIElements或在UnityEditor.UIElements命名空间下。例如:想要使用Button组件那么就必须指定<UnityEngine.UIElements:Button />

如果要更方便的使用组件,就可以指定命名空间,例如,xmlns:engine=“UnityEngine.UIElements”,那么就将engine这个前缀定义为UnityEngine.UIElements,这意味着< engine:Button />等同于<UnityEngine.UIElements:Button />

还可以通过排除前缀来定义默认命名空间。例如,该行xmlns="UnityEngine.UIElements"定义UnityEngine.UIElements为默认命名空间,这意味着< Button />等同于<UnityEngine.UIElements:Button />

如果定义自己的元素,则这些元素可能在其自己的命名空间中定义。如果要在UXML模板中使用这些元素,则必须在< UXML >标记中包含命名空间定义和文件位置以及Unity命名空间。

UI定义是一系列嵌套的XML元素,每个XML元素代表一个VisualElement。

VisualElement作为所有元素的基类,它为所有元素提供以下属性:

name:元素的标识符,名称唯一。

picking-mode:Position响应鼠标事件,Ignore忽略鼠标事件。

focus-index:( 弃用)

tabindex:整数,用于定义当前元素的Tab键位置。

focusable:布尔值,指示元素是否可聚焦。

class:以空格分隔的标识符列表,使用类为元素指定视觉样式,还可以使用类在UQuery中选择一组元素。

tooltip:当鼠标悬停在元素上时显示为工具提示的字符串。

view-data-key :一个字符串,用于定义用于序列化元素的Key值。

UXML定义样式信息,例如用于绘制UI的尺寸,字体和颜色等,请使用单独USS文件。

USS选择器

简单选择器(Simple selectors)

最简单的选择器可以是通配符(wildcard),也可以是类型(type),名称(name)或者类名(class)

类型(Type)

Button/*TypeName*/ {...}

使用Type selector根据其C#类型来匹配元素

使用Type selector时,仅指定具体的对象类型,不要在类型名称中包含命名空间。

名称(Name)

#name/*name*/ {...}

使用Name selector是根据VisualElement.name属性的值来匹配元素

元素名称在面板内应该是唯一的(并不是强制性的),但是使用不唯一的名称可能会导致意外匹配

在分配Name selector时不要包括#

类(Class)

.class/*class*/ {...}

使用Class selector匹配分给特定类的元素

要匹配元素,只需要该元素指定了该类即可

如果要在Class selector中指定多个类,则对于要匹配的元素,为其分配相同的类名

在分配Class selector时不要包括.

类名不能以数字开头

通配符(Wildcard)

* {...}

匹配任何元素

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,458评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,030评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,879评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,278评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,296评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,019评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,633评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,541评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,068评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,181评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,318评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,991评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,670评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,183评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,302评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,655评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,327评论 2 358

推荐阅读更多精彩内容