UXML 模板是使用 XML 标记编写的文本文件,用于定义用户界面的逻辑结构。以下代码示例演示了如何定义一个提示用户做出选择的简单面板:
<?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>
。<UXML>
元素包含命名空间前缀定义的属性和架构定义文件的位置。可以按任意顺序指定这些属性。
在 UIElements 中,每个元素都在 UnityEngine.UIElements
或 UnityEditor.UIElements
命名空间中定义:
UnityEngine.UIElements
命名空间包含被定义为 Unity Runtime 一部分的元素。UnityEditor.UIElements
命名空间包含 Unity Editor 中可用的元素。要完整指定一个元素,必须在其前面添加其命名空间。例如,如果要在 UXML 模板中使用 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 命名空间。
通过选择 Asset > Create > UIElements Editor Window 来新建 UXML 模板资源时,Editor 自动为您定义命名空间。
UI 的定义在 <UXML>
根中。UI 定义是一系列嵌套的 XML 元素,每个元素代表一个 VisualElement
。
元素名称对应于要实例化的元素的 C# 类名。大多数元素都有属性,且属性的值映射到 C# 中相应的类属性。每个元素都继承其父类类型的属性,并可在父类类型的基础上添加自己的属性集。VisualElement
作为所有元素的基类,为所有元素提供以下属性:
name
:元素的标识符。名称应具有唯一性。picking-mode
:设置为 Position
(响应鼠标事件)或 Ignore
(忽略鼠标事件)。focus-index
:(已弃用)使用 tabIndex
和 focusable
。tabindex
:一个整数,定义当前元素的 Tab 键移动位置。focusable
:一个布尔值,指示是否可聚焦该元素。class
:用于表征元素的标识符的空格分隔列表。使用类为元素指定视觉样式。还可以使用类在 UQuery 中选择一组元素。tooltip
:鼠标悬停在元素上方时显示为工具提示的字符串。view-data-key
:一个字符串,可定义用于元素序列化的键。UXML 模板示例未定义用户界面的视觉要素。建议您使用单独的 USS 文件来定义用于绘制 UI 的样式信息,例如尺寸、字体和颜色(请参阅样式和 Unity 样式表)。
可通过在 UXML 文件中定义组件的方式来创建组件,
并使用另一个 UXML 文件中的 <Template>
和 <Instance>
元素将组件导入。
在设计大型用户界面时,可以创建一些用于定义 UI 组成部分的模板 UXML 文件。
可能会在许多地方使用相同的 UI 定义。例如,假设有一个包含图像、名称和标签的纵向 UI 元素。可以创建一个 UXML 模板文件以便在其他 UXML 文件中重用此纵向 UI 元素。
例如,假设在 Assets/Portrait.uxml
文件中有一个 Portrait 组件:
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML ...>
<engine:VisualElement class="portrait">
<engine:Image name="portaitImage" image="a.png"/>
<engine:Label name="nameLabel" text="Name"/>
<engine:Label name="levelLabel" text="42"/>
</engine:VisualElement>
</engine:UXML>
可以将 Portrait 组件嵌入到其他 UXML 模板中,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML ...>
<engine:Template path="Assets/Portrait.uxml" name="Portrait"/>
<engine:VisualElement name="players">
<engine:Instance template="Portrait" name="player1"/>
<engine:Instance template="Portrait" name="player2"/>
</engine:VisualElement>
</engine:UXML>