Unity MyFramework 用法说明(四):使用 UGUIGenerator 自动生成 UI 代码
上一篇手动创建并打开了第一个热更界面。这一篇使用UGUIGenerator自动生成成员变量、节点绑定、点击事件和界面注册代码。
项目地址:
https://github.com/ZHOURUIH/MyFramework
一、本篇目标
创建一个简单的主界面:
UIMain ├── TitleText ├── StartButton └── CloseButton通过生成器自动完成:
生成 UIMain.cs 生成成员变量 生成节点绑定 生成按钮点击事件 注册热更界面二、创建 UI Prefab
创建UIMain.prefab,并保证 Prefab 名称、根节点名称和脚本类名一致:
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,给根节点添加:
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负责决定界面什么时候打开和关闭。
