CN105975190B - 一种图形界面的处理方法、装置及系统 - Google Patents

Abstract

本发明公开了一种图形界面的处理方法、装置及系统，其中该方法包括:接收对图形界面进行处理的操作指令，该图形界面中界面组件包括第一功能控件、第二功能控件及内容视图；根据该操作指令，控制内容视图进行相应移动；调取内容视图与第一功能控件之间的对应关系；基于该对应关系与内容视图的移动，控制第一功能控件向第二功能控件移动，以使第一功能控件对第二功能控件进行覆盖。本发明实施例通过内容视图与第一功能控件之间的对应关系，在控制内容视图进行移动时，同时控制第一功能控件向第二功能控件移动，即将第一功能控件对第二功能控件进行覆盖，从而减少界面组件占用的屏幕空间，也就是减少对内容视图的遮挡，提高查阅视图内容的便利性。

Description

一种图形界面的处理方法、装置及系统

技术领域

本发明属于通信技术领域，尤其涉及一种图形界面的处理方法、装置及系统。

背景技术

随着计算机技术的发展，智能设备在日常生活中的使用越来越多，功能也越来越强大，很多智能设备也具备了丰富的图形界面。图形界面，也称为图形化界面或图形用户接口(GUI，Graphical User Interface)，指的是采用图形方式显示的计算机操作环境用户接口。相比于传统的命令行界面，图形界面对于用户来说更为简便。

目前，在移动终端应用(APP，Application)的图形界面设计中，往往需要适配不同屏幕的尺寸，同时随着APP功能越来越丰富，单个视图的界面组件也会越来越多，如在手机网页运行的图形界面中，包括有设置于手机屏幕最上端的功能标签栏、功能标签栏下的搜索栏，屏幕下方的功能导航栏等等界面组件，可以方便用户点击。但是由于单个视图的界面组件增多，就会相应的占用更多的屏幕空间，不便于用户查阅视图中的主要内容，尤其在内容较多时，需要较为频繁的操作才能查阅该部分内容，效率较低。

发明内容

本发明的目的在于提供一种图形界面的处理方法、装置及系统，旨在减少界面组件对屏幕空间的占用，提高查阅视图内容的便利性以及效率。

为解决上述技术问题，本发明实施例提供以下技术方案：

一种图形界面的处理方法，其中包括：

接收对图形界面进行处理的操作指令，所述图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；

根据所述操作指令，控制所述内容视图进行相应的移动；

调取所述内容视图与所述第一功能控件之间预设的对应关系；

基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖。

为解决上述技术问题，本发明实施例还提供以下技术方案：

一种图形界面的处理装置，其中包括：

接收单元，用于接收对图形界面进行处理的操作指令，所述图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；

第一控制单元，用于根据所述操作指令，控制所述内容视图进行相应的移动；

调取单元，用于调取所述内容视图与所述第一功能控件之间预设的对应关系；

第二控制单元，用于基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖。

另外，本发明实施例还提供一种图形界面的处理系统，其中包括本发明实施例所提供的任一种图形界面的处理装置。

相对于现有技术，本发明实施例，首先接收对图形界面进行处理的操作指令，其中图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；然后根据该操作指令，控制内容视图进行相应的移动，同时调取该内容视图与所述第一功能控件之间预设的对应关系，并基于该对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖；本发明实施例通过内容视图与第一功能控件之间预设的对应关系，在控制内容视图进行移动的时候，同时控制第一功能控件向所述第二功能控件移动，即将第一功能控件对第二功能控件进行覆盖，从而减少了界面组件占用的屏幕空间，也就是减少了对内容视图的遮挡，提高了查阅视图内容的便利性。

附图说明

下面结合附图，通过对本发明的具体实施方式详细描述，将使本发明的技术方案及其它有益效果显而易见。

图1a是本发明实施例提供的图形界面的处理方法的场景示意图；

图1b是本发明第一实施例提供的图形界面的处理方法的流程示意图；

图2a至图2i为本发明第二实施例提供的图形界面的处理方法中的图形界面示意图；

图3a为本发明第三实施例提供的图形界面的处理装置的结构示意图；

图3b为本发明第三实施例提供的图形界面的处理装置的另一结构示意图；

图4为本发明第五实施例提供的终端的结构示意图。

具体实施方式

请参照图式，其中相同的组件符号代表相同的组件，本发明的原理是以实施在一适当的运算环境中来举例说明。以下的说明是基于所例示的本发明具体实施例，其不应被视为限制本发明未在此详述的其它具体实施例。

在以下的说明中，本发明的具体实施例将参考由一部或多部计算机所执行的步骤及符号来说明，除非另有述明。因此，这些步骤及操作将有数次提到由计算机执行，本文所指的计算机执行包括了由代表了以一结构化型式中的数据的电子信号的计算机处理单元的操作。此操作转换该数据或将其维持在该计算机的内存系统中的位置处，其可重新配置或另外以本领域测试人员所熟知的方式来改变该计算机的运作。该数据所维持的数据结构为该内存的实体位置，其具有由该数据格式所定义的特定特性。但是，本发明原理以上述文字来说明，其并不代表为一种限制，本领域测试人员将可了解到以下所述的多种步骤及操作亦可实施在硬件当中。

本文所使用的术语「模块」可看做为在该运算系统上执行的软件对象。本文所述的不同组件、模块、引擎及服务可看做为在该运算系统上的实施对象。而本文所述的装置及方法优选的以软件的方式进行实施，当然也可在硬件上进行实施，均在本发明保护范围之内。

本发明实施例提供一种图形界面的处理方法、装置及系统。

其中，该图形界面的处理系统可以包括本发明实施例所提供的任一种图形界面的处理装置，该图形界面的处理装置具体可以集成在终端，比如手机、笔记型计算机、平板PC(Personal Computer)等。例如，以该图形界面的处理装置具体集成在终端中为例，参见图1a，该图为本发明实施例所提供的图形界面的处理方法的场景示意图，该图形界面的处理装置主要用于对图形界面进行处理，其中图形界面中的界面组件可以包括第一功能控件、第二功能控件以及内容视图等。

比如，在该图形界面的处理装置接收到对图形界面进行处理的操作指令时，控制内容视图进行移动，并且通过内容视图与第一功能控件之间预设的对应关系，在控制内容视图进行移动的时候，同时控制第一功能控件向第二功能控件移动，以使得该第一功能控件对第二功能控件进行覆盖。

此外，该图形界面的处理系统还可以包括其他的设备，比如服务器，主要用于设置并存储内容视图与第一功能控件之间的对应关系、第一功能控件的移动比例等等。

以下将分别进行详细说明。

第一实施例

在本实施例中，将从图形界面的处理装置的角度进行描述，该图形界面的处理装置具体可以集成在终端等设备中，如手机、笔记型计算机、平板PC等。

一种图形界面的处理方法，包括：接收对图形界面进行处理的操作指令，所述图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；根据所述操作指令，控制所述内容视图进行相应的移动；调取所述内容视图与所述第一功能控件之间预设的对应关系；基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖。

请参阅图1b，图1b是本发明第一实施例提供的图形界面的处理方法的流程示意图。所述方法包括：

在步骤S101中，接收对图形界面进行处理的操作指令，所述图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图。

可以理解的是，该图形界面指的是终端中的各种界面，比如，可以包括终端本地各级的用户操作界面、以及各种终端应用中的用户操作界面，等等。

本发明实施例中，该图像界面中包含多个用户界面(UI，User Interface)组件，可简称界面组件，如导航栏、工具栏、搜索栏以及向用户传达主要信息的内容视图等。假设在手机网页运行的图形界面中，可以包括有设置于手机屏幕最上端的功能标签栏、功能标签栏下的搜索栏，屏幕下方的功能导航栏等等界面组件。

在步骤S102中，根据所述操作指令，控制所述内容视图进行相应的移动。

其中，所述操作指令可以通过触发终端中预设触发键或输入框等触发接口来进行触发，比如，当用户点击某个图标、或者用户划过终端屏幕时，则触发生成该操作指令，此时，该图形界面的处理装置便可以对该操作指令进行接收，比如，通过预设的指令接收接口对该图形界面处理请求进行接收，等等。其后，该图形界面的处理装置可以根据该操作指令的指示，控制所述内容视图进行相应的移动。

比如，以手机屏幕为例，当用户划过终端屏幕时，则触发生成该操作指令，该图形界面的处理装置确定出根据该操作指令指示对内容视图进行上滑操作时，控制该内容视图中的内容进行从下往上移动。

在步骤S103中，调取所述内容视图与所述第一功能控件之间预设的对应关系。

例如，本发明实施例中，所述第一功能控件可以为工具栏、所述第二功能控件可以为导航栏，则在图形界面的处理装置控制所述内容视图进行相应的移动后，调取所述内容视图与所述工具栏之间预设的对应关系。

可以理解的是，在该图形界面的处理装置接收对图形界面进行处理的操作(即步骤S101)之前，还需要先建立好内容视图与所述第一功能控件之间的对应关系，可具体包括：

(1)确定所述内容视图的定位点。

(2)建立所述内容视图的定位点与所述第一功能控件的关联关系，所述关联关系指示将所述第一功能控件设置为与所述内容视图的定位点关联的移动对象。

(3)将所述关联关系设置为所述内容视图与所述第一功能控件之间的对应关系。

比如，可以预先设定内容视图的定位点为内容视图中的任一定位光标，然后建立该定位光标与第一功能控件的关联关系，其中，该关联关系用于在该定位光标移动时，确定出与其关联的移动对象，即第一功能控件；最后将该关联关系设置为该内容视图与所述第一功能控件之间的对应关系。

在步骤S104中，基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖。

在某些实施方式中，基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动可以具体包括：

步骤1、基于该内容视图的移动，确定所述内容视图的定位点的坐标信息。

步骤2、根据对应关系，确定与该内容视图的定位点关联的第一功能控件。

步骤3、根据所述内容视图的定位点的坐标信息，按照预设的移动比例，控制所述第一功能控件向所述第二功能控件移动。

也就是说，图形界面的处理装置在控制内容视图的移动时，先确定出该内容视图的定位点(如定位光标)的坐标信息，并根据对应关系确定出与定位点关联移动对象，即第一功能控件；然后根据该定位点的坐标信息，并按照预设的移动比例，控制第一功能控件向第二功能控件移动，如移动比例可以为1:1，即内容视图中定位点与所述第一功能控件以同样的移动速率进行移动。

比如，以手机屏幕为例，第一功能控件可以为工具栏、所述第二功能控件可以为导航栏，假如导航栏在屏幕顶端，工具栏在导航栏的下方，当用户对内容视图进行上滑操作时，控制该内容视图中的内容进行从下往上移动，同时，控制工具栏以与内容视图同样的移动速率，向导航栏移动，即向上移动。

优选的，所述第二功能控件可以包括标题子控件以及功能触发接口，其中标题子控件可以具体为展示图像界面中内容视图的名称或标题的子控件，功能触发接口可以为提供给用户进行功能选择的接口，如返回，关闭等等；由此，在控制内容视图进行移动时，控制所述第一功能控件向该标题子控件移动，以使所述第一功能控件对该标题子控件进行覆盖。

进一步优选的，所述控制所述第一功能控件向所述标题子控件移动，以使所述第一功能控件对所述标题子控件进行覆盖，可以包括：

步骤a、确定所述第一功能控件的大小以及所述标题子控件的大小。

步骤b、在所述第一功能控件向所述标题子控件移动时，根据所述标题子控件的大小，将所述第一功能控件的大小调整为与所述标题子控件的大小一致，得到调整后的第一功能控件，以使所述调整后的第一功能控件对所述标题子控件进行覆盖。

在该实施例中，由于所述第二功能控件有可能还包括功能触发接口，因此，在所述第一功能控件向所述第二功能控件移动过程中，将所述第一功能控件的大小调整为与所述标题子控件的大小一致，以使得调整后的第一功能控件对所述标题子控件进行覆盖，对第二功能控件上的功能触发接口不造成遮挡。

更进一步的，得到调整后的第一功能控件之后，还可以包括：

步骤c、获取第一定位参照点与第二定位参照点，所述第一定位参照点为所述调整后的第一功能控件的定位点，所述第二定位参照点为所述标题子控件的定位点，所述第一定位参照点与所述第二定位参照点相互对应。

步骤d、控制所述第一定位参照点向所述第二定位参照点移动。

步骤e、若确定所述第一定位参照点与所述第二定位参照点之间的距离满足预设范围，则停止所述第一定位参照点的移动。

其中，第一定位参照点可以为调整后的第一功能控件的中心点、或者控件任一端点，相应的，第二定位参照点可以为该标题子控件的中心点、或者标题子控件的任一端点；且，该第一定位参照点与该第二定位参照点设置的位置相互对应，如第一定位参照点设置为调整后的第一功能控件的中心点时，第二定位参照点就相应的设置为该标题子控件的中心点。

在较为优选的实施方式中，在控制该第一定位参照点向该第二定位参照点移动时，若确定所述第一定位参照点与所述第二定位参照点之间的距离为零，则停止所述第一定位参照点的移动；也就是说，此时第一定位参照点和第二定位参照点重合，调整后的第一功能控件对标题子控件进行完全覆盖。

例如，本发明实施例中，所述第一功能控件可以为工具栏、所述第二功能控件可以为导航栏，则图形界面的处理装置可以先调取内容视图与工具栏之间预设的对应关系，然后基于该对应关系、以及内容视图的移动，控制工具栏向导航栏移动，以通过工具栏将导航栏进行覆盖。

需要说明的是，本实施例仅以将所述第一功能控件的大小调整为与标题子控件的大小一致，并利用调整大小后的第一功能控件对标题子控件进行完全覆盖作为最优选的方式进行说明；在其他实施例中，第一功能控件的大小可以小于标题子控件的大小，第一功能控件并不需要对标题子控件进行完全覆盖，等等，此处举例并不构成对本发明的限定。

由上述可知，本实施例提供的图形界面的处理方法，首先接收对图形界面进行处理的操作指令，其中图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；然后根据该操作指令，控制内容视图进行相应的移动，同时调取该内容视图与所述第一功能控件之间预设的对应关系，并基于该对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖；本发明实施例通过内容视图与第一功能控件之间预设的对应关系，在控制内容视图进行移动的时候，同时控制第一功能控件向所述第二功能控件移动，即将第一功能控件对第二功能控件进行覆盖，从而减少了界面组件占用的屏幕空间，也就是减少了对内容视图的遮挡，提高了查阅视图内容的便利性。

第二实施例

根据第一实施例所描述的方法，以下将举例作进一步详细说明。

在本实施例中，将以该图形界面的处理装置集成在终端，且该图形界面具体为用户操作界面为例进行说明：

可参考图2a，该用户操作界面中的UI组件可以具体包括导航栏、工具栏以及内容视图，其中导航栏位于页眉区域，在页眉横幅图片上边或下边的一排水平导航按钮，用于让用户清晰明朗的找到所需要的资源；工具栏是指综合各种工具，让用户方便使用的一个区域，可配置按钮，使其在外观和行为上表现为普通按钮、单选按钮或复选框等；内容视图顾名思义就是展示主要内容的视图窗口，根据不同屏幕的尺寸以及内容的多少，在内容视图旁边可设置有滚动条，根据用户对屏幕的滑动操作进行上下滚动，从而可以浏览到当前屏幕外的内容视图。

可以理解的是，所述导航栏可以包括标题子控件，其中标题子控件可以具体为展示图像界面中内容视图的名称或标题的子控件，另外，所述导航栏还可以包括功能触发接口，该功能触发接口可以为提供给用户进行功能选择的接口，如返回、关闭及设置接口等等；比如，参考图2b，一般的导航栏可以由三个区域组成，A区和B区为功能触发接口，分别放置“返回”、“关闭”等导航或功能入口，C区为标题子控件，放置标题名称。

可具体的，在本实施例提供的图形界面的处理方法中，如果内容视图的范围超过终端屏幕的高度，用户需要查看当前屏幕外的内容视图时，会对内容视图进行上滑操作，比如，当内容视图从下往上滚动时，工具栏也从下往上滚动，并和导航栏进行结合。

在第一种可能的实施方式中，如图2c所示，导航栏由A区、B区以及C区组成，当内容视图从下往上移动时，工具栏也从下往上移动，在工具栏向导航栏移动过程中，将工具栏的大小调整为与C区大小一致，以使得调整后的工具栏对C区进行覆盖，工具栏与导航栏C区完成结合后，导航栏的A区和B区保留，C区被工具栏内容替换，即该结合对导航栏上的功能触发接口不造成遮挡。

容易想到的是，在第二种可能的实施方式中，如图2d所示，导航栏由A区以及C区组成，在工具栏向导航栏移动过程中，先将工具栏的大小调整为与C区大小一致，并在工具栏与导航栏C区完成结合后，导航栏的A区保留，C区被工具栏内容替换。

在第三种可能的实施方式中，如图2e所示，导航栏由B区以及C区组成，在工具栏向导航栏移动过程中，先将工具栏的大小调整为与C区大小一致，并在工具栏与导航栏C区完成结合后，导航栏的B区保留，C区被工具栏内容替换。

另外，在第四种可能的实施方式中，如图2f所示，导航栏仅由C区组成，在工具栏向导航栏移动过程中，先将工具栏的大小调整为与C区大小一致，并在工具栏与导航栏C区完成结合后，整个导航栏(即C区)被工具栏内容替换。

为了更好的理解本发明技术方案，下面利用工具栏的应用场景作为例子进行进一步说明：

(1)工具栏为标签页的场景

可如图2g所示，是工具栏为标签页时移动过程的图形界面示意图，内容视图往上移动时，工具栏的标签页也随之往上移动。优选的，为了用户界面的操作友好性，导航栏上的功能触发接口不仅可以以标签的形式设置，还可以在旁边附着以图形形式设置的接口，如图2g中，“<返回”为功能触发接口，其中“返回”以标签的形式进行设置，“<”为以图形形式设置的接口。在该实施例中，更为优选的，工具栏可以将导航栏的标题部分以及以标签的形式进行设置的功能接口部分进行一起覆盖，以使得工具栏与导航栏以最大面积的进行结合，而又不影响功能触发接口的正常使用。

(2)工具栏为搜索框的场景

可如图2h所示，是工具栏为搜索框时移动过程的图形界面示意图，导航栏包括以标签的形式进行设置的功能触发接口“关闭”、以及标题部分，在内容视图往上移动时，工具栏的搜索框也随之往上移动，直到覆盖了导航栏的标题部分。

(3)工具栏为排序筛选器的场景

可如图2i所示，是工具栏为搜索框时移动过程的图形界面示意图，导航栏包括功能触发接口“<返回”、标题部分以及仅以标签的形式进行设置的功能触发接口“设置”，在内容视图往上移动时，工具栏的搜索框也随之往上移动，直到将导航栏的标题部分、以及以标签的形式进行设置的功能接口部分(即“返回”)进行了覆盖。

可以理解的是，可以通过对工具栏导航栏的大小、以及定位点(如中心点)设定，从而可以根据大小以及定位点控制导航栏以及工具栏的结合，在较为优选的实施方式中，如果导航栏以及工具栏对应的定位点重合，或者之间的距离满足预设范围等，均可认为导航栏以及工具栏结合完成，即通过工具栏对导航栏进行了覆盖，等等。

另外，在某些实施例中，还可以根据导航栏的设置来确定工具栏对导航栏的覆盖范围，可参考图2g、图2h以及图2i；需要说明的是，本实施例仅以图2c至图2i作为优选的方式进行分析说明，并不构成对本发明的限定。

由上述可知，本实施例提供的图形界面的处理方法，首先接收对图形界面进行处理的操作指令，其中图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；然后根据该操作指令，控制内容视图进行相应的移动，同时调取该内容视图与所述第一功能控件之间预设的对应关系，并基于该对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖；本发明实施例通过内容视图与第一功能控件之间预设的对应关系，在控制内容视图进行移动的时候，同时控制第一功能控件向所述第二功能控件移动，即将第一功能控件对第二功能控件进行覆盖，从而减少了界面组件占用的屏幕空间，也就是减少了对内容视图的遮挡，提高了查阅视图内容的便利性。

第三实施例

为便于更好的实施本发明实施例提供的图形界面的处理方法，本发明实施例还提供一种基于上述图形界面的处理方法的装置。其中名词的含义与上述图形界面的处理的方法中相同，具体实现细节可以参考方法实施例中的说明。

请参阅图3a，图3a为本发明实施例提供的图形界面的处理装置的结构示意图，可以包括接收单元301、第一控制单元302、调取单元303以及第二控制单元304。

其中所述接收单元301，用于接收对图形界面进行处理的操作指令，所述图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；所述第一控制单元302，用于根据所述操作指令，控制所述内容视图进行相应的移动。

可以理解的是，该图形界面指的是终端中的各种界面，比如，可以包括终端本地各级的用户操作界面、以及各种终端应用中的用户操作界面，等等。

本发明实施例中，该图像界面中包含多个用户界面(UI，User Interface)组件，可简称界面组件，如导航栏、工具栏、搜索栏以及向用户传达主要信息的内容视图等。假设在手机网页运行的图形界面中，可以包括有设置于手机屏幕最上端的功能标签栏、功能标签栏下的搜索栏，屏幕下方的功能导航栏等等界面组件。

其中，所述操作指令可以通过触发终端中预设触发键或输入框等触发接口来进行触发，比如，当用户点击某个图标、或者用户划过终端屏幕时，则触发生成该操作指令，此时，该图形界面的处理装置便可以对该操作指令进行接收，比如，通过预设的指令接收接口对该图形界面处理请求进行接收，等等。其后，该图形界面的处理装置可以根据该操作指令的指示，控制所述内容视图进行相应的移动。

比如，以手机屏幕为例，当用户划过终端屏幕时，则触发生成该操作指令，该图形界面的处理装置确定出根据该操作指令指示对内容视图进行上滑操作时，控制该内容视图中的内容进行从下往上移动。

所述调取单元303，用于调取所述内容视图与所述第一功能控件之间预设的对应关系；所述第二控制单元304，用于基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖。

例如，本发明实施例中，所述第一功能控件可以为工具栏、所述第二功能控件可以为导航栏，因此所述调取单元303，可具体用于调取所述内容视图与所述工具栏之间预设的对应关系；所述第二控制单元304，可具体用于基于所述内容视图与所述工具栏之间预设的对应关系、以及所述内容视图的移动，控制所述工具栏向所述导航栏移动。

可以理解的是，在该图形界面的处理装置接收对图形界面进行处理的操作之前，还需要先建立好内容视图与所述第一功能控件之间的对应关系，所述图形界面的处理装置还可以包括：

(1)确定单元305，用于确定所述内容视图的定位点；

(2)建立单元306，用于建立所述内容视图的定位点与所述第一功能控件的关联关系，所述关联关系指示将所述第一功能控件设置为与所述内容视图的定位点关联的移动对象；

(3)设置单元307，用于将所述关联关系设置为所述内容视图与所述第一功能控件之间的对应关系。

比如，可以预先设定内容视图的定位点为内容视图中的任一定位光标，然后建立该定位光标与第一功能控件的关联关系，其中，该关联关系用于在该定位光标移动时，确定出与其关联的移动对象，即第一功能控件；最后将该关联关系设置为该内容视图与所述第一功能控件之间的对应关系。

在某些实施方式中，所述第二控制单元304可以具体包括：

确定子单元3041，用于基于所述内容视图的移动，确定所述内容视图的定位点的坐标信息；根据所述对应关系，确定与所述内容视图的定位点关联的第一功能控件。

控制子单元3042，用于根据所述内容视图的定位点的坐标信息，按照预设的移动比例，控制所述第一功能控件向所述第二功能控件移动。

也就是说，图形界面的处理装置在控制内容视图的移动时，先确定出该内容视图的定位点(如定位光标)的坐标信息，并根据对应关系确定出与定位点关联移动对象，即第一功能控件；然后根据该定位点的坐标信息，并按照预设的移动比例，控制第一功能控件向第二功能控件移动，如移动比例可以为1:1，即内容视图中定位点与所述第一功能控件以同样的移动速率进行移动。

比如，以手机屏幕为例，第一功能控件可以为工具栏、所述第二功能控件可以为导航栏，假如导航栏在屏幕顶端，工具栏在导航栏的下方，当用户对内容视图进行上滑操作时，控制该内容视图中的内容进行从下往上移动，同时，控制工具栏以与内容视图同样的移动速率，向导航栏移动，即向上移动。

优选的，所述第二功能控件可以包括标题子控件以及功能触发接口，其中标题子控件可以具体为展示图像界面中内容视图的名称或标题的子控件，功能触发接口可以为提供给用户进行功能选择的接口，如返回，关闭等等；由此，所述控制子单元3042可用于：控制所述第一功能控件向所述标题子控件移动，以使所述第一功能控件对所述标题子控件进行覆盖。

进一步优选的，所述控制子单元3042还可以用于：

确定所述第一功能控件的大小以及所述标题子控件的大小；在所述第一功能控件向所述标题子控件移动时，根据所述标题子控件的大小，将所述第一功能控件的大小调整为与所述标题子控件的大小一致，得到调整后的第一功能控件，以使所述调整后的第一功能控件对所述标题子控件进行覆盖。

在该实施例中，由于所述第二功能控件有可能还包括功能触发接口，因此，在所述第一功能控件向所述第二功能控件移动过程中，将所述第一功能控件的大小调整为与所述标题子控件的大小一致，以使得调整后的第一功能控件对所述标题子控件进行覆盖，对第二功能控件上的功能触发接口不造成遮挡。

更进一步的，所述第二控制单元304还可以包括：

获取子单元3043，用于获取第一定位参照点与第二定位参照点，所述第一定位参照点为所述调整后的第一功能控件的定位点，所述第二定位参照点为所述标题子控件的定位点，所述第一定位参照点与所述第二定位参照点相互对应。

基于此，所述控制子单元3042，还可以用于控制所述第一定位参照点向所述第二定位参照点移动；若确定所述第一定位参照点与所述第二定位参照点之间的距离满足预设范围，则停止所述第一定位参照点的移动。

所述控制子单元3042用于：若确定所述第一定位参照点与所述第二定位参照点之间的距离为零，则停止所述第一定位参照点的移动。

其中，第一定位参照点可以为调整后的第一功能控件的中心点、或者控件任一端点，相应的，第二定位参照点可以为该标题子控件的中心点、或者标题子控件的任一端点；且，该第一定位参照点与该第二定位参照点设置的位置相互对应，如第一定位参照点设置为调整后的第一功能控件的中心点时，第二定位参照点就相应的设置为该标题子控件的中心点。

在较为优选的实施方式中，在控制该第一定位参照点向该第二定位参照点移动时，若确定所述第一定位参照点与所述第二定位参照点之间的距离为零，则停止所述第一定位参照点的移动；也就是说，此时第一定位参照点和第二定位参照点重合，调整后的第一功能控件对标题子控件进行完全覆盖。

需要说明的是，本实施例仅以将所述第一功能控件的大小调整为与标题子控件的大小一致，并利用调整大小后的第一功能控件对标题子控件进行完全覆盖作为最优选的方式进行说明；在其他实施例中，第一功能控件的大小可以小于标题子控件的大小，第一功能控件并不需要对标题子控件进行完全覆盖，等等，此处举例并不构成对本发明的限定。

具体实施时，以上各个单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个单元的具体实施可参见前面的方法实施例，在此不再赘述。

该图形界面的处理装置具体可以集成在终端等设备中，比如手机、笔记型计算机、平板PC等。

由上述可知，本实施例提供的图形界面的处理装置，首先接收对图形界面进行处理的操作指令，其中图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；然后根据该操作指令，控制内容视图进行相应的移动，同时调取该内容视图与所述第一功能控件之间预设的对应关系，并基于该对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖；本发明实施例通过内容视图与第一功能控件之间预设的对应关系，在控制内容视图进行移动的时候，同时控制第一功能控件向所述第二功能控件移动，即将第一功能控件对第二功能控件进行覆盖，从而减少了界面组件占用的屏幕空间，也就是减少了对内容视图的遮挡，提高了查阅视图内容的便利性。

第四实施例

相应的，本发明实施例还提供一种图形界面的处理系统，包括本发明实施例所提供的任一种图形界面的处理装置，具体可参见实施例三；其中，该图形界面的处理装置可以集成在终端等设备中，例如，具体可以如下：

终端，用于接收对图形界面进行处理的操作指令，所述图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；根据所述操作指令，控制所述内容视图进行相应的移动；调取所述内容视图与所述第一功能控件之间预设的对应关系；基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖。

此外，该图形界面的处理系统还可以包括其他的设备，比如服务器，如下：

服务器，用于设置并存储内容视图与第一功能控件之间的对应关系、第一功能控件的移动比例。

以上各个设备的具体实施可参见前面的实施例，在此不再赘述。

由于该图形界面的处理系统可以包括本发明实施例所提供的任一种图形界面的处理装置，因此，可以实现本发明实施例所提供的任一种图形界面的处理装置所能实现的有益效果，具体可参见前面的实施例，在此不再赘述。

第五实施例

此外，本发明实施例还提供一种终端，如图4所示，该终端可以包括射频(RF，RadioFrequency)电路401、包括有一个或一个以上计算机可读存储介质的存储器402、输入单元403、显示单元404、传感器405、音频电路406、无线保真(WiFi，Wireless Fidelity)模块407、包括有一个或者一个以上处理核心的处理器408、以及电源409等部件。本领域技术人员可以理解，图4中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路401可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器408处理；另外，将涉及上行的数据发送给基站。通常，RF电路401包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM，Subscriber Identity Module)卡、收发信机、耦合器、低噪声放大器(LNA，Low Noise Amplifier)、双工器等。此外，RF电路401还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(GSM，Global System of Mobile communication)、通用分组无线服务(GPRS，GeneralPacket Radio Service)、码分多址(CDMA，Code Division Multiple Access)、宽带码分多址(WCDMA，Wideband Code Division Multiple Access)、长期演进(LTE，Long TermEvolution)、电子邮件、短消息服务(SMS，Short Messaging Service)等。

存储器402可用于存储软件程序以及模块，处理器408通过运行存储在存储器402的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器402可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器402可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器402还可以包括存储器控制器，以提供处理器408和输入单元403对存储器402的访问。

输入单元403可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，在一个具体的实施例中，输入单元403可包括触敏表面以及其他输入设备。触敏表面，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面上或在触敏表面附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器408，并能接收处理器408发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面。除了触敏表面，输入单元403还可以包括其他输入设备。具体地，其他输入设备可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元404可用于显示由用户输入的信息或提供给用户的信息以及终端的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元404可包括显示面板，可选的，可以采用液晶显示器(LCD，Liquid Crystal Display)、有机发光二极管(OLED，Organic Light-Emitting Diode)等形式来配置显示面板。进一步的，触敏表面可覆盖显示面板，当触敏表面检测到在其上或附近的触摸操作后，传送给处理器408以确定触摸事件的类型，随后处理器408根据触摸事件的类型在显示面板上提供相应的视觉输出。虽然在图4中，触敏表面与显示面板是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面与显示面板集成而实现输入和输出功能。

终端还可包括至少一种传感器405，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板的亮度，接近传感器可在终端移动到耳边时，关闭显示面板和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路406、扬声器，传声器可提供用户与终端之间的音频接口。音频电路406可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路406接收后转换为音频数据，再将音频数据输出处理器408处理后，经RF电路401以发送给比如另一终端，或者将音频数据输出至存储器402以便进一步处理。音频电路406还可能包括耳塞插孔，以提供外设耳机与终端的通信。

WiFi属于短距离无线传输技术，终端通过WiFi模块407可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图4示出了WiFi模块407，但是可以理解的是，其并不属于终端的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器408是终端的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器402内的软件程序和/或模块，以及调用存储在存储器402内的数据，执行终端的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器408可包括一个或多个处理核心；优选的，处理器408可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器408中。

终端还包括给各个部件供电的电源409(比如电池)，优选的，电源可以通过电源管理系统与处理器408逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源409还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端中的处理器408会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器402中，并由处理器408来运行存储在存储器402中的应用程序，从而实现各种功能：

接收对图形界面进行处理的操作指令，所述图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；根据所述操作指令，控制所述内容视图进行相应的移动；调取所述内容视图与所述第一功能控件之间预设的对应关系；基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖。

优选的，所述处理器408还可以用于：确定所述内容视图的定位点；建立所述内容视图的定位点与所述第一功能控件的关联关系，所述关联关系指示将所述第一功能控件设置为与所述内容视图的定位点关联的移动对象；将所述关联关系设置为所述内容视图与所述第一功能控件之间的对应关系。

优选的，所述处理器408还可以用于：基于所述内容视图的移动，确定所述内容视图的定位点的坐标信息；根据所述对应关系，确定与所述内容视图的定位点关联的第一功能控件；根据所述内容视图的定位点的坐标信息，按照预设的移动比例，控制所述第一功能控件向所述第二功能控件移动。

优选的，所述处理器408还可以用于：控制所述第一功能控件向所述标题子控件移动，以使所述第一功能控件对所述标题子控件进行覆盖。

优选的，所述处理器408还可以用于：确定所述第一功能控件的大小以及所述标题子控件的大小；在所述第一功能控件向所述标题子控件移动时，根据所述标题子控件的大小，将所述第一功能控件的大小调整为与所述标题子控件的大小一致，得到调整后的第一功能控件，以使所述调整后的第一功能控件对所述标题子控件进行覆盖。

优选的，所述处理器408还可以用于：获取第一定位参照点与第二定位参照点，所述第一定位参照点为所述调整后的第一功能控件的定位点，所述第二定位参照点为所述标题子控件的定位点，所述第一定位参照点与所述第二定位参照点相互对应；控制所述第一定位参照点向所述第二定位参照点移动；若确定所述第一定位参照点与所述第二定位参照点之间的距离满足预设范围，则停止所述第一定位参照点的移动。

优选的，所述处理器408还可以用于：若确定所述第一定位参照点与所述第二定位参照点之间的距离为零，则停止所述第一定位参照点的移动。

由上述可知，本实施例提供的终端中，首先接收对图形界面进行处理的操作指令，其中图形界面中界面组件包括第一功能控件、第二功能控件以及内容视图；然后根据该操作指令，控制内容视图进行相应的移动，同时调取该内容视图与所述第一功能控件之间预设的对应关系，并基于该对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖；本发明实施例通过内容视图与第一功能控件之间预设的对应关系，在控制内容视图进行移动的时候，同时控制第一功能控件向所述第二功能控件移动，即将第一功能控件对第二功能控件进行覆盖，从而减少了界面组件占用的屏幕空间，也就是减少了对内容视图的遮挡，提高了查阅视图内容的便利性。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见上文针对图形界面的处理方法的详细描述，此处不再赘述。

本发明实施例提供的所述图形界面的处理装置，譬如为计算机、平板电脑、具有触摸功能的手机等等，所述图形界面的处理装置与上文实施例中的图形界面的处理方法属于同一构思，在所述图形界面的处理装置上可以运行所述图形界面的处理方法实施例中提供的任一方法，其具体实现过程详见所述图形界面的处理方法实施例，此处不再赘述。

需要说明的是，对本发明所述图形界面的处理方法而言，本领域普通测试人员可以理解实现本发明实施例所述图形界面的处理方法的全部或部分流程，是可以通过计算机程序来控制相关的硬件来完成，所述计算机程序可存储于一计算机可读取存储介质中，如存储在终端的存储器中，并被该终端内的至少一个处理器执行，在执行过程中可包括如所述图形界面的处理方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)等。

对本发明实施例的所述图形界面的处理装置而言，其各功能模块可以集成在一个处理芯片中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中，所述存储介质譬如为只读存储器，磁盘或光盘等。

以上对本发明实施例所提供的一种图形界面的处理方法、装置及系统进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (13)

1.一种图形界面的处理方法，其特征在于，包括：

确定图形界面中内容视图的定位点，所述图形界面中界面组件包括第一功能控件、第二功能控件以及所述内容视图；

建立所述内容视图的定位点与所述第一功能控件的关联关系，所述关联关系指示将所述第一功能控件设置为与所述内容视图的定位点关联的移动对象；

将所述关联关系设置为所述内容视图与所述第一功能控件之间的对应关系；

接收对所述图形界面进行处理的操作指令；

根据所述操作指令，控制所述内容视图进行相应的移动；

调取所述对应关系；

基于所述对应关系与所述内容视图的移动，确定所述第一功能控件的大小和所述第二功能控件的大小；在第一功能控件向所述第二功能控件移动时，将所述第一功能控件的大小调整为与所述第二功能控件的大小一致，得到调整后的第一功能控件；

获取第一定位参照点与第二定位参照点，所述第一定位参照点为所述调整后的第一功能控件的定位点，所述第二定位参照点为所述第二功能控件的定位点，所述第一定位参照点与所述第二定位参照点相互对应；

控制所述第一定位参照点向所述第二定位参照点移动；

若确定所述第一定位参照点与所述第二定位参照点之间的距离满足预设范围，则停止所述第一定位参照点的移动；以使得调整后的第一功能控件对所述第二功能控件进行覆盖，并对所述第二功能控件上的功能触发接口不造成遮挡。

2.根据权利要求1所述的图形界面的处理方法，其特征在于，所述基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动包括：

基于所述内容视图的移动，确定所述内容视图的定位点的坐标信息；

根据所述对应关系，确定与所述内容视图的定位点关联的第一功能控件；

根据所述内容视图的定位点的坐标信息，按照预设的移动比例，控制所述第一功能控件向所述第二功能控件移动。

3.根据权利要求1所述的图形界面的处理方法，其特征在于，所述第二功能控件包括标题子控件，所述控制所述第一功能控件向所述第二功能控件移动，以使所述第一功能控件对所述第二功能控件进行覆盖包括：

控制所述第一功能控件向所述标题子控件移动，以使所述第一功能控件对所述标题子控件进行覆盖。

4.根据权利要求1所述的图形界面的处理方法，其特征在于，所述若确定所述第一定位参照点与所述第二定位参照点之间的距离满足预设范围，则停止所述第一定位参照点的移动包括：

若确定所述第一定位参照点与所述第二定位参照点之间的距离为零，则停止所述第一定位参照点的移动。

5.根据权利要求1至4任一项所述的图形界面的处理方法，其特征在于，所述第一功能控件为工具栏、所述第二功能控件为导航栏；

所述调取所述内容视图与所述第一功能控件之间预设的对应关系，包括：调取所述内容视图与所述工具栏之间预设的对应关系；

基于所述对应关系与所述内容视图的移动，控制所述第一功能控件向所述第二功能控件移动，包括：基于所述内容视图与所述工具栏之间预设的对应关系、以及所述内容视图的移动，控制所述工具栏向所述导航栏移动。

6.一种图形界面的处理装置，其特征在于，包括：

确定单元，用于确定图形界面中内容视图的定位点，所述图形界面中界面组件包括第一功能控件、第二功能控件以及所述内容视图；

建立单元，用于建立所述内容视图的定位点与所述第一功能控件的关联关系，所述关联关系指示将所述第一功能控件设置为与所述内容视图的定位点关联的移动对象；

设置单元，用于将所述关联关系设置为所述内容视图与所述第一功能控件之间的对应关系；

接收单元，用于接收对所述图形界面进行处理的操作指令；

第一控制单元，用于根据所述操作指令，控制所述内容视图进行相应的移动；

调取单元，用于调取所述对应关系；

第二控制单元，用于基于所述对应关系与所述内容视图的移动，确定所述第一功能控件的大小和所述第二功能控件的大小；在第一功能控件向所述第二功能控件移动时，将所述第一功能控件的大小调整为与所述第二功能控件的大小一致，得到调整后的第一功能控件；

获取第一定位参照点与第二定位参照点，所述第一定位参照点为所述调整后的第一功能控件的定位点，所述第二定位参照点为所述第二功能控件的定位点，所述第一定位参照点与所述第二定位参照点相互对应；

控制所述第一定位参照点向所述第二定位参照点移动；

若确定所述第一定位参照点与所述第二定位参照点之间的距离满足预设范围，则停止所述第一定位参照点的移动；以使得调整后的第一功能控件对所述第二功能控件进行覆盖，并对所述第二功能控件上的功能触发接口不造成遮挡。

7.根据权利要求6所述的图形界面的处理装置，其特征在于，所述第二控制单元包括：

确定子单元，用于基于所述内容视图的移动，确定所述内容视图的定位点的坐标信息；根据所述对应关系，确定与所述内容视图的定位点关联的第一功能控件；

控制子单元，用于根据所述内容视图的定位点的坐标信息，按照预设的移动比例，控制所述第一功能控件向所述第二功能控件移动。

8.根据权利要求7所述的图形界面的处理装置，其特征在于，所述第二功能控件包括标题子控件，所述控制子单元用于：控制所述第一功能控件向所述标题子控件移动，以使所述第一功能控件对所述标题子控件进行覆盖。

9.根据权利要求7所述的图形界面的处理装置，其特征在于，所述控制子单元用于：若确定所述第一定位参照点与所述第二定位参照点之间的距离为零，则停止所述第一定位参照点的移动。

10.根据权利要求6至9任一项所述的图形界面的处理装置，其特征在于，所述第一功能控件为工具栏、所述第二功能控件为导航栏；

所述调取单元，用于调取所述内容视图与所述工具栏之间预设的对应关系；

所述第二控制单元，用于基于所述内容视图与所述工具栏之间预设的对应关系、以及所述内容视图的移动，控制所述工具栏向所述导航栏移动。

11.一种图形界面的处理系统，其特征在于，包括权利要求6至10任一项所述的图形界面的处理装置。

12.一种计算机可读存储介质，其存储有计算机程序，其中，所述计算机程序可被处理器执行以实现如权利要求1至5任一项所述的方法。

13.一种终端，包括处理器和存储器，所述存储器存储有用于图形界面的处理的计算机程序，其中，所述处理器加载所述存储器的计算机程序执行如权利要求1至5任一项所述的方法。

Images