上一篇手动创建并打开了第一个热更界面。这一篇使用UGUIGenerator自动生成成员变量、节点绑定、点击事件和界面注册代码。

项目地址：

https://github.com/ZHOURUIH/MyFramework

一、本篇目标

创建一个简单的主界面：

UIMain ├── TitleText ├── StartButton └── CloseButton

通过生成器自动完成：

生成 UIMain.cs 生成成员变量 生成节点绑定 生成按钮点击事件 注册热更界面

二、创建 UI Prefab

创建UIMain.prefab，并保证 Prefab 名称、根节点名称和脚本类名一致：

Prefab：UIMain.prefab 根节点：UIMain 脚本类：UIMain

各节点需要的 UGUI 组件如下：

按钮节点不需要添加原生Button组件。

myUGUIImageSimple配合registeColliderImage，可以提供悬停变暗、按下时轻微位移等按钮反馈。

三、配置 UGUIGenerator

在 Prefab 编辑模式下打开UIMain，给根节点添加：

UGUIGenerator

然后把三个节点加入成员列表：

TitleText -> myUGUIText StartButton -> myUGUIImageSimple CloseButton -> myUGUIImageSimple

为StartButton和CloseButton勾选：

注册点击事件 生成点击回调

界面基类使用：

LayoutScript

配置完成后，点击：

生成代码

四、生成的界面代码

生成结果大致如下：

using Obfuz; // auto generate member start [ObfuzIgnore(ObfuzScope.TypeName)] public class UIMain : LayoutScript { protected myUGUIText mTitleText; protected myUGUIImageSimple mStartButton; protected myUGUIImageSimple mCloseButton; // auto generate member end public UIMain() { // auto generate constructor start // auto generate constructor end } public override void assignWindow() { // auto generate assignWindow start newObject(out mTitleText, "TitleText"); newObject(out mStartButton, "StartButton"); newObject(out mCloseButton, "CloseButton"); // auto generate assignWindow end } public override void init() { base.init(); // auto generate init start mStartButton.registeColliderImage(onStartButtonClick); mCloseButton.registeColliderImage(onCloseButtonClick); // auto generate init end } public override void onGameState() { base.onGameState(); mTitleText.setText("Hello MyFramework"); } //--------------------------------------------------------------------------------------------------------------------------- protected void onStartButtonClick() { // 开始游戏 } protected void onCloseButtonClick() { close(); } }

生成器只会更新auto generate标记之间的内容。

业务逻辑应该写在自动生成区域外，避免重新生成时被覆盖。

五、普通点击节点怎么配置

如果节点只需要接收点击事件，不需要按钮的悬停和按下效果，可以使用：

myUGUIObject

并通过下面的方法注册：

mNode.registeCollider(onNodeClick);

如果需要按钮视觉反馈，则使用：

myUGUIImageSimple

并注册：

mButton.registeColliderImage(onButtonClick);

本例中的两个按钮需要交互反馈，所以使用myUGUIImageSimple。

六、自动注册界面

生成器会自动更新热更界面注册文件：

Assets/Scripts/HotFix/UI/LayoutRegisterHotFix.cs

生成的注册代码类似：

public class LayoutRegisterHotFix { public static void registeAll() { // auto generate start registeLayout<UIMain>((script) => { mUIMain = script; }); // auto generate end } }

同时还会生成对应的全局引用：

public static UIMain mUIMain;

不需要再手动维护注册代码。

七、在 SceneProcedure 中打开界面

界面生成并注册完成后，在对应流程中加载：

public class MainSceneLoading : SceneProcedure { protected override void onInit(SceneProcedure lastProcedure) { base.onInit(lastProcedure); LT.LOAD<UIMain>(); } protected override void onExit(SceneProcedure nextProcedure) { base.onExit(nextProcedure); LT.HIDE<UIMain>(); } }

界面操作需要通过LT调用：

LT.LOAD<UIMain>(); // 加载并显示 LT.SHOW<UIMain>(); // 显示已加载界面 LT.HIDE<UIMain>(); // 隐藏但保留实例 LT.UNLOAD<UIMain>(); // 卸载并释放

直接写LOAD<UIMain>()，在没有额外静态导入时会编译报错。

八、推荐开发流程

创建新界面时，按照下面的顺序操作：

1. 创建 UI Prefab 2. 添加需要的 UGUI 组件 3. 给根节点添加 UGUIGenerator 4. 配置成员类型和点击事件 5. 点击生成代码 6. 补充界面业务逻辑 7. 在 SceneProcedure 中使用 LT.LOAD<T>() 打开

UGUIGenerator负责生成重复代码，LayoutScript负责界面内部逻辑，SceneProcedure负责决定界面什么时候打开和关闭。