Tab页样式应用界面的背景显示方法和装置与流程

文档序号:12863513阅读:254来源:国知局
Tab页样式应用界面的背景显示方法和装置与流程

本发明涉及界面显示技术领域,尤其涉及一种tab页样式应用界面的背景显示方法和装置。



背景技术:

随着智能终端的普及,越来越多的智能终端上可以安装各种各样的应用程序,而大多数的应用程序中都设置有标签tab页样式的应用界面。为了使得应用程序的界面更加美观,往往会在应用程序的背景中加入了沉浸式效果。

目前的应用程序的背景沉浸式方法是:通过提取用户界面当前显示图片的主颜色,或对当前显示图片作大尺寸高斯模糊处理,将提取出的主颜色作为工具栏和应用程序的背景颜色,或者将模糊处理后的图片作为工具栏和应用程序的背景。

但是,应用程序的tab页样式应用界面中往往会存在多个tab页的情况,若采用上述的方法,会使得相邻tab页的背景连接处的背景不连续,导致背景沉浸式效果差,用户体验不佳。



技术实现要素:

本发明提供一种tab页样式应用界面的背景显示方法和装置,以解决相邻tab页的背景连接处的背景不连续问题。

第一方面,本发明实施例提供一种tab页样式应用界面的背景显示方法,包括:

检测当前应用程序界面中是否存在多个标签tab页;

当存在多个tab页时,分别提取每个tab页中当前显示的图片,得到多幅初始背景图片;

对所述多幅初始背景图片进行模糊和暗淡效果处理,得到多幅处理后的背景图片;

提取所述多幅处理后的背景图片的主颜色,对相邻的tab页所对应的主颜色进行颜色调和,得到主颜色统一的调和背景图片;

将所述调和背景图片作为相邻的tab页的工具栏背景图片和相邻的tab页的界面背景图片。

可选地,还包括:

当只有一个tab页时,提取所述tab页当前显示的图片,得到初始背景图片;

将当前应用程序的状态栏和背景颜色透明化;

对所述初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片;

将所述处理后的背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景图片。

可选地,还包括:

当只有一个tab页时,提取所述tab页当前显示的图片,得到初始背景图片;

对所述初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片;

将所述处理后的背景图片作为所述tab页的工具栏背景图片和所述tab页的界面背景图片。

可选地,还包括:

将当前应用程序的状态栏和背景颜色透明化;

将所述调和背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景颜色。

可选地,所述提取所述多幅处理后的背景图片的主颜色,包括:

将所述多幅处理后的背景图片划分为多个显示单元;

记录每个显示单元中的颜色;

将属于同一色系的颜色归为一类颜色,统计每类颜色所占有的显示单元数量;

将显示单元数量占有最多的颜色作为所述处理后的背景图片的主颜色。

可选地,所述对相邻的tab页所对应的主颜色进行颜色调和,得到主颜色统一的调和背景图片,包括:

对所述相邻的tab页所对应的主颜色进行分类;

当所述相邻的tab页所对应的主颜色属于同一色系时,选择其中任一主颜色作为调和背景图片的颜色;

当所述相邻的tab页所对应的主颜色属于不同色系时,计算每种主颜色的灰度值;计算公式如下:

grayi=ri*0.299+gi*0.578+bi*0.114;

式中:grayi为第i种主颜色的灰度值,ri为第i种主颜色的红颜色值,gi为第i种主颜色的绿颜色值,bi为第i种主颜色的蓝颜色值,其中i为大于等于2且小于等于n的整数,n为相邻的tab页的总数;

计算所有相邻的tab页主颜色的灰度值的平均值;

当所述灰度值的平均值大于0且小于等于0.5时,将调和背景图片的颜色设置为白色;

当所述灰度值的平均值大于0.5且小于等于1时,将调和背景图片的颜色设置为黑色。

第二方面,本发明实施例提供一种tab页样式应用界面的背景显示装置,包括:

检测模块,用于检测当前应用程序界面中是否存在多个标签tab页;

第一提取模块,用于在存在相邻的tab页时,分别提取每个tab页中当前显示的图片,得到多幅初始背景图片;

处理模块,用于对所述多幅初始背景图片进行模糊和暗淡效果处理,得到多幅处理后的背景图片;

第二提取模块,用于提取所述多幅处理后的背景图片的主颜色,对相邻的tab页所对应的主颜色进行颜色调和,得到主颜色统一的调和背景图片;

显示模块,用于将所述调和背景图片作为相邻的tab页的工具栏背景图片和相邻的tab页的界面背景图片。

可选地,

第一提取模块,还用于在只有一个tab页时,提取所述tab页当前显示的图片,得到初始背景图片;

处理模块,还用于将当前应用程序的状态栏和背景颜色透明化;

处理模块,还用于对所述初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片;

显示模块,还用于将所述处理后的背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景图片。

可选地,

第一提取模块,还用于在只有一个tab页时,提取所述tab页当前显示的图片,得到初始背景图片;

处理模块,还用于对所述初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片;

显示模块,还用于将所述处理后的背景图片作为所述tab页的工具栏背景图片和所述tab页的界面背景图片。

可选地,

处理模块,还用于将当前应用程序的状态栏和背景颜色透明化;

显示模块,还用于将所述调和背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景颜色。

可选地,所述第二提取模块,具体用于:

将所述多幅处理后的背景图片划分为多个显示单元;

记录每个显示单元中的颜色;

将属于同一色系的颜色归为一类颜色,统计每类颜色所占有的显示单元数量;

将显示单元数量占有最多的颜色作为所述处理后的背景图片的主颜色。

可选地,所述提取模块,具体用于:

对所述相邻的tab页所对应的主颜色进行分类;

在所述相邻的tab页所对应的主颜色属于同一色系时,选择其中任一主颜色作为调和背景图片的颜色;

在所述相邻的tab页所对应的主颜色属于不同色系时,计算每种主颜色的灰度值;计算公式如下:

grayi=ri*0.299+gi*0.578+bi*0.114;

式中:grayi为第i种主颜色的灰度值,ri为第i种主颜色的红颜色值,gi为第i种主颜色的绿颜色值,bi为第i种主颜色的蓝颜色值,其中i为大于等于2且小于等于n的整数,n为相邻的tab页的总数;

计算所有相邻的tab页主颜色的灰度值的平均值;

在所述灰度值的平均值大于0且小于等于0.5时,将调和背景图片的颜色统一为白色;

当所述灰度值的平均值大于0.5且小于等于1时,将调和背景图片的颜色统一为黑色。

第三方面,本发明实施例提供一种tab页样式应用界面的背景显示装置,包括:存储器和处理器,存储器与处理器通信连接;存储器,用于存储程序指令;处理器,用于调用存储器中的程序指令以使tab页样式应用界面的背景显示装置执行本发明第一方面提供的方法。

第四方面,本发明实施例提供一种计算机可读存储介质,其上存储有计算机指令,该指令被处理器执行时实现本发明第一方面提供的方法。

本发明提供的tab页样式应用界面的背景显示方法和装置,通过在应用程序界面出现相邻tab页时,对相邻tab页的背景图片的颜色进行调和处理,解决了相邻tab页的背景连接处不连续的问题,提升了应用界面的背景沉浸式效果。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。

图1为本发明实施例一提供的tab页样式应用界面的背景显示方法的流程图;

图2为tab页样式应用界面的一种示意图;

图3为本发明实施例二提供的tab页样式应用界面的背景显示方法的流程图;

图4为本发明实施例三提供的tab页样式应用界面的背景显示方法的流程图;

图5为本发明实施例一提供的tab页样式应用界面的背景显示装置的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。

本发明的方法应用在tab页样式应用界面中,图2为tab页样式应用界面的一种示意图,图2所示装置是以终端的显示界面为例,当前应用程序中存在三个tab页,且第一tab页和第二tab页相邻,第二tab页和第三tab页相邻。其中,第一tab页、第二tab页、第三tab页的顶端位置均有工具栏62,第一tab页、第二tab页、第三tab页设置在当前应用程序的背景61上,当前应用程序的背景61设置在终端的显示背景63上。

图1为本发明实施例一提供的tab页样式应用界面的背景显示方法的流程图,如图1所示,本实施例的方法可以包括:

s101、检测当前应用程序界面中是否存在多个标签tab页。

本实施例中,首先检测终端的当前应用程序界面中是否存在多个标签tab页。标签tab页是应用程序界面的常见显示方式,以360浏览器的网页为例,在360浏览器的首页上设置有多个显示区块,每个显示区块上均可以设置有多个关键字链接,这些显示区块就是tab页。具体的,通过设置程序代码来检测应用程序的当前界面中是否存在多个标签页,例如在打开任一应用程序界面时,运行程序代码检测当前应用程序界面中是否存在多个标签页。

s102、当存在多个tab页时,分别提取每个tab页中当前显示的图片,得到多幅初始背景图片。

本实施例中,在检测出当前应用程序的界面中存在多个tab页时,分别提取每个tab页中当前显示的图片。以图2所示的tab页样式应用界面为例,分别提取出第一tab页、第二tab页、第三tab页当前显示的图片。将提取出的图片作为初始背景图片。

s103、对多幅初始背景图片进行模糊和暗淡效果处理,得到多幅处理后的背景图片。

本实施例中,对提取到的多幅初始背景图片进行模糊和暗淡处理。具体的,模糊处理可以包括:通过对初始背景图片进行高斯模糊处理,或者对初始背景图片进行放大模糊处理。暗淡处理可以包括:将初始背景图片的亮度调低,或者将初始背景图片的颜色进行浅色处理。

s104、提取多幅处理后的背景图片的主颜色,对相邻的tab页所对应的主颜色进行颜色调和,得到主颜色统一的调和背景图片。

本实施例中,可选地,将多幅处理后的背景图片划分为多个显示单元;记录每个显示单元中的颜色;将属于同一色系的颜色归为一类颜色,统计每类颜色所占有的显示单元数量;将显示单元数量占有最多的颜色作为该处理后的背景图片的主颜色。

本实施例中,可选地,对所述相邻的tab页所对应的主颜色进行分类。当相邻的tab页所对应的主颜色属于同一色系时,选择其中任一主颜色作为调和背景图片的颜色。具体的,以图2所示的tab页样式应用界面为例,假设第一tab页的主颜色为黄色、第二tab页的主颜色为橘黄色,第三tab页的主颜色为土黄色,则确定第一tab页、第二tab页、第三tab页的主颜色为同一色系,选择第一tab页、第二tab页、第三tab页中任何一个主颜色作为调和背景图片的颜色。

当所述相邻的tab页所对应的主颜色属于不同色系时,计算每种主颜色的灰度值,可以通过如下计算公式计算每种主颜色的灰度值:

grayi=ri*0.299+gi*0.578+bi*0.114;

式中:grayi为第i种主颜色的灰度值,ri为第i种主颜色的红颜色值,gi为第i种主颜色的绿颜色值,bi为第i种主颜色的蓝颜色值,其中i为大于等于2且小于等于n的整数,n为相邻的tab页的总数。

计算所有相邻的tab页主颜色的灰度值的平均值。当灰度值的平均值大于0且小于等于0.5时,将调和背景图片的颜色设置为白色。当灰度值的平均值大于0.5且小于等于1时,将调和背景图片的颜色设置为黑色。

s105、将调和背景图片作为相邻的tab页的工具栏背景图片和相邻的tab页的界面背景图片。

本实施例中,将调和背景图片作为相邻的tab页的工具栏背景图片和相邻的tab页的界面背景图片。相邻的tab页的工具栏背景和相邻的tab页的界面背景的颜色为经过调和统一的主颜色。具体的,在当前应用程序界面中存在不同色系的相邻的tab页时,根据灰度值来设置相邻的tab页的工具栏背景和相邻的tab页的界面背景的颜色为黑色或者白色。在当前应用程序界面中所有相邻的tab页均为同一色系时,选取任意一个tab页的主颜色作为调和背景图片的颜色,从而保证相邻的tab页的界面背景连接处连续。

可选地,在本实施例的基础上,还可以将当前应用程序的状态栏和背景颜色透明化。将调和背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景颜色。

本实施例,通过在应用程序界面出现相邻tab页时,对相邻tab页的背景图片的颜色进行调和处理,解决了相邻tab页的背景连接处不连续的问题,提升了应用界面的背景沉浸式效果。

图3为本发明实施例二提供的tab页样式应用界面的背景显示方法的流程图,如图3所示,本实施例的方法可以包括:

s201、检测当前应用程序界面中是否存在多个标签tab页。

s202、当只有一个tab页时,提取tab页当前显示的图片,得到初始背景图片。

本实施例中,步骤s201、s202的具体实现过程参见图2所示方法中的相关描述,此处不再赘述。

s203、将当前应用程序的状态栏和背景颜色透明化。

本实施例中,为了能够将应用程序的状态栏和背景颜色替换为处理后的背景图片,首先需要将当前应用程序的状态栏和背景颜色透明化。具体的,可以通过调节前应用程序的状态栏和背景颜色的饱和度、亮度、对比度等来使得状态栏和背景颜色透明化。

s204、对初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片。

s205、将处理后的背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景图片。

本实施例中,步骤s204、s205的具体实现过程参见图1所示方法中的相关描述,此处不再赘述。

本实施例,当检测到当前应用程序界面中只有一个tab页时,提取tab页当前显示的图片,得到初始背景图片;并将当前应用程序的状态栏和背景颜色透明化,将经过模糊和暗淡处理后的初始背景图片作为当前应用程序的状态栏和背景图片。提升了应用界面的背景沉浸式效果。

图4为本发明实施例三提供的tab页样式应用界面的背景显示方法的流程图,如图4所示,本实施例的方法可以包括:

s301、检测当前应用程序界面中是否存在多个标签tab页。

s302、当只有一个tab页时,提取tab页当前显示的图片,得到初始背景图片。

s303、对初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片。

s304、将处理后的背景图片作为tab页的工具栏背景图片和tab页的界面背景图片。

本实施例中,步骤s301-s304的具体实现过程参见图1所示方法中的相关描述,此处不再赘述。

本实施例,当检测到当前应用程序界面中只有一个tab页时,提取tab页当前显示的图片,得到初始背景图片;将经过模糊和暗淡处理后的初始背景图片作为tab页的工具栏背景图片和tab页的界面背景图片。提升了应用界面的背景沉浸式效果。

图5为本发明实施例一提供的tab页样式应用界面的背景显示装置的结构示意图,如图5所示,本实施例的装置可以包括:检测模块10,用于检测当前应用程序界面中是否存在多个标签tab页。第一提取模块20,用于在存在相邻的tab页时,分别提取每个tab页中当前显示的图片,得到多幅初始背景图片。处理模块30,用于对多幅初始背景图片进行模糊和暗淡效果处理,得到多幅处理后的背景图片。第二提取模块40,用于提取多幅处理后的背景图片的主颜色,对相邻的tab页所对应的主颜色进行颜色调和,得到主颜色统一的调和背景图片。显示模块50,用于将调和背景图片作为相邻的tab页的工具栏背景图片和相邻的tab页的界面背景图片。

可选地,第一提取模块20,还用于在只有一个tab页时,提取tab页当前显示的图片,得到初始背景图片。处理模块30,还用于将当前应用程序的状态栏和背景颜色透明化,以及对所述初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片。显示模块50,还用于将处理后的背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景图片。

可选地,第一提取模块20,还用于在只有一个tab页时,提取tab页当前显示的图片,得到初始背景图片。处理模块30,还用于对初始背景图片进行模糊和暗淡效果处理,得到处理后的背景图片。显示模块50,还用于将处理后的背景图片作为tab页的工具栏背景图片和tab页的界面背景图片。

可选地,处理模块30,还用于将当前应用程序的状态栏和背景颜色透明化。显示模块50,还用于将调和背景图片作为当前应用程序的状态栏的背景图片和当前应用程序的界面背景颜色。

可选地,第二提取模块40,具体用于:将多幅处理后的背景图片划分为多个显示单元。记录每个显示单元中的颜色;将属于同一色系的颜色归为一类颜色,统计每类颜色所占有的显示单元数量。将显示单元数量占有最多的颜色作为所述处理后的背景图片的主颜色。

可选地,第二提取模块40,具体用于:对相邻的tab页所对应的主颜色进行分类。在相邻的tab页所对应的主颜色属于同一色系时,选择其中任一主颜色作为调和背景图片的颜色。在相邻的tab页所对应的主颜色属于不同色系时,计算每种主颜色的灰度值;计算所有相邻的tab页主颜色的灰度值的平均值。在灰度值的平均值大于0且小于等于0.5时,将调和背景图片的颜色统一为白色。在所述灰度值的平均值大于0.5且小于等于1时,将调和背景图片的颜色统一为黑色。

本实施例中的装置可以执行图1、图3、图4中任一项所示的方法中的技术方案,其具体实现过程和有益效果与上述方法类似,此处不再赘述。

此外,本申请实施例还提供一种计算机可读存储介质,计算机可读存储介质中存储有计算机执行指令,当用户设备的至少一个处理器执行该计算机执行指令时,用户设备执行上述各种可能的方法。

其中,计算机可读介质包括计算机存储介质和通信介质,其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。一种示例性的存储介质耦合至处理器,从而使处理器能够从该存储介质读取信息,且可向该存储介质写入信息。当然,存储介质也可以是处理器的组成部分。处理器和存储介质可以位于asic中。另外,该asic可以位于用户设备中。当然,处理器和存储介质也可以作为分立组件存在于通信设备中。

本领域普通技术人员可以理解:实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时,执行包括上述各方法实施例的步骤;而前述的存储介质包括:rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是:以上各实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述各实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1