首页 > 其他分享 >【Unity3D】UI Toolkit自定义元素

【Unity3D】UI Toolkit自定义元素

时间:2023-10-20 23:23:08浏览次数:47  
标签:Unity3D container 自定义 MyContainer 元素 Toolkit UI

1 前言

​ UI Toolkit 支持通过继承 VisualElement 实现自定义元素,便于通过脚本控制元素。另外,UI Toolkit 也支持将一个容器及其所有子元素作为一个模板,便于通过脚本复制模板。

​ 如果读者对 UI Toolkit 不是太了解,可以参考以下内容。

2 自定义元素

1)UI 搭建

​ 搭建 UI 如下,其中 Background 和 MyContainer 是 VisualElement,NameLab 是 Label,ActionBtn 是 Button。

img

​ 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>

​ 显示如下。

img

2)创建模板

​ 选中 MyContainer,右键弹出菜单,选择 Create Template,选择 Resources 目录下保存 MyContainer.uxml 文件。

img

​ 保存模板后,Hierarchy 层级结构如下。可以看到,原来的 MyContainer 变成不可编辑的了,并且其上又套了一个空对象。这里先删去新的 MyContainer,只留下 Background,后面会通过脚本加载 MyContainer。

img

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 预览效果,如下。

img

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)运行效果

img

​ 依次点击 3 个按钮,打印日志如下。

img

​ 声明:本文转自【Unity3D】UI Toolkit自定义元素

标签:Unity3D,container,自定义,MyContainer,元素,Toolkit,UI
From: https://www.cnblogs.com/zhyan8/p/17760979.html

相关文章

  • 【Unity3D】UI Toolkit数据动态绑定
    1前言​本文将实现cvs表格数据与UIToolkit元素的动态绑定。​如果读者对UIToolkit不是太了解,可以参考以下内容。UIToolkit简介UIToolkit容器UIToolkit元素UIToolkit样式选择器UIToolkit自定义元素​本文完整资源见→UIToolkit数据动态绑定。......
  • Java拾贝第七天——throws和throw、自定义异常
    Java拾贝不建议作为0基础学习,都是本人想到什么写什么throws在定义一个方法时可以使用throws,表示此方法不处理异常,转而交给方法的调用处进行处理。publicclassTest7{publicstaticvoidmain(String[]args){Mathmath=newMath();try{......
  • SpringMVC自定义处理返回值demo和异步处理模式DeferredResult demo
    搭建自定义返回值处理器demo新建springboot项目修改pom.xml<!--新增依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><gro......
  • 无涯教程-Arduino - for语句函数
    for循环执行语句预定次数。forloop-语法for(initialize;control;incrementordecrement){//语句块}forloop-示例for(counter=2;counter<=9;counter++){//statements块将执行10次}forloop-执行序列参考链接https://www.learnfk.com/arduin......
  • UIAUTOMATION UIA Inspect.exe UIspy.exe 使用备忘
    一、安装inspect.exe的官网地址:  WindowsSDK-Windows应用开发|MicrosoftDeveloper在VisualStudio2022安装程序的可选组件中选择“Windows11SDK(10.0.22621.0)  百度 usingSystem.Windows.Automation;  二、样例https://learn.microsoft.com/en-us......
  • 海思NativeUI界面添加
    1NativeAbilityFwk框架  对于hi3321芯片的brandysdk而言,ui的开发是基于NativeAbilityFwk应用框架;  NativeAbilityFwk是基于穿戴产品的特点从鸿蒙原生Native中裁剪定制的轻量级UI;  该框架后续另起一文叙述,本文我们先基于代码,讲述添加界面的完整步骤;2sliceID定义  ......
  • 无涯教程-Arduino - while语句函数
    while循环将连续且无限地循环,直到括号()中的表达式变为false为止,必须更改测试变量,否则while循环将永远不会退出。whileloop-while-语法while(expression){Blockofstatements;}whileloop-while-执行序列参考链接https://www.learnfk.com/arduino/arduino-w......
  • RunnerGo 支持UI自动化的测试平台
    RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块,覆盖了整个产品测试周期。RunnerGoUI自动化基于Selenium浏览器自动化方案构建,内嵌高度可复用的测试脚本,测试团队无需复杂的代码编写即可开展低代码的自动化测试。以一条简单的搜索场景为例,本文介绍Runn......
  • 无涯教程-Arduino - switch case语句函数
    与if语句类似,switch...case通过允许程序员指定应在各种条件下执行的不同代码来控制程序的流程,break关键字使switch语句退出,并且通常在每种情况下使用。switchcase-语法switch(variable){caselabel://statementsbreak;}caselabel:{//statemen......
  • RunnerGo 支持UI自动化的测试平台
    RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块,覆盖了整个产品测试周期。RunnerGoUI自动化基于Selenium浏览器自动化方案构建,内嵌高度可复用的测试脚本,测试团队无需复杂的代码编写即可开展低代码的自动化测试。 以一条简单的搜索场景为例,本文......