CN113608649B - 滑动列表的显示方法、装置、设备和可读存储介质 - Google Patents
滑动列表的显示方法、装置、设备和可读存储介质 Download PDFInfo
- Publication number
- CN113608649B CN113608649B CN202110977293.9A CN202110977293A CN113608649B CN 113608649 B CN113608649 B CN 113608649B CN 202110977293 A CN202110977293 A CN 202110977293A CN 113608649 B CN113608649 B CN 113608649B
- Authority
- CN
- China
- Prior art keywords
- list item
- item control
- list
- control
- sliding
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction 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/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements 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/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提供了一种滑动列表的显示方法、装置、设备和可读存储介质,涉及人机交互领域。所述方法包括显示具有滑动列表的用户界面,滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,n1个第一列表项控件呈不规则堆叠状态显示在中间列表项控件的第一侧区域,n2个第二列表项控件呈不规则堆叠状态显示在中间列表项控件的第二侧区域;接收针对滑动列表的滑动操作;响应于滑动操作,将中间列表项控件滑动显示为位于第一侧区域中堆叠在最上层的第一列表项控件,以及将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件。该方法可清晰完整地显示每个列表项控件。
Description
技术领域
本申请实施例涉及人机交互领域,特别涉及一种滑动列表的显示方法、装置、设备和可读存储介质。
背景技术
随着UI(User Interface)设计的不断发展,用户界面呈现出各式各样的滑动列表。
相关技术中,滑动列表内包含m个元素格,每个元素格的大小、样式以及任意两个相邻元素格的间距均完全一致,相关技术通过m个元素格展示m个元素。
然而,在滑动列表的大小固定和每个元素格大小一致的情况下,每个元素格容纳的元素的清晰度和信息量互为反相关,若某个元素比其他元素的信息量多,该元素的清晰度就比其他元素差。
发明内容
本申请实施例提供了一种滑动列表的显示方法、装置、设备和可读存储介质,可清晰完整地显示每个列表项控件。所述技术方案如下:
一方面,本申请实施例提供了一种滑动列表的显示方法,所述方法包括:
显示具有滑动列表的用户界面,滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,n1个第一列表项控件呈不规则堆叠状态显示在中间列表项控件的第一侧区域,n2个第二列表项控件呈不规则堆叠状态显示在中间列表项控件的第二侧区域,n1、n2均为正整数;
接收针对滑动列表的滑动操作;
响应于滑动操作,将中间列表项控件滑动显示为位于第一侧区域中堆叠在最上层的第一列表项控件,以及将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件;
其中,不规则堆叠状态是按照不同错位间隔和/或不同旋转角度进行堆叠的状态。
另一方面,本申请实施例提供了一种滑动列表的显示装置,所述装置包括:
显示列表,用于显示具有滑动列表的用户界面,滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,n1个第一列表项控件呈不规则堆叠状态显示在中间列表项控件的第一侧区域,n2个第二列表项控件呈不规则堆叠状态显示在中间列表项控件的第二侧区域,n1、n2均为正整数;
滑动模块,用于接收针对滑动列表的滑动操作;
显示模块,还用于响应于滑动操作,将中间列表项控件滑动显示为位于第一侧区域中堆叠在最上层的第一列表项控件,以及将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件;
其中,不规则堆叠状态是按照不同错位间隔和/或不同旋转角度进行堆叠的状态。
另一方面,本申请实施例提供了一种计算机设备,所述计算机设备包括处理器和存储器,所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上述方面所述的滑动列表的显示方法。
另一方面,本申请实施例提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如上述方面所述的滑动列表的显示方法。
另一方面,本申请实施例提供了一种计算机程序产品,所述计算机程序产品被处理器执行时,用于实现上述滑动列表的显示方法。
本申请实施例提供的技术方案可以包括如下有益效果:
通过滑动操作,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件,可清晰完整的显示滑动列表所有的列表项控件,且该滑动列表的层次丰富,重点突出,用户可直观辨别当前滑动列表显示的中间列表项控件,极大便利了用户获取中间列表项控件包含的信息。
附图说明
图1是本申请一个示例性实施例提供的实施环境的示意图;
图2是本申请一个示例性实施例提供的滑动列表的显示方法的流程图;
图3是本申请一个示例性实施例提供的滑动列表的示意图;
图4是本申请一个示例性实施例提供的滑动列表的对比示意图;
图5是本申请一个示例性实施例提供的滑动列表的对比示意图;
图6是本申请一个示例性实施例提供的滑动列表的循环过程的示意图;
图7是本申请一个示例性实施例提供的滑动列表的对比示意图;
图8是本申请一个示例性实施例提供的滑动列表的对比示意图;
图9是本申请另一个示例性实施例提供的滑动列表的显示方法的流程图;
图10是本申请一个示例性实施例提供的滑动过程的示意图;
图11是本申请一个示例性实施例提供的滑动列表的显示方法的流程图;
图12是本申请一个示例性实施例提供的滑动列表的显示装置的结构框图;
图13是本申请一个示例性实施例提供的计算机设备的结构框图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施方式作进一步地详细描述。
首先,对本申请中涉及的相关名词进行解释说明。
滑动列表:指用于展示若干个列表项控件且具有滑动属性的列表,在本申请中,滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件。可选的,每个列表项控件均可响应于用户的触控或点击操作,显示另一用户界面。可选的,每个列表项控件均可响应于用户的触控或点击操作,显示列表项控件的另一形态,如,将原本小尺寸的列表项控件进行居中放大。可选的,列表项控件的形状包括但不限于矩形、圆角矩形、菱形、星形中的至少一种,本申请对列表项控件的形状并不加以限定。
图1示出了本申请一个示例性实施例提供的实施环境。以滑动列表的显示方法运行于图1所示的计算机系统100进行举例说明,终端120安装和运行有支持滑动列表的客户端。该客户端可以是支持滑动列表的应用程序、网页和小程序中的任意一种。终端120可以进行滑动列表的滑动操作和滑动列表的生成操作。可选的,终端120上安装的客户端是操作系统平台(安卓或IOS)上的客户端。终端120可以泛指多个终端中的一个,本实施例仅以终端120举例说明。终端120的设备类型包括:智能手机、智能手表、智能电视、平板电脑、电子书阅读器、MP3播放器、MP4播放器、膝上型便携计算机和台式计算机中的至少一种。本领域技术人员可以知晓,上述终端的数量可以更多或更少。比如上述终端可以仅为一个,或者上述终端为几十个或几百个,或者更多数量。本申请实施例对终端的数量和设备类型不加以限定。
终端120通过无线网络或有线网络与服务器140相连。
服务器140包括一台服务器、多台服务器、云计算平台和虚拟化中心中的至少一种。示例性的,服务器140包括处理器144和存储器142,存储器142又包括接收模块1421、控制模块1422和发送模块1423,接收模块1421用于接收客户端发送的请求,如针对滑动列表进行滑动操作的请求;控制模块1422用于控制滑动列表的滑动和显示;发送模块1423用于向终端发送响应,如向客户端返回滑动后的滑动列表的用户界面。服务器140用于为滑动列表提供后台服务。可选地,服务器140承担主要计算工作,终端120承担次要计算工作;或者,服务器140承担次要计算工作,终端120承担主要计算工作;或者,服务器140、终端120之间采用分布式计算架构进行协同计算。
下述以滑动列表的显示方法由终端执行进行举例说明。
为实现清晰完整地显示每个列表项控件,图2示出了本申请一个示例性实施例提供的滑动列表的显示方法的流程图,以该方法应用于图2所示的终端进行举例说明,该方法包括:
步骤220,显示具有滑动列表的用户界面;
其中,滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,n1个第一列表项控件呈不规则堆叠状态显示在中间列表项控件的第一侧区域,n2个第二列表项控件呈不规则堆叠状态显示在中间列表项控件的第二侧区域,其中,不规则堆叠状态是按照不同错位间隔和/或不同旋转角度进行堆叠的状态,n1、n2均为正整数。
在一个实施例中,每个列表项控件均可响应于用户的触控或点击操作,显示另一用户界面,或,显示列表项控件的另一形态,如,将原本小尺寸的列表项控件进行居中放大。可选的,列表项控件的形状包括但不限于矩形、圆角矩形、菱形、星形中的至少一种,本申请对列表项控件的形状并不加以限定。
第一侧区域和第二侧区域:第一侧区域和第二侧区域分别位于中间列表项控件的两侧,示意性的,第一侧区域位于中间列表项控件的左侧而第二侧区域位于中间列表项控件的右侧,第一侧区域位于中间列表项控件的上方而第二侧区域位于中间列表项控件的下方,第一侧区域位于中间列表项控件的左上方而第二侧区域位于中间列表项控件的右下方,本申请以第一侧区域位于中间列表项控件的左侧而第二侧区域位于中间列表项控件的右侧,进行举例说明,本申请对第一侧区域和第二侧区域分别与中间列表项控件的位置关系并不加以限定。
不规则堆叠状态:指n1个第一列表项控件在第一侧区域上呈现的状态,和,n2个第二列表项控件在第二侧区域上呈现的状态。以第一侧区域为例,n1个第一列表项控件彼此之间按照错位间隔和/或不同的旋转角度进行堆叠。示意性的,n1个第一列表项控件按照离所述中间列表项控件的距离由远到近将所述第一列表项控件由下到上错位堆叠;示意性的,n1个第一列表项控件按照离所述中间列表项控件的距离由远到近将所述第一列表项控件由上到下错位堆叠;示意性的,n1个第一列表项控件散落堆叠(不存在垂直于用户界面的一条直线可贯穿n1个第一列表项控件)。
错位间隔:指n1个第一列表项控件(或n2个第二列表项控件)内的相邻列表项控件与X轴的距离的差。X轴为评价相邻列表项的距离差的基准线。在一个实施例中,第一侧区域位于中间列表项控件的左侧而第二列表项控件位于中间列表项控件的右侧,X轴为穿过滑动列表的中心的水平基准线。其中,第一列表项控件A的中心与X轴的距离为d1,第一列表项控件A’的中心与X轴的距离为d2,则第一列表项控件A与第一列表项控件A’的错位间隔为d1-d2。在本申请一个实施例中,不规则堆叠状态是按照不同错位间隔进行堆叠,指n1个第一列表项控件(或n2个第二列表项控件)内的相邻列表项控件的错位间隔并不一致。
旋转角度:指n1个第一列表项控件(或n2个第二列表项控件)内的列表项控件基于Z轴进行顺时针(或逆时针)旋转的旋转角度。Z轴为垂直于用户界面且穿过列表项控件中心的直线。示例性的,第一列表项控件基于Z轴进行顺时针旋转的旋转角度为30°,则第一列表项控件以30°的旋转角度参与堆叠。在本申请一个实施例中,不规则堆叠状态是按照不同旋转角度进行堆叠,指n1个第一列表项控件(或n2个第二列表项控件)内列表项控件的旋转角度并不一致。
在一个实施例中,图3示出了第一侧区域301,中间区域302和第二侧区域303,第一侧区域301包括n1个第一列表项控件,中间区域302包括中间列表项控件21,第二侧区域303包括n2个第二列表项控件。n1个第一列表项控件包括第一列表项控件11、第一列表项控件12、第一列表项控件13、第一列表项控件14、第一列表项控件15、第一列表项控件16、第一列表项控件17、第一列表项控件18;n2个第二列表项控件包括第二列表项控件31、第二列表项控件32、第二列表项控件33、第二列表项控件34、第二列表项控件35、第二列表项控件36、第二列表项控件37。图3还示出了X、Y、Z轴用于辅助论述滑动列表的显示参数,其中X轴为穿过滑动列表的中心的水平基准线,Y轴为穿过滑动列表的中心的竖直基准线,Z轴为垂直于用户界面且穿过列表项控件的中心的直线。
其中,n1个第一列表项控件按照不同错位间隔和/或不同旋转角度进行堆叠。
示意性的,第一列表项控件11和第一列表项控件12之间存在错位间隔d12,即,第一列表项控件11的中心与X轴的距离,和,第一列表项控件12的中心与X轴的距离差为d12。第一侧区域内n1个第一列表项控件按照错位间隔d12、d23、d34、d45、d56、d67和d78进行堆叠。
参考图4,图4通过改变第一列表项控件13与第一列表项控件12的错位间隔,和,第一列表项控件13与第一列表项控件14的错位间隔,最终改变第一侧区域的不规则堆叠状态。
示意性的,第一列表项控件11基于Z轴的旋转角度为∠11。第一侧区域内n1个第一列表项控件按照旋转角度∠11、∠12、∠13、∠14、∠15、∠16、∠17和∠18进行堆叠。
参考图5,图5通过改变第一列表项控件11的旋转角度,进而改变第一侧区域的不规则堆叠状态。
在一个实施例中,n1个第一列表项控件和n2个第二列表项控件完全不同,或,n1个第一列表项控件和n2个第二列表项控件部分相同,本申请对n1个第一列表项控件和n2个第二列表项控件是否重复出现并不加以限制。
在一个实施例中,终端执行步骤220之前还包括:针对每个滑动列表中的列表项控件,设置列表项控件的控件参数。其中,列表项控件是支持至少两种控件参数的控件,控件参数包括:n1个第一列表项控件中与前一个第一列表项控件之间的错位间隔、与后一个第一列表项控件之间的错位间隔、第一列表项控件的旋转角度、n2个第二列表项控件中与前一个第二列表项控件之间的错位间隔、与后一个第二列表项控件之间的错位间隔、第二列表项控件的旋转角度、中间列表项控件与前一个第一列表项控件的间距、与后一个第二列表项控件的间距、中间列表项控件的尺寸中的至少一种。
步骤240,接收针对滑动列表的滑动操作;
基于用户界面上显示滑动列表,终端接收针对滑动列表的滑动操作。
可选的,针对滑动列表的滑动操作包括拖动任一列表项控件、拖动滑动列表内不存在列表项控件的空白区域,以及触控或点击滑动控件中的至少一种。响应于终端接收针对滑动列表的滑动操作,终端将中间列表项控件滑动显示为位于第一侧区域中堆叠在最上层的第一列表项控件,以及将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件。
可选的,针对滑动列表的滑动操作还包括通过语音控制、手势控制等进行滑动列表的滑动操作。
步骤260,响应于滑动操作,将中间列表项控件滑动显示为位于第一侧区域中堆叠在最上层的第一列表项控件,以及将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件。
在一个实施例中,滑动列表表现为循环列表,响应于滑动操作,终端还将距离中间列表项控件最远的第一列表项控件滑动显示为第二侧区域中堆叠在最下层的第二列表项控件,以及将距离中间列表项控件最远的第二列表项控件滑动显示为第二侧区域中堆叠在倒数第二层的第二列表项控件。
示意性的,图6示出了循环列表的滑动过程的示意图。响应于终端接收针对滑动列表的滑动操作,终端将原距离中间列表项控件最远的第一列表项控件“0”,显示在第二侧区域的最下层,将原距离中间列表项控件最远的第二列表项控件显示在第二侧区域的倒数第二层。
在一个实施例中,终端执行步骤260之前还包括:针对每个滑动列表中的列表项控件,设置列表项控件的控件参数。其中,列表项控件是支持至少两种控件参数的控件,控件参数包括:n1个第一列表项控件中与前一个第一列表项控件之间的错位间隔、与后一个第一列表项控件之间的错位间隔、第一列表项控件的旋转角度、n2个第二列表项控件中与前一个第二列表项控件之间的错位间隔、与后一个第二列表项控件之间的错位间隔、第二列表项控件的旋转角度、中间列表项控件与前一个第一列表项控件的间距、与后一个第二列表项控件的间距、中间列表项控件的尺寸中的至少一种。
综上所述,通过滑动操作,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件,可清晰完整的显示滑动列表所有的列表项控件,且该滑动列表的层次丰富,重点突出,用户可直观辨别当前滑动列表显示的中间列表项控件,极大地便利了用户获取中间列表项控件包含的信息。
上述方法,终端还设置滑动列表的显示参数,实现了通过显示参数控制列表项控件在滑动列表的显示效果,简化了列表项控件的显示效果的设置过程,降低了开发难度。
为清晰完整地显示滑动列表的列表项控件,基于图2所示的实施例中,步骤220可替换为下述步骤S1:
S1,在用户界面中,将n1个第一列表项控件呈第一不规则堆叠状态显示在滑动列表的第一侧区域;将中间列表项控件显示在滑动列表的中间区域;以及将n2个第二列表项控件呈第二不规则堆叠状态显示在滑动列表的第二侧区域;
其中,第一不规则堆叠状态是按照离中间列表项控件的距离由远到近将第一列表项控件由下到上错位堆叠的状态,第二不规则堆叠状态是按照离中间列表项控件的距离由远到近将第二列表项控件由下到上错位堆叠的状态。
结合参考图3,n1个第一列表项控件11至18按照离中间列表项控件21的距离由远到近将11至18由下到上错位堆叠,n2个第二列表项控件31至37按照离中间列表项控件21的距离由远到近将第二列表项控件由下到上错位堆叠。
在一个实施例中,S1中将n1个第一列表项控件呈第一不规则堆叠状态显示在滑动列表的第一侧区域,包括:将n1个第一列表项控件按照不同的显示参数呈第一不规则堆叠状态显示在滑动列表的第一侧区域中;其中,显示参数包括:与前一个第一列表项控件之间的错位间隔,与后一个第一列表项控件之间的错位间隔,和,第一列表项控件的旋转角度中的至少一种。
示意性的,结合参考图4,第一列表项控件13与前一个第一列表项控件12之间的错位间隔d23,第一列表项控件13与后一个第一列表项控件14之间的错位间隔d34,即为第一列表项控件13的显示参数。
示意性的,结合参考图5,第一列表项控件11的旋转角度∠11即为第一列表项控件11的显示参数。
在一个实施例中,步骤S1中将n2个第二列表项控件呈第二不规则堆叠状态显示在滑动列表的第二侧区域,包括:将n2个第二列表项控件按照不同的显示参数呈第二不规则堆叠状态显示在滑动列表的第二侧区域中;其中,显示参数包括:与前一个第二列表项控件之间的错位间隔,与后一个第二列表项控件之间的错位间隔,和,第二列表项控件的旋转角度中的至少一种。
此处与n1个第一列表项控件的第一不规则堆叠状态的说明相类似,不再展开详述。
在一个实施例中,步骤S1中将中间列表项控件显示在滑动列表的中间区域,包括:将中间列表项控件按照显示参数显示在滑动列表的中间区域;其中,显示参数包括:与前一个第一列表项控件之间的间距,与后一个第二列表项控件之间的间距,和,中间列表项控件的尺寸中的至少一种。
示意性的,参考图7,中间列表项控件21可调节与后一个第二列表项控件之间的间距。由图7可得,经调节后的中间列表项控件21与后一个第二列表项控件之间的间距明显增大。
示意性的,参考图8,中间列表项控件21可调节其尺寸。由图8可得,经调节后的中间列表项控件21尺寸明显增大。
综上所述,通过设置第一列表项控件、第二列表项控件和中间列表项控件的显示参数,丰富了滑动列表上列表项控件的显示效果,更加丰富了滑动列表的层次,突出了当前用户界面重点显示的列表项控件,用户可直观辨别当前滑动列表显示的中间列表项控件,极大地便利了用户获取中间列表项控件包含的信息。
基于图2所示的实施例中,步骤260可以包括步骤261和步骤262,图9示出了本申请一个示例性实施例提供的滑动列表的显示方法,该方法包括:
步骤220,显示具有滑动列表的用户界面;
滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,n1个第一列表项控件呈不规则堆叠状态显示在中间列表项控件的第一侧区域,n2个第二列表项控件呈不规则堆叠状态显示在中间列表项控件的第二侧区域。
步骤240,接收针对滑动列表的滑动操作;
终端接收针对滑动列表的滑动操作。
关于步骤220和步骤240的详细说明,可以参考图2所示的实施例。
步骤261,响应于滑动操作,通过改变旋转角度的方式,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件,或,通过缩小列表项控件的方式,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件,或,通过改变旋转角度和缩小列表项控件的方式,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件;
结合参考图10,图a-b-c示出了中间列表项控件21滑动显示为第一侧区域中堆叠在最上层的第一列表项控件的过程,其中,中间列表项控件21通过改变旋转角度和缩小列表项控件的方式,滑动显示为最上层的第一列表项控件。
步骤262,响应于滑动操作,通过改变旋转角度的方式,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件,或,通过放大列表项控件的方式,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件,或,通过改变旋转角度和放大列表项控件的方式,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件。
结合参考图10,图a-b-c显示了第二列表项控件31滑动显示为中间列表项控件的过程,其中,第二列表项控件31通过改变旋转角度和放大列表项控件的方式,滑动显示为中间列表项控件。
综上所述,通过设置在滑动过程中改变旋转角度、缩小中间列表项控件和放大堆叠在最上层的第二列表项控件,丰富了滑动列表上列表项控件的显示效果,更加丰富了滑动列表的层次,突出了当前用户界面重点显示的列表项控件,用户可直观辨别当前滑动列表显示的中间列表项控件,极大地便利了用户获取中间列表项控件包含的信息。
为实现滑动列表的显示,在一个实施例中,图11示出了本申请一个示例性实施例提供的滑动列表的显示方法的流程图,以该方法应用于图2所示的终端进行举例说明,该方法包括:
步骤1101,开始;
终端开始进行滑动列表的生成和显示。
步骤1102,制作多个列表项控件并设置显示参数;
终端制作多个列表项控件并设置显示参数,显示参数包括但不限于错位间隔、旋转角度、中间列表项控件的尺寸、中间列表项控件与两侧列表项控件间距中的至少一种。
步骤1103,是否调整列表项控件旋转角度;
终端判断是否调整列表项控件的旋转角度;若是,则执行步骤1104,若否,则执行步骤1105。
步骤1104,根据设置的显示参数来调整旋转角度;
终端根据设置的显示参数来调整旋转角度。
步骤1105,是否调整列表项控件错位间隔;
终端判断是否调整列表项控件错位间隔;若是,则执行步骤1106,若否,则执行步骤1107。
步骤1106,根据设置的显示参数来调整错位间隔;
终端根据设置的显示参数来调整错位间隔。
步骤1107,是否调整中间列表项控件与两侧列表项控件间距;
终端判断是否调整中间列表项控件与两侧列表项控件间距;若是,则执行步骤1108,若否,则执行步骤1109。
步骤1108,根据设置的显示参数调整中间列表项控件与两侧列表项控件的间距变大或变小;
终端根据设置的显示参数调整中间列表项控件与两侧列表项控件的间距变大或变小。
步骤1109,是否调整中间列表项控件尺寸;
终端判断是否调整中间列表项控件尺寸;若是,则执行步骤1110,若否,则执行步骤1111。
步骤1110,根据设置的显示参数调整中间列表项控件放大或缩小;
终端根据设置的显示参数调整中间列表项控件放大或缩小。
步骤1111,结束;
终端结束滑动列表的生成和显示。
图12示出了本申请一个示例性实施例提供的滑动列表的显示装置的结构框图,该装置包括:
显示模块1201,用于显示具有滑动列表的用户界面,滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,n1个第一列表项控件呈不规则堆叠状态显示在中间列表项控件的第一侧区域,n2个第二列表项控件呈不规则堆叠状态显示在中间列表项控件的第二侧区域,n1、n2均为正整数;
滑动模块1202,用于接收针对滑动列表的滑动操作;
显示模块1201,还用于响应于滑动操作,将中间列表项控件滑动显示为位于第一侧区域中堆叠在最上层的第一列表项控件,以及将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件;
其中,不规则堆叠状态是按照不同错位间隔和/或不同旋转角度进行堆叠的状态。
在一个实施例中,显示模块1201还用于在用户界面中,将n1个第一列表项控件呈第一不规则堆叠状态显示在滑动列表的第一侧区域;将中间列表项控件显示在滑动列表的中间区域;以及将n2个第二列表项控件呈第二不规则堆叠状态显示在滑动列表的第二侧区域;
其中,第一不规则堆叠状态是按照离中间列表项控件的距离由远到近将第一列表项控件由下到上错位堆叠的状态,第二不规则堆叠状态是按照离中间列表项控件的距离由远到近将第二列表项控件由下到上错位堆叠的状态。
在一个实施例中,显示模块1201还用于将n1个第一列表项控件按照不同的显示参数呈第一不规则堆叠状态显示在滑动列表的第一侧区域中;
其中,显示参数包括:与前一个第一列表项控件之间的错位间隔,与后一个第一列表项控件之间的错位间隔,和,第一列表项控件的旋转角度中的至少一种。
在一个实施例中,显示模块1201还用于将n2个第二列表项控件按照不同的显示参数呈第二不规则堆叠状态显示在滑动列表的第二侧区域中;
其中,显示参数包括:与前一个第二列表项控件之间的错位间隔,与后一个第二列表项控件之间的错位间隔,和,第二列表项控件的旋转角度中的至少一种。
在一个实施例中,显示模块1201还用于将中间列表项控件按照显示参数显示在滑动列表的中间区域;
其中,显示参数包括:与前一个第一列表项控件之间的间距,与后一个第二列表项控件之间的间距,和,中间列表项控件的尺寸中的至少一种。
在一个实施例中,显示模块1201还用于通过改变旋转角度的方式,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件。
在一个实施例中,显示模块1201还用于通过缩小列表项控件的方式,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件。
在一个实施例中,显示模块1201还用于通过改变旋转角度和缩小列表项控件的方式,将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件。
在一个实施例中,显示模块1201还用于通过改变旋转角度的方式,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件。
在一个实施例中,显示模块1201还用于通过放大列表项控件的方式,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件。
在一个实施例中,显示模块1201还用于通过改变旋转角度和放大列表项控件的方式,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件。
在一个实施例中,该装置还包括处理模块1203。
在一个实施例中,处理模块1203用于针对每个滑动列表中的列表项控件,设置列表项控件的控件参数,列表项控件是支持至少两种控件参数的控件;
其中,显示参数包括:n1个第一列表项控件中与前一个第一列表项控件之间的错位间隔、与后一个第一列表项控件之间的错位间隔、第一列表项控件的旋转角度、n2个第二列表项控件中与前一个第二列表项控件之间的错位间隔、与后一个第二列表项控件之间的错位间隔、第二列表项控件的旋转角度、中间列表项控件与前一个第一列表项控件的间距、与后一个第二列表项控件的间距、中间列表项控件的尺寸中的至少一种。
在一个实施例中,n1个第一列表项控件和n2个第二列表项控件完全不同,或,n1个第一列表项控件和n2个第二列表项控件部分相同。
在一个实施例中,显示模块1201还用于响应于滑动操作,将中间列表项控件滑动显示为位于第一侧区域中堆叠在最上层的第一列表项控件,以及将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件,以及将距离中间列表项控件最远的第一列表项控件滑动显示为第二侧区域中堆叠在最下层的第二列表项控件,以及将距离中间列表项控件最远的第二列表项控件滑动显示为第二侧区域中堆叠在倒数第二层的第二列表项控件。
综上所述,通过滑动操作,上述装置将中间列表项控件滑动显示为第一侧区域中堆叠在最上层的第一列表项控件,将第二侧区域中堆叠在最上层的第二列表项控件滑动显示为中间列表项控件,可清晰完整的显示滑动列表所有的列表项控件,且该滑动列表的层次丰富,重点突出,用户可直观辨别当前滑动列表显示的中间列表项控件,极大地便利了用户获取中间列表项控件包含的信息。
上述装置还通过设置滑动列表的显示参数,实现了根据显示参数控制列表项控件在滑动列表的显示效果,简化了列表项控件的显示效果的设置过程,降低了开发难度。
上述装置还设置第一列表项控件、第二列表项控件和中间列表项控件的显示参数、在滑动过程中改变旋转角度、缩小中间列表项控件和放大堆叠在最上层的第二列表项控件,丰富了滑动列表上列表项控件的显示效果。
需要说明的是,上述实施例提供的装置,在实现其功能时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将设备的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的装置与方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
图13示出了本申请一个示例性实施例提供的计算机设备1300的结构框图。该计算机设备1300可以是便携式移动终端,比如:智能手机、平板电脑、3P3播放器(MovingPicture Experts Group Audio Layer III,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV,动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。计算机设备1300还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常,计算机设备1300包括有:处理器1301和存储器1302。
处理器1301可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器1301可以采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1301也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central ProcessingUnit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器1301可以集成有GPU(Graphics Processing Unit,图像处理器),GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器1301还可以包括AI(Artificial Intelligence,人工智能)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器1302可以包括一个或多个计算机可读存储介质,该计算机可读存储介质可以是非暂态的。存储器1302还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中,存储器1302中的非暂态的计算机可读存储介质用于存储至少一个指令,该至少一个指令用于被处理器1301所执行以实现本申请中方法实施例提供的滑动列表的显示方法。
在一些实施例中,计算机设备1300还可选包括有:外围设备接口1303和至少一个外围设备。处理器1301、存储器1302和外围设备接口1303之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1303相连。具体地,外围设备包括:射频电路1304、显示屏1305、摄像头组件1306、音频电路1307和电源1308中的至少一种。
外围设备接口1303可被用于将I/O(Input/Output,输入/输出)相关的至少一个外围设备连接到处理器1301和存储器1302。在一些实施例中,处理器1301、存储器1302和外围设备接口1303被集成在同一芯片或电路板上;在一些其他实施例中,处理器1301、存储器1302和外围设备接口1303中的任意一个或两个可以在单独的芯片或电路板上实现,本实施例对此不加以限定。
射频电路1304用于接收和发射RF(Radio Frequency,射频)信号,也称电磁信号。射频电路1304通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1304将电信号转换为电磁信号进行发送,或者,将接收到的电磁信号转换为电信号。可选地,射频电路1304包括:天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1304可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于:万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity,无线保真)网络。在一些实施例中,射频电路1304还可以包括NFC(Near Field Communication,近距离无线通信)有关的电路,本申请对此不加以限定。
显示屏1305用于显示UI(User Interface,用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1305是触摸显示屏时,显示屏1305还具有采集在显示屏1305的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1301进行处理。此时,显示屏1305还可以用于提供虚拟按钮和/或虚拟键盘,也称软按钮和/或软键盘。在一些实施例中,显示屏1305可以为一个,设置在计算机设备1300的前面板;在另一些实施例中,显示屏1305可以为至少两个,分别设置在计算机设备1300的不同表面或呈折叠设计;在另一些实施例中,显示屏1305可以是柔性显示屏,设置在计算机设备1300的弯曲表面上或折叠面上。甚至,显示屏1305还可以设置成非矩形的不规则图形,也即异形屏。显示屏1305可以采用LCD(Liquid Crystal Display,液晶显示屏)、OLED(OrganicLight-Emitting Diode,有机发光二极管)等材质制备。
摄像头组件1306用于采集图像或视频。可选地,摄像头组件1306包括前置摄像头和后置摄像头。通常,前置摄像头设置在终端的前面板,后置摄像头设置在终端的背面。在一些实施例中,后置摄像头为至少两个,分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种,以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality,虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中,摄像头组件1306还可以包括闪光灯。闪光灯可以是单色温闪光灯,也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合,可以用于不同色温下的光线补偿。
音频电路1307可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波,并将声波转换为电信号输入至处理器1301进行处理,或者输入至射频电路1304以实现语音通信。出于立体声采集或降噪的目的,麦克风可以为多个,分别设置在计算机设备1300的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1301或射频电路1304的电信号转换为声波。扬声器可以是传统的薄膜扬声器,也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时,不仅可以将电信号转换为人类可听见的声波,也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中,音频电路1307还可以包括耳机插孔。
电源1308用于为计算机设备1300中的各个组件进行供电。电源1308可以是交流电、直流电、一次性电池或可充电电池。当电源1308包括可充电电池时,该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池,无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。
在一些实施例中,计算机设备1300还包括有一个或多个传感器1309。该一个或多个传感器1309包括但不限于:加速度传感器1310、陀螺仪传感器1311、压力传感器1312、光学传感器1313以及接近传感器1314。
加速度传感器1310可以检测以计算机设备1300建立的坐标系的三个坐标轴上的加速度大小。比如,加速度传感器1310可以用于检测重力加速度在三个坐标轴上的分量。处理器1301可以根据加速度传感器1314采集的重力加速度信号,控制显示屏1305以横向视图或纵向视图进行用户界面的显示。加速度传感器1314还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器1311可以检测计算机设备1300的机体方向及转动角度,陀螺仪传感器1311可以与加速度传感器1310协同采集用户对计算机设备1300的3D动作。处理器1301根据陀螺仪传感器1311采集的数据,可以实现如下功能:动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器1312以设置在计算机设备1300的侧边框和/或显示屏1305的下层。当压力传感器1312设置在计算机设备1300的侧边框时,可以检测用户对计算机设备1300的握持信号,由处理器1301根据压力传感器1312采集的握持信号进行左右手识别或快捷操作。当压力传感器1312设置在显示屏1305的下层时,由处理器1301根据用户对显示屏1305的压力操作,实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
光学传感器1313用于采集环境光强度。在一个实施例中,处理器1301可以根据光学传感器1313采集的环境光强度,控制显示屏1305的显示亮度。具体地,当环境光强度较高时,调高显示屏1305的显示亮度;当环境光强度较低时,调低显示屏1305的显示亮度。在另一个实施例中,处理器1301还可以根据光学传感器1313采集的环境光强度,动态调整摄像头组件1306的拍摄参数。
接近传感器1314,也称距离传感器,通常设置在计算机设备1300的前面板。接近传感器1314用于采集用户与计算机设备1300的正面之间的距离。在一个实施例中,当接近传感器1314检测到用户与计算机设备1300的正面之间的距离逐渐变小时,由处理器1301控制显示屏1305从亮屏状态切换为息屏状态;当接近传感器1314检测到用户与计算机设备1300的正面之间的距离逐渐变大时,由处理器1301控制显示屏1305从息屏状态切换为亮屏状态。
本领域技术人员可以理解,图13中示出的结构并不构成对计算机设备1300的限定,可以包括比图示更多或更少的组件,或者组合某些组件,或者采用不同的组件布置。
在示例性实施例中,还提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或所述指令集在被处理器执行时实现上述滑动列表的显示方法。
在示例性实施例中,还提供了一种计算机程序产品,当该计算机程序产品被处理器执行时,其用于实现上述滑动列表的显示方法。
应当理解的是,在本文中提及的“多个”是指两个或两个以上。“和/或”,描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
以上所述仅为本申请的示例性实施例,并不用以限制本申请,凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。
Claims (14)
1.一种滑动列表的显示方法,其特征在于,所述方法包括:
显示具有所述滑动列表的用户界面,所述滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,所述n1个第一列表项控件呈不规则堆叠状态显示在所述中间列表项控件的第一侧区域,所述n2个第二列表项控件呈不规则堆叠状态显示在所述中间列表项控件的第二侧区域,n1、n2均为正整数;
接收针对所述滑动列表的滑动操作;
响应于所述滑动操作,将所述中间列表项控件滑动显示为位于所述第一侧区域中堆叠在最上层的第一列表项控件,以及将所述第二侧区域中堆叠在最上层的第二列表项控件滑动显示为所述中间列表项控件,以及将距离所述中间列表项控件最远的第一列表项控件滑动显示为所述第二侧区域中堆叠在最下层的第二列表项控件,以及将所述距离所述中间列表项控件最远的第二列表项控件滑动显示为所述第二侧区域中堆叠在倒数第二层的第二列表项控件;
其中,所述不规则堆叠状态是按照不同错位间隔和/或不同旋转角度进行堆叠的状态。
2.根据权利要求1所述的方法,其特征在于,所述显示具有所述滑动列表的用户界面,包括:
在所述用户界面中,将所述n1个第一列表项控件呈第一不规则堆叠状态显示在所述滑动列表的第一侧区域;将所述中间列表项控件显示在所述滑动列表的中间区域;以及将所述n2个第二列表项控件呈第二不规则堆叠状态显示在所述滑动列表的第二侧区域;
其中,所述第一不规则堆叠状态是按照离所述中间列表项控件的距离由远到近将所述第一列表项控件由下到上错位堆叠的状态,所述第二不规则堆叠状态是按照离所述中间列表项控件的距离由远到近将所述第二列表项控件由下到上错位堆叠的状态。
3.根据权利要求2所述的方法,其特征在于,所述将所述n1个第一列表项控件呈第一不规则堆叠状态显示在所述滑动列表的第一侧区域,包括:
将所述n1个第一列表项控件按照不同的显示参数呈第一不规则堆叠状态显示在所述滑动列表的第一侧区域中;
其中,所述显示参数包括:与前一个第一列表项控件之间的错位间隔,与后一个第一列表项控件之间的错位间隔,和,所述第一列表项控件的旋转角度中的至少一种。
4.根据权利要求2所述的方法,其特征在于,所述将所述n2个第二列表项控件呈第二不规则堆叠状态显示在所述滑动列表的第二侧区域,包括:
将所述n2个第二列表项控件按照不同的显示参数呈第二不规则堆叠状态显示在所述滑动列表的第二侧区域中;
其中,所述显示参数包括:与前一个第二列表项控件之间的错位间隔,与后一个第二列表项控件之间的错位间隔,和,所述第二列表项控件的旋转角度中的至少一种。
5.根据权利要求2所述的方法,其特征在于,所述将所述中间列表项控件显示在所述滑动列表的中间区域,包括:
将所述中间列表项控件按照显示参数显示在所述滑动列表的中间区域;
其中,所述显示参数包括:与前一个第一列表项控件之间的间距,与后一个第二列表项控件之间的间距,和,所述中间列表项控件的尺寸中的至少一种。
6.根据权利要求1至5任一所述的方法,其特征在于,所述将所述中间列表项控件滑动显示为位于所述第一侧区域中堆叠在最上层的第一列表项控件,包括:
通过改变旋转角度的方式,将所述中间列表项控件滑动显示为所述第一侧区域中堆叠在最上层的第一列表项控件;
或,
通过缩小列表项控件的方式,将所述中间列表项控件滑动显示为所述第一侧区域中堆叠在最上层的第一列表项控件;
或,
通过改变旋转角度和缩小列表项控件的方式,将所述中间列表项控件滑动显示为所述第一侧区域中堆叠在最上层的第一列表项控件。
7.根据权利要求1至5任一所述的方法,其特征在于,所述将所述第二侧区域中堆叠在最上层的第二列表项控件滑动显示为所述中间列表项控件,包括:
通过改变旋转角度的方式,将所述第二侧区域中堆叠在最上层的第二列表项控件滑动显示为所述中间列表项控件;
或,
通过放大列表项控件的方式,将所述第二侧区域中堆叠在最上层的第二列表项控件滑动显示为所述中间列表项控件;
或,
通过改变旋转角度和放大列表项控件的方式,将所述第二侧区域中堆叠在最上层的第二列表项控件滑动显示为所述中间列表项控件。
8.根据权利要求1至5任一所述的方法,其特征在于,所述列表项控件是支持至少两种控件参数的控件,所述方法还包括:
针对每个所述滑动列表中的列表项控件,设置所述列表项控件的控件参数;
其中,所述控件参数包括:所述n1个第一列表项控件中与前一个第一列表项控件之间的错位间隔、与后一个第一列表项控件之间的错位间隔、所述第一列表项控件的旋转角度;所述n2个第二列表项控件中与前一个第二列表项控件之间的错位间隔、与后一个第二列表项控件之间的错位间隔、所述第二列表项控件的旋转角度;所述中间列表项控件与前一个第一列表项控件的间距、与后一个第二列表项控件的间距、所述中间列表项控件的尺寸中的至少一种。
9.根据权利要求1所述的方法,其特征在于,所述n1个第一列表项控件和所述n2个第二列表项控件完全不同,或,所述n1个第一列表项控件和所述n2个第二列表项控件部分相同。
10.一种滑动列表的显示装置,其特征在于,所述装置包括:
显示模块,用于显示具有所述滑动列表的用户界面,所述滑动列表包括n1个第一列表项控件、中间列表项控件和n2个第二列表项控件,所述n1个第一列表项控件呈不规则堆叠状态显示在所述中间列表项控件的第一侧区域,所述n2个第二列表项控件呈不规则堆叠状态显示在所述中间列表项控件的第二侧区域,n1、n2均为正整数;
滑动模块,用于接收针对所述滑动列表的滑动操作;
所述显示模块,还用于响应于所述滑动操作,将所述中间列表项控件滑动显示为位于所述第一侧区域中堆叠在最上层的第一列表项控件,以及将所述第二侧区域中堆叠在最上层的第二列表项控件滑动显示为所述中间列表项控件,以及将距离所述中间列表项控件最远的第一列表项控件滑动显示为所述第二侧区域中堆叠在最下层的第二列表项控件,以及将所述距离所述中间列表项控件最远的第二列表项控件滑动显示为所述第二侧区域中堆叠在倒数第二层的第二列表项控件;
其中,所述不规则堆叠状态是按照不同错位间隔和/或不同旋转角度进行堆叠的状态。
11.根据权利要求10所述的装置,其特征在于,
所述显示模块,还用于在所述用户界面中,将所述n1个第一列表项控件呈第一不规则堆叠状态显示在所述滑动列表的第一侧区域;将所述中间列表项控件显示在所述滑动列表的中间区域;以及将所述n2个第二列表项控件呈第二不规则堆叠状态显示在所述滑动列表的第二侧区域;
其中,所述第一不规则堆叠状态是按照离所述中间列表项控件的距离由远到近将所述第一列表项控件由下到上错位堆叠的状态,所述第二不规则堆叠状态是按照离所述中间列表项控件的距离由远到近将所述第二列表项控件由下到上错位堆叠的状态。
12.根据权利要求10所述的装置,其特征在于,所述装置还包括处理模块;
所述处理模块,用于针对每个所述滑动列表中的列表项控件,设置所述列表项控件的显示参数;
其中,所述显示参数包括:所述n1个第一列表项控件中与前一个第一列表项控件之间的错位间隔、与后一个第一列表项控件之间的错位间隔、所述第一列表项控件的旋转角度;所述n2个第二列表项控件中与前一个第二列表项控件之间的错位间隔、与后一个第二列表项控件之间的错位间隔、所述第二列表项控件的旋转角度;所述中间列表项控件与前一个第一列表项控件的间距、与后一个第二列表项控件的间距、所述中间列表项控件的尺寸中的至少一种。
13.一种计算机设备,其特征在于,所述计算机设备包括处理器和存储器,所述存储器中存储有至少一条指令,所述至少一条指令由所述处理器加载并执行以实现如权利要求1至9任一项所述的方法。
14.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有至少一条指令,所述至少一条指令由处理器加载并执行以实现如权利要求1至9任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110977293.9A CN113608649B (zh) | 2021-08-24 | 2021-08-24 | 滑动列表的显示方法、装置、设备和可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110977293.9A CN113608649B (zh) | 2021-08-24 | 2021-08-24 | 滑动列表的显示方法、装置、设备和可读存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113608649A CN113608649A (zh) | 2021-11-05 |
CN113608649B true CN113608649B (zh) | 2023-08-08 |
Family
ID=78341852
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110977293.9A Active CN113608649B (zh) | 2021-08-24 | 2021-08-24 | 滑动列表的显示方法、装置、设备和可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113608649B (zh) |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103902163A (zh) * | 2014-04-09 | 2014-07-02 | 深圳市中兴移动通信有限公司 | 整理桌面图标的方法和智能终端 |
CN104679432A (zh) * | 2015-03-04 | 2015-06-03 | 成都品果科技有限公司 | 一种基于移动端浏览器跨平台人机交互浏览图片的方法 |
CN104750391A (zh) * | 2015-04-13 | 2015-07-01 | 魅族科技(中国)有限公司 | 一种图标批量处理方法及终端 |
CN108268187A (zh) * | 2018-01-23 | 2018-07-10 | 腾讯音乐娱乐科技(深圳)有限公司 | 智能终端的显示方法及装置 |
CN110879678A (zh) * | 2019-10-28 | 2020-03-13 | 维沃移动通信有限公司 | 一种图标显示方法、电子设备及存储介质 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10146400B2 (en) * | 2006-09-11 | 2018-12-04 | Anthony J. Vallone | Icon-based user interfaces |
US9310966B2 (en) * | 2011-03-24 | 2016-04-12 | Lg Electronics Inc. | Mobile terminal and method for controlling the same |
US20150215245A1 (en) * | 2014-01-24 | 2015-07-30 | Matthew Christian Carlson | User interface for graphical representation of and interaction with electronic messages |
-
2021
- 2021-08-24 CN CN202110977293.9A patent/CN113608649B/zh active Active
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103902163A (zh) * | 2014-04-09 | 2014-07-02 | 深圳市中兴移动通信有限公司 | 整理桌面图标的方法和智能终端 |
CN104679432A (zh) * | 2015-03-04 | 2015-06-03 | 成都品果科技有限公司 | 一种基于移动端浏览器跨平台人机交互浏览图片的方法 |
CN104750391A (zh) * | 2015-04-13 | 2015-07-01 | 魅族科技(中国)有限公司 | 一种图标批量处理方法及终端 |
CN108268187A (zh) * | 2018-01-23 | 2018-07-10 | 腾讯音乐娱乐科技(深圳)有限公司 | 智能终端的显示方法及装置 |
CN110879678A (zh) * | 2019-10-28 | 2020-03-13 | 维沃移动通信有限公司 | 一种图标显示方法、电子设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN113608649A (zh) | 2021-11-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110083282B (zh) | 基于信息展示页面的人机交互方法、装置、终端及介质 | |
CN108304265B (zh) | 内存管理方法、装置及存储介质 | |
CN110471596B (zh) | 一种分屏切换方法、装置、存储介质及电子设备 | |
US20200409545A1 (en) | Display adaptation method and apparatus for application, and storage medium | |
CN108268187A (zh) | 智能终端的显示方法及装置 | |
CN113127130B (zh) | 页面跳转方法、装置及存储介质 | |
CN109948581B (zh) | 图文渲染方法、装置、设备及可读存储介质 | |
CN110928464B (zh) | 用户界面的显示方法、装置、设备及介质 | |
CN110841285A (zh) | 界面元素的显示方法、装置、计算机设备及存储介质 | |
CN112230908B (zh) | 一种对齐组件的方法、装置、电子设备及存储介质 | |
EP4057137A1 (en) | Display control method and terminal device | |
CN112230914B (zh) | 小程序的制作方法、装置、终端及存储介质 | |
CN112825040B (zh) | 用户界面的显示方法、装置、设备及存储介质 | |
CN112612405B (zh) | 窗口显示方法、装置、设备及计算机可读存储介质 | |
CN110673944B (zh) | 执行任务的方法和装置 | |
CN112116681A (zh) | 图像生成方法、装置、计算机设备及存储介质 | |
CN112052153B (zh) | 产品版本测试方法及装置 | |
CN109032492B (zh) | 一种切歌的方法及装置 | |
CN113608649B (zh) | 滑动列表的显示方法、装置、设备和可读存储介质 | |
CN112230828B (zh) | 组件布局方法及装置、存储介质 | |
CA2873555A1 (en) | Device and method for processing user input | |
CN111258673A (zh) | 快应用显示方法及终端设备 | |
CN115379274B (zh) | 基于图片的互动方法、装置、电子设备及存储介质 | |
CN113507647B (zh) | 多媒体数据的播放控制方法、装置、终端及可读存储介质 | |
CN111382152B (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 | ||
REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40055280 Country of ref document: HK |
|
GR01 | Patent grant | ||
GR01 | Patent grant |