《UI框架—基于Unity5.4UGUI（二）》

接着上一篇的介绍，这一篇就该干点实事了—上代码。但是在这之前，我先给出UI框架在Unity中的资源文件的截图，方便大家理解（其中的预制体和代码是根据上一篇博客的讲解给出）：

1.存储面板类型和面板预设路径的Json文本如下：

{"infoList":[{"panelTypeString":"ItemMessage","path":"UIPanel/ItemMessagePanel"},{"panelTypeString":"Knapsack","path":"UIPanel/KnapsackPanel"},{"panelTypeString":"MainMenu","path":"UIPanel/MainMenuPanel"},{"panelTypeString":"Shop","path":"UIPanel/ShopPanel"},{"panelTypeString":"Skill","path":"UIPanel/SkillPanel"},{"panelTypeString":"System","path":"UIPanel/SystemPanel"},{"panelTypeString":"Task","path":"UIPanel/TaskPanel"}]}

2.每个面板对应的枚举如下：

using UnityEngine;using System.Collections;public enum UIPanelType{    MainMenu,    Knapsack,    Shop,    Skill,    Task,    System,    ItemMessage}

3.每个UI界面信息对应的类（也就是解析出来的Json对应的类）：

using UnityEngine;using System.Collections;using System;[Serializable]public class UIPanelInfo : ISerializationCallbackReceiver{//和json文件信息对应的一个类    //不可序列化的，因为这里unity解析json文件时没办法解析枚举类型，所以下面定义了一个string类型的字段panelTypeString,用于两者的转化    [NonSerialized]    public UIPanelType panelType;//面板类型    public string panelTypeString;    public  string path;//面板所在路径    //实现ISerializationCallbackReceiver的接口， 反序列化方法，从文本信息到对象    public void OnAfterDeserialize()    {        UIPanelType type = (UIPanelType)System.Enum.Parse(typeof(UIPanelType), panelTypeString);//把一个字符串转化为一个枚举        panelType = type;    }    //实现接口， 序列化方法，从对象到文本信息    public void OnBeforeSerialize(){}}

4.（重点）UIManager管理各个UI面板的核心类：

using UnityEngine;using System.Collections;using System.Collections.Generic;/// <summary>/// 单例模式的核心：/// 1.只在该类内定义一个静态的对象，该对象在外界访问，在内部构造/// 2.构造函数私有化/// </summary>public class UIManager{//此类作为一个单例模式，即只有一个实例的模式    private static UIManager _instance;    public static UIManager Instance    {        get        {            if (_instance == null)            {                _instance = new UIManager();            }            return _instance;        }    }    private UIManager() //构造函数私有化（单例模式）    {        ParseUIPanelTypeJson();//构造该类时会解析Json    }    private Dictionary<UIPanelType, string> panelPathDict;//存储所有Perfab面板的路径    private Dictionary<UIPanelType, BasePanel> panelDict;//借助BasePanel脚本保存所有实例化出来的面板物体（因为BasePanel脚本被所有面板预设物体的自己的脚本所继承，所以需要的时候可以根据BasePanel脚本来实例化每一个面板对象）    private Stack<BasePanel> panelStack;//这是一个栈，用来保存实例化出来（显示出来）的面板    private Transform canvasTransform;//用来使实例化的面板归为它的子物体    private Transform CanvasTransform     {        get {            if (canvasTransform == null)            {                canvasTransform = GameObject.Find("Canvas").transform;            }            return canvasTransform;        }    }    //页面入栈，即把页面显示在界面上    public void PushPanel(UIPanelType panelType)    {        if (panelStack == null)//如果栈不存在，就实例化一个空栈        {            panelStack = new Stack<BasePanel>();        }        if (panelStack.Count > 0)        {            BasePanel topPanel = panelStack.Peek();//取出栈顶元素保存起来，但是不移除            topPanel.OnPause();//使该页面暂停，不可交互        }        BasePanel panelTemp = GetPanel(panelType);        panelTemp.OnEnter();//页面进入显示，可交互        panelStack.Push(panelTemp);    }    //页面出栈，即把页面从界面上移除    public void PopPanel()     {        if (panelStack == null)        {            panelStack = new Stack<BasePanel>();        }        if (panelStack.Count <= 0)  return;        //关闭栈顶页面的显示        BasePanel topPanel1 = panelStack.Pop();        topPanel1.OnExit();        if (panelStack.Count <= 0) return;        BasePanel topPanel2 = panelStack.Peek();        topPanel2.OnResume();//使第二个栈里的页面显示出来，并且可交互    }    [System.Serializable]    class UIPanelTypeJson //内部类里面就一个链表容器,用来配合解析    {        public List<UIPanelInfo> infoList;    }    //根据面板类型UIPanelType得到实例化的面板    private BasePanel GetPanel(UIPanelType panelType)     {        if (panelDict == null)//如果panelDict字典为空，就实例化一个空字典        {            panelDict = new Dictionary<UIPanelType, BasePanel>();        }        //BasePanel panel;        //panelDict.TryGetValue(panelType, out panel);//不为空就根据类型得到Basepanel        BasePanel panel = panelDict.TayGet(panelType);//我们扩展的Dictionary的方法，代码作用同上两行        if (panel == null)//如果得到的panel为空，那就去panelPathDict字典里面根据路径path找到，然后加载，接着实例化        {            string path = panelPathDict.TayGet(panelType);//我们扩展的Dictionary的方法            //panelPathDict.TryGetValue(panelType, out path);            GameObject instPanel = GameObject.Instantiate(Resources.Load(path)) as GameObject;//根据路径加载并实例化面板            instPanel.transform.SetParent(this.CanvasTransform,false);//设置为Canvas的子物体,false表示实例化的子物体坐标以Canvas为准            //TODO            panelDict.Add(panelType,instPanel.GetComponent<BasePanel>());            return instPanel.GetComponent<BasePanel>();        }        else        {            return panel;        }    }    //解析UIPanelType.json的信息    private void ParseUIPanelTypeJson()    {        panelPathDict = new Dictionary<UIPanelType, string>();//实例化一个字典对象        TextAsset ta = Resources.Load<TextAsset>("UIPanelType"); //获取UIPanelType.json文件的文本信息        UIPanelTypeJson jsonObject = JsonUtility.FromJson<UIPanelTypeJson>(ta.text);//把UIPanel.json文本信息转化为一个内部类的对象，对象里面的链表里面对应的是每个Json信息对应的类        foreach (UIPanelInfo info in jsonObject.infoList)        {            //Debug.Log(info.panelType);            panelPathDict.Add(info.panelType, info.path);//把每一个进过json文件转化过来的类存入字典里面(键值对的形式)        }    }}

5.启动整个UI框架的类（这里只需要再启动游戏时加载主界面就好，其他界面是需要点击按钮时才会实例出来并显示）：

using UnityEngine;using System.Collections;public class GameRoot : MonoBehaviour{    // Use this for initialization    void Start () {        UIManager.Instance.PushPanel(UIPanelType.MainMenu);    }}

6.BasePanel各个面板的基类（定义各个面板共有的四个状态）：

using UnityEngine;using System.Collections;//所有面板的公共基类public class BasePanel : MonoBehaviour {    /// <summary>    /// 页面进入显示，可交互    /// </summary>    public virtual void OnEnter(){}    /// <summary>    /// 页面暂停（弹出了其他页面），不可交互    /// </summary>    public virtual void OnPause(){}    /// <summary>    /// 页面继续显示（其他页面关闭），可交互    /// </summary>    public virtual void OnResume(){}    /// <summary>    /// 本页面被关闭（移除），不再显示在界面上    /// </summary>    public virtual void OnExit(){}}

7.主界面：

using UnityEngine;using System.Collections;public class MainMenuPanel : BasePanel{    private CanvasGroup canvasGroup;//获取CanvasGroup组件，用于控制该面板的交互功能    void Start()     {        canvasGroup = this.GetComponent<CanvasGroup>();    }    public override void OnPause()//重写父类BasePanel的OnPause方法    {        canvasGroup.blocksRaycasts = false;//使该面板失去交互功能    }    //重写父类BasePanel的OnResume方法    public override void OnResume()    {        canvasGroup.blocksRaycasts = true;//使该面板继续交互功能    }    //点击功能模块按钮加载面板，并将其入栈    public void OnPushPanel(string panelTypeString)     {        //把一个字符串转化为对应的枚举类型        UIPanelType panelType =(UIPanelType)System.Enum.Parse(typeof(UIPanelType), panelTypeString);        UIManager.Instance.PushPanel(panelType);    }}

8.任务面板：

using UnityEngine;using System.Collections;using DG.Tweening;public class TaskPanel : BasePanel {    private CanvasGroup canvasGroup;//对该页面CanvasGroup组件的引用    void Start() {        if(canvasGroup == null) canvasGroup = this.GetComponent<CanvasGroup>();    }    //重写父类的OnEnter方法    public override void OnEnter()    {        if (canvasGroup == null) canvasGroup = this.GetComponent<CanvasGroup>();        this.canvasGroup.alpha = 0;        this.canvasGroup.blocksRaycasts = true;//使该页面可交互        canvasGroup.DOFade(1, 0.6f);//使该页面渐渐显示,1是Alpha值    }    //重写父类的OnExit方法    public override void OnExit()    {        this.canvasGroup.blocksRaycasts = false;//使该页面不可交互        canvasGroup.DOFade(0, 0.6f);//使该页面渐渐隐藏，0是Alpha值    }    //点击关闭按钮事件    public void OnClose()     {        UIManager.Instance.PopPanel();    }}

9.背包面板：

using UnityEngine;using System.Collections;using DG.Tweening;public class KnapsackPanel : BasePanel {    private CanvasGroup canvasGroup;    void Awake()     {        this.canvasGroup = this.GetComponent<CanvasGroup>();    }    public override void OnEnter()    {        this.canvasGroup.alpha = 1;        this.canvasGroup.blocksRaycasts = true;        Vector3 temp = this.transform.localPosition;        temp.x = 600;        this.transform.localPosition = temp;        this.transform.DOLocalMoveX(0, 0.6f);    }    public override void OnExit()    {        //this.canvasGroup.alpha = 0;        this.canvasGroup.blocksRaycasts = false;        this.transform.DOLocalMoveX(-600, 0.6f).OnComplete(()=>canvasGroup.alpha =0);    }    public override void OnPause()    {        this.canvasGroup.blocksRaycasts = false;    }    public override void OnResume()    {        this.canvasGroup.blocksRaycasts = true;    }    //点击关闭按钮    public void OnClose()     {        UIManager.Instance.PopPanel();    }    //点击装备，显示装备信息    public void OnItemButtonDown()     {        UIManager.Instance.PushPanel(UIPanelType.ItemMessage);    }}

10.技能面板

using UnityEngine;using System.Collections;public class SkillPanel : BasePanel {    private CanvasGroup canvasGroup;    void Awake()    {        this.canvasGroup = this.GetComponent<CanvasGroup>();    }    public override void OnEnter()    {        this.canvasGroup.alpha = 1;        this.canvasGroup.blocksRaycasts = true;    }    public override void OnExit()    {        this.canvasGroup.alpha = 0;        this.canvasGroup.blocksRaycasts = false;    }    public void OnClose()    {        UIManager.Instance.PopPanel();    }}

11.商城面板：

using UnityEngine;using System.Collections;public class ShopPanel : BasePanel {    private CanvasGroup canvasGroup;    void Awake()    {        this.canvasGroup = this.GetComponent<CanvasGroup>();    }    public override void OnEnter()    {        this.canvasGroup.alpha = 1;        this.canvasGroup.blocksRaycasts = true;    }    public override void OnExit()    {        this.canvasGroup.alpha = 0;        this.canvasGroup.blocksRaycasts = false;    }    public void OnClose()    {        UIManager.Instance.PopPanel();    }}

12.系统设置面板：

using UnityEngine;using System.Collections;public class SystemPanel : BasePanel {    private CanvasGroup canvasGroup;    void Awake()    {        this.canvasGroup = this.GetComponent<CanvasGroup>();    }    public override void OnEnter()    {        this.canvasGroup.alpha = 1;        this.canvasGroup.blocksRaycasts = true;    }    public override void OnExit()    {        this.canvasGroup.alpha = 0;        this.canvasGroup.blocksRaycasts = false;    }    public void OnClose()    {        UIManager.Instance.PopPanel();    }}

13.背包里的装备信息提示面板：

using UnityEngine;using System.Collections;using DG.Tweening;public class ItemMessagePanel : BasePanel{    private CanvasGroup canvasGroup;    void Awake()    {        this.canvasGroup = this.GetComponent<CanvasGroup>();    }    public override void OnEnter()    {        this.canvasGroup.alpha = 1;        this.canvasGroup.blocksRaycasts = true;        this.transform.localScale = Vector3.zero;        transform.DOScale(1, 0.6f);//缩放动画，1代表结束时的缩放    }    public override void OnExit()    {        //this.canvasGroup.alpha = 0;        this.canvasGroup.blocksRaycasts = false;        transform.DOScale(0, 0.6f).OnComplete(() => canvasGroup.alpha = 0);    }    public void OnClose()    {        UIManager.Instance.PopPanel();    }}

14.字典拓展类（用于拓展Dictionary类的TryGetValue( )方法，只是为了简化代码方便使用，UI框架里可有可无）：

using UnityEngine;using System.Collections;using System.Collections.Generic;//对字典类的TayGetValue( )方法的扩展/// <summary>/// 尝试根据key得到value，得到返回value，否则返回null/// this Dictionary<Tkey,Tvalue> dict   这个字典表示我们要获取值value的字典/// 扩展方法规定类必须是一个静态类.里面包含的所有方法都必须是静态方法。扩展方法被定义为静态方法，但它们是通过实例方法语法进行调用的。 它们的第一个参数指定该方法作用于哪个类型，并且该参数以 this 修饰符为前缀。/// </summary>public static class DictionaryExtension {    public static Tvalue TayGet<Tkey,Tvalue>( this Dictionary<Tkey,Tvalue> dict,Tkey key)    {        Tvalue value;        dict.TryGetValue(key,out value);        return value;    }}

总结：该UI框架重点在于UI核心管理类（UIManager）的实现，其中使用栈先进后出，后进先出的思想实现了页面的逻辑管理。难点呢在于实现Json文本的解析。