一种基于RN实现的悬浮层组件的控制方法及系统

摘要

本发明涉及图形界面技术领域，具体涉及一种基于RN实现的悬浮层组件的控制方法及系统。该方法包括：获取当前窗口的信息；若当前窗口包含悬浮层的需求，则在最顶层生成遮罩图层；检测基础控件是否满足业务需求；若基础控件满足业务需求，则在遮罩图层上内嵌一个以上的基础控件；若基础控件不满足业务需求，则在遮罩图层上内嵌自定义视图；当接收到隐藏命令，则播放退出动画，隐藏遮罩图层；当接收到展开命令，则播放进入动画，展开遮罩图层。该控制方法及系统具有功能完备和界面显示准确的优点，解决了现有的悬浮层组件存有的功能简陋和容易显示故障的问题，满足了图形界面的展示需要。

说明书

技术领域

本发明涉及图形界面技术领域，具体涉及一种基于RN实现的悬浮层组件的控制方法及系统。

背景技术

悬浮层是软件开发过程中经常需要用到的组件，用于在当前界面的上层覆盖展示其他信息。目前通常采用React Native(简称RN)的方案来实现悬浮层功能，RN是开源的跨平台移动应用开发框架，衍生自开源的JS框架React。RN支持iOS和安卓平台，使用Javascript语言，类似于HTML的JSX，并配合CSS来开发移动应用，减少了技术人员的学习成本。

目前RN提供的悬浮层组件是Modal component，它存有诸多不足，一方面功能较为简陋，无法对遮罩层的颜色进行自定义，也无法对界面动画的时间进行自定义，只能控制是否显示动画，难以满足使用需要；此外，目前基于RN的Modal component在逻辑上也有部分问题，当加载过程较快时，新的控件会遮挡显示加载动画的控件，导致加载动画不显示，此外，当对应用进行快速唤醒时，容易产生两次遮罩，导致设备的界面显示异常，因此需要一种新的悬浮层组件的控制方法及系统来解决上述的不足。

发明内容

为了克服上述现有的悬浮层组件存有的功能简陋和容易显示故障的技术缺陷，本发明提供一种功能完备和界面显示准确的基于RN实现的悬浮层组件的控制方法及系统。

为了解决上述问题，本发明按以下技术方案予以实现的：

本发明所述的一种基于RN实现的悬浮层组件的控制方法，其特征在于，该方法包括：

获取当前窗口的信息；

若当前窗口包含悬浮层的需求，则在最顶层生成遮罩图层；

检测基础控件是否满足业务需求；

若基础控件满足业务需求，则在遮罩图层上内嵌一个以上的基础控件；

若基础控件不满足业务需求，则在遮罩图层上内嵌自定义视图；

当接收到隐藏命令，则播放退出动画，隐藏遮罩图层；

当接收到展开命令，则播放进入动画，展开遮罩图层。

所述的获取当前窗口的信息，具体为：获取当前窗口的尺寸，获取当前窗口的活动状态，获取当前窗口的业务需求。

所述的基础控件包括加载视图控件、消息提示控件、对话框控件、多状态控件、淡入淡出控件。

所述的若基础控件不满足业务需求，则在遮罩图层上内嵌自定义视图，具体为：若基础控件不满足业务需求，则生成自定义视图，计算自定义视图的尺寸，然后获取自定义视图的坐标，对自定义视图进行绘制。

所述的隐藏命令包括应用内消息、手势动作和返回键命令。

所述的展开命令包括应用内消息、手势动作和菜单键命令。

所述的手势动作包括点击手势、长按手势、滑动手势和双击手势。

一种基于RN实现的悬浮层组件的系统，其特征在于，该系统包括：

信息模块，用于获取当前窗口的信息；

初始化模块，用于当前窗口包含悬浮层的需求时，在最顶层生成遮罩图层；

检测模块，用于检测基础控件是否满足业务需求；

基础模块，用于当基础控件满足业务需求时，在遮罩图层上内嵌一个以上的基础控件；

自定义模块，用于当基础控件不满足业务需求时，在遮罩图层上内嵌自定义视图；

隐藏模块，用于接收到隐藏命令时，播放退出动画，隐藏遮罩图层；

展开模块，用于接收到展开命令时，播放进入动画，展开遮罩图层。

与现有技术相比，本发明的有益效果是：

本发明所述的一种基于RN实现的悬浮层组件的控制方法及系统具有功能完备和界面显示准确的优点，通过在窗口上生成遮罩图层、基础控件和自定义视图，可提供加载视图控件、消息提示控件、对话框控件、多状态控件、淡入淡出控件的功能，且便于对悬浮层的颜色和界面动画的时间进行自定义，功能较为完备；此外，该控制方法通过获取窗口信息和控制悬浮层的隐藏和展开，可避免多次唤醒导致显示叠加，确保正确显示内容，解决了现有的悬浮层组件存有的功能简陋和容易显示故障的问题，满足了图形界面的展示需要。

附图说明

下面结合附图对本发明的具体实施方式作进一步详细的说明，其中：

图1是本发明的方法流程示意图；

图2是本发明的系统结构示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

如图1～图2所示，本发明所述的一种基于RN实现的悬浮层组件的控制方法，该方法包括：

101、获取当前窗口的信息；

所述的获取当前窗口的信息，具体为：获取当前窗口的尺寸，以便根据当前窗口的尺寸来动态改变悬浮层的尺寸，实现自适应的效果；获取当前窗口的活动状态，用于在窗口活动时生成任务队列，避免在重复唤醒时同时出现多个悬浮层；获取当前窗口的业务需求，用于通过窗口ID来检索包含的业务信息。

102、若当前窗口包含悬浮层的需求，则在最顶层生成遮罩图层；

具体的，遮罩图层具有透明度和颜色信息，便于根据开发需要进行调整。

103、检测基础控件是否满足业务需求；

具体的，将业务需求所需的功能与基础控件进行对比，若业务需求中存有基础控件无法实现的功能，则基础控件无法满足需要。

104、若基础控件满足业务需求，则在遮罩图层上内嵌一个以上的基础控件；

所述的基础控件包括加载视图控件：用于在加载过程中展示动画和信息、消息提示控件：用于生成消息框来展示通知信息、对话框控件：用于提供可交互的对话框、多状态控件：用于进行多页面的布局切换、淡入淡出控件：用于提供淡入动画和淡出动画。基础控件可单独使用，也可有多个协同进行使用。

105、若基础控件不满足业务需求，则在遮罩图层上内嵌自定义视图；

所述的若基础控件不满足业务需求，则在遮罩图层上内嵌自定义视图，具体为：若基础控件不满足业务需求，则生成自定义视图，调用安卓的测量命令onMeasure()，通过当前窗口的尺寸计算自定义视图的尺寸，然后调用安卓的布局命令onLayout()，获取自定义视图的坐标，最后调用安卓的绘制命令onDraw()，对自定义视图进行绘制。

106、当接收到隐藏命令，则播放退出动画，隐藏遮罩图层；

所述的隐藏命令包括应用内消息、手势动作和返回键命令，进一步的，所述的手势动作包括点击手势、长按手势、滑动手势和双击手势，将一种以上的应用内消息、手势动作或返回键命令作为触发信息，当用户在操作过程中触发设定的触发信息时，即会向悬浮层发起隐藏命令，当悬浮层已处于隐藏状态时则不作响应。

107、当接收到展开命令，则播放进入动画，展开遮罩图层。

所述的展开命令包括应用内消息、手势动作和菜单键命令，进一步的，所述的手势动作包括点击手势、长按手势、滑动手势和双击手势，将一种以上的应用内消息、手势动作或返回键命令作为触发信息，当用户在操作过程中触发设定的触发信息时，即会向悬浮层发起展开命令，当悬浮层已处于展开状态时则不作响应。

一种基于RN实现的悬浮层组件的系统，该系统包括：

信息模块1，用于获取当前窗口的信息；

初始化模块2，用于当前窗口包含悬浮层的需求时，在最顶层生成遮罩图层；

检测模块3，用于检测基础控件是否满足业务需求；

基础模块4，用于当基础控件满足业务需求时，在遮罩图层上内嵌一个以上的基础控件；

自定义模块5，用于当基础控件不满足业务需求时，在遮罩图层上内嵌自定义视图；

隐藏模块6，用于接收到隐藏命令时，播放退出动画，隐藏遮罩图层；

展开模块7，用于接收到展开命令时，播放进入动画，展开遮罩图层。

该基于RN实现的悬浮层组件的控制方法及系统具有功能完备和界面显示准确的优点，通过在窗口上生成遮罩图层、基础控件和自定义视图，可提供加载视图控件、消息提示控件、对话框控件、多状态控件、淡入淡出控件的功能，且便于对悬浮层的颜色和界面动画的时间进行自定义，功能较为完备；此外，该控制方法通过获取窗口信息和控制悬浮层的隐藏和展开，可避免多次唤醒导致显示叠加，确保正确显示内容，解决了现有的悬浮层组件存有的功能简陋和容易显示故障的问题，满足了图形界面的展示需要。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，故凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何修改、等同变化与修饰,均仍属于本发明技术方案的范围内。