通用UI组件

简介

说明

在游戏开发中,我们经常需要使用一些通用的UI组件,比如按钮、输入框、滚动列表等。如果每次都重新开发这些基础组件,不仅会浪费开发时间,还容易出现bug。 通用组件开源使得开发者可以直接使用这些组件来快速构建游戏界面,大大提高开发效率。这些组件都经过性能优化和稳定性测试,可以放心使用在生产环境中。

基础用法

UI文件结构

生成的脚本文件会对应在如下目录：

Scripts
├── UI
│   ├── HotfixView
│   │   └── UIBehaviour
│   │       └── CommonUI
│   └── ModelView
│       └── UIBehaviour
│           └── CommonUI
└── ...

预制体目录结构对应如下目录：

Assets
├── Bundles
│   └── UI
│       ├── Common    // 通用UI组件
│       ├── Item      // 循环列表项预制体
│       ├── Dlg       // UI界面预制体
│       └── Other     // 其他UI资源
└── ...

• Common: 存放通用UI组件，如按钮、输入框等可复用的UI组件
• Item: 存放循环列表中使用的列表项预制体
• Dlg: 存放完整的UI界面预制体，如主界面、背包界面等
• Other: 存放其他UI相关资源，例如：红点预制体

构建UI界面代码使用演示

视频教程

以下视频展示了UI框架生成通用UI组件代码的使用流程

注意事项

1. 通用节点的根节点需要以ES_开头才会识别生成代码，其余节点命名和平常无异，E_或者EG_。

INFO

对于开发，我们只需要关注标注的第2个文件夹下的文件，生成完成后该目录会是这样的：

UI
├── HotfixView
│   └── UIBehaviour
│       └── CommonUI
│           └── ES_CloseViewSystem.cs
└── ...

ES_CloseViewSystem.cs

using UnityEngine;
using UnityEngine.UI;
namespace MH
{
	[EntitySystem]
	public class ES_CloseAwakeSystem : AwakeSystem<ES_Close, Transform>
	{
		protected override void Awake(ES_Close self, Transform transform)
		{
			self.uiTransform = transform;
		}
	}
	[EntitySystem]
	public class ES_CloseDestroySystem : DestroySystem<ES_Close>
	{
		protected override void Destroy(ES_Close self)
		{
			self.DestroyWidget();
		}
	}
	public static partial class ES_CloseViewSystem 
	{

	}
}

最佳实践

接下来看看如何在脚本里面编写其代码

using UnityEngine;
using UnityEngine.UI;
namespace MH
{
    //Other Code...

	public static partial class ES_CloseViewSystem 
	{
		public static void CloseWindow(this ES_Close self, Scene scene, WindowID windowID)
		{
			self.E_CloseButton.AddListener(() =>
			{
				var uiComponent = scene.GetComponent<UIComponent>();
				uiComponent.CloseWindow(windowID);
			});
		}
		public static void HideWindow(this ES_Close self, Scene scene, WindowID windowID)
		{
			self.E_CloseButton.AddListener(() =>
			{
				var uiComponent = scene.GetComponent<UIComponent>();
				uiComponent.HideWindow(windowID);
			});
		}
	}
}

INFO

• 通过使用self.的方式来就可以直接对组件进行操作，然后编写了两个方法，逻辑分别是关闭、隐藏界面，根据传入进来的Scene来选择，这样通用一点，因为有可能要关闭CurrentScene的界面或者是Root的界面

示例代码

TIP

这时候我们回到DlgLoginSystem.cs，因为前面在DlgLogin这个预制体上我们已经拖拽了这个通用关闭组件上去了，只是还没用。

using System.Collections;
using System.Collections.Generic;
using System;
using UnityEngine;
using UnityEngine.UI;

namespace MH
{
	public static  class DlgLoginSystem
	{

		public static void RegisterUIEvent(this DlgLogin self)
		{
			self.View.ES_Close.HideWindow(self.Scene, WindowID.WindowID_Login);
			self.View.E_LoginButton.AddListener(self.Login);
		}

		public static void Login(this DlgLogin self)
		{
			var account = self.View.E_AccountInputField.text;
			var password = self.View.E_PasswordInputField.text;
			Debug.Log($"账号：{account}，密码：{password}");
			self.Scene.GetComponent<UIComponent>().HideWindow(WindowID.WindowID_Login);
		}
		public static void ShowWindow(this DlgLogin self, Entity contextData = null)
		{
			self.Refresh();
		}

		public static void Refresh(this DlgLogin self)
		{
			
		}
	}
}

TIP

这时候我们就可以通过self.View.ES_Close.HideWindow(self.Scene, WindowID.WindowID_Login);来调用通用组件的逻辑方法了

常见问题

注意事项

• 确保UI预制体结构符合规范

技术支持

获取帮助

• 💬 加入QQ群讨论交流(ET框架群) : 474643097
• ⭐ 在GitHub上关注项目获取最新更新