UI框架搭建DAY1

分析:UI框架主要是为了用户(使用框架的程序猿)更快捷、方便地开发UI,UI框架的好处还在于解耦,使得程序更具有灵活性。

UI框架的核心是窗口的管理,窗口管理的主要任务就是显示窗口和关闭窗口。

因为窗口的类型多样,比如弹出式窗口,固定位置窗口,隐藏其他窗口(打开这个窗口会覆盖整个屏幕),模态窗口等等。

这里我目前把窗口分为三大类型:普通窗口、弹出式窗口、隐藏其他窗口,而位置固定、是否模态作为窗口的属性。

1.为了更易于复用和拓展,我设计了一个基类BasePanel, NormalPanel, PopupPanel, HiderOtherPanel都由此基类派生。

BasePanel封装了3个重要方法:Open(), Close(), Freeze()。

2.巧妇难为无米之炊,要显示这些窗体首先要制作这些窗体的预制体,然后加载。为此,我又设计了一个核心类PanelManager。

PanelManager主要负责窗体的创建和销毁(隐藏),核心方法CreatePanel()。另外使用了对象池技术,缓存窗体。

3.要动态加载窗体,必须获得窗体资源的路径,为此我设计了一个SysDefine类,此文件用于定义一些预制体路径常量,节点(Inspector面板中的物体位置)常量。(后期重构时打算用Json文件配置)。加载资源的类ResourceManager。

4.此外,我还设计了一个帮助类Helper,目前实现的功能仅仅是自动化设置窗体节点的父节点。

下面,展示我今天下午的成果。

 1 using UnityEngine;
 2
 3 public class BasePanel : MonoBehaviour
 4 {
 5     //窗体类型
 6    public EPanelType panelType;
 7     //是否是模态窗口
 8     public bool isModal;
 9     //是否是固定位置窗口
10     public bool isFixed;
11     //透明度
12     ETransparencyLevel transLevel;
13
14
15     //初始化
16     private void Awake()
17     {
18         panelType = EPanelType.Normal;
19         isModal = true;
20         isFixed = false;
21         transLevel = ETransparencyLevel.Opaque;
22     }
23
24     private void Start()
25     {
26         //自动设置物体的父节点
27         Helper.GetInstance().SetParent(gameObject);
28
29     }
30
31     //打开窗口
32     public void Open()
33     {
34         gameObject.SetActive(true);
35     }
36     //关闭窗口
37     public void Close()
38     {
39         gameObject.SetActive(false);
40     }
41     //冻结窗口
42    public void Freeze()
43     {
44         //TO DO
45     }
46 }
 1 using System.Collections.Generic;
 2 using UnityEngine;
 3 public class PanelManager
 4 {
 5     //本类实例
 6     private static PanelManager _instance;
 7     //存储面板名字和对应的路径字典
 8     public static Dictionary<string, string> dictPanelPath;
 9     //存储已显示的面板字典
10     public static Dictionary<string, BasePanel> dictCurPanel;
11     //存储已隐藏的面板字典
12     public static Dictionary<string, BasePanel> dictHidePanel;
13     //存储Popup类型面板的字典
14     public static Dictionary<string, Stack<BasePanel>> dictPopupPanel;
15
16     //单例模式
17     private PanelManager() { }
18     public static PanelManager GetInstance()
19     {
20         if(_instance == null)
21         {
22             _instance = new PanelManager();
23
24             InitProperties();
25         }
26         return _instance;
27     }
28     //初始化字段
29     private static void InitProperties()
30     {
31         dictPanelPath = new Dictionary<string, string>();
32         dictCurPanel = new Dictionary<string, BasePanel>();
33         dictHidePanel = new Dictionary<string, BasePanel>();
34         dictPopupPanel = new Dictionary<string, Stack<BasePanel>>();
35     }
36     /// <summary>
37     /// 创建一个面板
38     /// 先检查dictHidePanel集合里是否存在此面板,有则取出显示并加入dictCurPanel集合
39     /// 没有,则创建一个,然后加如dictCurPanel集合。
40     /// </summary>
41     /// <param name="panelName">要创建的面板的名字</param>
42     /// <returns></returns>
43     public BasePanel CreatePanel(string panelName)
44     {
45         BasePanel basePanel = null;
46         dictHidePanel.TryGetValue(panelName, out basePanel);
47         if(basePanel != null)
48         {
49             return basePanel;
50         }
51         else
52         {
53             //创建面板
54             GameObject go = ResourceManager.GetInstance().LoadAsset<GameObject>(panelName);
55             if(go != null)
56             {
57                 basePanel = go.GetComponent<BasePanel>();
58                 if(basePanel != null)
59                 {
60                     //添加到正在显示的面板集合
61                     dictCurPanel.Add(panelName, basePanel);
62                 }
63                 else
64                 {
65                     Debug.LogError(GetType()+"你可能忘记挂在了BasePanel类型的脚本");
66                 }
67                 return basePanel;
68             }
69             else
70             {
71                 Debug.Log(GetType()+"panelName可能不存在");
72
73             }
74         }
75         return null;
76     }
77
78 }
 1 using UnityEngine;
 2
 3 public class ResourceManager
 4 {
 5     private static ResourceManager _instance;
 6     public static ResourceManager GetInstance()
 7     {
 8         if (_instance == null)
 9         {
10             _instance = new ResourceManager();
11         }
12         return _instance;
13     }
14     private ResourceManager() { }
15
16     public T LoadAsset<T>(string path)where T:Object
17     {
18         Object o = Resources.Load(path);
19         //实例化
20         GameObject go = GameObject.Instantiate(o) as GameObject;
21
22         return go as T;
23     }
24
25 }
 1 public enum ETransparencyLevel
 2 {
 3     Opaque,                                 //不透明
 4     Translucence,                           //半透明的
 5     Transparent,                            //透明的
 6 }
 7 public enum EPanelType
 8 {
 9     Normal,
10     Popup,
11     HideOther
12 }
13 public  class PrefabPathStr
14 {
15     public const string uiRootPath = @"Prefabs/UIRoot";
16     public const string logOnPanelPath = @"Prefabs/LogOnPanel";
17 }
18 public class NodePathStr
19 {
20     public const string normalPath = @"UIRoot/Normal";
21     public const string popupPath = @"UIRoot/Popup";
22     public const string hiderOtherPath = @"UIRoot/HideOther";
23 }
24
25
26
27 public class SysDefine
28 {
29 }
 1 using UnityEngine;
 2
 3 public class Helper
 4 {
 5     private static Helper _instance = null;                                    //本类实;
 6     private static Transform normal;                                   //normal 节点
 7     private static Transform popup;                                    //popup 节点
 8     private static Transform hiderOther;                               //hiderOther 节点
 9
10
11     //单利模式
12     public static Helper GetInstance()
13     {
14         if(_instance == null)
15         {                                                               //本类实例化时,初始化节点字段
16             normal = GameObject.Find(NodePathStr.normalPath).transform;
17             popup = GameObject.Find(NodePathStr.popupPath).transform;
18             hiderOther = GameObject.Find(NodePathStr.hiderOtherPath).transform;
19             _instance = new Helper();
20         }
21         return _instance;
22     }
23     private Helper() { }
24     /// <summary>
25     /// 若用户自定义了parent则使用,若没有则根据panelType自动设定。
26     /// </summary>
27     /// <param name="child">子物体</param>
28     /// <param name="parent">父物体</param>
29     public  void SetParent(GameObject child, Transform parent = null)
30     {
31         if(parent != null)
32         {
33             child.transform.SetParent(parent, true);
34             child.transform.localScale = new Vector3(1, 1, 1);
35             child.transform.localPosition = Vector3.zero;
36         }
37         else
38         {
39             if(child.GetComponent<BasePanel>()!= null)
40             {
41                 EPanelType panelType = child.GetComponent<BasePanel>().panelType;
42                 switch (panelType)
43                 {
44                     case EPanelType.Normal:
45                         child.transform.SetParent(normal);
46                         break;
47                     case EPanelType.Popup:
48                         child.transform.SetParent(popup);
49                         break;
50                     case EPanelType.HideOther:
51                         child.transform.SetParent(hiderOther);
52                         break;
53                     default:
54                         Debug.LogError("错误,未知的窗体类型");
55                         break;
56                 }
57                 child.transform.localScale = new Vector3(1, 1, 1);
58                 child.transform.localPosition = Vector3.zero;
59             }
60             else
61             {
62                 Debug.LogError(GetType()+ "请检查此物体是否挂载了BasePanel类型脚本!");
63             }
64
65         }
66     }
67 }

启动框架类StartGame.cs

 1 using UnityEngine;
 2
 3 public class StartGame : MonoBehaviour
 4 {
 5
 6     private GameObject uiRoot = null;
 7     void Start()
 8     {
 9         uiRoot = GameObject.FindGameObjectWithTag("UIRoot");
10         if (uiRoot != null)          //已生成UIRoot
11         {
12             Destroy(uiRoot);
13
14         }
15         //获取UIRoot对象
16         uiRoot = ResourceManager.GetInstance().LoadAsset<GameObject>(PrefabPathStr.uiRootPath);
17
18         //修改克隆体的名字
19         uiRoot.name = "UIRoot";
20         //加载场景时不销毁UIRoot
21         DontDestroyOnLoad(uiRoot);
22
23         //加载登陆面板
24         PanelManager.GetInstance().CreatePanel(PrefabPathStr.logOnPanelPath);
25
26     }
27
28 }

测试代码LogOnPanel.cs

 1 using System.Collections;
 2 using System.Collections.Generic;
 3 using UnityEngine;
 4
 5 public class LogOnPanel : BasePanel
 6 {
 7     private void Awake()
 8     {
 9         this.panelType = EPanelType.Normal;
10     }
11
12 }

UIRoot预制体效果图

LogOnPanel预制体效果图:

运行效果图:

原文地址:https://www.cnblogs.com/blackteeth/p/10197568.html

时间: 2024-07-29 12:07:38

UI框架搭建DAY1的相关文章

Element UI 框架搭建

Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.vue脚手架全局安装 -- 用于生成vue模板 npm install -g vue-cli 4.使用脚手架构建vue项目 -- 一路回车就行了 vue init webpack 目前可用的模板介绍 browserify–全功能的Bro

新浪微博项目技术之一UI主框架搭建

一.项目整体框架搭建 二.UI主框架结构及知识点 1>.代码封装思想 封装前的代码:(四个标题需要重复写四次,重复代码较多) HomeViewController *HomeVC = [[HomeViewController alloc] init]; UINavigationController *HomeNV = [[UINavigationController alloc] initWithRootViewController:HomeVC]; //tabBarItem标题文字设置 Hom

从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

ASP.NET MVC搭建项目后台UI框架一

准备做一个新的项目,从网页设计师手中拿到了html静态页面(没有一行js),但是都一个个零散的界面,我需要做的是: 1.  把这些零散的html界面连接起来 2.  自己编写js或者jquery实现菜单效果 3.  把html页面集成在我们的MVC Razor视图中 本想着使用第三方的UI框架 如Jquery EasyUI.ExtJs.MiniUI等来搭建框架,但是上面要求必须做得和美工给的html页面样式一致,不能用这些比较复杂的UI框架.作为非前端工程师,我只有硬着头皮上了.经过差不多2天的

ASP.NET MVC搭建项目后台UI框架—2、菜单特效

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 上一篇,已经把整个项目的框框给搭建好了,但是还没有任何js效果实现.这一节,我就来说下关于菜单的特效实现.我需要的效果如下: 需求总结: 点击顶部菜单模块,左侧显示不同模块下面的菜单列表 点击左侧菜单选项,展开下面的子菜单,并折叠其它菜单模块,菜单图标折叠显示为+,展开显示为-. 1.先看下Top视图中代码: 2.在Top视图的head中添加如下js: <script sr

ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 ASP.NE

iOS之UI--主流框架的搭建-- 仿制QQ的UI框架

iOS之UI--主流框架的搭建-- 仿制QQ的UI框架 使用XCode搭建多个控制器界面,一般在实际开发中建议超过四个控制器界面使用纯代码. 下面的实例其实已经超过了四个,总结详细步骤的目的,主要是更熟悉XCode的StoryBoard使用细节. 先直接上我们这个主流框架要达到的效果: 首先我们需要设置应用程序的图标: 素材百度云链接: http://pan.baidu.com/s/1dEqz7Vj 密码: g34e 然后是设定应用程序启动界面的素材百度云链接: http://pan.baidu