UnityVR--UIManager--UI管理1

这篇具有很好参考价值的文章主要介绍了UnityVR--UIManager--UI管理1。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

UI节点的结构

需要用到的组件

  1. CanvasGroup

  2. Button等控件的OnClick()监听

  3. EventTrigger

建立UI工具集

  1. 管理UI节点

  2.  UIBase包含了以下的工具

建立分面板的管理工具——以主面板MainUi为例


前言

  UI在项目中的重要性不言而喻,并且UI控件的种类繁多(UGUI简单介绍仅仅列举了常用控件和重要参数),不仅需要有一个统一的工具管理器来控制各个UI节点的初始化、排列、 组件等,还需要有一个UIManager在项目中统一控制。

  本篇主要介绍UI的工具集UITools,由于篇幅有限,UIManager放在下一篇。

  UITools提供了一系列的关于UI节点的操作工具,尤其是对于Button、Slider等交互性较强的UI控件来说,集中管理这些工具会使代码重用性大大提高,减少系统消耗。

  先从场景中的UI节点设置开始:

UI节点的结构

  UI面板的结构大致如下图,不同的面板使用Canvas作为载体,在场景显示中,先加载的节点(上面的节点)先显示,后加载的节点覆盖在最上面:

UnityVR--UIManager--UI管理1

  比如,点击主界面中的Play按钮,显示其中一个EXTRAS面板,这个面板就要放在主面板节点的下面,显示时覆盖在主面板上。

UnityVR--UIManager--UI管理1

  *注:在不少项目中,场景中没有任何UI节点,而UI都是作为预制体的形式存在于Resource资源文件夹中,如下图,制作成UI预制体放在Resource/UI文件夹内(这里用的例子是从AssetStore下载的,只保留了最基本的几个面板):

UnityVR--UIManager--UI管理1

  每个预制体的结构如下:

UnityVR--UIManager--UI管理1 UnityVR--UIManager--UI管理1 UnityVR--UIManager--UI管理1 UnityVR--UIManager--UI管理1

  

需要用到的UI组件

  在之前的UGUI简单介绍中列举了一些UI控件,这些控件上并不一定默认就有我们需要用到的组件,比如:

  1. CanvasGroup

  UnityVR--UIManager--UI管理1

  这个组件可以放在Canvas上,通过对于Alpha值的控制,实现面板渐隐渐显的效果。如果安装了DoTween插件,可以实现一个简单的显示动画效果(缓动效果曲线可以参照:https://easings.net/) 

       canvasGroup = gameObject.AddComponent<CanvasGroup>(); 
       canvasGroup.interactable = false;  //还没显示完全时不允许交互
       canvasGroup.DOFade(0f, 1f); //安装DoTween插件,控制Alfa值,1s内透明度变成0

       //1.5s内按照OutExpo动画曲线显现,完成后回调
       canvasGroup.DOFade(1f, 1.5f).SetEase(Ease.OutExpo).OnComplete(()=>
       {//完成显示之后的回调
          action?.Invoke();  //执行回调
          canvasGroup.interactable = true;  // 面板可以交互
       });  

  2. Button等控件的OnClick()监听

  Button按钮是交互性最强的按钮,其身上的OnClick(),作为按钮按下的监听,在场景中的使用非常频繁。绑定监听的方法可以按以下方式:

  方法一:直接在OnClick()面板添加脚本节点,并指定回调函数

UnityVR--UIManager--UI管理1

UnityVR--UIManager--UI管理1

   方法二:代码中动态设置:

        button = transform.GetComponent<Button>();
        button.onClick.AddListener(()=>
        {
            Debug.Log("没想好要干嘛");
        });

  3. EventTrigger

  Button中提供了按钮被按下的事件,而EventTrigger中提供了种类更加丰富的事件

    public enum EventTriggerType
    {
        PointerEnter, //鼠标进入
        PointerExit,  //鼠标离开
        PointerDown,  //鼠标按下
        PointerUp,    //鼠标抬起
        PointerClick, //鼠标点击(鼠标抬起时已不在原UI上时不会触发,在PointerUp之后调用)
        Drag,         //鼠标拖拽
        Drop,         //拖拽结束时鼠标不在被拖拽UI上并且在另外一个UI上时触发(在PointerUp之后)
        Scroll,       //滑轮滚动时
        UpdateSelected, //被选中后的每一帧
        Select,       //在被选中时
        Deselect,     //结束选中时
        Move,         //按方向键时
        InitializePotentialDrag,  //初始化拖拽(在PointerDown之后,PoinerUp之前调用,点击就会调用)
        BeginDrag,    //拖拽开始(鼠标按下不移动不会触发)
        EndDrag,      //拖拽结束
        Submit,       //默认为Enter键
        Cancel        //默认为Enter键
    }

  添加监听及回调的方式和OnClick()一样,也可以在面板中添加,或者在脚本中动态添加。

  方法一:点击"AddNewEventType"->找到需要绑定的事件,点击“+”号键,并添加回调函数

UnityVR--UIManager--UI管理1 UnityVR--UIManager--UI管理1

   方法二:代码中添加

        EventTrigger.Entry entry = new EventTrigger.Entry();
        entry.callback = new EventTrigger.TriggerEvent();
        entry.callback.AddListener(callBack);
        entry.eventID = EventTriggerType.PointerClick; //添加PointerClick类型的事件
        transform.GetComponent<EventTrigger>().triggers.Add(entry);

建立UI工具集

   建立一个基类UIBase.cs,管理所有的UI节点,并且设置一些工具控制面板的初始化、显示、隐藏、添加事件等,之后在场景中可以方便地调用。

  1. 管理UI节点

 首先,我们需要获取并管理所有的UI节点。不过从上面的UI结构图中可以看到,UI的层级结构和节点非常多,不能每次使用时都遍历一遍。因此,在管理这些数据之前,先要使用Tag标签把UI控件分类,需要经常交互的控件使用“UIEvent”标签,仅需控制显示的使用“UIGO”标签,其他一些完全不需要操控的UI节点就不使用标签。

  接着,可以使用以下两种方式管理所有节点:

  方法1:建立字典

    //存储一下需要用到的UIGO,以防止每次都去所有节点查找一遍
    private Dictionary<string, GameObject> uiItem;

  然后在面板初始化的时候,把所有的节点都加入到字典中去。(详见下面的初始化工具代码)

  方法2:直接拖进面板

    如果节点不多的话,可以建立一批public的GameObject,简单粗暴地将相应的UI节点直接拖进面板,例如:

        [Header("MENUS")]
        [Tooltip("The Menu for when the MAIN menu buttons")]
        public GameObject mainMenu;
        [Tooltip("THe first list of buttons")]
        public GameObject firstMenu;
        [Tooltip("The Menu for when the PLAY button is clicked")]
        public GameObject playMenu;
        [Tooltip("The Menu for when the EXIT button is clicked")]
        public GameObject exitMenu;
        [Tooltip("Optional 4th Menu")]
        public GameObject extrasMenu;

  然后一个一个对应拖进去

UnityVR--UIManager--UI管理1

以下详细介绍一下UIBase.cs实现的过程:

  2.  UIBase包含了以下的工具

  (1)初始化——需要实现的工作有:遍历UI节点并将它们放入字典管理、给“UIGO”标签的节点挂上EventTrigger组件、给根节点(Canvas)挂上CanvasGroup组件。

    private Dictionary<string, GameObject> uiItem;  //字典用于存储UI节点

    public virtual void InitPanel(UnityAction action=null)
    {
        uiItem= new Dictionary<string, GameObject>();//实例化字典对象
        List<Transform> list= new List<Transform>(); //建立一个列表用于存储节点
        FindChild(transform,list);  
        //使用自定义的FindChild方法遍历当前节点以下的所有子节点,并存入list

        foreach (var item in list)
        {
           if(!uiItem.ContainsKey(item.name))
              uiItem.Add(item.name, item.gameObject);//把这个节点放进字典

           //判断如果是按钮组件,就添加EventTrigger
            if(item.CompareTag("UIEvent"))
            {
                var trigger=item.gameObject.AddComponent<EventTrigger>();
                if (trigger.triggers.Count== 0)
                   trigger.triggers=new List<EventTrigger.Entry>(); 
            }               
        }
        canvasGroup = gameObject.GetComponent<CanvasGroup>();
        //获取UI根节点的CanvasGroup,以便于控制实现面板慢慢显现的特效
        action?.Invoke();  //如果有回调的话回调
    }

  其中,遍历子节点的方法可以归纳称为一个小工具:

    //一个查找子物体的工具,从当前节点开始找
    private void FindChild(Transform father,List<Transform> list)
    {
        if(father.childCount> 0)
        {
            for(int i=0;i<father.childCount;i++)
            {
                list.Add(father.GetChild(i));
                FindChild(father.GetChild(i),list);
            }
        }
        return;
    }

  (2)显示面板——如果不使用DoTween,而是直接显示出来

    //显示面板
    public virtual void Show(UnityAction action=null)
    {
        gameObject.SetActive(true);  //节点激活
        action?.Invoke();
    }

    如果使用DoTween做一个渐显的小动画,那么Show工具写成下面:

    //显示面板
    public virtual void Show(UnityAction action=null)
    {
        gameObject.SetActive(true);  //节点激活
        switch(showType) //显示的方式ShowType定义为一个枚举数据
        {
            case ShowType.Normal:   
                action?.Invoke();
                break;
            case ShowType.Fade:
            {
                if (canvasGroup == null)
                    { canvasGroup = gameObject.AddComponent<CanvasGroup>(); }
                canvasGroup.interactable = false;  //还没显示完全时不允许交互
                canvasGroup.DOFade(0f, 0f); //DoTween插件,控制Alfa值,透明度变成0,1s时间
                canvasGroup.DOFade(1f, 1.5f).SetEase(Ease.OutExpo).OnComplete(()=>
                {
                    action?.Invoke();
                    canvasGroup.interactable = true;  // 可以交互
                });  //1.5s内按照OutExpo动画曲线显现,完成后回调
            }
                break;
        }
    }   

 其中显示方式ShowType,归纳成一个枚举数:

public enum ShowType
{
    Normal, Fade, Mask      //直接显示,渐显效果,遮罩
}

  (3)隐藏面板——结构与显示面板相似,为了节省篇幅,这里就不使用DoTween了,如果需要使用DoTween,可以把上面的显示面板代码复制修改一下

    //隐藏
    public virtual void Hide(UnityAction action=null)
    {
      action?.Invoke();
      gameObject.SetActive(false);
    }

  (4)获取组件——UI组件类型繁多,所以使用泛型方法来获取组件

    protected T GetComponent<T>(string name) where T : MonoBehaviour
    {
        if (!uiItem.ContainsKey(name)) return null;  //如果没有这个组件就返回空
        return uiItem[name].GetComponent<T>();
    }

  (5)给控件添加EventTrigger组件、注册事件——在上面已经说明过方法了

    public void AddEventTrigger(string controlName,EventTriggerType type,
        UnityAction<BaseEventData> callBack)
    {
        //从字典中获取控件,并添加EventTrigger组件
        if(!uiItem.ContainsKey(controlName)) return;
        if (uiItem[controlName].gameObject.GetComponent<EventTrigger>()==null)
            uiItem[controlName].AddComponent<EventTrigger>();
        //添加Entry、监听、回调
        EventTrigger.Entry entry = new EventTrigger.Entry();
        entry.callback = new EventTrigger.TriggerEvent();
        entry.callback.AddListener(callBack);  
        entry.eventID = type;
        uiItem[controlName].GetComponent<EventTrigger>().triggers.Add(entry);
    }

  以上这是总的UI面板管理工具,具体到每个UI面板,如主面板Canvas_Main、退出面板Canv_EXIT,有些游戏项目中还有背包面板、排行榜面板等等,是需要根据不同情况重写上面这些工具。下面就以主面板为例,写一下主面板管理的脚本MainUi.cs

建立分面板的管理工具——以主面板MainUi为例

  对于一个分面板来说,需要做的工作有:重写初始化工具、显示工具等;在关键节点上添加组件、事件和回调;获取重要节点的组件,比如图片、文字等组件,以备后续控制等等。

public class MainUI : UITools
{//针对MainUI节点的工具,之后会使用UIManager动态挂在主面板上,提前挂好也可以
    
    public override void Init(UnityAction action = null) //重写UITools的Init()
    {
        base.Init(action);   
        //给Button_Play按钮添加一个PointerClick事件和回调
        AddEventTrigger("Button_Play", EventTriggerType.PointerClick, OnEventStart);
        //给Button_Extras按钮添加一个PointerClick事件和回调
        AddEventTrigger("Button_Extras", EventTriggerType.PointerClick, OnEventEnd);
        //给Button_Exit按钮添加一个PointerClick事件和回调
        AddEventTrigger("Button_Exit", EventTriggerType.PointerClick, OnEventExit);
    }

    private void OnEventStart(BaseEventData data)
    {
        UIManager.Instance.ShowPanel<ExtraUi>("ExtraPanel", "EXTRAS", null, UIManager.PanelType.Extra);  //点Button_Play按钮显示EXTRAS面板
    }

    private void OnEventEnd(BaseEventData data)
    {
        UIManager.Instance.HidePanel("ExtraPanel"); //点Button_Extras按钮隐藏EXTRAS面板
    }

    private void OnEventExit(BaseEventData data)
    {
        UIManager.Instance.ShowPanel<ExitUi>("ExitPanel", "EXIT", null, UIManager.PanelType.UP);  //点Button_Exit按钮弹出询问是否退出面板
    }
}

  以上就是主面板MainUi需要用到的工具,其他面板的工具类也可以参照它来写。其中,在2个回调方法中,用到了UIManager,它将总体管理整个UI节点的初始化、布局等,可以参照下一篇的UIManager的定义。文章来源地址https://www.toymoban.com/news/detail-501597.html

到了这里,关于UnityVR--UIManager--UI管理1的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UnityVR--AudioManager--音频管理中心

    目录 前言 建立音频配置文件AudioConfig 建立音频管理AudioManager 使用AudioManager播放音效 前言   关于音频组件的简单使用请详见VideoPlayerAudioSource,不过在一个工程项目中,会有很多的声音文件,播放的时间和条件也不相同,因此在实际制作中,需要集中管理,这就是建立AudioM

    2024年02月09日
    浏览(37)
  • Element Ui Tree组件实现增、删、改、查、拖拽节点 的树形结构

    介绍:首先组件 | Element官网某些功能都具备了,这里我就把这些功能结合在一起更完美的使用,其次 编辑节点 官网是没有实例,所以这里搞了一套较完整的功能,其次编辑和添加,这里直接使用了弹窗(顾及到多个参数设置),接下来效果图展示! 效果图如下: 1,其中点

    2024年02月13日
    浏览(64)
  • 文件管理---索引文件结构、位示图、树形目录结构

    操作系统中对软件的管理就是对文件的管理(基本单位) 逻辑结构:主要是概念当中的一些结构层次,主要有流式文件和记录式文件; 物理结构: 顺序文件结构:按照文件的逻辑顺序存储到物理结构当中,相当于给文件分配一个连续的存储空间,逻辑上是什么形式,物理上

    2024年01月19日
    浏览(33)
  • 数据结构 C语言 树形结构 简单目录管理系统

    在图书、操作系统文件夹、学生等管理系统中,目录管理是必要环节,如何高效搜寻与低复杂度存储是实现这一环节的关键性问题。本课程设计需完成一种基于多叉树结构简单目录管理系统,该系统能以交互式界面进行创建目录、删除目录、查找目录、修改目录、层次遍历目

    2024年02月04日
    浏览(44)
  • 数据结构 C语言 树形结构 简单目录管理系统

    在图书、操作系统文件夹、学生等管理系统中,目录管理是必要环节,如何高效搜寻与低复杂度存储是实现这一环节的关键性问题。本课程设计需完成一种基于多叉树结构简单目录管理系统,该系统能以交互式界面进行创建目录、删除目录、查找目录、修改目录、层次遍历目

    2024年02月07日
    浏览(45)
  • Linux目录结构与文件管理(01) (三)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、Linux 系统的组成 二、目录结构 根目录  三、文件管理 目录管理  总结 今天主要学习了Linux的目录结构,主要是一些命令的含义和用法,希望我的此篇文章内容对于刚接触Linux系统的人有

    2024年02月11日
    浏览(32)
  • Linux目录结构于文件管理(03)(五)

    目录 前言 一、系统信息修改 1、主机名 2、时间查看 3、显示输出系统信息 4、文件的详细属性查看 5、连接文件 6、生成指定容量的文件 二、内容统计于筛选 1、目录 2、文件 总结 今天是在前几天学习的基础上,又学习的一些新的内容,虽然同样是基础性的东西,但也是我们

    2024年02月11日
    浏览(31)
  • 数据结构前言

    数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。 上面是百度百科的定义, 通俗的来讲数据结构就是数据元素集合与数据元素集合或者数据元素与数据元素之间的组成形式。 举个简单明了的例子: 就像一个图书馆

    2024年02月09日
    浏览(51)
  • 【数据结构】前言概况 - 树

    🚩 纸上得来终觉浅, 绝知此事要躬行。 🌟主页:June-Frost 🚀专栏:数据结构 🔥该文章针对树形结构作出前言,以保证可以对树初步认知。  线性结构是一种相对简单的数据结构,元素之间按照一定的顺序排列,每个元素最多有两个接口:前驱和后继。这种结构相对直观

    2024年02月07日
    浏览(67)
  • 【算法与数据结构】--前言

    欢迎来到《算法与数据结构》专栏!这个专栏将引领您进入计算机科学领域中最重要、最精彩的领域之一:算法与数据结构。不管您是一名初学者,还是已经拥有一定编程经验的开发者,都可以从这里找到有益的知识和实践。 在计算机科学的世界里,算法和数据结构是至关重

    2024年02月07日
    浏览(244)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包