一种页面中下拉框的展示方法及系统与流程

本发明涉及通信技术领域，更具体地，涉及一种页面中下拉框的展示方法及系统。

背景技术：

在页面的开发过程中，通常会涉及到标题栏，标题栏大小是有限的，如果标题元素数量非常多，则无法在标题栏的容纳空间内展示所有标题元素，此时需要借助下拉框来对所有的标题元素进行展示。

具体实现方式为，在原有的标题栏内设置一个下拉按钮，当点击下拉按钮时，会弹出一个下拉框，下拉框的元素承载区比原有的标题栏的元素承载区要大，因此，能够承载更多的标题元素。

由于设计的下拉框与原始的标题栏、页面元素承载区处于同一个层级，当下拉框弹出时，需要占用页面空间，因此，页面元素承载区在页面中的位置需要变化，进而页面元素承载区中所有的页面元素的位置都会发生变化。这样就需要对每一个页面元素的位置重新进行布局和重新绘制渲染，会使得系统的性能消耗更多，由于重复的绘制渲染会导致应用卡顿等问题。

技术实现要素：

本发明提供一种克服上述问题或者至少部分地解决上述问题的页面中下拉框的展示方法及系统。

根据本发明的第一方面，提供一种页面中下拉框的展示方法，所述页面中至少包括处于同一层级的标题栏和页面元素承载区，包括：

s1，将页面中下拉框设计为悬浮形式，所述下拉框作为单独层级位于标题栏和页面元素承载区的层级之上，其中，所述下拉框用于展示标题下拉列表元素；

s2，监听所述标题栏中下拉按钮的点击事件，触发下拉框以悬浮形式弹出，以实现对下拉框中的标题下拉列表元素进行展示。

本发明的有益效果为：将下拉框设计为悬浮形式，作为单独的层级位于页面元素的层级之上，当需要对标题内容进行下拉时，下拉框与页面元素承载区处于不同的层级，下拉框的呈现不会影响页面元素承载区的位置变化，因此，也不需要对整个页面元素的位置重新布局以及重新绘制，减轻了程序开发的负担。

在上述技术方案的基础上，本发明还可以作如下改进。

进一步的，所述步骤s1中采用弹窗技术将下拉框设计为悬浮框，所述悬浮框位于页面元素承载区层级之上。

进一步的，所述步骤s1中还包括：

在可扩展标记语言xml动画描述文件中编写所述悬浮框的属性信息，其中，所述属性信息包括悬浮框移动的起始位置、结束位置以及移动的持续时间。

进一步的，所述步骤s1还包括：

在所述悬浮框中设置滑动条或滚动条，通过拖动所述滑动条或所述滚动条对悬浮框中的标题下拉列表元素进行下拉展示。

进一步的，所述步骤s2进一步包括：

s21，当监听到标题栏中下拉按钮的点击事件时，通过布局加载器对所述xml动画描述文件进行加载，解析得到所述悬浮框的动画对象；

s22，按照xml动画描述文件中编写的悬浮框的属性信息，将所述动画对象在页面上按照移动的持续时间从起始位置移动到结束位置进行播放展示。

进一步的，所述步骤s22还包括：

在进行悬浮框的动画播放展示时，通过调用动画中的构造方法判断当前动画对象是否播放结束；

若是，则开启动画对象的播放，若否，则调用动画对象中的取消方法对当前动画对象进行结束处理，再对动画对象重新进行播放。

进一步的，所述步骤s22还包括：

当所述动画对象在页面上移动的位置达到结束位置时，通过拖动下拉框中的滑动条或滚动条对悬浮框的下拉列表元素进行下拉展示。

根据本发明的第二方面，还提供了一种页面中下拉框的展示系统，包括：

设计模块，用于将页面中下拉框设计为悬浮形式，所述下拉框作为单独层级位于标题栏和页面元素承载区的层级之上，其中，所述下拉框用于展示标题下拉列表元素；

展示模块，用于监听所述标题栏中下拉按钮的点击事件，触发下拉框以悬浮形式弹出，以实现对下拉框中的标题下拉列表元素进行展示。

根据本发明的第三方面，提供了一种页面中下拉框的展示方法的设备，包括处理器(processor)、存储器(memory)和总线；

所述处理器和存储器通过所述总线完成相互间的通信；

所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如上实施方法。

根据本发明的第四方面，提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如上实施方法。

附图说明

图1为本发明一个实施例的页面中下拉框的展示方法流程图；

图2为本发明另一个实施例的页面中下拉框的展示系统连接框图；

图3为本发明页面中下拉框的展示系统中设计模块的内部连接框图；

图4为本发明又一个实施例的页面中下拉框的展示系统的整个连接框图；

图5为本发明再一个实施例的页面中下拉框的展示方法的设备连接框图。

具体实施方式

下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

参见图1，提供了本发明一个实施例的页面中下拉框的展示方法，其中的页面中至少包括标题栏和页面元素承载区，标题栏和页面元素承载区位于同一个层级上。该方法包括：s1，将页面中下拉框设计为悬浮形式，所述下拉框作为单独层级位于标题栏和页面元素承载区的层级之上，其中，所述下拉框用于展示标题下拉列表元素；s2，监听所述标题栏中下拉按钮的点击事件，触发下拉框以悬浮形式弹出，以实现对下拉框中的标题下拉列表元素进行展示。

在页面设计过程中，通常会涉及到标题栏，标题栏通常位于页面的最顶端，用来显示当前应用程序名、文件名等。标题栏的高度是有限的，因此能够展示的标题内容也是有限的。如果标题相关的内容非常多，则在标题栏的容纳空间中无法展示所有的内容。此时需要借助下拉框来对所有的内容进行展示。现有技术中由于标题栏、下拉框和页面元素承载区均处于同一层级，因此由于下拉框的存在，会使得整个页面元素承载区的位置需要下移，那么所有的页面元素的位置也会变化，对此，需要对页面所有的元素的位置进行重新布局和重新绘制。

为此，本实施例提供了一套页面中下拉框的展示方法，通过与现有技术中不同的展示方式来解决现有技术中的问题。本实施例中将页面中的下拉框设计成悬浮形式，悬浮形式的下拉框为一个单独层级，即与标题栏以及页面元素承载区所在的层级不同，悬浮形式的下拉框的层级位于页面元素承载区的层级之上，其中，下拉框主要是用于展示标题下拉列表元素的。

当标题内容不多，在原来的标题栏中能够完全展示时，则在页面中只展示标题栏；而当标题内容很多，原来的标题栏容纳空间无法展示所有的内容时，则需要借助下拉框来进行展示。具体实现为，在标题栏中设置下拉按钮，当监听到标题栏中的下拉按钮的点击事件时，触发下拉框的弹出，对下拉框中的标题下拉列表元素进行展示。

本实施例通过将下拉框设计为悬浮形式，作为单独的层级位于页面元素的层级之上，当需要对标题内容进行下拉时，下拉框与页面元素承载区处于不同的层级，下拉框的呈现不会影响页面元素承载区的位置变化，因此，也不需要对整个页面元素的位置重新布局以及重新绘制，减轻了程序开发的负担。

在上述实施例的基础上，本发明的一个实施例中，所述步骤s1中采用弹窗技术将下拉框设计为悬浮框，所述悬浮框位于页面元素承载区层级之上。

本实施例中下拉框的悬浮效果使通过android系统中的popwindow弹窗技术来实现的，具体是将下拉框设计为悬浮框，悬浮框的层级位于页面元素承载区的层级之上。对于实现悬浮框进行层级覆盖的方式有多种，本实施例中采用弹窗的实现方式是通过在原始页面中重新弹出一个框的方式。由于弹框的实现都是通过代码实现的，也就是说对于表示下拉框的弹框，通过编写单独的代码来实现，由于是单独的代码，相比直接在页面布局文件中增加层级覆盖的描述文件，在任何页面都可以被复用，提高了代码的复用性和可维护性。

本实施例通过使用弹窗技术来实现下拉框的弹框效果，由于将弹框放置于顶层的独立层中，使得将下拉框弹出时并不会改变页面元素承载区在整个页面中的位置，进而也不会触发系统对每一个页面元素的位置的重新布局和重新绘制。

在上述各实施例的基础上，本发明的另一个实施例中，所述步骤s1中还包括：在可扩展标记语言xml动画描述文件中编写所述悬浮框的属性信息，其中，所述属性信息包括悬浮框移动的起始位置、结束位置以及移动的持续时间。

在本实施例中，下拉框在弹出展示的过程中，是通过动画的形式在页面上展示的，比如，下拉框在页面中从起始位置到结束位置的移动展示。因此，在实现对下拉框的动画展示之前，需要对下拉框动画的实现方式进行设计。其中，在android系统中，动画的实现方式有多种，比如，帧动画、属性动画、属性动画或差值动画等。在本实施例中，采用属性动画的方式，在xml动画描述文件中编写悬浮框(即下拉框)的属性信息，其中，属性信息具体包括悬浮框移动的起始位置、结束位置以及移动的持续时间，而悬浮框的大小可以采用原有的大小。具体的业务实现方式如下：

translate表示下拉框的位移动画信息，在动画描述之前，先描述一下屏幕坐标系的概念，屏幕坐标系以设备屏幕的左上角为坐标原点，向右为x轴正方向，向下为y轴正方向。

android:fromydelta＝"0％p"表示下拉框动画从坐标原点的位置开始，android:toydelta＝"100％p"表示下拉框动画结束时的位置，也就是说下拉框在y轴方向从屏幕的0％移动到屏幕的100％的距离，android:duration＝"1000"表示动画持续时间是1000毫秒。

上述动画描述文件主要描述的是下拉框动画的弹出，也就是动画从顶部偏移为0的位置逐渐展开到偏移为100％的位置的过程。下拉框收起的过程刚好与上述下拉框弹出的过程相反，也就是说从fromydelta＝"100％p"到toydelta＝"0％p"的过程。

本实施例选择以xml动画描述文件的方式对下拉框的动画进行描述，是为了提高整个下拉框动画的复用性，传统是通过代码的方式来进行编写，通过代码来编写的动画和业务逻辑耦合比较深，后期对下拉框动画功能的变更和扩展相对比较麻烦，均需要修改业务代码才能实现。而本实施例中单独采用xml的方式描述下拉框动画，能够确保下拉框动画的描述文件和业务逻辑是分离的，单独采用xml的方式相比单独采用代码的形式，并且将下拉框动画的展开和收起分为两个独立的xml动画描述文件，可以提高动画文件的复用性。

在上述各实施例的基础上，本发明的一个实施例中，在所述悬浮框中设置滑动条或滚动条，通过拖动所述滑动条或所述滚动条对悬浮框中的下拉列表元素进行下拉展示。

其中，在页面上设置的悬浮形式的下拉框的大小是一定的，因此，在对标题的下拉列表元素进行展示时，下拉框无法将所有的下拉列表元素完整展示，故需要在悬浮框中设置滑动条或者滚动条，可以拖动滑动条或者滚动条对悬浮框中的下拉列表元素进行下拉展示。

在上述各实施例的基础上，本发明的另一个实施例中，所述步骤s2进一步包括：s21，当监听到标题栏中下拉按钮的点击事件时，通过布局加载器对所述xml动画描述文件进行加载，解析得到所述悬浮框的动画对象；s22，按照xml动画描述文件中的属性信息，将所述动画对象在页面上按照移动的持续时间从起始位置移动到结束位置进行播放。

当上述实施例对下拉框的动画属性进行了描述后，需要对xml动画描述文件进行加载，才能实现在页面上下拉框的动画播放。其中，在标题栏中设置了下拉按钮，通过点击下拉按钮可以出发下拉框动画的播放。因此，当监听到标题栏中下拉按钮的点击事件时，通过android系统中提供的布局加载器对xml动画描述文件进行加载，通过解析返回悬浮框的动画对象，也即将整个悬浮框当做一个动画对象进行移动，也就是说移动的是整个悬浮框，而不是悬浮框中的下拉列表元素。然后按照xml动画描述文件中的属性信息，将悬浮框的动画对象在页面上按照移动的持续时间从起始位置移动到结束位置进行播放。

在上述各实施例的基础上，本发明的一个实施例中，所述步骤s22还包括：在进行悬浮框的动画播放时，通过调用动画中的构造方法判断当前动画对象是否播放结束；若是，则开启动画对象的播放，若否，则调用动画对象中的取消方法对当前动画对象进行结束处理，再对动画对象重新进行播放。

在进行对悬浮框的动画对象进行播放前，为避免两个动画对象同时播放，需要判断当前动画对象是否播放结束。具体为通过调用动画对象中的hasended()方法判断当前动画是否结束，hasended()方法判断的方式为监测当前动画对象已经播放的时间，将动画对象已经播放的时间与xml动画描述文件中的移动持续时间进行比较，若动画对象已经播放的时间比移动持续时间小，则表明动画对象的播放还没有结束，此时需要调用动画对象中的取消方法对当前动画对象进行结束处理，再对动画对象重新进行播放；如果动画对象已经播放的时间与移动持续时间相等，则表明动画对象的播放已经结束，则开启动画对象的播放。

在上述各实施例的基础上，本发明的一个实施例中，所述步骤s22还包括：当所述动画对象在页面上移动的位置达到结束位置时，通过拖动下拉框中的滑动条或滚动条对下拉框中的下拉列表元素进行下拉展示。

在下拉框的动画对象进行播放的过程中，当下拉框的动画对象在页面上移动的位置达到结束位置时，即此时动画对象相对于页面处于静止状态时，浏览人员可以对下拉框中的下拉列表元素进行浏览。当下拉列表元素无法完整地展示在下拉框中时，可通过拖动下拉框中的滑动条或滚动条对下拉框中的下拉列表元素进行下拉展示。

参见图2，提供了本发明另一个实施例的页面中下拉框的展示系统，包括设计模块21和展示模块22。

设计模块21，用于将页面中下拉框设计为悬浮形式，所述下拉框作为单独层级位于标题栏和页面元素承载区的层级之上，其中，所述下拉框用于展示标题下拉列表元素。

展示模块22，用于监听所述标题栏中下拉按钮的点击事件，触发下拉框以悬浮形式弹出，以实现对下拉框中的标题下拉列表元素进行展示。

具体的，设计模块21，进一步用于采用弹窗技术将下拉框设计为悬浮框，所述悬浮框位于页面元素承载区层级之上。

参见图3，其中的设计模块21包括编写单元211和配置单元212。

编写单元211，用于在可扩展标记语言xml动画描述文件中编写所述悬浮框的属性信息，其中，所述属性信息包括悬浮框移动的起始位置、结束位置以及移动的持续时间。

配置单元212，用于在所述悬浮框中设置滑动条或滚动条，通过拖动所述滑动条或所述滚动条对悬浮框中的下拉列表元素进行下拉展示。

参见图4，页面中下拉框的展示系统还包括加载模块23和判断模块24。

加载模块23，用于当监听到标题栏中下拉按钮的点击事件时，通过布局加载器对所述xml动画描述文件进行加载，解析得到所述悬浮框的动画对象。

相应的，展示模块22，用于按照xml动画描述文件中的属性信息，将所述动画对象在页面上按照移动的持续时间从起始位置移动到结束位置进行播放展示。

判断模块24，用于在进行悬浮框的动画播放时，通过调用动画中的构造方法判断当前动画对象是否播放结束。

所述展示模块22，用于当所述判断模块24判断出当前动画对象播放展示结束时，开启动画对象进行播放展示，若判断模块24判断出当前动画对象播放展示未结束，则调用动画对象中的取消方法对当前动画对象进行结束处理，再对动画对象重新进行播放展示。

图5示出本申请实施例的页面中下拉框的展示方法的设备的结构框图。

参照图5，页面中下拉框的展示方法的设备包括：处理器(processor)501、存储器(memory)502和总线503；其中，所述处理器501和存储器502通过所述总线503完成相互间的通信。

所述处理器501用于调用所述存储器502中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：将页面中下拉框设计为悬浮形式，所述下拉框作为单独层级位于标题栏和页面元素承载区的层级之上，其中，所述下拉框用于展示标题下拉列表元素；监听所述标题栏中下拉按钮的点击事件，触发下拉框以悬浮形式弹出，以实现对下拉框中的标题下拉列表元素进行展示。

本发明公开一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，该计算机程序包括程序指令，当程序指令被计算机执行时，计算机能够执行上述对应实施例所提供的页面中下拉框的展示方法，例如包括：将页面中下拉框设计为悬浮形式，所述下拉框作为单独层级位于标题栏和页面元素承载区的层级之上，其中，所述下拉框用于展示标题下拉列表元素；监听所述标题栏中下拉按钮的点击事件，触发下拉框以悬浮形式弹出，以实现对下拉框中的标题下拉列表元素进行展示。

本发明还提供一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令使计算机执行上述对应实施例所提供的页面中下拉框的展示方法，例如包括：将页面中下拉框设计为悬浮形式，所述下拉框作为单独层级位于标题栏和页面元素承载区的层级之上，其中，所述下拉框用于展示标题下拉列表元素；监听所述标题栏中下拉按钮的点击事件，触发下拉框以悬浮形式弹出，以实现对下拉框中的标题下拉列表元素进行展示。

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

以上所描述的页面中下拉框的展示方法的设备等实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分方法。

本发明提供的一种页面中下拉框的展示方法及系统，从设计下拉框的层级关系出发，将下拉框设计为悬浮层级状态，且下拉框所在层级处于页面元素承载区的层级之上，由于下拉框与页面元素承载区处于不同的层级，当需要弹出下拉框时，不会影响页面元素承载区位置的变化，因此，也不需要对整个页面元素的位置重新布局以及重新绘制，减轻了程序开发的负担；另外，通过xml动画描述文件的方式对下拉框的动画进行相关描述，并通过加载动画描述文件来实现下拉框的动画播放展示，提高了动画描述文件的复用性。通过本方案能够实现在不改变原有标题栏和页面元素承载区的结构层级的状况下增加下拉框的动画展现。

最后，本申请的方法仅为较佳的实施方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。