CN108664294A - 呈现蒙版图的方法和装置以及电子设备和存储介质 - Google Patents

Abstract

本发明实施例提供一种呈现蒙版图的方法和装置以及电子设备和存储介质，能够使蒙版图与各种大小的终端设备屏幕相适应；此外本发明实施例的技术方案有助于减小应用程序体积，并有助于终端设备在运行应用程序时更加流畅。本发明的呈现蒙版图的方法包括：对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；创建与所述页面的尺寸一致的自定义控件，将一个或多个蒙版图片布局在该自定义控件中；在所述应用程序呈现所述指定页面的情况下，使用全屏的对话框弹出所述自定义控件。

Description

呈现蒙版图的方法和装置以及电子设备和存储介质

技术领域

本发明涉及计算机领域，尤其涉及呈现蒙版图的方法和装置以及电子设备和存储介质。

背景技术

随着移动互联网的日益普及，移动端应用程序(App)产品的开发周期越来越短，迭代很快，每个版本的发布，必然会增加一些新功能，或修改老功能，而功能是通过应用程序的各个页面展示的。为了引导用户使用，修改老功能导致的页面改动，或新加功能时，以手机为例，手机应用程序一般会在该应用程序的页面上，弹出一个蒙版图遮罩手机屏幕，来告诉用户改动或功能介绍，从而提高用户体验。

蒙版图需要尽可能地与移动终端设备的屏幕的大小相适配，但是实际中移动终端的型号种类众多，屏幕大小不一，因此如何使蒙版图与各种大小的终端设备屏幕相适应，成为需要解决的问题。此外，通常来说，用户希望应用程序本身的体积(即数据量)尽可能地小，而且运行尽可能流畅。这些也是移动端应用程序开发时需要考虑的情况。

发明内容

有鉴于此，本发明实施例提供一种呈现蒙版图的方法和装置以及电子设备和存储介质，能够使蒙版图与各种大小的终端设备屏幕相适应；此外本发明实施例的技术方案有助于减小应用程序体积，并有助于终端设备在运行应用程序时更加流畅。

为实现上述目的，本发明提供如下技术方案：

一种呈现蒙版图的方法，包括：对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；创建与所述页面的尺寸一致的自定义控件，将一个或多个蒙版图片布局在该自定义控件中；在所述应用程序呈现所述指定页面的情况下，使用全屏的对话框弹出所述自定义控件。

可选地，获取所述页面元素的尺寸以及在所述页面中的位置的步骤之前，还包括：将保存的蒙版配置信息转换为多个蒙版类，并且形成多个页面元素与所述一个或多个蒙版类一一映射的映射关系表；所述蒙版类中包含蒙版图片或蒙版图片的网络地址，并且包含蒙版图片在所述页面中的布局位置；根据所述映射关系表确定所述页面中要展示蒙版图的页面元素所对应的蒙版类，按照该蒙版类获取所述蒙版图片以及确定所述蒙版图片在所述自定义控件中的布局位置。

可选地，所述蒙版类中还包含蒙版图所引导的页面元素的标识；所述蒙版图片中包含箭头；将一个或多个蒙版图片布局在该自定义控件中的步骤包括：将蒙版图片设置在所述自定义控件中，并且使所述蒙版图片中的箭头指向具有所述标识的页面元素。

可选地，获取所述页面元素的尺寸以及在所述页面中的位置的步骤之前，还包括：在所述应用程序启动后，从服务器下载配置信息，并与本地缓存的配置信息合并，以形成所述蒙版配置信息。

可选地，在使用全屏的对话框弹出所述自定义控件的步骤之后，还包括：记录蒙版图展示标记；将保存的蒙版配置信息转换为多个蒙版类的步骤之前，还包括：确认所述蒙版图展示标记被删除。

一种呈现蒙版图的装置，包括：前端解析模块，用于对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；前端展示模块，用于创建与所述页面的尺寸一致的自定义控件，将一个或多个蒙版图片布局在该自定义控件中；在所述应用程序呈现所述指定页面的情况下，使用全屏的对话框弹出所述自定义控件。

可选地，还包括蒙版配置模块，用于保存蒙版配置信息，所述蒙版配置信息中记录了需要展示蒙版图的一个或多个页面以及记录了该一个或多个页面中需要展示蒙版图的页面元素；所述前端解析模块还用于：将保存的蒙版配置信息转换为多个蒙版类，并且形成多个页面元素与所述一个或多个蒙版类一一映射的映射关系表；所述蒙版类中包含蒙版图片或蒙版图片的网络地址，并且包含蒙版图片在所述页面中的布局位置；根据所述映射关系表确定所述页面中要展示蒙版图的页面元素所对应的蒙版类，按照该蒙版类获取所述蒙版图片以及确定所述蒙版图片在所述自定义控件中的布局位置。

可选地，所述蒙版类中还包含蒙版图所引导的页面元素的标识；所述蒙版图片中包含箭头；所述前端展示模块还用于将蒙版图片设置在所述自定义控件中，并且使所述蒙版图片中的箭头指向具有所述标识的页面元素。

可选地，还包括数据通信模块，用于在所述应用程序启动后，从服务器下载配置信息，并与本地缓存的配置信息合并，以形成所述蒙版配置信息。

可选地，所述前端展示模块还用于在使用全屏的对话框弹出所述自定义控件之后，记录蒙版图展示标记；并且还用于根据收到的外部操作清理所述蒙版图展示标记；以及在所述应用程序呈现所述指定页面的情况下，确认所述蒙版图展示标记被删除，然后进行所述使用全屏的对话框弹出所述自定义控件的步骤。

一种电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明实施例所述的方法。

一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行本发明实施例所述的方法。

根据本发明实施例的技术方案，蒙版图不再是全屏大小的图片，而是按照预定的位置布置在自定义控件中，再用全屏的对话框弹出该自定义控件，这样自定义控件中包含了蒙版图，而且在全屏的对话框弹出之后，自定义控件自动与屏幕大小相适应，于是实现了在不同屏幕大小的情况下都能与屏幕相适应地显示蒙版图。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的呈现蒙版图的方法的基本步骤的示意图；

图2是根据本发明实施例的呈现蒙版图的装置的基本结构的示意图；

图3是根据本发明实施例的获取蒙版配置的基本步骤的示意图；

图4是根据本发明实施例的实现蒙版展示的基本步骤的示意图；

图5是根据本发明实施例的一种呈现蒙版图的人机界面的示意图；

图6是根据本发明实施例的呈现蒙版图的方法的电子设备的硬件结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的呈现蒙版图的方法的基本步骤的示意图。如图1所示，该方法主要包括如下步骤：

步骤S11：对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取该页面元素的尺寸以及在该页面中的位置。

步骤S12：创建与上述页面的尺寸一致的自定义控件，将一个或多个蒙版图片布局在该自定义控件中；

步骤S13：在该应用程序呈现上述指定页面的情况下，使用全屏的对话框弹出上述自定义控件。

按照上述步骤，本发明实施例中，蒙版图不再是全屏大小的图片，而是按照预定的位置布置在自定义控件中，再用全屏的对话框弹出该自定义控件，这样自定义控件中包含了蒙版图，而且在全屏的对话框弹出之后，自定义控件自动与屏幕大小相适应，于是实现了在不同屏幕大小的情况下都能与屏幕相适应地显示蒙版图。

图2是根据本发明实施例的呈现蒙版图的装置的基本结构的示意图。该装置作为软件可以设置在应用程序中。如图2所示，呈现蒙版图的装置20基本地包括前端解析模块和前端展示模块，另外还可包括蒙版配置模块和数据通信模块，同示于图2中。前端解析模块的主要功能是对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取这些页面元素的尺寸以及在上述指定页面中的位置。前端展示模块的主要功能是用于创建与上述页面的尺寸一致的自定义控件，将一个或多个蒙版图片布局在该自定义控件中；在上述应用程序呈现上述指定页面的情况下，使用全屏的对话框弹出上述自定义控件。

以下结合图3、图4、以及图5对本发明实施例中的各模块的运行方式以及具体功能做进一步说明。图3是根据本发明实施例的获取蒙版配置的基本步骤的示意图，图4是根据本发明实施例的实现蒙版展示的基本步骤的示意图，图5是根据本发明实施例的一种呈现蒙版图的人机界面的示意图。

在本实施例中，蒙版配置模块可基于xml(可扩展标记语言)将所有需要展示蒙版图的页面存入xml中，并配置好该页面哪些元素需要展示蒙版图。参考图5，页面50是程序中的用来登出(即退出当前账号)的页面，该页面50需展示蒙版图，因此存入xml中。按钮51“刷脸登录设置”是需要展示蒙版图的页面元素；展示的蒙版图是蒙版图52。全屏显示的自定义控件53被设置为半透明状态，在需要展示蒙版图的按钮51处设置为全透明状态，以提示用户注意该按钮51。自定义控件53还包含一个退出蒙版图显示状态的按钮54，上面可以有提示文字例如图中所示的“我知道了”，点击按钮52即退出蒙版图显示。为示意清晰，图5中的页面50绘制得比自定义控件53稍大，实际呈现时，自定义控件53可以撑满整个页面50。

蒙版配置模块的内容可以在应用程序运行时由服务器提供，由数据通信模块下载到移动终端，这样有助于减少应用程序的体积。在下载之后，可将配置信息缓存到本地，形成本地配置信息。蒙版配置模块的内容也可以添加在该应用程序的安装包中。不论配置信息的来源如何，都可由前端解析模块进行解析。

数据通信模块主要用于数据通信的功能，如前所述，如果蒙版配置信息在服务器，则由数据通信模块进行下载，并将其存入到本地。同时该模块也负责是否需要下载的逻辑判断处理，和蒙版图下载的功能。蒙版图可由服务器提供，从而不用再置入应用程序包，同样有助于减小应用程序的体积。在已经下载蒙版图的情况下，蒙版图被保存在本地，并且在本地配置信息中记录蒙版图在本地的存储位置。

前端解析模块能够将上述的蒙版配置信息解析成各个蒙版信息，以Android平台为例，各个蒙版信息，将以Java实体类的形式，蒙版信息例如可以包括：蒙版图在网络上的存储位置、蒙版图本身或者蒙版图在本地的存储位置；以及蒙版图的显示位置，蒙版图对应的页面元素的标识。蒙版图对应的页面元素即为前文所述的需要展示蒙版图的页面元素，例如图5中的按钮51。

前端展示模块可以将前端解析模块解析出来的蒙版图，通过其内部的逻辑处理，提供是否需要在页面中展示出来的功能；同时提供维护整个应用程序的蒙版图是否需要重新展示的处理，这样无需应用程序的每个页面中的代码来进行判断本页面是否需要展示蒙版图，有助于减小应用程序的体积。

以下对于蒙版图展示的步骤再做进一步说明，主要通过如下步骤1至步骤6来实现。

步骤1：当应用程序启动时，通过http/https进行服务端请求，如服务器有配置则将服务端的蒙版配置信息下载。

步骤2：将下载的服务端的蒙版配置信息和本地缓存的蒙版配置信息进行合并，形成本地缓存配置。

步骤3：在需要展示蒙版图的功能页面中，由前端展示模块先判断该页面是否需要展示蒙版，如需要展示蒙版，则通过前端蒙版加工模块处理。在显示蒙版之后，设置一个蒙版标记。在应用程序呈现页面时，判断该页面是否需要展示蒙版图，若是，则再判断是否有蒙版标记，如果有蒙版标记，则说明蒙版图已经展示过，从而不再展示蒙版图。为了使用户能够再次看到蒙版图，本发明实施例中，在应用程序的设置功能中加入一个清理蒙版标记的选项，用户可以在看过蒙版图之后，使用该选项清理蒙版标记，这样在上述的判断是否有蒙版标记时，已经不存在蒙版标记，从而再次展示蒙版图，此时调用前端解析模块，进行以下步骤的操作。可以看出，根据蒙版配置信息和蒙版标记来判断是否需要展示蒙版图，是一种比较简单的判断逻辑，便于处理，有助于使终端设备运行流畅。

步骤4：前端解析模块将需要展示蒙版图的页面对应的蒙版配置xml信息加工成针对该页面的配置类，以Android平台为例，加工成蒙版Java类并将具体的蒙版Java类与当前页面中要展示蒙版图的页面元素一一对应，从而形成页面元素与蒙版类的映射关系表。

步骤5：前端解析模块通过Android SDK平台提供的自定义控件技术(主要包括Drawable图形生成、原控件位置计算、控件大小随设备屏幕大小计算等)，将该页面要展示蒙版图的界面元素，一一获取其对应页面的准确布局位置与大小，并通过步骤4中的映射关系表，找到对应的蒙版类。

步骤6：前端展示模块判断蒙版类的图片是本地缓存还是需网络下载。根据蒙版类的内容即可判断，因为蒙版信息包括：蒙版图在网络上的存储位置、蒙版图本身或者蒙版图在本地的存储位置，所以根据具体是哪一种信息来判断。如需网络下载，则调用数据通信模块将其下载并缓存，然后，使用自定义控件技术创建与当前页面大小一致的自定义控件，设置该自定义控件的背景为半透明，并将映射关系表的蒙版图片，按照映射关系，设置合理的大小，并分别布局在自定义控件中。

步骤7：在步骤6中已经创建好一个自定义控件，而且蒙版图片都是精准布局上去的，在步骤7中，前端展示模块将此控件通过一个全屏的对话框弹出，并可进一步使用Android平台动画技术，淡入显示蒙版图自定义控件，这样用户看到了精准的页面蒙版图引导提示，并记录好蒙版图展示标记；蒙版图消失也采用动画技术实现淡出，提升用户体验。对于一些蒙版图片，包含有箭头，用来引导页面元素(例如按钮51)从而引起用户注意，例如图5中的蒙版图52所示，在这种情况下，上述的蒙版类中包含该页面元素的标识，前端展示模块在布局蒙版图片时，将该箭头指向具有该标识的页面元素。

根据本发明的实施方式，还提供了一种电子设备和一种可读存储介质。

本发明的电子设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行本发明所提供的呈现蒙版图的方法。

本发明的非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行本发明所提供的呈现蒙版图的方法。

如图6所示，是根据本发明实施例的呈现蒙版图的方法的电子设备的硬件结构示意图。如图6，该电子设备包括：一个或多个处理器以及存储器，图6中以一个处理器为例。其中，存储器即为本发明所提供的非暂态计算机可读存储介质。

呈现蒙版图的方法的电子设备还可以包括：输入装置和输出装置。处理器、存储器、输入装置和输出装置可以通过总线或者其他方式连接，图6中以通过总线连接为例。

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本发明实施例中的呈现蒙版图的方法对应的程序指令/模块(例如，附图2所示的前端解析模块、前端展示模块、蒙版配置模块、数据通信模块)。处理器通过运行存储在存储器中的非暂态软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的呈现蒙版图的方法。

存储器可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据呈现蒙版图的装置的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至呈现蒙版图的装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置可接收输入的数字或字符信息，以及产生与呈现蒙版图的装置的用户设置以及功能控制有关的键信号输入。输出装置可包括显示屏等显示设备。所述一个或者多个模块存储在所述存储器中，当被所述一个或者多个处理器执行时，执行上述任意方法实施例中的呈现蒙版图的方法。

上述产品可执行本发明实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明实施例所提供的方法。

根据本发明实施例的技术方案，蒙版图不再是全屏大小的图片，而是按照预定的位置布置在自定义控件中，再用全屏的对话框弹出该自定义控件，这样自定义控件中包含了蒙版图，而且在全屏的对话框弹出之后，自定义控件自动与屏幕大小相适应，于是实现了在不同屏幕大小的情况下都能与屏幕相适应地显示蒙版图。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (12)

1.一种呈现蒙版图的方法，其特征在于，包括：

对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；

创建与所述页面的尺寸一致的自定义控件，将一个或多个蒙版图片布局在该自定义控件中；

在所述应用程序呈现所述指定页面的情况下，使用全屏的对话框弹出所述自定义控件。

2.根据权利要求1所述的呈现蒙版图的方法，其特征在于，获取所述页面元素的尺寸以及在所述页面中的位置的步骤之前，还包括：

将保存的蒙版配置信息转换为多个蒙版类，并且形成多个页面元素与所述一个或多个蒙版类一一映射的映射关系表；所述蒙版类中包含蒙版图片或蒙版图片的网络地址，并且包含蒙版图片在所述页面中的布局位置；

根据所述映射关系表确定所述页面中要展示蒙版图的页面元素所对应的蒙版类，按照该蒙版类获取所述蒙版图片以及确定所述蒙版图片在所述自定义控件中的布局位置。

3.根据权利要求2所述的呈现蒙版图的方法，其特征在于，

所述蒙版类中还包含蒙版图所引导的页面元素的标识；

所述蒙版图片中包含箭头；

将一个或多个蒙版图片布局在该自定义控件中的步骤包括：将蒙版图片设置在所述自定义控件中，并且使所述蒙版图片中的箭头指向具有所述标识的页面元素。

4.根据权利要求2所述的呈现蒙版图的方法，其特征在于，获取所述页面元素的尺寸以及在所述页面中的位置的步骤之前，还包括：在所述应用程序启动后，从服务器下载配置信息，并与本地缓存的配置信息合并，以形成所述蒙版配置信息。

5.根据权利要求2所述的呈现蒙版图的方法，其特征在于，

在使用全屏的对话框弹出所述自定义控件的步骤之后，还包括：记录蒙版图展示标记；

将保存的蒙版配置信息转换为多个蒙版类的步骤之前，还包括：确认所述蒙版图展示标记被删除。

6.一种呈现蒙版图的装置，其特征在于，包括：

前端解析模块，用于对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；

前端展示模块，用于创建与所述页面的尺寸一致的自定义控件，将一个或多个蒙版图片布局在该自定义控件中；在所述应用程序呈现所述指定页面的情况下，使用全屏的对话框弹出所述自定义控件。

7.根据权利要求6所述的呈现蒙版图的装置，其特征在于，

还包括蒙版配置模块，用于保存蒙版配置信息，所述蒙版配置信息中记录了需要展示蒙版图的一个或多个页面以及记录了该一个或多个页面中需要展示蒙版图的页面元素；

所述前端解析模块还用于：将保存的蒙版配置信息转换为多个蒙版类，并且形成多个页面元素与所述一个或多个蒙版类一一映射的映射关系表；所述蒙版类中包含蒙版图片或蒙版图片的网络地址，并且包含蒙版图片在所述页面中的布局位置；根据所述映射关系表确定所述页面中要展示蒙版图的页面元素所对应的蒙版类，按照该蒙版类获取所述蒙版图片以及确定所述蒙版图片在所述自定义控件中的布局位置。

8.根据权利要求7所述的呈现蒙版图的装置，其特征在于，

所述蒙版类中还包含蒙版图所引导的页面元素的标识；

所述蒙版图片中包含箭头；

所述前端展示模块还用于将蒙版图片设置在所述自定义控件中，并且使所述蒙版图片中的箭头指向具有所述标识的页面元素。

9.根据权利要求7所述的呈现蒙版图的装置，其特征在于，还包括数据通信模块，用于在所述应用程序启动后，从服务器下载配置信息，并与本地缓存的配置信息合并，以形成所述蒙版配置信息。

10.根据权利要求7所述的呈现蒙版图的装置，其特征在于，

所述前端展示模块还用于在使用全屏的对话框弹出所述自定义控件之后，记录蒙版图展示标记；并且还用于根据收到的外部操作清理所述蒙版图展示标记；以及在所述应用程序呈现所述指定页面的情况下，确认所述蒙版图展示标记被删除，然后进行所述使用全屏的对话框弹出所述自定义控件的步骤。

11.一种电子设备，其特征在于，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-5中任一项所述的方法。

12.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行权利要求1-5中任一项所述的方法。