QF框架使用之案例解析(一) ------ UIKit

QFramework 是一套渐进式的快速开发框架。目标是作为无框架经验的公司、独立开发者、以及 Unity3D 初学者们的第一套框架。框架内部积累了多个项目的在各个技术方向的解决方案。学习成本低，接入成本低，重构成本低，二次开发成本低，文档内容丰富(提供使用方式以及原理、开发文档)。github:https://github.com/liangxiegame/QFramework前段..

千喜

3181人浏览 · 2018-10-09 15:26:39

千喜 · 2018-10-09 15:26:39 发布

前段时间忙着公司的项目,一直没得空更新QF系列文章,不过接下来的项目更新我打算使用QF重构,因此~接下来的一段时间都会熟悉QF的使用,至于原理等熟悉使用了再更新吧,而且QF团队也一直在出框架的文章,请点传送门

咳咳,进入正题,我最新关注的就是UI间的切换,上一个项目版本使用的是从siki学院学习的UI框架,那么我们来看看QF中UI的切换(此案例在QFramework\Assets\QFramework\Example\UIKitExample\1.Example.scene)

效果:

结构如下:

一.加载显示Panel

UIRoot是QF的一个预制体,其子物体对应各层(这里没太明白AlwayBottom与AlwayTop层,因为我发现在这两层的与UIRoot同级,这样不是看不到了么!!!?,面板上没有Canvas):

    public enum UILevel
	{
		AlwayBottom = -3, //如果不想区分太复杂那最底层的UI请使用这个
		Bg = -2, //背景层UI
		AnimationUnderPage = -1, //动画层
		Common = 0, //普通层UI
		AnimationOnPage = 1, // 动画层
		PopUI = 2, //弹出层UI
		Guide = 3, //新手引导层
		Const = 4, //持续存在层UI
		Toast = 5, //对话框层UI
		Forward = 6, //最高UI层用来放置UI特效和模型
		AlwayTop = 7, //如果不想区分太复杂那最上层的UI请使用这个
	}

Example上只挂了一个脚本,代码如下:

using UnityEngine;

namespace QFramework.UIExample
{
	public class Example : MonoBehaviour
	{
		private void Awake()
		{
            UIMgr.OpenPanel<UIMenuPanel>(prefabName:"Resources/UIMenuPanel");
		}
	}
}

这个过程我也一步步F12看了一下,主要是CreateUI与CreateUIObj两个函数,CreateUI函数里会调用CreateUIObj方法创建面板,并调用其init方法,CreateUIObj函数找到预制体创建面板,并根据层级设置其父物体

运行之后UIRoot下Common出现新加载的panel:

二.点击切换Panel

新建Panel步骤总结:

1.新建Panel要继承UIPanel

2.实现InitUI / RegisterUIEvent / ProcessMsg函数

插入一个partial的小知识 : https://blog.csdn.net/niemeiquan/article/details/7801803

记得在上一步加载panel时我们调用了init函数,在UIPanel中init是这样子的:

public void Init(IUIData uiData = null)
		{
			mUIData = uiData;
			InitUI(uiData);
			RegisterUIEvent();
			
			mSubPanelInfos.ForEach(subPanelInfo => UIMgr.OpenPanel(subPanelInfo.PanelName, subPanelInfo.Level));
		}

在此案例中UIMenuPanel实现为:

public partial class UIMenuPanel : UIPanel
	{
		protected override void InitUI(IUIData uiData = null)
		{
			ImageBg.color = "#FFFFFFFF".HtmlStringToColor();
		}

		protected override void ProcessMsg(int eventId, QMsg msg)
		{
			Log.I("Process");
			switch (eventId)
			{
				case (int) UIEventID.MenuPanel.ChangeMenuColor:
					Log.I("{0}:Process EventId {1}", Transform.name, eventId);
					ImageBg.color = "#00FFFFFF".HtmlStringToColor();
					break;
			}
		}

		protected override void RegisterUIEvent()
		{
			RegisterEvent(UIEventID.MenuPanel.ChangeMenuColor);

			BtnPlay.onClick.AddListener(() =>
			{
				this.DoTransition<UISectionPanel>(new FadeInOut(), UILevel.Common,
					prefabName: "Resources/UISectionPanel");
			});

			BtnSetting.onClick.AddListener(() =>
			{
				UIMgr.OpenPanel<UISettingPanel>(UILevel.PopUI,
					prefabName: "Resources/UISettingPanel");
			});
		}
	}

很明显,InitUI中是使用UIMenuPanelData进行初始化,RegisterUIEvent是进行按钮事件的绑定以及注册事件响应(是不是发现这里没有按钮的定义,哈哈,F12跳转一下就知道在哪了)

先前看效果图的时候我们发现Play按钮跳转时会有一个过度的效果,这个是调用DoTransition中间加载了一个过度的panel,也是很简单的,大家自行看吧

三.UI事件

在UIMenuPanel中有一个注册UI事件的代码：

RegisterEvent(UIEventID.MenuPanel.ChangeMenuColor);

ChangeMenuColor跳转：

namespace QFramework.UIExample
{
    public static class UIEventID
    {
        public enum MenuPanel
        {
            ChangeMenuColor = 3001,//ui事件ID为3000～5999，见QMsgSpan
        }
    }
}

接收处理代码：

protected override void ProcessMsg(int eventId, QMsg msg)
		{
			Log.I("Process");
			switch (eventId)
			{
				case (int) UIEventID.MenuPanel.ChangeMenuColor:
					Log.I("{0}:Process EventId {1}", Transform.name, eventId);
					ImageBg.color = "#00FFFFFF".HtmlStringToColor();
					break;
			}
		}

很简单吧~