CN106201280A - 滑动显示控制的方法及装置 - Google Patents

Abstract

本公开提供一种滑动显示控制的方法及装置，该方法包括：在显示界面设置有一底层控件；在所述显示界面还设置有一覆盖在所述底层控件上层的滑动控件，所述滑动控件包括一透明区域和非透明区域，且所述透明区域与所述底层控件的位置相对应；在所述滑动控件向上滑动过程中，所述非透明区域逐渐覆盖所述底层控件。通过在滑动控件中增加一部分区域作为覆盖在底层控件上层的透明区域，在滑动控件向上滑动的过程中透明区域超出显示界面，非透明区域随同透明区域一起向上滑动，使得下方可以留出更多用于显示内容的区域，这样，在有限的显示界面内显示更多的内容。

Description

滑动显示控制的方法及装置

技术领域

本公开总体涉及滑动显示技术领域，具体而言，涉及一种滑动显示控制的方法及装置。

背景技术

近几年来，触摸屏的手机、平板电脑等便携式移动的显示设备的使用越来越广泛，上下滑动是最简单和常用的操作，通过上下滑动的手势实现滚动视图的效果，在尺寸有限的屏幕内观看更多的内容。

通常，在显示设备的界面上设置有ScrollView控件，ScrollView是一种可以实现滚动视图效果的控件，相当于一个可以在显示设备的屏幕上显示内容的容器，通过ScrollView控件可以实现在超出屏幕范围的情况下进行滚动显示。如图1所示的ScrollView控件在屏幕上显示的原理图，假如显示设备屏幕01的左上角坐标为(0，0)，ScrollView控件02设置在移动设备屏幕坐标(0，100)的位置，ScrollView控件的宽度为200，高度为200。如图2所示，当显示内容03的高度大于ScrollView控件02的高度200时，可以通过滑动的方式来显示超过200未显示部分的内容，但是在滑动过程中，下部出现未显示部分的内容，同时位于ScrollView控件02上部显示的内容也会逐渐滑出ScrollView控件02并消失，也就是图中阴影部分并不可见，显示内容消失的位置就在ScrollView控件02起始坐标(0，100)所在的水平线，其中坐标点、ScrollView控件02以及显示的内容03的尺寸单位为像素点(pixel)。

但是，如图2所示的情况，滑动时原来显示的内容会从ScrollView控件02顶部消失，也就是说显示的区域大小仅为ScrollView控件这个容器的大小，并无法实现显示内容超出容器的效果。

因此，需要一种新的滑动显示控制的方法及装置。

在所述背景技术部分公开的上述信息仅用于加强对本公开的背景的理解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开提供一种滑动显示控制的方法及装置，以解决现有技术中无法实现显示内容超出容器的效果的技术问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的一方面，提供一种滑动显示控制的方法，包括：

在显示界面设置有一底层控件；

在所述显示界面还设置有一覆盖在所述底层控件上层的滑动控件，所述滑动控件包括一透明区域和非透明区域，且所述透明区域与所述底层控件的位置相对应；

在所述滑动控件向上滑动过程中，所述非透明区域逐渐覆盖所述底层控件。

根据本公开的一实施方式，还包括：

将所述底层控件设置在所述显示界面的上部分区域，将所述滑动控件设置在所述显示界面的整个显示区域。

根据本公开的另一实施方式，还包括：

在设置所述滑动控件的过程中，将所述透明区域的大小、形状以及中心位置设置成与所述底层控件的大小、形状以及中心位置均相同。

根据本公开的另一实施方式，还包括：

在设置所述滑动控件的过程中，将所述透明区域的形状和中心位置与所述底层控件的形状和中心位置设置成相同，且所述透明区域的面积设置成大于所述底层控件的面积。

根据本公开的另一实施方式，还包括：

在所述滑动控件向上滑动过程中，所述透明区域接近所述显示界面边缘的一侧面积逐渐减小。

根据本公开的另一方面，还提供一种滑动显示控制的装置，包括：

一显示界面；

一底层控件，设置在所述显示界面中；以及

一滑动控件，也设置在所述显示界面中，且所述滑动控件覆盖在所述底层控件上层，所述滑动控件包括一透明区域和非透明区域，且所述透明区域与所述底层控件的位置相对应；

在所述滑动控件向上滑动过程中，所述非透明区域逐渐覆盖所述底层控件。

根据本公开的另一实施方式，所述底层控件设置在所述显示界面的上部分区域，所述滑动控件设置在所述显示界面的整个显示区域。

根据本公开的另一实施方式，所述透明区域与所述底层控件的大小、形状以及中心位置均相同。

根据本公开的另一实施方式，所述透明区域与所述底层控件的形状和中心位置相同，且所述透明区域的面积大于所述底层控件的面积。

根据本公开的另一实施方式，当所述滑动控件向上滑动时，所述透明区域接近所述显示界面边缘的一侧面积逐渐减小。

根据本公开的技术方案，能够得到以下技术效果：

通过在滑动控件中增加一部分区域作为覆盖在底层控件上层的透明区域，在滑动控件向上滑动的过程中透明区域超出显示界面，非透明区域随同透明区域一起向上滑动，使得下方可以留出更多用于显示内容的区域，这样，在有限的显示界面内显示更多的内容。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本公开。

附图说明

通过参照附图详细描述其示例实施例，本公开的上述和其它目标、特征及优点将变得更加显而易见。

图1示出相关技术中ScrollView控件在屏幕上显示的原理图。

图2示出相关技术中滑动后ScrollView控件在屏幕上显示的示意图。

图3示出根据本公开一实施例中提供的一种滑动显示控制的方法的步骤流程图。

图4示出根据本公开一实施例中在显示界面中设置底层控件的示意图。

图5示出根据本公开一实施例中在显示界面中继续设置滑动控件的示意图。

图6示出根据本公开一实施例中在非透明区域显示内容的示意图。

图7示出根据本公开一实施例中滑动控件向上滑动过程的示意图。

图8示出根据本公开另一实施例中提供的一种滑动显示控制的装置的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知结构、方法、装置、实现、材料或者操作以避免喧宾夺主而使得本公开的各方面变得模糊。

附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

图3示出根据本公开的一实施例提供的一种滑动显示控制的方法的步骤流程图，该方法可以应用于一具有触摸屏的移动显示设备，例如手机。

如图3所示，在步骤S10中，在显示界面设置有一底层控件。

如图3所示，在步骤S20中，在显示界面还设置有一覆盖在底层控件上层的滑动控件，滑动控件包括一透明区域和非透明区域，且透明区域与底层控件的位置相对应。

如图3所示，在步骤S30中，在滑动控件向上滑动过程中，非透明区域逐渐覆盖底层控件。

图4示出在显示界面11中设置底层控件12的示意图，可以将底层控件设置在显示界面的上部分区域。在一实施例中，底层控件11可以为一圆形刻度盘，利用该底层控件表示某个对象或某项操作的完成进度。在其他实施例中，底层控件还可以是其他形状，例如，为长条状，也用于表示进度。

图5示出在显示界面11中进一步设置滑动控件13的示意图，可以将滑动控件13设置在显示界面11的整个显示区域。如图5所示，滑动控件13包括透明区域131和非透明区域132两部分。

为了保证能够通过透明区域131看见底层控件12，在设置滑动控件的过程中，可以采用如下方式：

方式一：将透明区域的大小、形状以及中心位置设置成与底层控件的大小、形状以及中心位置均相同；或者

方式二：将透明区域的形状和中心位置与底层控件的形状和中心位置设置成相同，且透明区域的面积设置成大于底层控件的面积。

本实施例中是以方式一为例，图5所示，圆形刻度盘的底层控件12的区域恰好与滑动控件13的透明区域131重合，剩下的部分为非透明区域132，用于显示与对象或操作相关的内容。假设相关内容的篇幅较长，超过了现有非透明区域132的大小，如图6所示，14即表示显示的内容，内容的长度大于屏幕中非透明区域可显示的长度。

由于在原有的底层控件所对应的上层设置一透明区域，下方区域仍然用于显示内容，在滑动控件向上滑动过程中，透明区域接近显示界面边缘的一侧面积逐渐减小，如图7所示。这样，透明区域既可以防止滑动控件中其他内容在未滑动时遮盖住刻度盘，又可以在滑动控件向上滑动时，使得透明区域随同非透明区域一起向上滑动，从而保证在下方的非透明区域有更大的区域用于显示内容。

本实施例中的滑动控件可以为ScrollView控件，ScrollView控件是支持垂直滚动的一类滑动控件，另外，该滑动控件还可以是支持水平滚动的HorizontalScrollView控件，但是由于在大多数人的使用习惯中，总是习惯上下滑动进行操作，因此本实施例中以ScrollView控件为例。

以下结合一实例对本实施例提供的方法进行说明：

在对显示设备的屏幕进行显示界面布局时，大体分为两层，底层设置一个圆形刻度盘，也就是底层控件，圆形刻度盘用来表示浏览一篇网页文章的完成进度。另外，在圆形刻度盘上分布有均匀的刻度格，可以但不限于利用类似时钟秒针的方式、利用区域扫描等多种方式表示进度变化情况，以更加直观的方式提示使用者浏览进度，本实施例中不做具体限定。

在底层上一层设置有滑动控件，也就是ScrollView控件，以实现滚动显示的功能。ScrollView控件覆盖在圆形刻度盘的上层，包括两部分，上部分是恰好覆盖在圆形刻度盘之上的透明区域，通过该透明区域可以看到圆形刻度盘的进度，还可以防止ScrollView控件中其他部分在还没有开始滑动时对元形刻度盘造成遮挡。ScrollView控件的下部分是非透明区域，用于显示整篇网页文章，但是显示界面的空间有限，当网页文章的长度超过非透明区域可容纳的长度时，需要在该非透明区域滑动实现网页文章向下滚动显示。本实施例通过在ScrollView控件中增加一个与圆形刻度盘等高(也可以稍大于圆形刻度盘的高度)的透明区域，在这一部分区域还可以增加对于对象的描述信息页面要展示的详细信息等内容。

利用本实施例提供的方法，当有触控事件发生时，由于ScrollView控件的透明区域和非透明区域是一体的，所以在下部分的非透明区域(也就是网页文章)向上滚动的过程中，上部分的透明区域也一同向上滑动。在不断滑动的过程中，网页文章的内容就会对会圆形刻度盘形成遮挡，也就是ScrollView控件向上滑动过程中，透明区域接近显示界面边缘的一侧面积逐渐减小，也就是透明区域的上部分变小。那么在同样尺寸的显示界面下，在透明区域逐渐减小的同时，非透明区域的面积在逐渐增大，可以显示的网页文章就多了，这样可以达到显示更多内容的目的。

另外，在圆形刻度盘可见的情况下，还可以通过响应对圆形刻度盘的触摸事件，修改进度，例如可以直接通过滑动进度指示标记的方式，或者是先弹出一对话框，然后在对话框中输入进度值，比如输入24，就是从当前进度跳转到24％的进度。

还需要说明的是，圆形刻度盘还有响应点击事件的效果，本实施例圆形刻度盘上层增加透明区域之后，在圆形刻度盘还处于可见状态下，点击透明区域(也就是圆形刻度盘可见的部分)来实现响应点击事件的效果。

综上所述，本实施例提供的滑动显示控制的方法，通过在ScrollView控件中增加一部分区域作为覆盖在底层控件上层的透明区域，在ScrollView控件向上滑动的过程中透明区域超出显示界面，非透明区域随同透明区域一起向上滑动，使得下方可以留出更多用于显示内容的区域，这样，在有限的显示界面内显示更多的内容。该方法不需要重新定义新的控件，仅仅在原有控件的基础上增加一透明区域，在没有滑动的时候并不会对原有底层控件造成遮挡，不会影响显示效果，而且容易实现。

图8示出根据本公开的另一实施例提供的一种滑动显示控制的装置的结构示意图，该装置100包括：显示界面110、底层控件120和滑动控件130。

其中底层控件120设置在显示界面110中；滑动控件130也设置在显示界面110中，且滑动控件130覆盖在底层控件120上层，滑动控件130包括一透明区域131和非透明区域132，且透明区域131与底层控件120的位置相对应。在滑动控件130向上滑动过程中，非透明区域132逐渐覆盖底层控件120。

本实施例中底层控件和滑动控件的设置过程参考上述方法实施例以及图4-图6所示的步骤图。其中，底层控件120设置在显示界面120的上部分区域，滑动控件130设置在显示界面110的整个显示区域。底层控件11可以为一圆形刻度盘，利用该底层控件表示某个对象或某项操作的完成进度。在其他实施例中，底层控件还可以是其他形状，例如，为长条状，也用于表示进度。

本实施例中滑动控件的设置可以有不同的实现方式，如下：

方式一：透明区域与底层控件的大小、形状以及中心位置均相同；

方式二：透明区域与底层控件的形状和中心位置相同，且透明区域的面积大于底层控件的面积。

该装置在使用过程中，与传统有很大不同，传统方式中当滑动控件向上滑动时，可以显示内容的区域大小并不改变，仅仅是显示内容顺序上滑，上方的内容从控件中消失，下方的内容出现在控件下部分；而对于本实施例中的装置，当滑动控件向上滑动时，透明区域接近显示界面边缘的一侧面积逐渐减小。效果参见图7，透明区域既可以防止滑动控件中其他内容在未滑动时遮盖住刻度盘，又可以在滑动控件向上滑动时，使得透明区域随同非透明区域一起向上滑动，从而保证在下方的非透明区域有更大的区域用于显示内容。

应清楚地理解，本公开描述了如何形成和使用特定示例，但本公开的原理不限于这些示例的任何细节。相反，基于本公开公开的内容的教导，这些原理能够应用于许多其它实施方式。

以上具体地示出和描述了本公开的示例性实施方式。应可理解的是，本公开不限于这里描述的详细结构、设置方式或实现方法；相反，本公开意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

Claims (10)

1.一种滑动显示控制的方法，其特征在于，包括：

在显示界面设置有一底层控件；

在所述显示界面还设置有一覆盖在所述底层控件上层的滑动控件，所述滑动控件包括一透明区域和非透明区域，且所述透明区域与所述底层控件的位置相对应；

在所述滑动控件向上滑动过程中，所述非透明区域逐渐覆盖所述底层控件。

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

将所述底层控件设置在所述显示界面的上部分区域，将所述滑动控件设置在所述显示界面的整个显示区域。

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

在设置所述滑动控件的过程中，将所述透明区域的大小、形状以及中心位置设置成与所述底层控件的大小、形状以及中心位置均相同。

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

在设置所述滑动控件的过程中，将所述透明区域的形状和中心位置与所述底层控件的形状和中心位置设置成相同，且所述透明区域的面积设置成大于所述底层控件的面积。

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

在所述滑动控件向上滑动过程中，所述透明区域接近所述显示界面边缘的一侧面积逐渐减小。

6.一种滑动显示控制的装置，其特征在于，包括：

一显示界面；

一底层控件，设置在所述显示界面中；以及

一滑动控件，也设置在所述显示界面中，且所述滑动控件覆盖在所述底层控件上层，所述滑动控件包括一透明区域和非透明区域，且所述透明区域与所述底层控件的位置相对应；

在所述滑动控件向上滑动过程中，所述非透明区域逐渐覆盖所述底层控件。

7.根据权利要求6所述的装置，其特征在于，所述底层控件设置在所述显示界面的上部分区域，所述滑动控件设置在所述显示界面的整个显示区域。

8.根据权利要求6所述的装置，其特征在于，所述透明区域与所述底层控件的大小、形状以及中心位置均相同。

9.根据权利要求6所述的装置，其特征在于，所述透明区域与所述底层控件的形状和中心位置相同，且所述透明区域的面积大于所述底层控件的面积。

10.根据权利要求6所述的装置，其特征在于，当所述滑动控件向上滑动时，所述透明区域接近所述显示界面边缘的一侧面积逐渐减小。