基于界面滑动的对象展示方法、装置和存储介质与流程

本发明涉及互联网技术领域，特别涉及移动应用领域，具体是指一种基于界面滑动的对象展示方法、装置和存储介质。

背景技术：

随着互联网技术的飞速发展，通过手持设备来搜索并观看感兴趣的内容已成为一种主流的休闲方式，因此通过手持设备的界面优先展示运营重点推广的内容或核心热点功能，引导用户快速定位感兴趣的垂直内容，已成为一种愈加重要的展示方式。

目前手持设备的屏幕都不大，人们在浏览信息的时候，可能就是一掠而过，不会一条条的看信息。以视频网站的界面为例，在通过卡片的方式展示番剧信息时，用户在横屏滑动番剧卡片来寻找感兴趣的内容时，通常不会一个个看番剧的介绍，因此直接略过了一些番剧，这样容易导致一些核心和重点的内容无法得到推广，同时也容易使得用户漏掉感兴趣的内容，增加内容查找的时间成本。

技术实现要素：

本发明的目的是针对上述问题提供一种基于界面滑动的对象展示方法、装置和存储介质。

本发明的目的可以通过以下技术方案来实现：

一种基于界面滑动的对象展示方法，所述的方法包括以下步骤：

(1)根据屏幕宽度，确定所展示的对象的宽度；

(2)随着界面滑动，控制对象进行移动，所述对象的移动距离与所述对象的宽度相适应。

优选地，所述步骤(1)具体包括：根据屏幕宽度和预设展示参数，通过计算确定对象的宽度。

优选地，所述预设展示参数包括对象个数和对象之间留白的距离。

优选地，所述对象的宽度具体为：

其中，widtho为对象的宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n-1表示对象之间留白的个数。

优选地，所述预设展示参数还包括边侧漏出宽度。

优选地，所述对象的宽度具体为：

其中，widtho为对象的宽度，widthe为边侧漏出宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n+2表示对象之间留白的个数。

优选地，所述步骤(2)具体包括以下步骤：

(21)监听界面滑动事件；

(22)判断界面滑动事件是否有效，若是则进入步骤(23)，若否则返回步骤(21)；

(23)控制对象进行移动，所述对象的移动距离与所述对象的宽度相适应。

优选地，所述步骤(22)具体包括：读取界面滑动距离，判断所述界面滑动距离是否超过预设阈值，若是则表明界面滑动事件有效，进入步骤(23)，若否则表明界面滑动无效，返回步骤(21)。

优选地，所述预设阈值不小于所述对象的宽度的一半。

优选地，所述对象的移动距离具体为：对象的宽度与界面内的对象个数的乘积。

优选地，所述步骤(23)还包括：将界面滑动的方向按照近似原则转化为界面内的可移动方向上，作为对象的移动方向。

一种基于界面滑动的对象展示方法，所述的方法包括以下步骤：

(a)用户对界面执行滑动操作；

(b)界面内的对象跟随滑动操作进行移动，所述对象的移动距离与所述对象的宽度和界面内的对象个数相适应。

优选地，所述展示对象的宽度具体为：

其中，widtho为对象的宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n-1表示对象之间留白的个数。

优选地，所述展示对象的宽度具体为：

其中，widtho为对象的宽度，widthe为边侧漏出宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n+2表示对象之间留白的个数。

优选地，所述步骤(b)具体包括以下步骤：

(b1)界面判断用户的滑动操作是否有效，若是则进入步骤(b2)，若否则返回步骤(a)；

(b2)界面控制对象进行移动，所述对象的移动距离与所述对象的宽度和界面内的对象个数相适应。

优选地，所述步骤(b1)具体包括：读取滑动操作的距离，判断所述距离是否超过预设阈值，若是则表明用户的滑动操作有效，进入步骤(b2)，若否则表明用户的滑动操作无效，返回步骤(a)。

优选地，所述预设阈值不小于所述对象的宽度的一半。

优选地，所述对象的移动距离具体为：对象的宽度与界面内的对象个数的乘积。

优选地，所述步骤(b)还包括：将滑动操作的方向按照近似原则转化为界面内的可移动方向上，作为对象的移动方向。

一种基于滑动操作的界面内对象展示装置，包括处理器和存储器，所述的存储器上存储有计算机程序，该计算机程序被所述处理器执行时，实现上述中任一项基于界面滑动的对象展示方法。

一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述中任一项基于界面滑动的对象展示方法。

与现有技术相比，本发明具有以下有益效果：

(1)本发明提出的方法，通过屏幕宽度来调整展示对象的宽度，同时在界面移动时，根据展示对象的宽度来确定移动距离，从而保证每次移动界面时，都能保证每个展示对象都会显示在界面内，不会发生因用户滑动速度过快而略过部分展示内容的情况，最大程度的增加用户在展示内容上的视觉停留时间，一方面提高重点内容和待推广内容的曝光率，另一方面，避免用户忽略掉自己想要观看的内容，节省用户的搜索时间。

(2)在计算展示对象的宽度时，首先要预设展示参数，这些参数包括展示对象的个数、展示对象之间留白的距离以及方向展示对象的宽度等，通过上述参数，可以确保界面内每次显示的对象个数固定，方便后续对于移动距离的控制，同时这些参数可以根据实际情况进行选取，从而保证最后的展示效果。

(3)方向展示对象一般通过露出部分展示对象的形式实现，它的存在可以提醒用户滑动方向，知道哪一部分可以浏览到更多的展示对象，实现简单且展示效果好。

(4)在根据界面滑动来移动展示对象的过程中，对于界面滑动事件首先有一个有效性的判断，在界面滑动距离超过预设阈值时才会控制展示对象进行移动，这样可以避免用户由于手滑等情况而对展示对象进行误移动。

(5)移动距离为展示对象的宽度与展示界面内对象的个数的乘积，即表明每次移动都会移动到下一部分未展示的展示对象中，既不会重复展示，提高展示效率，同时也不会漏展示，保证重点和推荐内容的有效曝光。

(6)展示对象的移动方向与界面滑动的方向一致，可以提升用户的操作体验，提高展示效果。

附图说明

图1为本发明基于界面滑动的对象展示方法的步骤流程图；

图2为实施例1中计算展示卡片宽度的流程图；

图3为实施例1中控制展示卡片移动的流程图；

图4为实施例1中实际的展示效果图。

具体实施方式

为了能够更清楚地理解本发明的技术内容，特举以下实施例详细说明。

请参阅图1所示，为本发明基于界面滑动的对象展示方法的步骤流程图。

在一种实施方式中，该基于界面滑动的对象展示方法，包括以下步骤：

(1)根据屏幕宽度，确定所展示的对象的宽度；

(2)随着界面滑动，控制对象进行移动，所述对象的移动距离与所述对象的宽度相适应。

其中，步骤(1)具体包括：根据屏幕宽度和预设展示参数，通过计算确定对象的宽度。

预设展示参数包括对象个数和对象之间留白的距离。

此时，对象的宽度具体为：

其中，widtho为对象的宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n-1表示对象之间留白的个数。

除此之外，预设展示参数还包括边侧漏出宽度。

此时，对象的宽度具体为：

其中，widtho为对象的宽度，widthe为边侧漏出宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n+2表示对象之间留白的个数。

步骤(2)具体包括以下步骤：

(21)监听界面滑动事件；

(22)判断界面滑动事件是否有效，若是则进入步骤(23)，若否则返回步骤(21)；

(23)控制对象进行移动，所述对象的移动距离与所述对象的宽度相适应。

步骤(22)具体包括：读取界面滑动距离，判断所述界面滑动距离是否超过预设阈值，若是则表明界面滑动事件有效，进入步骤(23)，若否则表明界面滑动无效，返回步骤(21)。

预设阈值不小于所述对象的宽度的一半。

对象的移动距离具体为：对象的宽度与界面内的对象个数的乘积。

步骤(23)还包括：将界面滑动的方向按照近似原则转化为界面内的可移动方向上，作为对象的移动方向。

在以用户为主体的情况下，上述基于界面滑动的对象展示方法，包括以下步骤：

一种基于界面滑动的对象展示方法，包括以下步骤：

(a)用户对界面执行滑动操作；

(b)界面内的对象跟随滑动操作进行移动，所述对象的移动距离与所述对象的宽度和界面内的对象个数相适应。

其中，对象的宽度具体为：

其中，widtho为对象的宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n-1表示对象之间留白的个数。

再考虑到两个边侧有漏出内容时，对象的宽度也可以为，展示对象的宽度具体为：

其中，widtho为对象的宽度，widthe为边侧漏出宽度，widths为屏幕宽度，widthm为对象之间留白的距离，n为对象个数，n+2表示对象之间留白的个数。

步骤(b)具体包括以下步骤：

(b1)界面判断用户的滑动操作是否有效，若是则进入步骤(b2)，若否则返回步骤(a)；

(b2)界面控制对象进行移动，所述对象的移动距离与所述对象的宽度和界面内的对象个数相适应。

步骤(b1)具体包括：读取滑动操作的距离，判断所述距离是否超过预设阈值，若是则表明用户的滑动操作有效，进入步骤(b2)，若否则表明用户的滑动操作无效，返回步骤(a)。

预设阈值不小于所述对象的宽度的一半。

对象的移动距离具体为：对象的宽度与界面内的对象个数的乘积。

步骤(b)还包括：将滑动操作的方向按照近似原则转化为界面内的可移动方向上，作为对象的移动方向。。

除此之外，本实施例中还提出了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述中任一项基于界面滑动的对象展示方法；以及一种基于滑动操作的界面内对象展示装置，包括处理器和存储器，所示的存储器上存储有计算机程序，该计算机程序被所述处理器执行时，实现上述中任一项基于界面滑动的对象展示方法。

在实际应用中，本发明基于界面滑动的对象展示方法的具体实现方式，通过以下实施例说明。

实施例1

本实施例中，界面内对象的移动实际上是基于recyclerview技术来实现的，recyclerview是androidl版本中新添加的一个用来取代listview的sdk，它的灵活性与可替代性比listview更好。它仅仅维护少量的view并且可以展示大量的数据集。

本实施例中以视频网站中的番剧卡片作为对象，具体的番剧卡片的展示方法如下：

用户打开app，进入到番剧首页。番剧首页的recyclerview加载数据。在recyclerview里的view绘制界面的时候，计算每个view的宽度，即每个番剧卡片的宽度。

本实施例中以横向屏幕展示三个卡片为例(在实际应用中，屏幕宽度可以为横向屏幕宽度，也可以为竖向屏幕宽度，同时卡片的展示数量根据实际的设计情况确定，不局限于3个，如果是竖向屏幕可以少于3个，横向屏幕可以多于3个，只要保证能达到较好的视觉展示效果即可)，如图2所示为计算番剧卡片宽度的过程。

从图2可以看出，该番剧卡片的宽度根据屏幕宽度和设定的一些参数值来确定，具体的计算公式为：

每个卡片的宽度：

其中，屏幕的宽度为widthe，左右两边卡片漏出为widthe，卡片之间的白边间距为widthm。

在计算得到了上述番剧卡片宽度后，由于设定的参数值和屏幕宽度均已确定，因此可以得到一个初始化的展示界面，展示效果如图4所示，从图中可以看出，三个卡片居于屏幕的正中央，并且两边各有其他卡片漏出。暗示用户可以左滑或者右滑浏览其他的卡片。

在展示界面基本确定后，就是根据用户滑动操作来控制番剧卡片移动的过程，具体流程如图3所示，从图中可以看出，用户会在页面上滑动，此时通过监听得到了用户滑动的距离distance。当这个距离大于某个值delta时候，我们视为用户滑动了，可以滚动到其他的卡片上如果这个滑动距离太小，用户松手后，recyclerview根据滑动距离自动滚回原来位置，不予滑动到后面卡片。在监听到了滑动超过最小距离后，可以根据distance的正负值判断出用户滑动的方向，是往左滑动，还是往右滑动；同时根据前一步骤获得的番剧卡片的宽度，计算得到recyclerview应该滚动的距离，本实施例中，由于我们希望用户滑动一次，只滑动三个卡片，因此计算当前第一个卡片的起始位置，加上三个卡片的宽度，即为番剧卡片的移动距离，在得到了移动方向和移动距离后，调用recyclerview滚动方法，进行滚动，即可将节目展示到相应的卡片处。通过这种方法，可以保证每一次移动后展示的番剧卡片，都是与上一次界面内番剧卡片不同且相邻的番剧卡片，既不会重复展示，也不会漏掉任何一个卡片内容，保证了展示的效果，极大的曝光了每个番剧卡片的展示时间，吸引了用户的目光停留。对于重点番剧的推广，冷门番剧内容的展示，有着很大的帮助。

实施例2

本实施例中界面展示过程与实施例1的情况和流程基本相同，区别在于，本实施例中的界面内，只展示完整的番剧卡片，左右两边不会漏出部分不完整的番剧卡片提醒方向，从而进一步突出想要展示的内容，因此本实施例中每个卡片的宽度变为：

其中，屏幕的宽度为widths，卡片之间的白边间距为widthm。

除上述区别外，其余的方法流程与实施例1均相同。

实施例3

本实施例中界面展示过程与实施例1的情况基本相同，区别在于本实施例中的展示对象是热门内容分类框而非番剧卡片，此时计算的宽度即为热门内容分类框的宽度，其余过程与实施例1均相同。

实施例4

本实施例中界面展示过程与实施例1的情况基本相同，区别在于本实施例中的番剧卡片是上下排列而非左右排列，此时计算的宽度实际上是番剧卡片的上下宽度而非左右宽度，同时用户的操作方向为上下滑动而非左右滑动，其余过程与实施例1中的过程均相同。

实施例5

本实施例中界面展示过程与实施例1的情况基本相同，区别在于本实施例中番剧卡片的数量为2个而非3个，因此本实施例中每个卡片的宽度变为：

其中，屏幕的宽度为widths，左右两边卡片漏出宽度为widthe，卡片之间的白边间距为widthm。

除上述区别外，其余的方法流程与实施例1均相同。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。