CN110471592B - 一种列表视图的展现方法及装置 - Google Patents

一种列表视图的展现方法及装置 Download PDF

Info

Publication number
CN110471592B
CN110471592B CN201910781523.7A CN201910781523A CN110471592B CN 110471592 B CN110471592 B CN 110471592B CN 201910781523 A CN201910781523 A CN 201910781523A CN 110471592 B CN110471592 B CN 110471592B
Authority
CN
China
Prior art keywords
view
list
title
list view
views
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910781523.7A
Other languages
English (en)
Other versions
CN110471592A (zh
Inventor
汪刚
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201910781523.7A priority Critical patent/CN110471592B/zh
Publication of CN110471592A publication Critical patent/CN110471592A/zh
Application granted granted Critical
Publication of CN110471592B publication Critical patent/CN110471592B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

一种列表视图的展现方法及装置
技术领域
本发明涉及互联网应用开发技术领域,尤其涉及一种列表视图的展现方法及装置。
背景技术
在实现应用程序开发中,经常需要实现一类场景,对列表视图的展示。具体地,通过点击具有一定属性的列表,能够展开具有相同属性的各列表项,再点击该列表视图时,该列表视图呈收缩状态。列表视图的状态可通过用户的点击行为实现自动的展开或者收缩。
目前常规的实现手段是,根据各列表项的内容计算每个列表项中文字的高度,再将该文字的高度加上其他元素的高度,最终得到该列表项实际的高度。每当需要展开列表时,都需要计算每个列表项实际的高度,需要不断计算高度,同时刷新页面,这个过程消耗电子设备的性能较大。
因此,如何在列表展示的过程中降低电子设备性能的消耗是目前亟待解决的技术问题。
发明内容
鉴于上述问题,提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的列表视图的展现方法及装置。
第一方面,本发明实施例提供一种列表视图的展现方法,包括:
接收对列表视图的点击操作,生成控制列表视图展现的操作指令,所述列表视图上具有两类子视图,所述两类子视图包括:标题视图和各列表项内容视图,所述标题视图的层级最高;
基于所述点击操作,获取所述列表视图当前的展现状态;
基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令,对所述列表视图上的所述两类子视图进行自动布局;
其中,在所述列表视图当前的展现状态为收缩状态时,获取所述列表视图上待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离,以及获取所述各列表项内容视图的左端分别距离所述标题视图左端的第二距离;
基于所述第一距离和所述第二距离,将所述列表视图上的所述各列表项内容视图相对于所述标题视图进行自动布局。
进一步地,所述在所述列表视图当前的展现状态为收缩状态时,还包括:
将所述列表视图中的所述标题视图进行自动布局,具体包括:
获取所述列表视图中的所述标题视图的顶端距离所述列表视图的顶端的第三距离、获取所述标题视图的左端距离所述列表视图的左端的第四距离;
基于所述第三距离、所述第四距离,将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。
进一步地,还包括:
在所述列表视图当前的展现状态为展开状态时,获取所述列表视图的底端位置以及底端宽度;
基于所述列表视图的底端位置以及底端宽度,将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠,并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等,使得所述标题视图将所有的所述列表项内容视图覆盖。
进一步地,在将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠,并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等,使得所述标题视图将所有的列表项内容视图覆盖之后,还包括:
对所述列表视图当前的展现状态进行存储。
进一步地,所述获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离具体包括:
获取所述各列表项内容视图的初始预估高度;
基于所述各列表项内容视图的初始预估高度,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离。
进一步地,所述基于所述第一距离和所述第二距离,将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局之后,还包括:
对所述列表视图当前的展现状态进行存储。
另一方面,本发明实施例还提供了一种列表视图的展现装置,包括:
接收模块,用于接收对列表视图的点击操作,生成控制列表视图展现的操作指令,所述列表视图上具有两类子视图,所述两类子视图包括:标题视图和各列表项内容视图,所述标题视图的层级最高;
获取模块,用于基于所述点击操作,获取所述列表视图当前的展现状态;
自动布局模块,用于基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令,对所述列表视图上的所述两类子视图进行自动布局;
所述自动布局模块具体包括:
第一获取单元,用于在所述列表视图当前的展现状态为收缩状态时,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离,以及获取所述各列表项内容视图的左侧分别距离所述标题视图左侧的第二距离;
第一自动布局单元,用于基于所述第一距离和所述第二距离,将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局。
进一步地,所述自动布局模块还包括:
第二自动布局单元;
所述第二自动布局模块具体包括:
第二获取单元,用于获取所述列表视图中的所述标题视图距离所述列表视图的顶端的第三距离、获取所述标题视图距离所述列表视图的左端的第四距离;
第二自动布局单元,用于基于所述第三距离、所述第四距离,将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。
进一步地,所述自动布局模块还包括:
第三获取单元,用于在所述列表视图当前的展现状态为展开状态时,获取所述列表视图的底端位置以及底端宽度;
调整单元,用于将所述标题视图的底端调整至与所述列表视图的底端位置相对齐,并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等,使得所述标题视图将所有的列表项内容视图覆盖。
进一步地,所述自动布局模块还包括:第一状态存储单元,用于对所述列表视图当前的展现状态进行存储。
本发明实施例中的一个或多个技术方案,至少具有如下技术效果或优点:
本发明提供了一种列表视图的展现方法,该方法首先接收对列表视图的点击操作,生成控制列表视图展现的操作指令,其中,该列表视图上具有两类子视图,该两类子视图包括:标题视图和各列表项内容视图,基于该点击操作,获取该列表视图当前的展现状态,基于该列表视图当前的展现状态和控制列表视图展现的操作指令,对该列表视图上的两类子视图进行自动布局,在列表视图当前的展现状态为收缩状态时,获取该列表视图中待展现的各列表项内容视图的顶端分别距离该标题视图的底端的第一距离,以及获取各列表项内容的左端分别距离该标题视图的左端的第二距离;最后,基于该第一距离和第二距离,将该列表视图中的各列表项内容视图相对于标题视图进行自动布局,进而无需像现有技术中每次在展开列表视图时都需要计算每个列表项中文字的高度,再将该文字的高度加上其他元素的高度,来得到该列表项实际的高度,这样消耗性能的操作,而是按照预先设定的各列表项内容视图与标题视图之间的相对位置关系,进行自动布局,因此,有效降低电子设备或应用程序性能的消耗。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考图形表示相同的部件。在附图中:
图1示出了传统的列表展示的效果示意图;
图2示出了本发明实施例一中列表视图的展现方法的步骤流程示意图;
图3示出了本发明实施例一列表视图的展现中由收缩状态变为展开状态时的自动布局流程示意图;
图4示出了本发明实施例一中各列表项内容视图与标题视图的在纵向上的相对位置关系的示意图;
图5示出了本发明实施例一中各列表项内容视图与标题视图的在横向上的相对位置关系的示意图;
图6示出了本发明实施例一中标题视图与列表视图的相对位置关系的示意图;
图7示出了本发明实施例二中列表视图的展现装置的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
本发明可应用于PC终端,也可以应用于移动终端,当然还可以应用于具有列表展现功能的其他终端,在此并不做具体限定。
传统的展现效果如图1所示,在点击该列表视图中的标题视图时,该列表视图中的各列表项可展开或者收缩。
该列表视图中的各列表项中包含大量的文字,在各列表项展开的时候,这些大量的文字展示出来,收缩的时候仅显示标题,并不显示各列表项的内容。
本发明提供的列表视图的展现方法遵循列表的数据源方法以及代理方法,通过为该列表视图提供待展现的数据源,通过该数据源方法和代理方法实现列表的展现。
下面对本发明实施例进行详细描述。
实施例一
本发明实施例一提供了一种列表视图的展现方法,如图2、图3所示,包括:S201,接收对列表视图的点击操作,生成控制列表视图展现的操作指令,该列表视图上具有两类子视图,这两类子视图包括标题视图和各列表项内容视图,该标题视图的层级最高;S202,基于点击操作,获取列表视图当前的展现状态;S203,基于该列表视图当前的展现状态和控制列表视图展现的操作指令,对该列表视图上的两类子视图进行自动布局;其中,该S203具体包括如下两个步骤:S2031,在列表视图当前的展现状态为收缩状态时,获取列表视图中待展现的各列表项内容视图的顶端分别距离标题视图的底端的第一距离,以及获取各列表项内容视图的左侧分别距离标题视图左侧的第二距离;S2032,基于第一距离和第二距离,将列表视图中的各列表项内容视图相对于标题视图进行自动布局。
首先,通过定义cell,即列表视图,该列表视图上具有标题(titlelable)和各列表项内容(textlable),因此,在该列表视图上创建标题视图和各列表项内容视图。同时,还定义一个数组(cellState),该数组中存储有每一组列表的展开或者收缩的状态,默认值是收缩状态,该数组中的列表的个数与数据源的个数相同。
其中,该标题视图是通过addsubView的方式添加在该列表视图上面,其中,该addsubView的方式是指添加在视图的最上方。
执行S201,接收对列表视图的点击操作,生成控制列表视图展现的操作指令,该列表视图上具有两类子视图,这两类子视图包括:标题视图和各列表项内容视图。其中,该标题视图的层级最高,具体地,该标题视图位于整个列表视图的最上方。
其中,当该列表视图被点击时,系统通过didSelectRowAt方法确定被点击的列表视图。
接着,执行S202,基于该点击操作,获取该列表视图当前的展现状态。
其中,根据上述确定被点击的列表视图,调用tableView的beginUpdates方法,从数组(cellState)中存储的列表视图的状态来获取该列表视图当前的展现状态。
然后,执行S203,基于该列表视图当前的展现状态和控制列表视图展现的操作指令,对该列表视图上的两类子视图进行自动布局。
其中,包括在列表视图当前的展现状态为收缩状态时进行的自动布局,以及在列表视图当前的展现状态为展开状态时进行的自动布局。
在该列表视图当前的展现状态为收缩状态时,获取该列表视图中待展现的各列表项内容视图的顶端分别距离该标题视图的底端的第一距离,以及获取个列表项内容视图的左端分别距离该标题视图左端的第二距离。
在获取该第一距离的过程中,详细的代码介绍如下:
调用mas_makeConstraints方法,该mas_makeConstraints方法的作用是设置一个函数的约束,这个函数有一个参数,这个参数是MASConstraintMaker类型的,这个参数被命名为make,该函数内还有一个block的函数,block函数内部通过make参数进行布局。
首先,使用make参数去使用链式语法调用top方法,然后,使用链式语法调用mas函数,mas函数再使用链式语法调用相对标题视图的底端的第一距离,从而完成获取列表视图中待展现的各列表项内容视图的顶端分别距离该标题视图的底端的第一距离的过程。
具体地代码如下:
make.top.mas_equal To(titleLable.mas_bo ttom).offset(8)。
其中,获取列表视图中待展现的各列表项内容视图的顶端分别距离该标题视图的底端的第一距离,具体包括:
获取各列表视图的初始预估高度;
基于该各列表项内容视图的初始预估高度,获取列表视图中待展现的各列表视图的顶端分别距离该标题视图的底端的第一距离。
其中,具体是获取各列表项内容视图的初始预估高度estimatedRowHeight。
接着,基于该各列表项内容视图的初始预估高度estimatedRowHeight,可得到各列表项内容视图的顶端分别距离该标题视图的底端的第一距离。比如,如图4所示,在该标题视图下方的第一个列表项内容视图的顶端与该标题视图的底端的第一距离为0,即第一个列表项内容视图的顶端与该标题视图的底端紧邻;在该第一个列表项内容视图下方的第二个列表项内容视图与该标题视图底端的第一距离H1为该第一个列表项内容视图的初始预估高度,在该第二列表项内容视图与该标题视图底端的的第一距离为H2,该第二距离H2为该第一列表项内容视图的两个初始预估高度。依次类推,在获取除第一个列表项内容视图之外的其他各列表项内容视图的顶端分别距离该标题视图的底端的第一距离时,均用到各列表视图的初始预估高度。
在获取该第二距离的过程中,详细的代码介绍如下:
通过make参数设置该列表项内容视图的X值,使用make参数去使用链式语法调用centerX函数,再调用mas_equalTo函数,完成一个函数的相对的视图布局,该mas_equalTo函数需要调用一个链式的参数,这个参数是相对于标题视图的X位置的布局。
具体的代码如下:
make.centerX.mas_e qualTo(self.textLable)。
获取各列表项内容视图的左端分别距离该标题视图左端的第二距离,具体包括:
首先,以该标题视图的左下角为圆点,再建立二维坐标系xOy,如图5所示,分别获取各列表项内容视图的左端距离该坐标系的y轴之间的距离,该距离即为上述的第二距离。这里的第二距离是一个相对距离,即各列表项内容视图的左端相对于标题视图的左端的距离。
上述的mas_makeConstraints函数是一个回调函数,在该回调函数内部首先设置ranslatesAutoresizingMaskIntoConstraints的属性为NO,也就是说设置布局为不可以自动变形,使用MASConstraintMaker函数创建一个constraintMaker,在得到该constraintMaker之后,使用回调函数将这个make回调到上一层,具体的代码如下:
block(constraintMaker)
最后,调用constraintMaker的install函数完成约束的安装。
当然,在获得该列表视图相对于该标题视图的相对位置关系之前,还包括:将该列表视图中的标题视图进行自动布局。具体包括:
获取列表视图中的标题视图的顶端距离列表视图的顶端的距离为第三距离,获取标题视图的左端距离列表视图的左端的距离为第四距离。
按照第三距离,第四距离,将该列表视图中的标题视图相对于列表视图进行自动布局。
具体如图6所示,将该标题视图设置在列表视图中的确定位置,即标题视图的X值和Y值。其中,该第三距离,第四距离均依次通过constraintWithItem函数来设置,从而实现对标题视图相对于该列表视图的自动布局。
在将列表视图中的各列表项内容视图相对于标题视图进行自动布局之后,还包括:
对该列表视图的展现状态进行存储。即需记录列表视图的展现状态,比如,此时应该记录为展开状态。
上述是对列表视图的展开过程的描述。本发明还包括:对列表视图的收缩过程进行的描述。
因此,在基于列表视图当前的展现状态和控制列表视图展现的操作指令,对列表视图上的两类子视图进行自动布局的过程中,还包括:
在列表视图当前的展现状态为展开状态时,获取列表视图的底端位置以及底端宽度;
基于该列表视图的底端位置以及底端宽度,将标题视图的底端位置调整为与列表视图的底端位置重叠,并将标题视图的底端宽度调整为与列表视图的底端宽度相等,使得该标题视图将所有的列表项内容视图覆盖。
由于该标题视图的层级最高,当该标题视图在自动布局或者移动过程中,都可显示在最上层,并覆盖其他层级的视图。
上述在对标题视图和列表视图进行自动布局的过程中,可实现将各列表项内容进行收缩,即对各列表项内容进行隐藏。
在该列表视图当前的展现状态为展开状态时,基于该控制列表视图展现的操作指令,对该列表视图上的标题视图和各列表项内容视图进行自动布局之后,还包括:
对该列表视图当前的展现状态进行存储。
对列表视图上的标题视图和各列表项内容视图进行自动布局之后,需同时对列表视图的展现状态进行调整,以便于下一次在对列表视图进行展现时可基于该展现状态进行调整。
由于本发明中在实现对列表视图的展现和收缩的过程中,是对标题视图与各列表项内容视图的相对位置关系的调整,或者对该标题视图与列表视图之间的相对位置关系的调整,实现自动布局,进而无需每次在展开或者收缩列表视图时,都对各列表项的实际高度进行计算,因此,仅需通过获取标题视图、各列表项内容视图、列表视图三者之间的相对位置关系,便可实现这三者的自动布局,因此,降低了电子设备或应用程序性能的消耗。
实施例二
基于相同的发明构思,本发明实施例二提供了一种列表视图的展现装置,如图7所示,包括:
接收模块701,用于接收对列表视图的点击操作,生成控制列表视图展现的操作指令,所述列表视图上具有两类子视图,所述两类子视图包括:标题视图和各列表项内容视图,所述标题视图的层级最高;
获取模块702,用于基于所述点击操作,获取所述列表视图当前的展现状态;
自动布局模块703,用于基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令,对所述列表视图上的所述两类子视图进行自动布局;
所述自动布局模块703具体包括:
第一获取单元7031,用于在所述列表视图当前的展现状态为收缩状态时,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离,以及获取所述各列表项内容视图的左侧分别距离所述标题视图左侧的第二距离;
第一自动布局单元7032,用于基于所述第一距离和所述第二距离,将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局。
在一种优选的实施方式中,所述自动布局模块703还包括:
第二自动布局单元;
所述第二自动布局模块具体包括:
第二获取单元,用于获取所述列表视图中的所述标题视图距离所述列表视图的顶端的第三距离、获取所述标题视图距离所述列表视图的左端的第四距离;
第二自动布局单元,用于基于所述第三距离、所述第四距离,将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。
在一种优选的实施方式中,所述自动布局模块703还包括:
第三获取单元,用于在所述列表视图当前的展现状态为展开状态时,获取所述列表视图的底端位置以及底端宽度;
调整单元,用于将所述标题视图的底端调整至与所述列表视图的底端位置相对齐,并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等,使得所述标题视图将所有的列表项内容视图覆盖。
在一种优选的实施方式中,所述自动布局模块703还包括:第一状态存储单元,用于对所述列表视图当前的展现状态进行存储。
在一种优选的实施方式中,所述第一获取单元,具体包括:
初始预估高度获取单元,用于获取所述各列表项内容视图的初始预估高度;
第一距离获取单元,用于基于所述各列表项内容视图的初始预估高度,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离。
在一种优选的实施方式中,所述自动布局模块703还包括:第二状态存储单元,用于对所述列表视图当前的展现状态进行存储。
本发明实施例中的一个或多个技术方案,至少具有如下技术效果或优点:
本发明提供了一种列表视图的展现装置,该装置包括:接收模块,用于接收对列表视图的点击操作,生成控制列表视图展现的操作指令,所述列表视图上具有两类子视图,所述两类子视图包括:标题视图和各列表项内容视图,所述标题视图的层级最高;获取模块,用于基于所述点击操作,获取所述列表视图当前的展现状态;自动布局模块,用于基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令,对所述列表视图上的所述两类子视图进行自动布局;所述自动布局模块具体包括:第一获取单元,用于在所述列表视图当前的展现状态为收缩状态时,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离,以及获取所述各列表项内容视图的左侧分别距离所述标题视图左侧的第二距离;第一自动布局单元,用于基于所述第一距离和所述第二距离,将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局,进而无需像现有技术中每次在展开列表视图时都需要计算每个列表项中文字的高度,再将该文字的高度加上其他元素的高度,来得到该列表项实际的高度,这样消耗性能的操作,而是按照预先设定的各列表项内容视图与标题视图之间的相对位置关系,进行自动布局,因此,有效降低性能的消耗。
尽管已描述了本申请的优选实施例,但本领域内的普通技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。
显然,本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样,倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内,则本申请也意图包含这些改动和变型在内。

Claims (7)

1.一种列表视图的展现方法,其特征在于,包括:
接收对列表视图的点击操作,生成控制列表视图展现的操作指令,所述列表视图上具有两类子视图,所述两类子视图包括:标题视图和各列表项内容视图,所述标题视图的层级最高;
基于所述点击操作,获取所述列表视图当前的展现状态;
基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令,对所述列表视图上的所述两类子视图进行自动布局;
其中,在所述列表视图当前的展现状态为收缩状态时,获取所述列表视图上待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离,以及获取所述各列表项内容视图的左端分别距离所述标题视图左端的第二距离;
所述获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离具体包括:
获取所述各列表项内容视图的初始预估高度;
基于所述各列表项内容视图的初始预估高度,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离;
基于所述第一距离和所述第二距离,将所述列表视图上的所述各列表项内容视图相对于所述标题视图进行自动布局;
在所述列表视图当前的展现状态为展开状态时,获取所述列表视图的底端位置以及底端宽度;
基于所述列表视图的底端位置以及底端宽度,将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠,并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等,使得所述标题视图将所有的所述列表项内容视图覆盖。
2.如权利要求1所述的方法,其特征在于,所述在所述列表视图当前的展现状态为收缩状态时,还包括:
将所述列表视图中的所述标题视图进行自动布局,具体包括:
获取所述列表视图中的所述标题视图的顶端距离所述列表视图的顶端的第三距离、获取所述标题视图的左端距离所述列表视图的左端的第四距离;
基于所述第三距离、所述第四距离,将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。
3.如权利要求1所述的方法,其特征在于,在将所述标题视图的底端位置调整至与所述列表视图的底端位置重叠,并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等,使得所述标题视图将所有的列表项内容视图覆盖之后,还包括:
对所述列表视图当前的展现状态进行存储。
4.如权利要求1所述的方法,其特征在于,所述基于所述第一距离和所述第二距离,将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局之后,还包括:
对所述列表视图当前的展现状态进行存储。
5.一种列表视图的展现装置,其特征在于,包括:
接收模块,用于接收对列表视图的点击操作,生成控制列表视图展现的操作指令,所述列表视图上具有两类子视图,所述两类子视图包括:标题视图和各列表项内容视图,所述标题视图的层级最高;
获取模块,用于基于所述点击操作,获取所述列表视图当前的展现状态;
自动布局模块,用于基于所述列表视图当前的展现状态和所述控制列表视图展现的操作指令,对所述列表视图上的所述两类子视图进行自动布局;
所述自动布局模块具体包括:
第一获取单元,用于在所述列表视图当前的展现状态为收缩状态时,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离,以及获取所述各列表项内容视图的左侧分别距离所述标题视图左侧的第二距离;
所述第一获取单元,具体包括:
初始预估高度获取单元,用于获取所述各列表项内容视图的初始预估高度;
第一距离获取单元,用于基于所述各列表项内容视图的初始预估高度,获取所述列表视图中待展现的各列表项内容视图的顶端分别距离所述标题视图的底端的第一距离;
第一自动布局单元,用于基于所述第一距离和所述第二距离,将所述列表视图中的所述各列表项内容视图相对于所述标题视图进行自动布局;
所述自动布局模块还包括:
第三获取单元,用于在所述列表视图当前的展现状态为展开状态时,获取所述列表视图的底端位置以及底端宽度;
调整单元,用于将所述标题视图的底端调整至与所述列表视图的底端位置相对齐,并将所述标题视图的底端宽度调整为与所述列表视图的底端宽度相等,使得所述标题视图将所有的列表项内容视图覆盖。
6.如权利要求5所述的装置,其特征在于,所述自动布局模块还包括:
第二自动布局单元;
所述第二自动布局模块具体包括:
第二获取单元,用于获取所述列表视图中的所述标题视图距离所述列表视图的顶端的第三距离、获取所述标题视图距离所述列表视图的左端的第四距离;
第二自动布局单元,用于基于所述第三距离、所述第四距离,将所述列表视图中的所述标题视图相对于所述列表视图进行自动布局。
7.如权利要求5所述的装置,其特征在于,所述自动布局模块还包括:第一状态存储单元,用于对所述列表视图当前的展现状态进行存储。
CN201910781523.7A 2019-08-23 2019-08-23 一种列表视图的展现方法及装置 Active CN110471592B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910781523.7A CN110471592B (zh) 2019-08-23 2019-08-23 一种列表视图的展现方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910781523.7A CN110471592B (zh) 2019-08-23 2019-08-23 一种列表视图的展现方法及装置

Publications (2)

Publication Number Publication Date
CN110471592A CN110471592A (zh) 2019-11-19
CN110471592B true CN110471592B (zh) 2021-07-23

Family

ID=68513526

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910781523.7A Active CN110471592B (zh) 2019-08-23 2019-08-23 一种列表视图的展现方法及装置

Country Status (1)

Country Link
CN (1) CN110471592B (zh)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104572098A (zh) * 2014-12-30 2015-04-29 北京奇虎科技有限公司 一种移动终端页面图表的更新方法和装置
CN109976620A (zh) * 2019-03-28 2019-07-05 北京字节跳动网络技术有限公司 列表项展现属性信息的确定方法、装置、设备及存储介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7581169B2 (en) * 2005-01-14 2009-08-25 Nicholas James Thomson Method and apparatus for form automatic layout
CN109144624B (zh) * 2017-06-28 2021-10-15 武汉斗鱼网络科技有限公司 Ios中展示不等高列表的方法、存储介质、设备及系统
CN109558201A (zh) * 2018-12-11 2019-04-02 南威软件股份有限公司 一种基于UIScrollView的iOS界面简化布局方法

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104572098A (zh) * 2014-12-30 2015-04-29 北京奇虎科技有限公司 一种移动终端页面图表的更新方法和装置
CN109976620A (zh) * 2019-03-28 2019-07-05 北京字节跳动网络技术有限公司 列表项展现属性信息的确定方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN110471592A (zh) 2019-11-19

Similar Documents

Publication Publication Date Title
CN100429646C (zh) 包括手写数据的电子文档的显示装置及方法
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN109144656A (zh) 多元素布局的方法、装置、计算机设备和存储介质
CN102609256A (zh) 一种基于网页的动态图表生成方法
CN101382887A (zh) 一种调整界面布局的方法及装置
CN103544253A (zh) 一种以瀑布流方式显示图片的实现方法及系统
CN102473319A (zh) 动画控制装置、动画控制方法及动画控制程序
CN106648581B (zh) 页面显示方法及装置
CN102298495A (zh) 一种android软件自适应不同屏幕密度的方法
CN108958857A (zh) 一种界面生成方法及装置
CN109960491A (zh) 应用程序生成方法、生成装置、电子设备及存储介质
CN109271075A (zh) 页面元素自动布局方法和装置
CN104820589A (zh) 一种动态适配网页的方法及其装置
CN105183291A (zh) 显示界面中的信息提取方法及系统
CN110347459A (zh) 一种窗口最小化方法、装置、存储介质及交互智能平板
CN102455851A (zh) 用于在不同用户设备中显示用户界面的方法和装置
CN103648043B (zh) 对智能电视的搜索控制方法和控制装置
CN103279902A (zh) 电子菜谱显示方法
CN105373373B (zh) 一种快速生成图标的方法和装置
CN110471592B (zh) 一种列表视图的展现方法及装置
CN106648700A (zh) 兼容不同分辨率的显示方法和装置
CN105159939A (zh) 一种用于图片的呈现方法和装置
CN109164968A (zh) 基于列表的交互方法以及装置
CN108319576A (zh) 一种生成图片素材的方法及装置
CN109189537B (zh) 页面信息的动态显示方法、计算设备及计算机存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant