一种列表视图的展现方法及装置制造方法及图纸

本发明专利技术涉及一种列表视图的展现方法及装置，该方法包括：接收对列表视图的点击操作，生成控制列表视图展现的操作指令，列表视图上具有两类子视图，两类子视图包括：标题视图和各列表项内容视图；基于点击操作，获取列表视图当前的展现状态；基于列表视图当前的展现状态和控制列表视图展现的操作指令，对列表视图上的两类子视图进行自动布局；在列表视图当前的展现状态为收缩状态时，获取列表视图上待展现的各列表项内容视图的顶端分别距离标题视图的底端的第一距离，获取各列表项内容视图的左端分别距离标题视图左端的第二距离；基于第一距离和第二距离，将列表视图上的各列表项内容视图进行自动布局，有效降低电子设备或应用程序性能的消耗。

A display method and device of list view

The invention relates to a display method and device of list view, the method includes: receiving the click operation of list view, generating the operation instruction to control the display of list view, there are two types of subviews on list view, the two types of subviews include: Title View and content view of each list item; obtaining the current display state of list view based on the click operation; based on list view Figure the current display status and the operation instructions controlling the display of the list view, and automatically layout the two types of subviews on the list view. When the current display status of the list view is in the shrinking state, obtain the first distance between the top of each list item content view to be displayed and the bottom of the title view, and the left of each list item content view The second distance from the left end of the title view; based on the first distance and the second distance, the list item content views on the list view are automatically arranged to effectively reduce the consumption of electronic devices or applications.

【技术实现步骤摘要】
一种列表视图的展现方法及装置
本专利技术涉及互联网应用开发
，尤其涉及一种列表视图的展现方法及装置。
技术介绍
在实现应用程序开发中，经常需要实现一类场景，对列表视图的展示。具体地，通过点击具有一定属性的列表，能够展开具有相同属性的各列表项，再点击该列表视图时，该列表视图呈收缩状态。列表视图的状态可通过用户的点击行为实现自动的展开或者收缩。目前常规的实现手段是，根据各列表项的内容计算每个列表项中文字的高度，再将该文字的高度加上其他元素的高度，最终得到该列表项实际的高度。每当需要展开列表时，都需要计算每个列表项实际的高度，需要不断计算高度，同时刷新页面，这个过程消耗电子设备的性能较大。因此，如何在列表展示的过程中降低电子设备性能的消耗是目前亟待解决的技术问题。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的列表视图的展现方法及装置。第一方面，本专利技术实施例提供一种列表视图的展现方法，包括：接收对列表视图的点击操作，生成控制列表视图展现的操作指令，所述列表视图上具有两类子视图，所述两类子视图包括：标题视图和各列表项内容视图，所述标题视图的层级最高；基于所述点击操作，获取所述列表视图当前的展现状态；基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令，对所述列表视图上的所述两类子视图进行自动布局；其中，在所述列表视图当前的展现状态为收缩状态时，获取所述列表视图上待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离，以及获取所述各列表项内容视图的左端分别距离所述标题视图左端的第二距离；基于所述第一距离和所述第二距离，将所述列表视图上的所述各列表项内容视图相对于所述标题视图进行自动布局。进一步地，所述在所述列表视图当前的展现状态为收缩状态时，还包括：将所述列表视图中的所述标题视图进行自动布局，具体包括：获取所述列表视图中的所述标题视图的顶端距离所述列表视图的顶端的第三距离、获取所述标题视图的左端距离所述列表视图的左端的第四距离；基于所述第三距离、所述第四距离，将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。进一步地，还包括：在所述列表视图当前的展现状态为展开状态时，获取所述列表视图的底端位置以及底端宽度；基于所述列表视图的底端位置以及底端宽度，将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠，并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等，使得所述标题视图将所有的所述列表项内容视图覆盖。进一步地，在将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠，并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等，使得所述标题视图将所有的列表项内容视图覆盖之后，还包括：对所述列表视图当前的展现状态进行存储。进一步地，所述获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离具体包括：获取所述各列表项内容视图的初始预估高度；基于所述各列表项内容视图的初始预估高度，获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离。进一步地，所述基于所述第一距离和所述第二距离，将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局之后，还包括：对所述列表视图当前的展现状态进行存储。另一方面，本专利技术实施例还提供了一种列表的展现装置，包括：接收模块，用于接收对列表视图的点击操作，生成控制列表视图展现的操作指令，所述列表视图上具有两类子视图，所述两类子视图包括：标题视图和各列表项内容视图，所述标题视图的层级最高；获取模块，用于基于所述点击操作，获取所述列表视图当前的展现状态；自动布局模块，用于基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令，对所述列表视图上的所述两类子视图进行自动布局；所述自动布局模块具体包括：第一获取单元，用于在所述列表视图当前的展现状态为收缩状态时，获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离，以及获取所述各列表项内容视图的左侧分别距离所述标题视图左侧的第二距离；第一自动布局单元，用于基于所述第一距离和所述第二距离，将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局。进一步地，所述自动布局模块还包括：第二自动布局单元；所述第二自动布局模块具体包括：第二获取单元，用于获取所述列表视图中的所述标题视图距离所述列表视图的顶端的第三距离、获取所述标题视图距离所述列表视图的左端的第四距离；第二自动布局单元，用于基于所述第三距离、所述第四距离，将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。进一步地，所述自动布局模块还包括：第三获取单元，用于在所述列表视图当前的展现状态为展开状态时，获取所述列表视图的底端位置以及底端宽度；调整单元，用于将所述标题视图的底端调整至与所述列表视图的底端位置相对齐，并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等，使得所述标题视图将所有的列表项内容视图覆盖。进一步地，所述自动布局模块还包括：第一状态存储单元，用于对所述列表视图当前的展现状态进行存储。本专利技术实施例中的一个或多个技术方案，至少具有如下技术效果或优点：本专利技术提供了一种列表视图的展现方法，该方法首先接收对列表视图的点击操作，生成控制列表视图展现的操作指令，其中，该列表视图上具有两类子视图，该两类子视图包括：标题视图和各列表项内容视图，基于该点击操作，获取该列表视图当前的展现状态，基于该列表视图当前的展现状态和控制列表视图展现的操作指令，对该列表视图上的两类子视图进行自动布局，在列表视图当前的展现状态为收缩状态时，获取该列表视图中待展现的各列表项内容视图的顶端分别距离该标题视图的底端的第一距离，以及获取各列表项内容的左端分别距离该标题视图的左端的第二距离；最后，基于该第一距离和第二距离，将该列表视图中的各列表项内容视图相对于标题视图进行自动布局，进而无需像现有技术中每次在展开列表视图时都需要计算每个列表项中文字的高度，再将该文字的高度加上其他元素的高度，来得到该列表项实际的高度，这样消耗性能的操作，而是按照预先设定的各列表项内容视图与标题视图之间的相对位置关系，进行自动布局，因此，有效降低电子设备或应用程序性能的消耗。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考图形表示相同的部件。在附图中：图1示出了传统的列表展示的效果示意图；图2示出了本专利技术实施例一中列表视图的展现方法的步骤流程示意图本文档来自技高网...

【技术保护点】
1.一种列表视图的展现方法，其特征在于，包括：/n接收对列表视图的点击操作，生成控制列表视图展现的操作指令，所述列表视图上具有两类子视图，所述两类子视图包括：标题视图和各列表项内容视图，所述标题视图的层级最高；/n基于所述点击操作，获取所述列表视图当前的展现状态；/n基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令，对所述列表视图上的所述两类子视图进行自动布局；/n其中，在所述列表视图当前的展现状态为收缩状态时，获取所述列表视图上待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离，以及获取所述各列表项内容视图的左端分别距离所述标题视图左端的第二距离；/n基于所述第一距离和所述第二距离，将所述列表视图上的所述各列表项内容视图相对于所述标题视图进行自动布局。/n

【技术特征摘要】
1.一种列表视图的展现方法，其特征在于，包括：
接收对列表视图的点击操作，生成控制列表视图展现的操作指令，所述列表视图上具有两类子视图，所述两类子视图包括：标题视图和各列表项内容视图，所述标题视图的层级最高；
基于所述点击操作，获取所述列表视图当前的展现状态；
基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令，对所述列表视图上的所述两类子视图进行自动布局；
其中，在所述列表视图当前的展现状态为收缩状态时，获取所述列表视图上待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离，以及获取所述各列表项内容视图的左端分别距离所述标题视图左端的第二距离；
基于所述第一距离和所述第二距离，将所述列表视图上的所述各列表项内容视图相对于所述标题视图进行自动布局。


2.如权利要求1所述的方法，其特征在于，所述在所述列表视图当前的展现状态为收缩状态时，还包括：
将所述列表视图中的所述标题视图进行自动布局，具体包括：
获取所述列表视图中的所述标题视图的顶端距离所述列表视图的顶端的第三距离、获取所述标题视图的左端距离所述列表视图的左端的第四距离；
基于所述第三距离、所述第四距离，将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。


3.如权利要求1所述的方法，其特征在于，还包括：
在所述列表视图当前的展现状态为展开状态时，获取所述列表视图的底端位置以及底端宽度；
基于所述列表视图的底端位置以及底端宽度，将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠，并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等，使得所述标题视图将所有的所述列表项内容视图覆盖。


4.如权利要求3所述的方法，其特征在于，在将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠，并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等，使得所述标题视图将所有的列表项内容视图覆盖之后，还包括：
对所述列表视图当前的展现状态进行存储。


5.如权利要求1所述的方法，其特征在于，所述获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离具体包括：
获取所述各列表项内容视图的初始预估高度；
基于所述各列表项内容视图的初始预估高度，获取所述列表视图中待展现的...

【专利技术属性】
技术研发人员：汪刚，
申请(专利权)人：武汉斗鱼鱼乐网络科技有限公司，
类型：发明
国别省市：湖北;42