CN106648331B - 一种可悬停列的列表显示方法和系统 - Google Patents
一种可悬停列的列表显示方法和系统 Download PDFInfo
- Publication number
- CN106648331B CN106648331B CN201610945817.5A CN201610945817A CN106648331B CN 106648331 B CN106648331 B CN 106648331B CN 201610945817 A CN201610945817 A CN 201610945817A CN 106648331 B CN106648331 B CN 106648331B
- Authority
- CN
- China
- Prior art keywords
- sublist
- view
- hovering
- display interface
- attribute
- 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/0485—Scrolling or panning
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种可悬停列的列表显示方法和系统,所述列表的子列表以对应的子列表视图在显示界面上显示项目信息,所述方法包括:对所有子列表视图设置与悬停相关的属性;在显示界面上同步滚动所有子列表视图;以及当子列表视图的自身属性符合悬停条件时,停止滚动并显示对应的项目信息,反之,则继续滚动并隐藏对应的项目信息。实现了将非相邻的多个列悬停在显示界面上,减少了滚动操作,观察内容更加直观明了,大大提高了工作效率。
Description
技术领域
本发明涉及图像用户界面,更具体地,涉及一种可悬停列的列表显示方法和系统。
背景技术
对于结构为M行和N列的列表,当M和N较大时,通常用水平滚动和垂直滚动的方法使用户浏览全部列表项目信息。在此场景下,被用户关注的三个非相邻的列,即第k列、第(k+s)列和第(k+s+t)可能不会同时显示在屏幕中(其中,k>=1,s>2,t>3),用户为了对比观察这三列内容,需要反复滚动列表。显然,反复滚动不仅浪费时间降低工作效率,还会分散观察注意力引起误判。
虽然现有技术中存在一种称为“行列冻结”的方法,该方法能够将由多个相邻的行和列组成的“块”悬停在屏幕中,但不能将非相邻的多个列悬停在屏幕中。
发明内容
本发明提供一种克服上述问题或者至少部分地解决上述问题的一种可悬停列的列表显示方法和系统。
根据本发明的一个方面,提供一种可悬停列的列表显示方法,所述列表的子列表以对应的子列表视图在显示界面上显示项目信息,包括:
S1、对所有子列表视图设置与悬停相关的属性;
S2、在显示界面上同步滚动所有子列表视图;以及
S3、当子列表视图的自身属性符合悬停条件时,停止滚动并显示对应的项目信息,反之,则继续滚动并隐藏对应的项目信息。
根据本发明的另一个方面,提供一种可悬停列的列表显示系统,所述列表的子列表以对应的子列表视图在显示界面上显示项目信息,所述子列表视图具形状且按次序布局在显示界面上,包括:
生成模块,对所有子列表视图设置与悬停相关的属性;
控制模块,在显示界面上同步滚动所有子列表视图;以及
显示模块,当子列表视图滚动至自身属性符合悬停条件的位置值时,停止滚动并显示对应的项目信息。
本申请提出一种可悬停列的列表显示方法和系统,通过对子列表设置与悬停相关的属性,当子列表在显示界面上滚动至符合悬停条件时即可悬停,同时显示子列表的项目信息,不再局限于只允许相邻的列悬停在显示界面上,实现了将非相邻的多个列悬停在显示界面上,减少了滚动操作,观察内容更加直观明了,大大提高了工作效率。
附图说明
图1为基于安卓系统的手机的显示区域示意图;
图2为本可悬停列的列表显示方法的流程图。
具体实施方式
下面结合附图和实施例,对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明,但不用来限制本发明的范围。
在一个具体实施例中,以基于安卓系统的手机的显示区域上显示可悬停列的列表为例,结合附图对本发明进行进一步的说明。
图1给出了基于安卓系统的手机的显示区域W的特征,该显示区域W的宽度以W-W表示,高度以W-H表示,以屏幕的左上角作为直角坐标系的原点,以由左至右的滚动方向为正方向D,以由右至左的滚动方向为负方向-D。
在一个具体实施例中,所述列表的大小为M行和N列,将列表分解为N列子列表,针对每个子列表生成一个从安卓系统下的listview子列表视图,子列表视图在显示界面上显示项目信息。
图2给出了本可悬停列的列表显示方法的流程图,该方法包括:
S1、对所有子列表视图设置与悬停相关的属性;
S2、在显示界面上同步滚动所有子列表视图;以及
S3、当子列表视图的自身属性符合悬停条件时,停止滚动并显示对应的项目信息,反之,则继续滚动并隐藏对应的项目信息。
通过对子列表设置与悬停相关的属性,当子列表在显示界面上滚动至符合悬停条件时即可悬停,同时显示子列表的项目信息,不再局限于只允许相邻的列悬停在显示界面上,实现了将非相邻的多个列悬停在显示界面上,减少了滚动操作,观察内容更加直观明了,大大提高了工作效率。
在本发明的一个具体实施例中,所述步骤S2具体包括:
S21、创建底图层和覆盖在所述底图层上方的一个背景透明的表图层,所述底图层在显示界面上滚动,所述表图层不在显示界面上滚动;
S22、将所有子列表视图按次序部署至所述底图层中;以及
S23、将所述底图层在显示界面上滚动;
其中,当子列表视图不满足悬停条件时,该子列表视图与所述底图层同步滚动;
在本发明的一个具体实施例中,底图层的部署具有以下特征:
1、每一个子列表视图在底图层上水平排列,并且每一个子列表视图的上沿与底图层的上沿对齐;
2、第一个子序列视图1位于底图层的最左边,其它的子序列视图i(2<=i<M)按其次序大小依次排列,两两间间距为0。
表图层的部署具有以下特征:
1、每个子序列视图在表图层中水平排列,上沿与表图层的上沿对齐;
2、第一个已悬停的子序列视图1位于表图层的最左边,其它的已悬停子序列视图t(其中,2<=t<n,n为当前已悬停的子序列视图总数)按其次序大小依次排列,两两间间距为0。
通过设置可滚动的底图层和不可滚动的表图层,所有子列表视图在底图层同步滚动,当符合悬停条件时,子列表视图就移动至表图层进行显示,层次鲜明且目的明确。
进一步地,表图层的个数也可以根据可悬停的子列表视图设置为多个,当存在多个表图层时,所有表图层并列覆盖在底图层上且互不干涉地进行显示。由于本领域的技术人员可以很容易地对不同图层设置不同显示效果,因此将不同的可悬停子列表视图移动至不同的表图层,能够方便使用者对子列表视图后续的显示效果进行美化。
在本发明的一个具体实施例中,所述步骤S3具体包括:
当子列表视图滚动至自身属性符合悬停条件时,该子列表视图移动至对应的表图层上并显示对应的项目信息;或
当位于表图层的子列表视图的属性不再符合悬停条件时,该子列表视图移动至底图层上,隐藏对应的项目信息并和底图层同步滚动。
在另一个具体实施例中,所述子列表视图除了包括listview的全部特征外,还包括以下属性:
第一属性,标示该子列表视图是否可悬停在显示界面上;
第二属性,标示该子列表视图是否已悬停在显示界面上;
第三属性,标示该子列表视图在底图层中的部署位置值;
第四属性,标示该子列表视图在显示界面中的悬停位置值;以及
第五属性,标示该子列表视图在显示界面上的滚动方向。
在另一个具体实施例中,所述悬停条件基于子列表视图的部署位置值、悬停位置值、可悬停的子列表视图个数以及次序获得。
在另一个具体实施例,每一个子列表视图在显示界面上的宽度相等,需要注意的是,这里的等宽仅仅为了简化描述过程,并不能理解为本发明的特征,悬停位置值的表达式为:
其中,t为可悬停的子列表视图的次序;n为可悬停的子列表视图的总数;a为第t-1个可悬停的子列表视图的悬停位置值;wh为第t-1个可悬停的子列表视图的宽度;At为第t个可悬停的子列表视图的悬停位置值。
在本发明的一个具体实施例中,所述子列表视图的悬停条件为:
当底图层沿正方向滚动时,可悬停的子列表视图的悬停位置值大于部署位置值与与底图层的滚动距离之差则进入悬停状态;或
当子列表视图处于悬停状态且底图层沿负方向移动时,该子列表视图的悬停位置值不大于部署位置值与底图层的滚动距离之差,则图层退出悬停状态。
在另一个具体实施例中,底图层由一个从HorizontalScrollView衍生而来的hsv视图hsv和一个从LinearLayout衍生而来的llv视图构成,且llv是hsv的子视图。
表图层是一个由LinearLayout衍生而来的视图。
子序列视图2、子序列视图5和子序列视图7是可悬停的子序列视图。
当捕获到底图层滚动后,用getScrollA方法获取hsv图层的滚动距离a3,然后按下列算法操作子列表视图:
1、如果沿正方向滚动,
检查第一个可悬停的子列表视图,本实施例中为子列表视图2,其属性值是否满足下列条件,
a1>a2-a3 (1),
其中,a1是子列表视图的第四属性值,a2是子列表视图的第三属性值,a3是滚动距离。
如果条件(1)满足,克隆该子列表视图,本实施例中为子列表视图2,并将其加入到表图层中,并定位在a1中位置上;
如果条件(1)不满足,则继续检查下一个可悬停子列表视图,本实施例中为子列表视图5;依次处理全部可悬停子列表视图,本实施例中为子列表视图2、子列表视图5和子列表视图7。
2、如果沿负方向滚动
获取hsv视图的滚动距离a7,本次滚动步长为Δa(Δa通过监听之滚动事件获得),得到当前处于悬停状态的所有子列表视图的序列子列表视图_Array,按子列表视图次序号从大到小排列子列表视图_Array中的元素,子列表视图_Array中子列表视图个数为size。
针对本实施例,当子列表视图2、子列表视图5和子列表视图7均处于悬停状态时,子列表视图_Array={子列表视图7,子列表视图5,子列表视图2}。
检查子列表视图_Array中第一个子列表视图其属性值是否满足下列条件,
a5<=a6-a7 (2)
其中,a5是子列表视图的第四属性值,a6是子列表视图的第三属性值,a7为滚动距离。
如果条件(2)满足,从表图层中删除所述子列表视图(基于子列表视图的次序号定位后执行llv视图的remove方法);
如果条件(2)不满足,继续检查子列表视图_Array中下一个成员子列表视图,即子列表视图5;同理依次处理子列表视图_Array中所有成员子列表视图。
作为优选,可进一步扩展表图层,使其返回适当Δa值,避免上述操作出现跳跃式的滚动现象。
在另一个具体实施例中,将列表视图作为Activity的content-view通过调用Activity的方法setContentView显示在窗口W中,然后根据配置项调整窗口W大小(即:宽为W_W,高为W_H)。此时,列表视图左上角对齐窗口W的左上角,此过程称为初始显示。
初始显示完成后,按下述方法初始化子序列视图的属值:基于配置项设置第一属性。本实施例中,将子序列视图2、子序列视图5和子序列视图7的第一属性置为“是”,其它的置为“非”。
按下公式计算和设置第四的值,
其中,t为第t个可悬停的子序列视图,n是可悬停子序列视图的总数为3,At为第t个具有可悬停的子序列视图在窗口W中的悬停位置,a为第(t-1)个可悬停子序列视图在窗口W中的悬停位置,sub_W为第(t-1)个可悬停子序列视图的宽度。
本实施例中,将子序列视图2的第四属性置为0,将子序列视图5的第四属性置为1*sub_W,将子序列视图7的第四属性置为2*sub_W。这些子序列视图的第四属值基于下述悬停位置计算方法得到。
将所有子序列视图的第一属性置为“非”;
将子序列视图的第三属性值置为(i-1)*sub_W,其中i为子序列视图的次序号,此值为子序列视图在底图层中偏移位置。
在本实施例中,初始显示完成后,还要进行如下初始化工作:
根据配置项将悬停滚动方向置为窗口W中从右到左的方向;
如果从子序列视图1开始的连接k个子序列视图是可悬停子序列视图(即其的第一属性为“是”),则生成从子序列视图1开始的连接k个子序列视图的副本,并将这些副本按子序列视图在底图层中的相同布局方式部署在表图层中,其中1<=k<N。k间接来自配置项,且满足条件k*sub_W<W_H-sub_W,否则认为是一种配置异常,这种异常装置会自动校正。
本发明还提供一种可悬停列的列表显示系统,所述列表的子列表以对应的子列表视图在显示界面上显示项目信息,所述子列表视图具形状且按次序布局在显示界面上,包括:
生成模块,对所有子列表视图设置与悬停相关的属性;
控制模块,在显示界面上同步滚动所有子列表视图;以及
显示模块,当子列表视图滚动至自身属性符合悬停条件的位置值时,停止滚动并显示对应的项目信息,反之,则继续滚动并隐藏对应的项目信息。
最后,本申请的方法仅为较佳的实施方案,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (6)
1.一种可悬停列的列表显示方法,其特征在于,所述列表的子列表以对应的子列表视图在显示界面上显示,包括:
S1、对所有子列表视图设置与悬停相关的属性;
S2、将所有子列表视图部署在可在显示界面上滚动的底图层中,在显示界面上同步滚动所有子列表视图;
S3、当子列表视图的自身属性符合悬停条件时,停止滚动并显示对应的项目信息;
其中,所述子列表视图的属性包括:第一属性,标示该子列表视图是否可悬停在显示界面上;第二属性,标示该子列表视图是否已悬停在显示界面上;第三属性,标示该子列表视图在底图层中的部署位置值;第四属性,标示该子列表视图在显示界面中的悬停位置值;以及第五属性,标示该子列表视图在显示界面上的滚动方向;
可悬停在显示界 面上的子列表为非相邻列;
悬停条件基于子列表视图的部署位置值、悬停位置值、可悬停的子列表视图个数以及次序获得。
2.如权利要求1所述的可悬停列的列表显示方法,其特征在于,所述S2具体包括:
S21、创建底图层和覆盖在所述底图层上方的至少一个背景透明的表图层,所述底图层在显示界面上滚动,所述表图层不在显示界面上滚动;
S22、将所有子列表视图按次序部署至所述底图层中;以及
S23、将所述底图层在显示界面上滚动;
其中,当子列表视图不满足悬停条件时,该子列表视图与所述底图层同步滚动。
3.如权利要求2所述的可悬停列的列表显示方法,其特征在于,所述S3具体包括:
当子列表视图滚动至自身属性符合悬停条件时,该子列表视图移动至对应的表图层上并显示对应的项目信息;或
当位于表图层的子列表视图的属性不再符合悬停条件时,该子列表视图移动至底图层上,隐藏对应的项目信息并和底图层同步滚动。
4.如权利要求3所述的可悬停列的列表显示方法,其特征在于,所述子列表视图在显示界面上的悬停位置值的表达式为:
其中,t为可悬停的子列表视图的次序;n为可悬停的子列表视图的总数;a为第t-1个可悬停的子列表视图的悬停位置值;wh为第t-1个可悬停的子列表视图的宽度;At为第t个可悬停的子列表视图的悬停位置值。
5.如权利要求4所述的可悬停列的列表显示方法,其特征在于,所述子列表视图的悬停条件为:
当底图层沿正方向滚动时,可悬停的子列表视图的悬停位置值大于部署位置值与底图层的滚动距离之差则进入悬停状态;或
当子列表视图处于悬停状态且底图层沿负方向移动时,该子列表视图的悬停位置值不大于部署位置值与底图层的滚动距离之差,则图层退出悬停状态。
6.一种可悬停列的列表显示系统,所述列表的子列表以对应的子列表视图在显示界面上显示项目信息,所述子列表视图具形状且按次序布局在显示界面上,其特征在于,包括:
生成模块,对所有子列表视图设置与悬停相关的属性;
控制模块,将所有子列表视图部署在可在显示界面上滚动的底图层中,在显示界面上同步滚动所有子列表视图;以及
显示模块,当子列表视图滚动至自身属性符合悬停条件的位置值时,停止滚动并显示对应的项目信息;
其中,所述子列表视图的属性包括:第一属性,标示该子列表视图是否可悬停在显示界面上;第二属性,标示该子列表视图是否已悬停在显示界面上;第三属性,标示该子列表视图在底图层中的部署位置值;第四属性,标示该子列表视图在显示界面中的悬停位置值;以及第五属性,标示该子列表视图在显示界面上的滚动方向;
可悬停在显示界 面上的子列表为非相邻列;
悬停条件基于子列表视图的部署位置值、悬停位置值、可悬停的子列表视图个数以及次序获得。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610945817.5A CN106648331B (zh) | 2016-11-02 | 2016-11-02 | 一种可悬停列的列表显示方法和系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610945817.5A CN106648331B (zh) | 2016-11-02 | 2016-11-02 | 一种可悬停列的列表显示方法和系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN106648331A CN106648331A (zh) | 2017-05-10 |
CN106648331B true CN106648331B (zh) | 2019-11-22 |
Family
ID=58821124
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201610945817.5A Active CN106648331B (zh) | 2016-11-02 | 2016-11-02 | 一种可悬停列的列表显示方法和系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106648331B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107807764B (zh) * | 2017-10-27 | 2020-10-13 | 优酷网络技术(北京)有限公司 | 一种页面展示方法及客户端 |
Family Cites Families (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN100424700C (zh) * | 2006-03-06 | 2008-10-08 | 阿里巴巴集团控股有限公司 | 在网页中实现表格局部滚动显示的方法及系统 |
CN103702225A (zh) * | 2013-12-26 | 2014-04-02 | 乐视网信息技术(北京)股份有限公司 | 一种定位播放记录展示区中元素显示位置的方法及装置 |
CN105677624B (zh) * | 2014-11-20 | 2018-10-16 | 珠海金山办公软件有限公司 | 一种电子表格冻结区域调整方法及装置 |
CN104636032A (zh) * | 2015-02-27 | 2015-05-20 | 上海天奕达电子科技有限公司 | 一种显示界面的方法及装置 |
-
2016
- 2016-11-02 CN CN201610945817.5A patent/CN106648331B/zh active Active
Also Published As
Publication number | Publication date |
---|---|
CN106648331A (zh) | 2017-05-10 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11527592B2 (en) | Terminals and display screens | |
CN107831937B (zh) | 一种触摸传感器及显示装置 | |
CN105809141B (zh) | 屏幕组件、指纹采集和识别方法、移动终端及电子设备 | |
EP2556421B1 (en) | Method, apparatus and computer program product for joining the displays of multiple devices | |
CN104583908B (zh) | 柔性显示装置及其控制方法 | |
US20140208262A1 (en) | Dynamic control method for resizing sub-windows on a screen of a display | |
CN105334994A (zh) | 一种oled触控显示面板 | |
WO2016041425A1 (zh) | 输入法虚拟键盘的调整方法和输入法装置 | |
JP2013196623A (ja) | ディスプレイ装置、ディスプレイシステム、およびディスプレイ制御方法、ならびにそのプログラム。 | |
CN105549934A (zh) | 显示界面控制方法和系统 | |
CN107463296A (zh) | 一种显示面板、触摸屏及显示装置 | |
US20110148918A1 (en) | Information processing apparatus and control method therefor | |
CN106681586A (zh) | 布局位置调整方法及装置 | |
CN104834438A (zh) | 桌面显示方法及装置 | |
WO2012176926A1 (ja) | 情報処理装置、情報処理システム、サーバ、情報処理方法、および、コンピュータ・プログラム | |
CN111182137A (zh) | 具有柔性屏幕的电子设备的显示方法和电子设备 | |
CN102043586B (zh) | 电子表格中的背景色显示方法和装置 | |
CN106648331B (zh) | 一种可悬停列的列表显示方法和系统 | |
CN106605199A (zh) | 对象管理装置、思考辅助装置、对象管理方法以及计算机可读存储介质 | |
CN106843796A (zh) | 一种单屏幕显示双系统画面的显示方法 | |
CN108174032A (zh) | 一种基于网络的智能手机远程控制计算机的方法 | |
CN106095240A (zh) | 一种文本框的显示方法及装置 | |
CN110244884A (zh) | 一种桌面图标管理方法及终端设备 | |
CN109871177B (zh) | 显示控制方法及移动终端 | |
US20140223367A1 (en) | Method of controlling operation menu and apparatus |
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 |