CN109062653B - 长图文信息显示方法、计算机装置及计算机可读存储介质 - Google Patents

Abstract

本发明公开一种长图文信息显示方法、计算机装置及计算机可读存储介质，该方法包括接收显示屏上的滑动信号，根据滑动信号，确定列表视图在显示屏上的列表视图偏移量，并根据列表视图偏移量调整并显示滑动后的列表视图；并且，根据列表视图偏移量计算列表视图中长图文信息视图中的子视图的子视图偏移量，根据子视图偏移量移动子视图在长图文信息视图显示区域中的位置，并显示移动后的子视图。本发明还提供实现上述方法的计算机装置以及计算机可读存储介质。本发明能够让用户通过简单的操作浏览长图文信息的全部内容。

Description

长图文信息显示方法、计算机装置及计算机可读存储介质

技术领域

本发明涉及计算机的图像显示领域，尤其涉及一种长图文信息显示方法、实现这种方法的计算机装置以及计算机可读存储介质。

背景技术

智能手机、平板电脑等终端装置成为人们日常生活中最经常使用的电子设备，人们喜欢在智能电子设备上浏览各种信息，例如通过浏览器观看新闻、浏览微博或者看微信朋友圈等。由于浏览的信息较多，现在的浏览器通常通过列表的方式将多条信息展示在电子设备的显示屏上，用户通过在显示屏上输入滑动信号来实现列表的上移或者下移，从而浏览更多的内容。

参见图1，电子设备的显示屏11上显示浏览器的一个界面，例如该界面是由UIview控件生成的容器视图，该容器视图包括位于显示屏11顶部标签部分12以及位于标签部分12下方的列表视图13。标签部分12通常显示诸如用户的头像、名称以及签名信息等，而列表视图13则显示多条列表信息，每一条列表信息均具有一定的显示位置。

图1中，列表视图13所在的显示区域上当前显示三条列表信息，三条列表信息分别显示在子视图14、15以及16中，其中，前面两条列表信息是普通的信息，因此，这两条列表信息所在的视图14、15为普通的列表信息视图，而最后一条列表信息是长图文列表信息，因此该列表信息所在的视图16为长图文信息视图。当然，列表视图13还可以包括更多的列表信息，只是受限于显示屏11的尺寸，不能同时显示所有的列表信息。

如果用户需要浏览更多的列表信息，则可以使用手指在显示屏11上滑动，例如向上滑动，这样，多条列表信息将在列表视图13的显示区域内滑动，位于长图文信息视图16下的其他列表信息将显示在列表视图13的显示区域上。

每一条列表信息均具有文字或者图片，例如普通列表信息视图14的列表信息有两行文字17，两行文字17是上下排列的显示在列表信息视图14内。相同的，普通列表信息视图15的列表信息也有两行文字。而长图文信息视图16的长图文信息往往包含有多行文字或者图片，但是由于每一个视图在列表视图13内的显示区域是固定的，即长图文信息视图16的长度与宽度是固定的，通常在长图文信息视图16的显示区域内无法完整的显示长图文信息所有内容。例如长图文信息视图16中仅仅显示了子视图18以及其他两个视图，其他的信息并未显示。如果用户需要浏览长图文信息的其他内容，则需要用手指在长图文信息视图16的显示区域内上下滑动，从而单独的移动长图文信息视图16内各个子视图。

在一些应用程序中，长图文信息视图采用显示区域可变的方式显示，例如在初始状态下，长图文信息视图的显示区域较小，只能显示一部分内容，当然用户需要浏览长图文信息的全部内容时，则通过输入特定的指令，例如点击显示屏11某一虚拟按键，如“展开”按键，或者在显示屏11滑动形成特定的轨迹。当用户输入指令以后，长图文信息视图的显示区域增大，显示全部的内容。

但是，现有的两种显示方式都导致用户需要通过额外的操作才能浏览到长图文信息的全部内容，如果用户仅仅浏览长图文信息的一部分内容时，未必认为长图文信息是感兴趣的内容，导致用户未必有兴趣浏览全部的内容，这样导致用户获取的信息较少，也不利于用户获取长图文信息的全部内容。

发明内容

本发明的主要目的是提供一种方便用户浏览完整的长图文信息的长图文信息显示方法。

本发明的另一目的是提供一种能够实现上述长图文信息显示方法的计算机装置。

本发明的再一目的是提供一种能够实现上述长图文信息显示方法的计算机可读存储介质。

为了实现上述的主要目的，本发明提供的长图文信息显示方法包括接收显示屏上的滑动信号，根据滑动信号，确定列表视图在显示屏上的列表视图偏移量，并根据列表视图偏移量调整并显示滑动后的列表视图；并且，根据列表视图偏移量计算列表视图中长图文信息视图中的子视图的子视图偏移量，根据子视图偏移量移动子视图在长图文信息视图显示区域中的位置，并显示移动后的子视图。

由上述方案可见，当用户在显示屏上滑动并且形成滑动信号以后，不但列表视图的显示位置发生变化，长图文信息视图中的子视图的位置也相应的发生变化，用户可以看到长图文信息中更多的内容。因此，用户不需要单独滑动长图文信息视图中的子视图，也不需要增大长图文信息视图的显示区域，即可以看到长图文信息视图中的全部内容，从而方便用户浏览长图文信息的全部内容。

一个优选的方案是，根据列表视图偏移量计算列表视图中长图文信息视图中的子视图的子视图偏移量包括：子视图偏移量正比例于长图文信息视图在列表视图中的偏移量与列表视图偏移量的差值。

由此可见，通过计算长图文信息视图在列表视图中的偏移量与列表视图偏移量的差值，并且在调节子视图的偏移量时，通过该差值可以合理的计算出子视图的位置，确保列表视图的移动过程中，长图文信息视图的子视图跟随移动。

进一步的方案是，根据列表视图偏移量计算列表视图中长图文信息视图中的子视图的子视图偏移量包括：计算长图文信息视图在列表视图中的偏移量与列表视图偏移量的差值，并计算差值与长图文信息的长度的乘积以后，除以显示屏的长度，以计算结果作为子视图偏移量。

可见，通过上述计算可以使得长图文信息视图从显示屏的一端移动至显示屏的另一端时，长图文信息视图中的各个子视图可以在显示屏上均被显示过，从而确保用户能够完整的浏览到长图文信息中的全部内容。

更进一步的方案是，长图文信息视图滑动至列表视图显示区域的端部时，长图文信息视图显示位于长图文信息视图端部的子视图。

由此可见，在长图文信息视图滑动至列表视图显示区域的端部时，例如滑动至列表视图显示区域的顶端或者底端时，长图文信息视图所显示的是位于端部的子视图，这样可以让用户在列表视图滑动过程中浏览完整的长图文信息视图的内容。

更进一步的方案是，长图文信息视图滑动至列表视图显示区域的端部后，判断长图文信息视图是否继续向列表视图显示区域的端部滑动，如是，停止滑动长图文信息视图中的子视图。

由此可见，如果用户继续沿着端部的方向滑动列表视图，由于长图文信息视图的子视图已经滑动至端部，则不再继续移动各个子视图的位置，确保用户可以继续浏览长图文信息视图的内容。

更进一步的方案是，列表视图偏移量为沿显示屏长度方向的偏移量，且子视图偏移量为沿显示屏长度方向的偏移量；或者，列表视图偏移量为沿显示屏宽度方向的偏移量，且子视图偏移量为沿显示屏宽度方向的偏移量。

由此可见，本发明可以针对沿显示屏长度方向或者宽度方向滑动列表视图，方便不同的应用程序或者使用习惯的用户使用。

为了实现上述的另一目的，本发明还提供的计算机装置包括处理器以及存储器，存储器存储有计算机程序，计算机程序被处理器执行时实现上述的长图文信息显示方法的各个步骤。

为了实现上述的再一目的，本发明还提供的计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述长图文信息显示方法的各个步骤。

附图说明

图1是现有的列表视图的显示示意图。

图2是应用本发明长图文信息显示方法实施例的列表视图的第一显示状态的示意图。

图3是本发明长图文信息显示方法实施例的流程图。

图4是应用本发明长图文信息显示方法实施例的列表视图的第二显示状态的示意图。

图5是应用本发明长图文信息显示方法实施例的列表视图的第三显示状态的示意图。

以下结合附图及实施例对本发明作进一步说明。

具体实施方式

本发明的长图文信息显示方法应用在具有显示屏的电子设备上，尤其是以列表方式显示内容的电子设备。本发明的计算机装置可以是上述的电子设备，计算机可读存储介质可以是具有数据存储功能的各种存储介质，包括但不限于FLASH、EEPROM等非易失性存储器。

长图文信息显示方法实施例：

应用本实施例的长图文信息显示方法的终端设备可以是智能手机、平板电脑等便携式电子设备，并且这些电子设备具有触摸式显示屏，用户可以在触摸式显示屏上形成滑动信号，触摸式显示屏可以接收用户发出的滑动信号，电子设备可以响应用户的滑动信号。

参见图2，本实施例的长图文信息显示方法应用在智能手机上，智能手机具有触摸式显示屏21，显示屏21所显示的是一个浏览器的显示界面，优选的，该界面是由UIview控件生成的容器视图，容器视图包括位于显示屏21顶部标签部分22以及位于标签部分22下方的列表视图23。标签部分22显示诸如用户的头像、名称以及签名信息等，而列表视图23显示多条列表信息，本实施例中，每一条列表信息均具有一定的显示位置。

例如，在图2所显示的列表视图23的显示区域内当前显示三条列表信息，三条列表信息分别显示在视图24、25以及26中，其中，前面两条列表信息是普通的信息，因此，这两条列表信息所在的视图24、25为普通的列表信息视图，而最后一条列表信息是长图文列表信息，因此该列表信息所在的视图为长图文信息视图26。当然，列表视图23还可以包括更多的列表信息，只是受限于显示屏21的尺寸，不能同时显示所有的列表信息。

并且，每一条列表信息均具有文字或者图片，例如普通列表信息视图24的列表信息有两行文字27，两行文字27是上下排列的显示在列表信息视图24内。相同的，普通列表信息视图25的列表信息也有两行文字。而长图文信息视图26的长图文信息往往包含有多行文字或者图片，但是由于每一个视图在列表视图23内的显示区域是固定的，即长图文信息视图26的显示区域在显示屏21上的长度与宽度是固定的，因此在长图文信息视图26的显示区域内无法完整的显示长图文信息所有内容。本实施例就是解决如何让用户通过简单的操作浏览长图文信息的全部内容。

需要说明的是，本实施例的长度是指沿着显示屏21的长度方向，即图2中上下延伸的方向，而宽度是指沿着显示屏21的宽度方向，即图2中左右延伸的方向。

具体的，长图文信息视图26包含有多个子视图，例如包含有子视图28，每一个子视图可以是一张图片，也可以是一行或者多行文字，并且每一个子视图都有固定的显示长度，长图文信息视图26中的所有子视图的显示长度之和大于长图文信息视图26在显示屏21上的显示长度，因此在长图文信息视图26上将无法完全显示长图文信息的全部内容。本实施例的方法就是解决如何让用户通过简单的操作浏览长图文信息的全部内容。

下面结合图3介绍本实施例的工作流程。首先，接收显示屏上的滑动信号，即执行步骤S1。在显示屏21显示列表视图23时，列表视图23上包含有多个列表信息，但并没有完整显示列表视图23的全部信息，因此用户需要通过在显示屏21上滑动来带动列表视图23的上下滑动，从而显示更多的列表信息。因此，步骤S1就是检测在显示屏21上是否形成有滑动信号。

然后，执行步骤S2，在接收到形成在显示屏21上的滑动信号，根据该滑动信号确定列表视图的偏移量。由于显示屏21接收到用户的滑动信号以后，将根据滑动信号的力度、手指移动距离来确定显示屏21上的视图移动的距离，例如当用户在显示屏21上向上滑动后，该次滑动信号对应的列表视图偏移量是50行像素。列表视图偏移量是列表视图23的内容在显示屏21上移动的距离，在初始状态下，列表视图23的顶部显示的是普通信息的视图24，视图24的下方依次显示视图25以及长图文信息视图26，即图2所示的状态。当用户手指在显示屏21上滑动以后，列表视图23在显示屏21上的显示区域往往并不发生变化，但是列表视图23内所显示的各个视图的位置将发生变化，如图4所示的，原本位于列表视图23顶端的视图24将因为向上移动而超出了列表视图23的显示区域，因此图4中视图24已经不可见，而列表视图23中的视图25移动至列表视图23的顶端，长图文信息视图26也从列表视图23显示区域的底端向上滑动至列表视图23显示区域的中部。其中，列表视图偏移量就是列表视图23中相对于显示屏21的滑动的距离。由于根据滑动信号计算视图的移动距离可以采用现有的技术实现，在此不再赘述。

当计算列表视图的偏移量以后，还需要显示滑动后的列表视图，即显示列表视图23中各个视图滑动以后在列表视图23显示区域内的位置，如图4所示。

然后 ，执行步骤S3，判断长图文信息视图是否以及滑动至列表视图23显示区域的端部，并且滑动信号是继续朝向该端部继续滑动，如是，执行步骤S4，否则，执行步骤S5。如果长图文信息视图26并未滑动至列表视图23显示区域的端部，如顶端或者底端，则执行步骤S5，根据列表视图偏移量计算长图文信息视图中子视图的偏移量。具体的，可以使用下面的公式计算子视图的偏移量：

子视图的偏移量= (长图文信息长度/显示屏长度)×(长图文信息视图在列表视图中的偏移量-列表视图偏移量)。

其中，长图文信息长度是长图文信息完整显示时所占的长度，虽然长图文信息不能完全显示在长图文信息视图26的显示区域上，但是长图文信息中的每一个子视图都有自身的长度，因此，长图文信息的长度就是长图文信息中各个子视图的长度总和。例如，长图文信息的长度是400行像素。显示屏长度是显示屏21的总长度，例如显示屏在长度方向上的总像素是1080行。

长图文信息视图在列表视图中的偏移量是长图文信息视图26相对于列表视图23最顶端的视图的距离，例如，在初始显示列表视图23时，长图文信息视图26位于列表视图23显示区域的中间位置，长图文信息视图26的最上端与列表视图23最顶端之间有五个其他的视图，则长图文信息视图在列表视图中的偏移量是这五个其他视图的长度总和。

由于上述公式中，长图文信息长度、显示屏长度以及长图文信息视图在列表视图中的偏移量都是固定值，而列表视图偏移量是变化值，因此，每一次接收到滑动信号以后，都需要计算的子视图的偏移量，子视图可以在长图文信息视图26的显示区域上滑动。

另外，由于长图文信息视图26中的子视图的偏移量是正比于长图文信息视图在列表视图中的偏移量与列表视图偏移量的差值，因此，当列表视图偏移量越大，长图文信息视图26中的子视图的偏移量也越大，并且，通过上述的公式，可以使得当长图文信息视图26已经滑动至列表视图23显示区域的端部，例如已经滑动至列表视图23显示区域的顶端时，此时，长图文信息视图26所显示的子视图应该是位于长图文信息视图26底端的子视图。

相应的，当长图文信息视图26已经滑动至列表视图23显示区域的底端时，长图文信息视图26所显示的子视图应该是位于长图文信息视图26顶端的子视图。这样，在长图文信息视图26从列表视图23显示区域的底端滑动至顶端的过程中，长图文信息视图26中的子视图实际上是持续的滑动的，并且从最顶端的子视图持续向最底端的子视图滑动，让用户可以浏览所有的子视图。

在计算子视图的偏移量以后，执行步骤S6，根据子视图的偏移量移动子视图在长图文信息视图26中的位置，例如，根据上述的公式计算出长图文信息视图26中子视图的偏移量是向上滑动50行像素，则步骤S6就是将长图文信息视图26个各个子视图均向上滑动50行像素，并且执行步骤S7，显示移动后的子视图，如图4所示。

这样，当用户在显示屏21上滑动以后，不但长图文信息视图26在列表视图23所在的显示区域内滑动，而且长图文信息视图26中的各个子视图也相应的在长图文信息视图26内滑动。

最后，执行步骤S8，判断是否退出列表视图的显示，也就是判断用户是否发出退出显示的指令，如是，结束流程，否则，返回执行步骤S1，接收下一次的滑动信号。

在步骤S3中，如果确定长图文信息视图26已经滑动至列表视图显示区域的端部，例如，如图5所示的，如果长图文信息时报26已经滑动至列表视图23的顶端，所显示的是位于长图文信息视图26最底端的子视图30，且子视图30的底端位于长图文信息视图26显示区域的下边缘处。此时，如果用户的滑动信号是继续向上滑动，则步骤S3的判断结果为是，执行步骤S4，并不会移动长图文信息视图26中各个视图的位置。

由于长图文信息视图26所显示的子视图已经是顶端或者底端的子视图，因此，在用户继续朝着端部滑动时，长图文信息视图26不可以再移动子视图的位置，因此需要保持子视图的在长图文信息视图26中的位置不变，即停止移动长图文信息视图26中的子视图。

本实施例的方法可以使用软件程序实现，软件程序的设计过程如下：首先，通过UIView的视图控件创建一个容器视图，然后，通过UICollectionView或UITableView视图控件创建列表视图，并将列表视图添加至已经创建的容器视图中。接着，获取需要呈现的子视图的数据源，其中每一个呈现出来的视图都需要数据来支持，如一张图片、一个图片链接、文字等，包括长图文信息数据源。最后，当用户通过智能手机等电子设备的显示屏来显示列表视图时，执行上述的长图文信息视图显示方法。

可见，通过本发明的方法，用户只需要用手指在显示屏上滑动形成滑动信号，在长图文信息视图滑动的过程中，长图文信息视图中的子视图也跟随滑动，这样用户不需要执行特定的操作，也可以在长图文信息视图滑动过程中浏览长图文信息视图中的全部内容，方便用户获取更多的信息。尤其是针对诸如广告信息，用户最开始可能对广告信息并不感兴趣，不打算浏览完整的内容。通过本发明的方法，可以让用户浏览完整的广告信息的内容，用户可能从该广告信息中获取感兴趣的内容，从而为用户提供便利。

计算机装置实施例：

本实施例的计算机装置包括有处理器、存储器以及存储在存储器中并可在处理器上运行的计算机程序，例如用于实现上述信息处理方法的信息处理程序。处理器执行计算机程序时实现上述长图文信息显示方法的各个步骤。

例如，计算机程序可以被分割成一个或多个模块，一个或者多个模块被存储在存储器中，并由处理器执行，以完成本发明的各个模块。一个或多个模块可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述计算机程序在终端设备中的执行过程。

需要说明的是，终端设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。终端设备可包括，但不仅限于，处理器、存储器。本领域技术人员可以理解，本发明的示意图仅仅是终端设备的示例，并不构成对终端设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如终端设备还可以包括输入输出设备、网络接入设备、总线等。

本发明所称处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器 (Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列 (Field-Programmable Gate Array，FPGA) 或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，处理器是终端设备的控制中心，利用各种接口和线路连接整个终端设备的各个部分。

存储器可用于存储计算机程序和/或模块，处理器通过运行或执行存储在存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现终端设备的各种功能。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据手机的使用所创建的数据（比如音频数据、电话本等）等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡（SmartMedia Card, SMC），安全数字（Secure Digital, SD）卡，闪存卡（Flash Card）、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

计算机可读存储介质：

终端设备集成的模块如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个长图文信息显示方法的各个步骤。

其中，计算机程序包括计算机程序代码，计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。计算机可读介质可以包括：能够携带计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、电载波信号、电信信号以及软件分发介质等。需要说明的是，计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

当然，上述的方案只是本发明优选的实施方案，实际应用是还可以有更多的变化，例如，长图文信息视图并不是在显示屏长度方向黄滑动，而是在宽度方向上滑动，这样，长图文信息视图中的各个子视图也可以跟随在显示屏的宽度方向上滑动，这样的改变不影响本发明的实施，也应该包括在本发明的保护范围内。

Claims (9)

1.长图文信息显示方法，包括：

接收显示屏上的滑动信号，根据所述滑动信号，确定列表视图在所述显示屏上的列表视图偏移量，并根据所述列表视图偏移量调整并显示滑动后的所述列表视图；

所述列表视图包含有多条列表信息，其中一条所述列表信息为长图文信息，长图文信息视图中包含有多个子视图；

其特征在于：

根据所述列表视图偏移量计算所述列表视图中长图文信息视图中的所述子视图的子视图偏移量，根据所述子视图偏移量移动所述子视图在所述长图文信息视图显示区域中的位置，并显示移动后的所述子视图；

在所述长图文信息视图在所述列表视图所在的显示区域内滑动的过程中，所述长图文信息视图中的所述子视图也跟随滑动。

2.根据权利要求1所述的长图文信息显示方法，其特征在于：

根据所述列表视图偏移量计算所述列表视图中长图文信息视图中的子视图的子视图偏移量包括：所述子视图偏移量正比例于所述长图文信息视图在所述列表视图中的偏移量与所述列表视图偏移量的差值。

3.根据权利要求2所述的长图文信息显示方法，其特征在于：

根据所述列表视图偏移量计算所述列表视图中长图文信息视图中的子视图的子视图偏移量包括：计算所述长图文信息视图在所述列表视图中的偏移量与所述列表视图偏移量的差值，并计算所述差值与所述长图文信息的长度的乘积以后，除以所述显示屏的长度，以计算结果作为所述子视图偏移量。

4.根据权利要求1至3任一项所述的长图文信息显示方法，其特征在于：

所述长图文信息视图滑动至所述列表视图显示区域的端部时，所述长图文信息视图显示位于所述长图文信息视图端部的子视图。

5.根据权利要求4所述的长图文信息显示方法，其特征在于：

所述长图文信息视图滑动至所述列表视图显示区域的端部后，判断所述长图文信息视图是否继续向所述列表视图显示区域的端部滑动，如是，停止滑动所述长图文信息视图中的子视图。

6.根据权利要求1至3任一项所述的长图文信息显示方法，其特征在于：

所述列表视图偏移量为沿所述显示屏长度方向的偏移量；

所述子视图偏移量为沿所述显示屏长度方向的偏移量。

7.根据权利要求1至3任一项所述的长图文信息显示方法，其特征在于：

所述列表视图偏移量为沿所述显示屏宽度方向的偏移量；

所述子视图偏移量为沿所述显示屏宽度方向的偏移量。

8.计算机装置，其特征在于，包括处理器以及存储器，所述存储器存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任意一项所述长图文信息显示方法的各个步骤。

9.计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现如权利要求1至7中任意一项所述长图文信息显示方法的各个步骤。

Images