CN107450904A - 标题栏的绘制方法和装置 - Google Patents

Abstract

本发明提供一种标题栏的绘制方法和装置，其中，标题栏的绘制方法包括：获取在APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置；根据元素的显示位置将每个元素分别添加到标题栏中预设的至少两个显示容器中的一个，至少两个显示容器沿标题栏从左至右的方向依次相邻排列且形成标题栏；根据至少两个显示容器绘制标题栏。本发明提供的标题栏的绘制方法，简化了GPU的绘制，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

Description

标题栏的绘制方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种标题栏的绘制方法和装置。

背景技术

随着互联网的发展，应用程序(Application，APP)的种类和数量越来越多。开发人员通过开发各种APP来满足用户的需求。APP的每个界面几乎都存在标题栏。标题栏可以简单明了的告诉用户当前界面的意图，标题栏对于提升用户体验极其重要。

目前，标题栏的显示通过include标签和可扩展标记语言(Extensible MarkupLanguage，XML)布局文件实现。include标签可以实现在一个布局中引用另一个布局，尤其适用于界面布局复杂、不同界面有共用布局的场景，例如APP的顶部栏布局、侧边栏布局、底部栏布局等等。对于一个APP，所有标题栏对应的布局样式均编写在一个XML文件中。include标签调用XML布局文件中标题栏设置的宽高、位置等参数，从而绘制标题栏，实现标题栏的显示。

但是，随着布局样式的增加，由于将APP的所有布局样式均编写在一个XML布局文件中，XML布局文件越来越复杂，相同位置的标题栏布局样式重叠在一起，导致图形处理器(Graphics Processing Unit，GPU)过渡绘制，同时也增加了开发人员的维护成本。

发明内容

本发明提供了一种标题栏的绘制方法和装置，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

本发明提供的标题栏的绘制方法，包括：

获取在应用程序APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置；

根据所述元素的显示位置将每个元素分别添加到所述标题栏中预设的至少两个显示容器中的一个，所述至少两个显示容器沿所述标题栏从左至右的方向依次相邻排列且形成所述标题栏；

根据所述至少两个显示容器绘制标题栏

本发明提供的标题栏的绘制装置，包括：

获取模块，用于获取在应用程序APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置；

配置模块，用于根据所述元素的显示位置将每个元素分别添加到所述标题栏中预设的至少两个显示容器中的一个，所述至少两个显示容器沿所述标题栏从左至右的方向依次相邻排列且形成所述标题栏；

绘制模块，用于根据所述至少两个显示容器绘制标题栏。

本发明提供了一种标题栏的绘制方法和装置，摒弃使用include标签和XML布局文件相结合的方式绘制标题栏，通过动态配置标题栏中待显示的元素，根据元素的显示位置将元素添加到标题栏中预设的至少两个显示容器中，根据至少两个显示容器可以绘制标题栏。简化了GPU的绘制，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

附图说明

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

图1为本发明实施例一提供的标题栏的绘制方法的流程图；

图2A为本发明实施例一提供的显示容器的一种结构示意图；

图2B为本发明实施例一提供的显示容器的另一种结构示意图；

图3为本发明实施例一提供的标题栏的结构示意图；

图4为本发明实施例一提供的标题栏的绘制装置的结构示意图。

具体实施方式

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

图1为本发明实施例一提供的标题栏的绘制方法的流程图。本实施例提供的标题栏的绘制方法，执行主体可以为标题栏的绘制装置，标题栏的绘制装置可以为软件程序。如图1所示，本实施例提供的标题栏的绘制方法，可以包括：

S101、获取在APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置。

其中，元素可以包括下列中的至少一种：文字、符号、图标。其中，文字可以用于显示APP界面的显示意图，符号或者图标可以用于指示用户操作。

具体的，一个APP可以包括多个界面，每个界面中可以包括标题栏，标题栏的数目可以不止一个。标题栏可以固定显示在APP界面中的特定位置，例如APP界面的顶端或者底端。或者，标题栏可以隐藏显示在APP界面中的特定位置，例如隐藏显示在APP界面的侧边。用户可以通过对APP界面进行操作从而使得标题栏隐藏或者显示。标题栏中显示有元素(也称为view)，元素的数目至少为一个。通过标题栏中的元素可以向用户显示APP界面的意图，或者为用户提供清晰的操作指示。在本步骤中，获取在APP界面的标题栏中待显示的元素是什么，以及每个元素的显示位置。

需要说明的是，本实施例对于元素的具体实现方式不做限定，可以是现有的具有特定显示含义的文字、符号、图标，或者是自定义的具有显示含义的文字、符号、图标。例如：元素可以为文字“新闻”，指示了APP界面用于显示新闻。元素可以为符号“←”，现有的显示含义可以为“返回操作”。元素可以为符号“？”，现有的显示含义可以为“帮助操作”。元素可以为符号“×”，现有的显示含义可以为“关闭操作”。元素可以为图标现有的显示含义可以为“设置操作”。等等。

需要说明的是，本实施例对于元素显示位置的实现方式不做限定。可选的，元素的显示位置可以包括用于确定元素显示位置的坐标值。例如：元素为文字“新闻”，则元素的显示位置可以包括四个坐标值(1,2)、(3,2)、(1,3)、(3,3)，该四个坐标值可以确定元素“新闻”的显示区域。可选的，元素的显示位置可以包括元素的起始位置距离标题栏左侧边界的距离或者像素值。

S102、根据元素的显示位置将每个元素分别添加到标题栏中预设的至少两个显示容器中的一个。

其中，至少两个显示容器沿标题栏从左至右的方向依次相邻排列且形成标题栏。

需要说明，本实施例对于显示容器的数目不做限定，根据需要进行设置。可选的，作为一种示例，至少两个显示容器可以包括：沿标题栏从左至右依次排列的左侧容器、中间容器和右侧容器。

在本实施例以下各步骤中，均以左侧容器、中间容器和右侧容器三个显示容器为例进行示例性说明。

具体的，标题栏的显示区域被预先划分为三个显示容器，按照标题栏从左至右的方向依次为左侧容器、中间容器和右侧容器。每个显示容器均具有显示边界。左侧容器、中间容器和右侧容器的显示边界相邻且共同形成标题栏。在本步骤中，当确定了标题栏中待显示的元素和元素的显示位置之后，对于每个待显示的元素，可以根据元素的显示位置将元素添加到左侧容器、中间容器和右侧容器中的一个。

需要说明的是，本实施例对于左侧容器、中间容器和右侧容器的显示大小(容量)不做特别限定，可以根据需要进行设置。可选的，作为一种示例，图2A为本发明实施例一提供的显示容器的一种结构示意图。如图2A所示，左侧容器11、中间容器12和右侧容器13的显示大小相同。可选的，作为另一种示例，图2B为本发明实施例一提供的显示容器的另一种结构示意图。如图2B所示，左侧容器11和右侧容器13的显示大小相同且小于中间容器12的显示大小，中间容器12的显示位置居中，左侧容器11和右侧容器13相对于中间容器12对称分布。

需要说明的是，在本实施例中，左侧容器、中间容器和右侧容器的显示边界可以显示在标题栏中，也可以不显示在标题栏中。当左侧容器、中间容器和右侧容器的显示边界显示在标题栏中时，显示边界可以全部显示，也可以部分显示。作为示例，如图2A所示，左侧容器11、中间容器12和右侧容器13的显示边界(虚线所示)可以不显示在标题栏中。如图2B所示，左侧容器11、中间容器12和右侧容器13的显示边界可以部分(竖直实线所示)显示在标题栏中。

需要说明的是，本实施例对于元素添加在左侧容器、中间容器和右侧容器中的显示位置不做特别限定，可以根据需要在每个显示容器中重新设置。

需要说明的是，本实施例中的显示容器可以按照现有技术中的方法通过软件程序实现。在不同的编程语言中可以通过不同的软件程序实现。一般来说显示容器可以通过容器实现，容器被定义为：在数据存储上的一种对象类型，可以持有其它对象或指向其它对像的指针。并且，容器可以自行扩展。容器的优势在于，不需要预先定义存储多少对象，只要创建一个容器对象，并合理的调用其所提供的方法，所有的处理细节将由容器自身完成。

可选的，在本实施例中的显示容器可以为线性容器，线性容器基于线性结构。

S103、根据至少两个显示容器绘制标题栏。

具体的，由于左侧容器、中间容器和右侧容器沿标题栏从左至右的方向依次相邻排列且形成了标题栏，因此，当标题栏中自定义的待显示元素被添加到左侧容器、中间容器和右侧容器中后，可以根据左侧容器、中间容器和右侧容器绘制标题栏，从而实现标题栏的绘制及显示。

可见，本实施例提供的标题栏的绘制方法，摒弃使用include标签和XML布局文件相结合的方式绘制标题栏，而是可以自定义动态配置标题栏中待显示的元素，根据元素的显示位置将元素添加到标题栏中预设的不同的显示容器中，通过显示容器的边界位置就可以绘制标题栏。由于不需要将APP的布局样式编写在一个XML布局文件中，因此不会导致相同位置的标题栏布局样式在XML布局文件中重叠在一起，简化了GPU的绘制，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

下面通过图3所示示例，具体说明本实施例提供的标题栏的绘制方法。图3为本发明实施例一提供的标题栏的结构示意图。

如图3所示，APP界面21用于显示新闻。APP界面21的标题栏22中待显示的元素包括：文字“新闻”、符号“←”和图标标题栏22中预设有左侧容器23、中间容器24和右侧容器25。左侧容器23、中间容器24和右侧容器25的显示边界部分显示在标题栏22中。根据元素的显示位置，将符号“←”添加到左侧容器23中且居中显示，将文字“新闻”添加到中间容器24中且靠左显示，将图标添加到右侧容器25中且居中显示。根据左侧容器23、中间容器24和右侧容器25，可以绘制标题栏22，实现标题栏22的显示。

可选的，本实施例提供的标题栏的绘制方法，在S103、根据至少两个显示容器绘制标题栏之前，还可以包括：

根据至少两个显示容器中分别包含的元素以及元素的显示位置，调整至少两个显示容器的显示边界。

具体的，根据元素的显示位置将元素添加到左侧容器、中间容器或者右侧容器中之后，左侧容器、中间容器和右侧容器中包含的元素数目和每个元素的显示长度都是不同的。如果显示容器中包含的元素数目少、元素的显示长度短，则显示容器的显示大小可以满足显示需求。如果显示容器中包含的元素数目多、元素的显示长度长，则显示容器的显示大小可能无法满足显示需求。在本步骤中，根据左侧容器、中间容器和右侧容器中分别包含的元素以及元素的显示位置，可以调整左侧容器、中间容器和右侧容器的显示边界，从而使得每个显示容器都满足显示需求，提升了标题栏绘制和显示的灵活性。

可选的，本实施例提供的标题栏的绘制方法，还可以包括：

获取在APP界面的标题栏中待增加的元素和待增加的元素的显示位置。

根据待增加的元素的显示位置将待增加的元素添加到至少两个显示容器中的一个。

根据变化后的至少两个显示容器，重新绘制标题栏。

具体的，当标题栏中待显示的元素增加时，对于每个待增加的元素，根据待增加的元素的显示位置将待增加的元素添加到左侧容器、中间容器和右侧容器中的一个。此时，左侧容器、中间容器或者右侧容器中元素的数目和显示位置将发生变化。根据变化后的左侧容器、中间容器和右侧容器，可以重新绘制标题栏，实现当标题栏中显示元素增加时的标题栏显示。由于摒弃使用include标签和XML布局文件相结合的方式绘制标题栏，不需要在XML布局文件中增加新的布局样式，仅是左侧容器、中间容器和右侧容器中元素的数目和显示位置发生变化，因此简化了GPU的绘制，在标题栏中元素增加的场景下降低了标题栏修改的难度，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

可选的，在根据待增加的元素的显示位置将待增加的元素添加到至少两个显示容器中的一个之后，且在根据变化后的至少两个显示容器，重新绘制标题栏之前，本实施例提供的标题栏的绘制方法，还可以包括：

根据至少两个显示容器中分别包含的元素以及元素的显示位置，调整至少两个显示容器的显示边界。

可选的，本实施例提供的标题栏的绘制方法，还可以包括：

获取在APP界面的标题栏中待删除的元素以及待删除的元素所在的显示容器。

将待删除的元素移出显示容器。

根据变化后的至少两个显示容器，重新绘制标题栏。

具体的，当需要删除标题栏中待显示的元素时，对于每个待删除的元素，将待删除的元素移出相应的显示容器。此时，左侧容器、中间容器或者右侧容器中元素的数目将发生变化。根据变化后的左侧容器、中间容器和右侧容器，可以重新绘制标题栏，实现当标题栏中显示元素删除时的标题栏显示。由于摒弃使用include标签和XML布局文件相结合的方式绘制标题栏，不需要在XML布局文件中删除新的布局样式，仅是左侧容器、中间容器和右侧容器中元素的数目发生变化，因此简化了GPU的绘制，在标题栏中元素减少的场景下降低了标题栏修改的难度，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

可选的，在将待删除的元素移出显示容器之后，且在根据变化后的至少两个显示容器，重新绘制标题栏之前，本实施例提供的标题栏的绘制方法，还可以包括：

根据至少两个显示容器中分别包含的元素以及元素的显示位置，调整至少两个显示容器的显示边界。

可选的，本实施例提供的标题栏的绘制方法，还可以包括：

获取在APP界面的标题栏中待修改的元素以及待修改的元素所在的显示容器。

根据待修改的元素所在的显示容器对待修改的元素进行修改。

根据变化后的至少两个显示容器，重新绘制标题栏。

具体的，当标题栏中的显示元素需要修改时，对于每个待修改的元素，可以根据待修改的元素所在的显示容器对待修改的元素进行修改。其中，修改可以包括元素的位置需改或者元素本身的修改。此时，左侧容器、中间容器或者右侧容器中的元素将发生变化。根据变化后的左侧容器、中间容器和右侧容器，可以重新绘制标题栏，实现当标题栏中显示元素修改时的标题栏显示。由于摒弃使用include标签和XML布局文件相结合的方式绘制标题栏，不需要在XML布局文件中修改新的布局样式，仅是左侧容器、中间容器和右侧容器中的元素发生变化，因此简化了GPU的绘制，在标题栏中元素修改的场景下降低了标题栏修改的难度，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

可选的，在根据变化后的至少两个显示容器，重新绘制标题栏之前，本实施例提供的标题栏的绘制方法，还可以包括：

根据至少两个显示容器中分别包含的元素以及元素的显示位置，调整至少两个显示容器的显示边界。

本实施例提供了一种标题栏的绘制方法，可以基于可动态配置的通用标题栏的方式，可以动态的创建、修改或删除显示到标题栏中的各元素，包括：获取在APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置，根据元素的显示位置将每个元素分别添加到标题栏中预设的至少两个显示容器中的一个，根据至少两个显示容器绘制标题栏。本实施例提供的标题栏的绘制方法，摒弃使用include标签和XML布局文件相结合的方式绘制标题栏，简化了GPU的绘制，提升了标题栏的绘制效率，降低了开发人员的开发和维护成本。

图4为本发明实施例一提供的标题栏的绘制装置的结构示意图。本实施例提供的标题栏的绘制装置，可以为软件程序，用于执行图1～图3所示实施例中的标题栏的绘制方法。本实施例提供的标题栏的绘制装置，可以包括：

获取模块31，用于获取在APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置。

配置模块32，用于根据多个元素的显示位置将每个元素分别添加到标题栏中预设的至少两个显示容器中的一个，至少两个显示容器沿标题栏从左至右的方向依次相邻排列且形成标题栏。

绘制模块33，用于根据至少两个显示容器绘制标题栏。

可选的，配置模块32还用于：

根据至少两个显示容器中分别包含的元素以及元素的显示位置，调整至少两个显示容器的显示边界。

可选的，获取模块31还用于：

获取在APP界面的标题栏中待增加的元素和待增加的元素的显示位置。

配置模块32还用于，根据待增加的元素的显示位置将待增加的元素添加到至少两个显示容器中的一个。

绘制模块33还用于，根据变化后的至少两个显示容器，重新绘制标题栏。

可选的，获取模块31还用于：

获取在APP界面的标题栏中待删除的元素以及待删除的元素所在的显示容器。

配置模块32还用于，将待删除的元素移出显示容器。

绘制模块33还用于，根据变化后的至少两个显示容器，重新绘制标题栏。

可选的，获取模块31还用于：

获取在APP界面的标题栏中待修改的元素以及待修改的元素所在的显示容器。

配置模块32还用于，根据待修改的元素所在的显示容器对待修改的元素进行修改。

绘制模块33还用于，根据变化后的至少两个显示容器，重新绘制标题栏。

可选的，元素包括下列中的至少一种：文字、符号、图标。

可选的，至少两个显示容器包括：沿标题栏从左至右依次排列的左侧容器、中间容器和右侧容器。

可选的，至少两个显示容器均为线性容器。

可选的，APP界面中包括一个或多个标题栏，标题栏固定显示在APP界面中的特定位置或隐藏显示在APP界面中的特定位置。

本实施例提供的标题栏的绘制装置，用于执行图1～图3所示实施例中的标题栏的绘制方法，其技术原理和技术效果类似，此处不再赘述。

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

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

Claims (10)

1.一种标题栏的绘制方法，其特征在于，包括：

获取在应用程序APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置；

根据所述元素的显示位置将每个元素分别添加到所述标题栏中预设的至少两个显示容器中的一个，所述至少两个显示容器沿所述标题栏从左至右的方向依次相邻排列且形成所述标题栏；

根据所述至少两个显示容器绘制标题栏。

2.根据权利要求1所述的方法，其特征在于，在所述根据所述至少两个显示容器绘制标题栏之前，所述方法还包括：

根据所述至少两个显示容器中分别包含的元素以及元素的显示位置，调整所述至少两个显示容器的显示边界。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取在所述APP界面的标题栏中待增加的元素和所述待增加的元素的显示位置；

根据所述待增加的元素的显示位置将所述待增加的元素添加到所述至少两个显示容器中的一个；

根据变化后的所述至少两个显示容器，重新绘制标题栏。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取在所述APP界面的标题栏中待删除的元素以及所述待删除的元素所在的显示容器；

将所述待删除的元素移出所述显示容器；

根据变化后的所述至少两个显示容器，重新绘制标题栏。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取在所述APP界面的标题栏中待修改的元素以及所述待修改的元素所在的显示容器；

根据所述待修改的元素所在的显示容器对所述待修改的元素进行修改；

根据变化后的所述至少两个显示容器，重新绘制标题栏。

6.根据权利要求1至5任一项所述的方法，其特征在于，所述元素包括下列中的至少一种：文字、符号、图标。

7.根据权利要求1至5任一项所述的方法，其特征在于，所述至少两个显示容器包括：沿所述标题栏从左至右依次排列的左侧容器、中间容器和右侧容器。

8.根据权利要求1至5任一项所述的方法，其特征在于，所述至少两个显示容器均为线性容器。

9.根据权利要求1至5任一项所述的方法，其特征在于，所述APP界面中包括一个或多个标题栏，所述标题栏固定显示在所述APP界面中的特定位置或隐藏显示在所述APP界面中的特定位置。

10.一种标题栏的绘制装置，其特征在于，包括：

获取模块，用于获取在应用程序APP界面的标题栏中待显示的一个或多个元素以及每个元素的显示位置；

配置模块，用于根据所述元素的显示位置将每个元素分别添加到所述标题栏中预设的至少两个显示容器中的一个，所述至少两个显示容器沿所述标题栏从左至右的方向依次相邻排列且形成所述标题栏；

绘制模块，用于根据所述至少两个显示容器绘制标题栏。