控制视图控件的方法、装置及电子设备与流程

本申请涉及互联网技术领域，尤其涉及一种控制视图控件的方法、装置及电子设备。

背景技术：

在共享交通工具、餐饮、导航定位等地图类项目中，需要考虑列表页面和地图定位页面之间的操作效率和地图展示效果。在列表模块上下滑动的情况下，侧边导航栏的位置也会随之发生变化，侧边导航栏在位置变化过程中可能会超过页面顶部标题坐标，使得侧边导航栏的信息显示不全，导致用户无法便捷的选择期望的信息，影响页面的操作效率。

技术实现要素：

本申请实施例提供一种控制视图控件的方法、装置及电子设备，以解决用户无法便捷的选择期望的信息，影响页面的操作效率的问题。

为解决上述技术问题，本申请实施例采用下述技术方案：

第一方面，本申请实施例提供一种控制视图控件的方法，包括：

响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式；

在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述第一方向上的长度不同。

第二方面，本申请实施例提供一种控制视图控件的装置，包括：

处理单元，响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式；

切换单元，在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述第一方向上的长度不同。

第三方面，本申请实施例提供一种电子设备，包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行以下操作：

响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式；

在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述第一方向上的长度不同。

第四方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行以下操作：

响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式；

在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述第一方向上的长度不同。

由以上本申请的技术方案可见，本申请实施例的控制视图控件的方法，响应于将页面上的第一视图控件沿目标方向移动的操作，控制第一视图控件和第二视图控件沿目标方向移动，并且在第一视图方向和第二视图控件的移动过程中，在第二视图控件所在的页面位置满足自适应调整条件时，将第二视图控件的显示方式由第一显示方式调整为第二显示方式，第二视图控件在第一显示方式和第二显示方式下，在目标方向上的长度不同。也就是说，本申请实施例的控制视图控件的方法，可以在第二视图控件的移动过程总，基于第二视图控件所在的页面位置自适应调整第二视图控件的显示方式，可以使用户便捷的选择第二视图控件上的导航栏，提高页面的操作效率。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例的一个应用场景的示意图。

图2为本申请一个实施例提供的控制视图控件的方法的流程示意图。

图3是根据本申请一个实施例的确定目标位移量的方法的示意图。

图4是根据本申请一个实施例的自适应调整视图控件的显示方式的示意图。

图5是根据本申请的一个具体实施例的自适应调整视图控件的显示方式的示意图。

图6是根据本申请的另一个实施例的自适应调整视图控件的显示方式的示意图。

图7是根据本申请一个实施例的电子设备的结构示意图。

图8是根据本申请一个实施例的控制视图控件的装置的结构示意图。

具体实施方式

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

图1是本申请实施例的一个应用场景图。如图1所示出的，在共享交通工具、餐饮、导航定位等地图类项目中，考虑到页面的操作效率，通常在列表模块上滑的情况下，侧边导航模块也会随之移动。在侧边导航模块移动的过程中，侧边导航模块很可能会超过页面顶部标题坐标，导致侧边导航栏上的信息显示不全，使得用户无法便捷的选择期望的信息，影响页面的操作效率。

为了解决上述技术问题，本申请实施例提供了一种控制视图控件的方法，能够基于在视图控件的移动过程中，视图控件所在的页面位置，自适应切换视图控件的显示方式，便于用户快捷的选择期望的信息，提高页面的操作效率。

以下结合具体实施例，描述本申请实施例的控制视图控件的方法。

图2示出了本申请一个实施例的控制视图控件的方法，图2的方法可以由控制视图控件的装置执行。如图2所示出的，方法包括：

s102，响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式。

需要说明的是，s102中，将页面上的第一视图控件沿目标方向移动的操作包括所有能够引起第一视图控件和第二视图控件沿目标方向移动的操作。例如，操作可以是拖拽第一视图控件的一条边的操作，或者可以是拖拽整个第一视图控件的操作，或者还可以是点击第一视图控件上的“展开按键”的操作。

可以理解的是，s102中响应于将第一视图控件沿目标方向移动的操作，控制第一视图控件和第二视图控件沿目标方向移动，实际上是，响应于将第一视图控件沿目标方向移动的操作，控制第一视图控件和第二视图控件沿目标方向联动。这里的第一视图控件可以为主动控件，第二视图控件可以为冲动控件。

在s102中，第一显示方式例如可以是纵向显示或横向显示。

s104，在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述目标方向上的长度不同。

在s104中，第二视图控件所在的页面位置满足自适应调整条件可以是第二视图控件所在的页面位置使得第二视图控件的一条边的坐标与页面的顶部或底部的坐标满足自适应调整条件。例如，目标反向为上移方向，若第二视图控件所在的页面位置使得第二视图控件的上边沿的坐标与页面的顶部的坐标的差值小于或等于预设差值，则认为第二视图控件所在的位置满足自适应调整条件。这里的预设差值可以是一个预设值，也可以是基于第二视图控件中的导航栏的宽度确定的一个值。

或者，在s104中，第二视图控件所在的页面位置满足自适应条件可以是第二视图控件在当前页面位置处对应的位移量满足自适应调整条件。例如，图1所示的方法还包括：若第二视图控件的位移量大于或等于目标位移量，则确定第二视图控件所在的页面位置满足自适应调整条件。

这里的目标位移量可以是预设位移量，或者目标位移量可以是基于第二视图控件被移动前距离页面上的预设位置的初始距离和预设距离的差值确定的。例如，如图3所示出的，预设位置为图3中用x标记的这条边的位置、预设距离为a，第二视图控件被移动前距离用x标记的这条边的距离为n，则目标位移量为n-a。

在本申请实施例中，可以通过检测第二视图控件的坐标位置判断第二视图控件的位移量。或者进一步地，第二视图控件与第一视图控件同步移动，通过检测第一视图控件的位移量作为第二视图控件的位移量。比如，第一视图控件在保持下边沿与页面的底部重合的基础上向上移动，在这种情况下，可以通过检测第一视图控件的上边沿的坐标变化确定第一视图控件的位移量，并且第二视图控件的位移量与第一视图控件的位移量相同。

作为一个例子，目标方向为上移动方向，第二视图控件在第一显示方式下的高度大于其在第二显示方式下的高度。比如，第一显示方式是纵向显示(如图4左图所示出的)，第二显示方式是横向显示(如图4右图所示出的)。在第一显示方式下，第二视图控件的高度可以大于或等于两个导航栏的高度之和，宽度为一个导航栏的宽度。在第二显示方式下，第二视图控件的高度可以为一个导航栏的高度，宽度大于或等于两个导航栏的宽度之和。

在这个例子中，进一步地，将第二视图控件的显示方式调整为第二显示方式，包括：

将第二视图控件移动至目标页面位置，并在目标页面位置将第二视图控件的显示方式调整为第二显示方式；第二视图控件在目标页面位置处以第二显示方式显示时，第二视图控件的底部坐标与页面的顶部坐标的差值大于或等于第一预设值且小于第二预设值。

举例来说，第二视图控件为页面导航视图控件，第一视图控件为所述第二视图控件的当前导航栏对应的展示视图控件。例如图5所示出的，第二视图控件中的导航栏包括“全部”、“商户a”、“商户b”和“商户c”等，第一视图控件中显示对应第二视图控件中的各个商户的车辆信息。第二视图控件被移动前的显示方式为纵向显示，在第一视图控件和第二视图控件向上移动的过程中，在第二视图控件所在页面位置满足自适应调整条件时，将第二视图控件移动至页面的顶部标题下方的位置(例如，悬浮于顶部标题下方)，并将第二视图的显示方式调整为横向显示。由此可以使得用户通过选择横向显示的导航栏实现与页面的交互。

作为另一个例子，目标方向为下一方向，第二视图控件在第一显示方式下的高度小于其在第二显示方式下的高度。比如，第一显示方式是横向显示(如图6左图所示出的)，第二显示方式为纵向显示(如图6右图所示出的)。在第一显示方式下，第二视图控件的高度可以为一个导航栏的高度，宽度大于或等于两个导航栏的宽度之和。在第二显示方式下，第二视图控件的高度可以大于或等于两个导航栏的高度之和，宽度为一个导航栏的宽度。

在这个例子中，进一步地，将第二视图控件的显示方式调整为第二显示方式，包括：将第二视图控件移动至目标页面位置，并在目标页面位置将第二视图控件的显示方式调整为第二显示方式。并且这里的目标页面位置可以是页面的左半区或右半区。

需要说明的是，上述本申请实施例对目标方向为上移方向和下移方向进行了描述，仅仅是作为示例，并不是对技术方案的限定。在目标方向为左移方向或右移方向时，同样可以采用本申请实施例的方法，为避免重复，在此不再赘述。

图7是本申请的一个实施例电子设备的结构示意图。请参考图7，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(random-accessmemory，ram)，也可能还包括非易失性存储器(non-volatilememory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是isa(industrystandardarchitecture，工业标准体系结构)总线、pci(peripheralcomponentinterconnect，外设部件互连标准)总线或eisa(extendedindustrystandardarchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成控制视图控件的装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式；

在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述目标方向上的长度不同。

上述如本申请图2所示实施例揭示的控制视图控件的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(centralprocessingunit，cpu)、网络处理器(networkprocessor，np)等；还可以是数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现场可编程门阵列(field－programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

当然，除了软件实现方式之外，本申请的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括多个应用程序的电子设备执行时，能够使该电子设备执行图2所示实施例中控制视图控件的方法，并具体用于执行：

响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式；

在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述目标方向上的长度不同。

图8是本申请的一个实施例的控制视图控件的装置的结构示意图。请参考图8，在一种软件实施方式中，装置800可包括：处理单元81和切换单元82，其中，

处理单元81，响应于将页面上的第一视图控件沿目标方向移动的操作，控制所述第一视图控件和所述页面上的第二视图控件沿所述目标方向移动，所述第二视图控件在被移动前的显示方式为第一显示方式；

切换单元82，在所述第一视图控件和所述第二视图控件的移动过程中，若所述第二视图控件所在的页面位置满足自适应调整条件，则将所述第二视图控件的显示方式调整为第二显示方式，其中，所述第二视图控件在所述第一显示方式和所述第二显示方式下，在所述第一方向上的长度不同。

本申请实施例的控制视图控件的装置，响应于将页面上的第一视图控件沿目标方向移动的操作，控制第一视图控件和第二视图控件沿目标方向移动，并且在第一视图方向和第二视图控件的移动过程中，在第二视图控件所在的页面位置满足自适应调整条件时，将第二视图控件的显示方式由第一显示方式调整为第二显示方式，第二视图控件在第一显示方式和第二显示方式下，在目标方向上的长度不同。也就是说，本申请实施例的控制视图控件的方法，可以在第二视图控件的移动过程总，基于第二视图控件所在的页面位置自适应调整第二视图控件的显示方式，可以使用户便捷的选择第二视图控件上的导航栏，提高页面的操作效率。

可选地，作为一个实施例，处理单元81：

若所述第二视图控件的位移量大于或等于目标位移量，则确定所述第二视图控件所在的页面位置满足所述自适应调整条件。

可选地，作为一个实施例，所述目标位移量基于所述第二视图控件在被移动前距离所述页面上的预设位置的初始距离和预设距离的差值确定。

可选地，作为一个实施例，所述目标方向为上移动方向，所述第二视图控件在所述第一显示方式下的高度大于其在所述第二显示方式下的高度。

可选地，作为一个实施例，切换单元82：

将所述第二视图控件移动至目标页面位置，并在所述目标页面位置将所述第二视图控件的显示方式调整为所述第二显示方式；

其中，所述第二视图控件在所述目标页面位置处以所述第二显示方式显示时，所述第二视图控件的底部坐标与所述页面的顶部坐标的差值大于或等于第一预设值且小于第二预设值。

可选地，作为一个实施例。所述目标方向为下移动方向，所述第二视图控件在所述第一显示方式下的高度小于其在所述第二显示方式下的高度。

可选地，作为一个实施例，所述第二视图控件为页面导航视图控件，所述第一视图控件为所述第二视图控件的当前导航栏对应的展示视图控件。

本申请实施例的控制视图控件的装置还可执行图2中的控制视图控件的装置执行的方法，并实现控制视图控件的装置在图2所示实施例的功能，在此不再赘述。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。