【Unity3D】UI Toolkit自定义元素
1 前言
UI Toolkit 支持通过继承 VisualElement 实现自定义元素,便于通过脚本控制元素。另外,UI Toolkit 也支持将一个容器及其所有子元素作为一个模板,便于通过脚本复制模板。
如果读者对 UI Toolkit 不是太了解,可以参考以下内容。
2 自定义元素
1)UI 搭建
搭建 UI 如下,其中 Background 和 MyContainer 是 VisualElement,NameLab 是 Label,ActionBtn 是 Button。
TestCustom.uxml
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:VisualElement name="Background" style="flex-grow: 1; background-color: rgb(168, 156, 156);">
<ui:VisualElement name="MyContainer" style="width: 300px; height: 250px; background-color: rgb(177, 185, 121); align-items: center; justify-content: center; margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px;">
<ui:Label text="Name" display-tooltip-when-elided="true" name="NameLab" style="font-size: 50px; -unity-text-align: middle-center; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0;" />
<ui:Button text="Button" display-tooltip-when-elided="true" name="ActionBtn" style="font-size: 50px; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; background-color: rgb(217, 126, 40); justify-content: center; align-items: center;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>
显示如下。
2)创建模板
选中 MyContainer,右键弹出菜单,选择 Create Template,选择 Resources 目录下保存 MyContainer.uxml 文件。
保存模板后,Hierarchy 层级结构如下。可以看到,原来的 MyContainer 变成不可编辑的了,并且其上又套了一个空对象。这里先删去新的 MyContainer,只留下 Background,后面会通过脚本加载 MyContainer。
3)自定义元素
MyContainer.cs
using UnityEngine;
using UnityEngine.UIElements;
public class MyContainer : VisualElement {
private TemplateContainer container;
// 便于在UI Builder中导入自定义UI, 需要有无参构造函数
public new class UxmlFactory : UxmlFactory<MyContainer> {}
public MyContainer() {
container = Resources.Load<VisualTreeAsset>("MyContainer").Instantiate();
container.style.flexGrow = 1.0f;
hierarchy.Add(container);
}
public MyContainer(int index) : this() {
Label label = container.Q<Label>();
label.text = "Name" + index;
Button button = container.Q<Button>();
button.clicked += () => Debug.Log("index=" + index);
}
}
编译后,在 UI Builder 中可以看到自定义的 UI,可以像内置 UI 一样拖拽到 Hierarchy 中使用。将鼠标悬浮在 MyContainer.cs 上,会弹出 UI 预览效果,如下。
4)加载元素
UILoader.cs
using UnityEngine;
using UnityEngine.UIElements;
public class UILoader : MonoBehaviour {
private VisualElement root;
private void Awake() {
root = GetComponent<UIDocument>().rootVisualElement;
var bodyContainer = root.Q("Background");
bodyContainer.Clear();
for(int i = 0; i < 3; i++) {
MyContainer customContainer = new MyContainer(i);
bodyContainer.Add(customContainer);
}
}
}
5)运行效果
依次点击 3 个按钮,打印日志如下。
声明:本文转自【Unity3D】UI Toolkit自定义元素。
【Unity3D】UI Toolkit自定义元素的更多相关文章
- KnockoutJS 3.X API 第六章 组件(4) 自定义元素
自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...
- KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述
Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...
- Unity3D ShaderLab 创建自定义高光类型
Unity3D ShaderLab 创建自定义高光类型 在上一篇,我们认识了Unity基础的高光实现,本次主要是研究如何对Phong高光类型进行顶点操作,以及在表面着色器中使用Input结构体的新参数 ...
- 自定义元素 – 在 HTML 中定义新元素
本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...
- 自定义元素–为你的HTML代码定义新元素
注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...
- angularJS 自定义元素和属性
创造自定义元素和属性的方法是:directive('string',function(){ return{}; }); ①函数接收两个参数:一个字符串(指令的名字),一个函数: ②回调函数必须返回一个 ...
- vue与自定义元素的关系
你可能已经注意到 Vue.js 组件非常类似于自定义元素--它是 Web 组件规范的一部分.实际上 Vue.js 的组件语法参考了该规范.例如 Vue 组件实现了 Slot API 与 is 特性.但 ...
- 自定义元素 v1:可重用网络组件
google文档 https://developers.google.cn/web/fundamentals/web-components/customelements 兼容性 https://can ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- 自定义元素(custom elements)
记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...
随机推荐
- 单例bean与原型bean的区别
在使用Spring开发时,Spring提供了五种scope,分别为singleton,prototype,request,session,global session. 上图为各个scope描述的官方 ...
- ONVIF网络摄像头(IPC)客户端开发—RTSP RTCP RTP加载H264视频流
前言: RTSP,RTCP,RTP一般是一起使用,在FFmpeg和live555这些库中,它们为了更好的适用性,所以实现起来非常复杂,直接查看FFmpeg和Live555源代码来熟悉这些协议非常吃力, ...
- 代码使我头疼之React初学习
前言 开始了,去年(2020)说要学的React,到现在2021年的12月底了,才来实施--(年底警告!年末总结还没开始写!) 不过前端为啥要学React呢?Vue不是很好用吗?Vue确实很好用,并且 ...
- [转帖]Difference between localhost and 127.0.0.1?
https://www.tutorialspoint.com/difference-between-localhost-and-127-0-0-1#:~:text=The%20most%20signi ...
- [转帖]005、体系结构之TiKV_Raft日志
Raft日志 1.Raft与Multi Raft 2.Raft 日志复制 2.1.复制流程总览 2.2.Propose 2.3.Append 2.3.Replicate(Append) 2.4 Com ...
- [转帖]实战演练 | Navicat 数据生成功能
https://zhuanlan.zhihu.com/p/631823381 数据生成的目的是依据某个数据模型,从原始数据通过计算得到目标系统所需要的符合该模型的数据.数据生成与数据模型是分不开的,数 ...
- [转帖]PD 配置文件描述
https://docs.pingcap.com/zh/tidb/stable/pd-configuration-file PD 配置文件比命令行参数支持更多的选项.你可以在 conf/config. ...
- 【转帖】ESXI上安装和使用MegaCli
https://www.diewufeiyang.com/post/964.html 一.第一步获取安装文件,官网目前搜索也找不到了,这里附件提供之前保存的安装文件 点击下载 二.使用VMware v ...
- [转帖]超线程 Smt 究竟可以快多少?
https://www.51cto.com/article/686171.html 刚才我们关闭SMT是把CPU10-CPU19全关了,只留下每对里面的1个CPU,也就是留下了CPU0-CPU9. 默 ...
- [转帖] Linux命令拾遗-文本处理篇
https://www.cnblogs.com/codelogs/p/16060413.html 简介# 这是Linux命令拾遗系列的第二篇,本篇主要介绍Linux中与文本处理相关的命令,如xargs ...