Unity MyFramework 用法说明（四）：使用 UGUIGenerator 自动生成 UI 代码

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

项目地址：

一、本篇目标

创建一个简单的主界面：

bash 复制代码

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

通过生成器自动完成：

bash 复制代码

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

二、创建 UI Prefab

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

bash 复制代码

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

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

节点	UGUI 组件	生成类型
`UIMain`	`Canvas`、`UGUIGenerator`	`LayoutScript`
`TitleText`	`Text`	`myUGUIText`
`StartButton`	`Image`	`myUGUIImageSimple`
`CloseButton`	`Image`	`myUGUIImageSimple`

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

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

三、配置 UGUIGenerator

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

bash 复制代码

UGUIGenerator

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

bash 复制代码

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

为 StartButton 和 CloseButton勾选：

bash 复制代码

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

界面基类使用：

bash 复制代码

LayoutScript

配置完成后，点击：

bash 复制代码

生成代码

四、生成的界面代码

生成结果大致如下：

bash 复制代码

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 标记之间的内容。

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

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

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

bash 复制代码

myUGUIObject

并通过下面的方法注册：

bash 复制代码

mNode.registeCollider(onNodeClick);

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

bash 复制代码

myUGUIImageSimple

并注册：

bash 复制代码

mButton.registeColliderImage(onButtonClick);

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

六、自动注册界面

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

bash 复制代码

Assets/Scripts/HotFix/UI/LayoutRegisterHotFix.cs

生成的注册代码类似：

bash 复制代码

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

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

bash 复制代码

public static UIMain mUIMain;

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

七、在 SceneProcedure 中打开界面

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

bash 复制代码

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 调用：

bash 复制代码

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

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

八、推荐开发流程

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

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