Unity3D 我的UIFramework

一.UI系统

1.UI面板基类BasePanel

1.API

protected UIManager uiManager;
统一获取对UIManager的引用

protected RectTransform rectTransform,parentRectTransform;
自身RectTransform 组件以及canvas上的RectTransform 组件

protected EventArgs mData;
传进面板的参数 可使用ui框架传入 也可以使用消息机制传入  

private CanvasGroup canvasGroup;
CanvasGroup组件

public PanelAnimation panelAnimation;
面板动画组件 挂在载面板上可以选择打开关闭的动画,有五种模式。详情查看PanelAnimation介绍。

protected Vector3 initialposition;
面板初始位置 当不设置锚点的时候我们可以直接使用此数值 并可在面板上设置值 当有锚点时,不可使用此参数

protected Vector3 scale=Vector3.one;
面板初始的scale

public bool IsOpen{get;}
面板是否打开的标志位 不可set

public Action PanelChangeEvent;
面板打开关闭事件

public BasePanel HighLevelPanel;
上一级面板,存在二级或多级面板

public ExclusionType ExclusionType;
面板类型,如果没有互斥,选择nothing。有互斥选择自己属于的面板类型。相同类型的面板互斥。面板可设置多类型。

public bool IsExclusion(int type)
是否互斥,不等于0是表示互斥的。被uimanager调用。使用者一般不调用。

public virtual void Init(EventArgs mData =null){}
面板的初始化。在被实例化出来后被调用。相当于Awake函数,生命周期内只被调用一次。外界不可以主动调用,子类可以重写

public BasePanel Open(EventArgs mData = null, bool resetPanelPos = false)
打开面板函数。mData:传入数据 resetPanelPos:在每次打开是否要设置到默认初始位置

protected virtual void OpenImplement(){}
打开面板的实现,仅被内部调用,可重写。

public void Close(){}
面板关闭

protected virtual void CloseImplement(){}
Close方法的实现,仅被内部调用,可重写。

public BasePanel SetActiveWithParamater(bool isOn){}
控制面板的显示隐藏,不可以被重写 重写只可以在control上

public virtual void SetActive(bool isOn){}
控制面板的显示隐藏

public virtual void Reset() { }
面板重置

public void Pause(){}
暂停 暂时隐藏。一般用于多级菜单控制。

public void Resume(){}
恢复 重新恢复

public virtual void SetPanelParent(){}
设置面板的父物体

protected virtual void SetPanelDefaultPosition(){}
设置面板初始的位置

public virtual void SetData(T data){ }
一般用于将数据传进去 进行事件绑定 事件推送界面更新

2.开发案例

我们创建一个面板类继承自BasePanel。我们可以重写Init方法做一些初始化的事情。比如绑定面板中按钮的事件。

 public override void Init(EventArgs mData = null)
    {
        base.Init(mData);
        CloseButton.onClick.AddListener(Close);
        Switch.OnValueChanged.AddListener(SwitchClick);
       //TODO
    }

默认面板加载后是放在UIManager下的,如果我们想要放到指定物体下,我们就需要重写SetPanelParent方法。

 public override void SetPanelParent()
    {
        transform.SetParent(UIControler.Instance.LeftPanelParent);
    }

设置初始位置

 protected override void SetPanelDefaultPosition()
    {
        rectTransform.offsetMin = new Vector2(0, 0);
        rectTransform.offsetMax = new Vector2(0, 0);
        Vector3 pos = rectTransform.anchoredPosition3D;
        pos.x = 48;
        rectTransform.anchoredPosition3D = pos;
    rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 200);
    }

具体不同锚点的UI设置位置方法参考博客 Unity3D开发之设置UI位置.

2.UI面板管理器UIManager

1.API

public Dictionary<PanelType, BasePanel> PanelDic = new Dictionary<PanelType, BasePanel>();
所有面板的集合

public T GetPanelByType(PanelType panelType, bool create = true,bool isopenAfterCreate=true) where T : BasePanel{}
根据面板类型获取面板实例
T:继承自BasePanel的面板类型
panelType:面板类型
create:是否在没有此面板的时候创建
open:在创建后是否要显示出来

public void ControlPanel(bool isOn, PanelType panelType,bool setTop=false){}
控制panel的显示隐藏 多参控制
isOn:开启或者关闭
panelType:面板类型
setTop:是否设置在最上层

public BasePanel OpenPanel(PanelType panelType,BasePanel highlevelPanel=null,bool setTop=false,EventArgs args=null){}
打开面板
panelType:面板类型
highlevelPanel:多级面板时,此处代表他的上一级面板
setTop:是否设置在最上层
args:传入参数

public void ExclusionPanel(BasePanel basePanel){}
面板互斥控制

public void ClosePanel(PanelType panelType){}
关闭面板

public void Add(PanelType panelType,BasePanel basePanel){}
增加面板类型 一般用于已有的不需要加载的面板

public bool ContainPanel(PanelType panelType){}
是否已经有此面板

2.使用方法

全局调用打开某个面板,

UIManager.Instance.ClosePanel(PanelType.SearchPanel);

关闭指定面板

IManager.Instance.ClosePanel(PanelType.SearchPanel);

获取某个面板实例

UIManager.Instance.GetPanelByType<SearchPanel>(PanelType.SearchPanel)

3.UI面板配置文件管理ReadUIConfig

1.使用方法

public enum PanelType
面板类型,新面板自己添加类型
使用方法:

public enum PanelType
{
	    //.....
	    None,
	    TestPanel,添加自己要增加新的面板类型
}

然后在ReadUIConfig中添加面板类型以及预制体的路径。

	void Awake()
    {
        //add
        PanelPathDic.Add(PanelType.TestPanel, "PanelPrefab/TestPanel");
    }

4.面板动画PanelAnimation

1.API

BasePanel默认的打开关闭面板是没有动画的。只是控制它的CanvasGroup的alpha来显示隐藏。而如果我们想要设置面板的打开关闭动画,可以在面板上挂在PanelAnimation脚本。选择现有的五种动画模式。

public enum AnimationType
{
    Translate,//移动模式
    Scale,//缩放模式
    TransLateAndScale,//同时进行移动缩放组合模式
    TransLateThenScale,//先移动后缩放模式
    ScaleThenTransLate,//先缩放后移动模式
}

public Action AnimationStartEvent = null;
动画开始事件

public Action AnimationUpdateEvent = null;
动画进行时事件

public Action AnimationEndEvent = null;
动画结束事件

private AnimationType AnimationType= AnimationType.Scale;
动画类型,可在开发时在面板上选择动画类型

private Transform TargeTransform;
动画要控制的物体,可在面板上选择绑定。当不在面板上绑定时,默认为挂在脚本的物体。

private Vector3 PositionOpenValue;
打开面板位置设置的值

private Vector3 PositionCloseValue;
关闭面板位置设置的值

private Vector3 ScaleOpenValue;
打开面板缩放设置的值

private Vector3 ScaleCloseValue;
关闭面板缩放设置的值

private float timerOpen;
打开面板所用时间

private float timerClose
关闭面板所用时间

private bool useRectPositionOpen = true;
是否使用RectTransform来控制面板的打开移动动画 当面板设置锚点时,LocalPosition和AnchorPos3D不同,我们需要根据需求选择不同的模式。
由于我没搞定在设置锚点时,LocalPosition和AnchorPos3D之间的转换关系,所以我们就使用标志位来选择对应的API.

private bool useRectPositionClose = true;
是否使用RectTransform来控制面板的关闭移动动画

public void SetParamaters(Vector3? positionOpenValue=null, Vector3? positionCloseValue = null, Vector3? scaleOpenValue=null, Vector3? scaleCloseValue=null, float? timerOpen=null, float? timerClose=null,bool? useRectPositionOpen=null,bool? useRectPositionClose=null){}
设置动画参数
如果打开面板的参数是动态变化的,我们也可以用代码在外侧设置动画面板参数。不输入参数则不会改变对应的参数值。

public void AnimationOpen(){}
打开动画

public void AnimationClose()
关闭动画

public void Open(){}
没有动画的打开

public void Close()
没有动画的关闭

2.使用方法

使用案例1

当我们想要在打开面板使用缩放效果,我们可以在面板选择scale模式,并设置动画参数。
在这里插入图片描述

使用案例2

当我们点击一个模型时,面板从模型的位置做移动放大到指定位置。
打开面板我们会调用到open方法,所以我们可以在open时将模型所在的位置值作为参数发送给面板。我们在面板解析时如下:

	protected override void OpenImplement()
    {
        var data = mData as CommonMessageEvent.Vector3Args;
        //Debug.Log(data.Value);
        Vector3 localPos = UIHelp.GetWorldToUiElementPosition(data.Value, parentRectTransform);
        //Debug.Log(localPos);
        transform.localPosition = localPos;
        panelAnimation?.SetParamaters(positionCloseValue: localPos, useRectPositionClose: false);
        base.OpenImplement();
    }

由于我们的面板需要设置锚点卡在距离左侧一定的距离,所以我们在打开的时候要使用AnchorPos3D。而我们在关闭的时候,需要回到模型所在的位置。我们通过模型的世界位置只能算出ui的LocalPosition,所以我们要在代码里动态设置关闭时的参数。

5.ToggleItemView

1.介绍

控制Toggle元素的移入移出高亮非高亮的变化控制。
有四种选择模式。

  1. ScaleFontSize 是否放大Toggle内字体
  2. UseTextColor 是否控制文本颜色变化
  3. UseImage 是否控制Toggle上图片内容变化
  4. UseImageColor 是否控制Toggle上图片颜色变化

选择不同的模式有不同的面板参数设置:如下234选择依次:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200924102014761.png#pic_center

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.使用方法

只需将脚本挂载在Toggle组件所在的物体上。自动根据Toggle值控制显示效果。

二.消息系统

1.介绍

全局可通过消息系统进行消息传送,高度解耦。
消息系统介绍文章在此。链接: Unity3D开发之基于委托的消息框架开发.

2.使用方法

消息基类为System下的EventArgs,我们所有的消息体都要继承在EventArgs。我们在CommonMessageEvent下写了多个基本消息类,如下:BoolArgs,IntArgs,StringArgs,FloatArgs,Vector3Args,TransformArgs,GameObjectArgs,在发送此等消息时可直接使用已有的消息类。
在发送消息之前,先在EventIdPool中声明消息id,如下:

 public enum EventId
    {
        Start = 0,
        Test1,
        End,
    }

然后在接收消息端的初始化函数中注册消息,

MessageCenter.Instance.RegisterEvent(EventId.Test1, Test);

在触发端,我们可以直接调用:

MessageCenter.Instance.DispatchMessage(EventId.Test1, new CommonMessageEvent.BoolArgs(pause));

UI系统中打开面板传入参数也是继承自EventArgs。保持系统结构统一。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值