CN115729661A - 基于元素颜色的页面皮肤生成方法及存储介质 - Google Patents

Abstract

本发明公开了一种基于元素颜色的页面皮肤生成方法及存储介质，获取页面中的元素，所述元素的类型包括按钮、文字、单选框和复选框中的至少一种，并分别对各元素进行等级划分；预设配色表中的字段，并分别根据各元素的类型和等级，配置各元素对应的配色表中的各字段对应的颜色值；分别根据各元素对应的配色表，渲染各元素，得到元素库；从所述元素库中选取页面需要的渲染后的元素，生成页面。本发明可提高页面皮肤制作效率，且保证兼容性。

Description

基于元素颜色的页面皮肤生成方法及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于元素颜色的页面皮肤生成方法及存储介质。

背景技术

应用程序或整个系统的“换肤”功能，是指在应用程序或系统不升级的情况下，通过下载皮肤包，让应用程序或系统重新加载，实现程序外观的变化。在卡拉ok场所里，由于各个包厢的装修风格迥异，不同包厢的点歌系统需要使用不同颜色风格的皮肤，才能比较好地适配包厢装修，因此对点播系统“换肤”的需求更强烈。同时，在一些特殊的节日，应用程序或系统需要更换跟节日适配的皮肤，需要美工专门设计方案。例如，在圣诞节或中秋节时，应用程序或系统需要更换与该节日适配的皮肤。

传统的“换肤”技术实现方案，需要针对应用程序或系统操作页面里所有可见元素，包括按钮、文字等，重新制作图片。现有应用程序或系统一般是首页设计比较绚丽，二级以上的界面基本上都是由按钮、文字等元素组成。当整个应用程序或系统更换皮肤时，首页需要花费大量时间进行更换图片、重新排布、重新设计颜色等工作，二级以上的页面则一般不变换内容，但需要对按钮、文字等元素的颜色进行调整，从而与首页的风格相一致。

传统换肤方式有两个缺点：1、当二级以上的界面应用功能复杂，页面、弹框很多的时候，美工作图的工作量会特别大。2、当应用功能更新时，比如新增一个二级以上的页面，美工需要针对这个页面重新制作图片，并针对当前程序版本生成新的皮肤包，历史制作的皮肤包无法直接应用到新的页面。

发明内容

本发明所要解决的技术问题是：提供一种基于元素颜色的页面皮肤生成方法及存储介质，可提高页面皮肤制作效率，且保证兼容性。

为了解决上述技术问题，本发明采用的技术方案为：一种基于元素颜色的页面皮肤生成方法，包括：

获取页面中的元素，所述元素的类型包括按钮、文字、单选框和复选框中的至少一种，并分别对各元素进行等级划分；

预设配色表中的字段，并分别根据各元素的类型和等级，配置各元素对应的配色表中的各字段对应的颜色值；

分别根据各元素对应的配色表，渲染各元素，得到元素库；

从所述元素库中选取页面需要的渲染后的元素，生成页面。

本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的方法的步骤。

本发明的有益效果在于：通过为页面中的元素配置配色表，并通过修改各元素对应的配色表中各字段对应的颜色值，即可快速制作出不同颜色的元素，通过将页面需要的元素进行组合，即可生成需要的页面。本发明特别适合应用在除首页以外的其他页面的皮肤设计，后续对于应用程序中的大部分页面，仅需配置页面中的元素的颜色，即可构建出新的皮肤包，无需重新对每个元素进行切图制作，大幅加快了皮肤包的制作速度，同时，在应用程序中开发新页面时，可以直接使用历史皮肤包，无需重新制作皮肤包，保证了前后兼容性。

本发明解决了传统换肤方案中，美工工作量大的问题，让美工制作皮肤包更高效，同时制作的皮肤包还可以面向未来的产品更新，产品功能迭代时，皮肤包不需要更新也能适配。

附图说明

图1为本发明的一种基于元素颜色的页面皮肤生成方法的流程图；

图2为本发明实施例一的方法流程图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图详予说明。

请参阅图1，一种基于元素颜色的页面皮肤生成方法，包括：

获取页面中的元素，所述元素的类型包括按钮、文字、单选框和复选框中的至少一种，并分别对各元素进行等级划分；

预设配色表中的字段，并分别根据各元素的类型和等级，配置各元素对应的配色表中的各字段对应的颜色值；

分别根据各元素对应的配色表，渲染各元素，得到元素库；

从所述元素库中选取页面需要的渲染后的元素，生成页面。

从上述描述可知，本发明的有益效果在于：解决了传统换肤方案中，美工工作量大的问题，让美工制作皮肤包更高效，同时制作的皮肤包还可以面向未来的产品更新，产品功能迭代时，皮肤包不需要更新也能适配。

进一步地，所述配色表中的字段包括默认状态颜色字段和点击状态颜色字段；

所述分别根据各元素对应的配色表，渲染各元素，得到元素库具体为：

根据一元素对应的配色表中的默认状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的图层；

根据一元素对应的配色表中的点击状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的图层；

将渲染后的所述一元素对应默认状态的图层和对应点击状态的图层加入元素库。

由上述描述可知，通过分别为各元素渲染两种状态的图层，使得后续元素被用户点击或选中时，可通过切换不同状态的图层，实现元素选中效果的展示。同时，通过对图层的非透明区域进行渲染，可实现带有如光晕等特殊效果的元素。

进一步地，所述元素的图层包括层叠的背景图层、前景图层和边框图层；

所述默认状态颜色字段包括默认背景色字段、默认前景色字段和默认边框色字段，所述点击状态颜色字段包括点击背景色字段、点击前景色字段和点击边框色字段。

由上述描述可知，一个元素的颜色可由其背景颜色、前景颜色和边框颜色构成，可提高元素的颜色展示效果。

进一步地，所述根据一元素对应的配色表中的默认状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的图层具体为：

根据一元素对应的配色表中的默认背景色字段对应的颜色值，修改所述一元素的背景图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的背景图层；

根据一元素对应的配色表中的默认前景色字段对应的颜色值，修改所述一元素的前景图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的前景图层；

根据一元素对应的配色表中的默认边框色字段对应的颜色值，修改所述一元素的边框图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的边框图层。

进一步地，所述根据一元素对应的配色表中的点击状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的图层具体为：

根据一元素对应的配色表中的点击背景色字段对应的颜色值，修改所述一元素的背景图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的背景图层；

根据一元素对应的配色表中的点击前景色字段对应的颜色值，修改所述一元素的前景图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的前景图层；

根据一元素对应的配色表中的点击边框色字段对应的颜色值，修改所述一元素的边框图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的边框图层。

进一步地，所述从所述元素库中选取页面需要的渲染后的元素，生成页面具体为：

从所述元素库中选取页面需要的元素，并根据选取的各元素对应默认状态的图层，生成页面。

进一步地，所述从所述元素库中选取页面需要的渲染后的元素，生成页面之后，进一步包括：

检测点击事件，当检测到页面中的一元素被点击，则将所述一元素对应默认状态的图层替换为对应点击状态的图层；

当点击结束后，将所述一元素对应点击状态的图层替换为对应默认状态的图层。

由上述描述可知，一般情况下，元素均显示对应默认状态的图层，仅当某个元素被用户选中或点击时，显示该元素对应点击状态的图层，从而可突出显示被选中的元素。

进一步地，所述从所述元素库中选取页面需要的渲染后的元素，生成页面之后，进一步包括：

当需要对页面进行换肤时，修改所述页面中的各元素对应的配色表中各字段对应的颜色值，并根据修改后的各元素对应的配色表，重新渲染各元素；

根据重新渲染后的各元素，生成换肤后的页面。

由上述描述可知，仅需配置页面中的元素的颜色，即可构建出新的皮肤包，无需重新对每个元素进行切图制作，大幅加快了皮肤包的制作速度。

进一步地，所述等级包括重要、次重要和普通。

本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的方法。

实施例一

请参照图2，本发明的实施例一为：一种基于元素颜色的页面皮肤生成方法，适用于除首页以外的其他页面。

如图2所示，包括如下步骤：

S1：获取页面中的元素，并分别对各元素进行等级划分。

其中，页面中的元素即页面中的控件，基于控件的类型划分元素的类型。

本实施例中，元素的类型包括但不限于按钮、文字、单选框和复选框，等级包括重要、次重要和普通。例如，对于按钮，可以分为重要按钮、次重要按钮和普通按钮。

当应用于具体场景时，例如应用于点歌页面时，可以将“返回”键作为重要按钮，将歌曲列表的翻页键作为普通按钮，将歌曲信息中的歌曲名称作为主要文字，将歌曲信息中的歌手和评分作为次重要文字，等等。

S2：预设配色表中的字段，并分别根据各元素的类型和等级，配置各元素对应的配色表中的各字段对应的颜色值。

本实施例中，配色表中的字段包括默认状态颜色字段和点击状态颜色字段。

进一步地，每个元素的图层至少包括背景图层、前景图层和边框图层，这三个图层层叠设置。对应地，配色表中的默认状态颜色字段包括默认背景色字段、默认前景色字段和默认边框色字段，点击状态颜色字段包括点击背景色字段、点击前景色字段和点击边框色字段。

也就是说，每个元素都分别对应一张配色表，并且每个元素的配色表中均包含默认背景色字段、默认前景色字段、默认边框色字段、点击背景色字段、点击前景色字段和点击边框色字段这六个字段。

然后根据各元素的类型和等级，分别为各元素对应的配色表中的各字段设置对应的颜色值。例如，对于普通按钮，则可将其对应的配色表中的各字段的对应的颜色值设置为蓝色或与蓝色相似的颜色；对于次重要按钮，则可将其对应的配色表中的各字段的对应的颜色值设置为黄色或与黄色相似的颜色；对于重要按钮，则可将其对应的配色表中的各字段的对应的颜色值设置为红色或与红色相似的颜色。

本实施例中，同一类型且同一等级的元素对应的配色表中的颜色值相同。

S3：分别根据各元素对应的配色表，渲染各元素，得到元素库。

具体地，根据一元素对应的配色表中的默认状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的图层；即分别根据一元素对应的配色表中的默认背景色字段、默认前景色字段和默认边框色字段对应的颜色值，修改所述一元素的背景图层、前景图层和边框图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的背景图层、前景图层和边框图层。

根据一元素对应的配色表中的点击状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的图层；即分别根据一元素对应的配色表中的点击背景色字段、点击前景色字段和点击边框色字段对应的颜色值，修改所述一元素的背景图层、前景图层和边框图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的背景图层、前景图层和边框图层。

最后将渲染后的所述一元素对应默认状态的图层和对应点击状态的图层加入元素库。

也就是说，对于每个元素中的每个图层，在元素库中均存在默认状态和点击状态两种状态下的图层。

进一步地，本实施例中，基于安卓原生控件和谷歌的图片染色技术tint(该技术可以直接修改图层中的像素点的像素值，并且不改变像素点的透明度值)，结合配色表中的颜色值，来渲染每个元素。渲染时，对元素的各图层的整个图层的非透明区域进行渲染。例如，对于按钮，改变背景色的常规做法是使用原生“TextView”设置具体颜色值，这会使得按钮背景的整片矩形(或正方形，或圆形)区域都变成纯色，而采用图片染色技术tint，则可以只改变非透明区域，保留背景光晕效果。并且，当元素形状不为安卓原生控件的矩形、正方形、圆形等规矩的形状时，也可以实现对异形元素的换色。

S4：从所述元素库中选取页面需要的渲染后的元素，生成页面。

即从所述元素库中选取页面需要的元素，并根据选取的各元素对应默认状态的图层，生成页面。其中，同一元素对应默认状态的各图层叠加显示。

S5：检测点击事件，判断页面中是否有元素被点击，若是，则执行步骤S6。

S6：将当前被点击的元素对应默认状态的图层替换为对应点击状态的图层。

即当用户选中某个元素时，通过将该元素的各图层分别从对应默认状态的图层替换为对应点击状态的图层，实现元素从默认状态到选中状态(即点击状态)的转换。

S7：判断点击事件是否结束，若是，则执行步骤S8。

S8：将结束点击的元素对应点击状态的图层替换为对应默认状态的图层。

即用户放开之前选中某个元素时，通过将该元素的各图层分别从对应点击状态的图层替换为对应默认状态的图层，实现元素从选中状态到默认状态的转换。

进一步地，当需要对页面进行换肤时，修改所述页面中的各元素对应的配色表中各字段对应的颜色值，并根据修改后的各元素对应的配色表，重新渲染各元素；根据重新渲染后的各元素，生成换肤后的页面。

也就是说，后续仅需修改页面中各元素对应的配色表中的颜色值，重新渲染得到不同颜色的元素，并将重新渲染的元素应用到页面中，即可得到不同皮肤的页面。

本实施例特别适合应用在二级以上页面的皮肤设计，后续对于应用程序中的大部分页面，仅需配置页面中的元素的颜色，即可构建出新的皮肤包，无需重新对每个元素进行切图制作，大幅加快了皮肤包的制作速度，同时，在应用程序中开发新页面时，可以直接使用历史皮肤包，无需重新制作皮肤包，保证了前后兼容性。

实施例二

本实施例是对应上述实施例的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述实施例中基于元素颜色的页面皮肤生成方法的各个步骤，且能达到相同的技术效果，此处不再累述。

综上所述，本发明提供的一种基于元素颜色的页面皮肤生成方法及存储介质，通过为页面中的元素配置配色表，并通过修改各元素对应的配色表中各字段对应的颜色值，即可快速制作出不同颜色的元素，通过将页面需要的元素进行组合，即可生成需要的页面。本发明特别适合应用在除首页以外的其他页面的皮肤设计，后续对于应用程序中的大部分页面，仅需配置页面中的元素的颜色，即可构建出新的皮肤包，无需重新对每个元素进行切图制作，大幅加快了皮肤包的制作速度，同时，在应用程序中开发新页面时，可以直接使用历史皮肤包，无需重新制作皮肤包，保证了前后兼容性。

本发明解决了传统换肤方案中，美工工作量大的问题，让美工制作皮肤包更高效，同时制作的皮肤包还可以面向未来的产品更新，产品功能迭代时，皮肤包不需要更新也能适配。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种基于元素颜色的页面皮肤生成方法，其特征在于，包括：

获取页面中的元素，所述元素的类型包括按钮、文字、单选框和复选框中的至少一种，并分别对各元素进行等级划分；

预设配色表中的字段，并分别根据各元素的类型和等级，配置各元素对应的配色表中的各字段对应的颜色值；

分别根据各元素对应的配色表，渲染各元素，得到元素库；

从所述元素库中选取页面需要的渲染后的元素，生成页面。

2.根据权利要求1所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述配色表中的字段包括默认状态颜色字段和点击状态颜色字段；

所述分别根据各元素对应的配色表，渲染各元素，得到元素库具体为：

根据一元素对应的配色表中的默认状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的图层；

根据一元素对应的配色表中的点击状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的图层；

将渲染后的所述一元素对应默认状态的图层和对应点击状态的图层加入元素库。

3.根据权利要求2所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述元素的图层包括层叠的背景图层、前景图层和边框图层；

所述默认状态颜色字段包括默认背景色字段、默认前景色字段和默认边框色字段，所述点击状态颜色字段包括点击背景色字段、点击前景色字段和点击边框色字段。

4.根据权利要求3所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述根据一元素对应的配色表中的默认状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的图层具体为：

根据一元素对应的配色表中的默认背景色字段对应的颜色值，修改所述一元素的背景图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的背景图层；

根据一元素对应的配色表中的默认前景色字段对应的颜色值，修改所述一元素的前景图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的前景图层；

根据一元素对应的配色表中的默认边框色字段对应的颜色值，修改所述一元素的边框图层的非透明区域的像素值，得到渲染后的所述一元素对应默认状态的边框图层。

5.根据权利要求3所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述根据一元素对应的配色表中的点击状态颜色字段对应的颜色值，修改所述一元素的图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的图层具体为：

根据一元素对应的配色表中的点击背景色字段对应的颜色值，修改所述一元素的背景图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的背景图层；

根据一元素对应的配色表中的点击前景色字段对应的颜色值，修改所述一元素的前景图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的前景图层；

根据一元素对应的配色表中的点击边框色字段对应的颜色值，修改所述一元素的边框图层的非透明区域的像素值，得到渲染后的所述一元素对应点击状态的边框图层。

6.根据权利要求2所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述从所述元素库中选取页面需要的渲染后的元素，生成页面具体为：

从所述元素库中选取页面需要的元素，并根据选取的各元素对应默认状态的图层，生成页面。

7.根据权利要求6所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述从所述元素库中选取页面需要的渲染后的元素，生成页面之后，进一步包括：

检测点击事件，当检测到页面中的一元素被点击，则将所述一元素对应默认状态的图层替换为对应点击状态的图层；

当点击结束后，将所述一元素对应点击状态的图层替换为对应默认状态的图层。

8.根据权利要求1所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述从所述元素库中选取页面需要的渲染后的元素，生成页面之后，进一步包括：

当需要对页面进行换肤时，修改所述页面中的各元素对应的配色表中各字段对应的颜色值，并根据修改后的各元素对应的配色表，重新渲染各元素；

根据重新渲染后的各元素，生成换肤后的页面。

9.根据权利要求1-8任一项所述的基于元素颜色的页面皮肤生成方法，其特征在于，所述等级包括重要、次重要和普通。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-9任一项所述的方法。

Images