CN117008780A - 一种卡片位置切换方法及终端 - Google Patents
一种卡片位置切换方法及终端 Download PDFInfo
- Publication number
- CN117008780A CN117008780A CN202210476376.4A CN202210476376A CN117008780A CN 117008780 A CN117008780 A CN 117008780A CN 202210476376 A CN202210476376 A CN 202210476376A CN 117008780 A CN117008780 A CN 117008780A
- Authority
- CN
- China
- Prior art keywords
- card
- cards
- list
- displayed
- size
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 61
- 238000003475 lamination Methods 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 13
- 238000003860 storage Methods 0.000 claims description 10
- 238000004364 calculation method Methods 0.000 claims description 8
- 230000004044 response Effects 0.000 claims description 8
- 238000010586 diagram Methods 0.000 description 11
- 238000007667 floating Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 9
- 238000004891 communication Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 229920001621 AMOLED Polymers 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000001514 detection method Methods 0.000 description 3
- 238000003825 pressing Methods 0.000 description 3
- 238000013528 artificial neural network Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 239000002096 quantum dot Substances 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000008859 change Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- 230000001537 neural effect Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000004904 shortening Methods 0.000 description 1
- 239000004984 smart glass Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 239000000725 suspension Substances 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
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/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- 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/0486—Drag-and-drop
-
- 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
Abstract
一种卡片位置切换方法及终端,该方法包括:在触摸屏的预设区域显示第一卡片列表,第一卡片列表包括N个卡片中的至少两个卡片,至少两个卡片包括第一卡片和与第一卡片相邻的第二卡片;接收到作用于第一卡片列表中的第一卡片的第一操作;响应于第一操作,将预设区域从显示第一卡片列表切换为显示第二卡片列表,第二卡片列表至少包括第一卡片列表中的所有卡片,其中第一卡片处于选中状态,若N个卡片中位于第二卡片第一侧的所有卡片无法均完整显示在第二卡片的第一侧时,则第二卡片列表中位于第二卡片第一侧的至少部分卡片层叠显示。这样可以在切换预设区域内的任一个卡片的序号位置时缩短卡片切换的操作时间和操作距离,提升用户的使用体验。
Description
技术领域
本申请涉及电子技术领域,尤其涉及一种卡片位置切换方法及终端。
背景技术
卡片作为一个大小可伸缩的容器,可集中承载一种元素或以一种元素为核心的一小组元素。随着终端的屏幕上的卡片数量增多,卡片位置切换操作不够便捷。目前,卡片位置切换操作以长按目标卡片拖动到具体位置的方式为主,在卡片数量较多的情况下,拖动目标卡片移动至具体位置并推挤开具体位置附近的卡片,这个拖动过程需要用户长按并拖动卡片的距离与时间都较长,甚至导致容易在切换卡片位置的过程中导致流程的中断,给交互带来了不便,影响用户的体验。
发明内容
本申请实施例提供一种卡片位置切换方法及终端,用以缩短卡片切换的操作时间和距离,提升用户的使用体验。
第一方面,本申请实施例提供一种卡片位置切换方法,该方法应用于具有触摸屏的终端,终端包括依次排列的N个卡片,N为大于或等于2的整数;该方法包括:在触摸屏的预设区域显示第一卡片列表,第一卡片列表包括N个卡片中的至少两个卡片,至少两个卡片包括第一卡片和与第一卡片相邻的第二卡片;接收到作用于第一卡片列表中的第一卡片的第一操作;响应于第一操作,将预设区域从显示第一卡片列表切换为显示第二卡片列表,第二卡片列表至少包括第一卡片列表中的所有卡片,其中第一卡片处于选中状态,若N个卡片中位于第二卡片第一侧的所有卡片无法均完整显示在第二卡片的第一侧时,则第二卡片列表中位于第二卡片第一侧的至少部分卡片层叠显示。
基于上述方案,通过对第二卡片第一侧的所有卡片无法均完整显示的卡片进行层叠显示,可以在切换预设区域内的任一个卡片的序号位置时缩短卡片切换的操作时间和操作距离,从而可以提升用户的使用体验。
一种可能的设计中,若N个卡片中位于第二卡片第一侧的所有卡片的尺寸以及卡片间距的总和小于或等于第二卡片第一侧的屏幕剩余长度,则第二卡片列表中位于第二卡片第一侧的所有卡片均完整显示。如此,可以在第二卡片第一侧的屏幕剩余长度足够时完整显示第二卡片第一侧的所有卡片。
一种可能的设计中,该方法还包括:当第二卡片列表中位于第二卡片第一侧的至少部分卡片层叠显示时,通过以下任一种方式计算层叠尺寸,层叠尺寸为层叠显示的卡片在排列方向上显示的长度:
方式一,若N个卡片中位于第二卡片第一侧的所有卡片以及卡片间距的总和大于第二卡片第一侧的屏幕剩余长度,则第二卡片列表中第二卡片第一侧的卡片以预设阈值作为层叠尺寸进行层叠显示;
方式二,若N个卡片中位于第二卡片第一侧的所有卡片以及卡片间距的总和大于第二卡片第一侧的屏幕剩余长度、且根据屏幕剩余长度和第二卡片第一侧的卡片数量计算得到的平均层叠尺寸大于或等于预设阈值,则第二卡片列表中第二卡片第一侧的卡片以平均层叠尺寸作为层叠尺寸进行层叠显示;
方式三,若N个卡片中位于第二卡片第一侧的所有卡片以及卡片间距的总和大于第二卡片第一侧的屏幕剩余长度、且根据屏幕剩余长度和第二卡片第一侧的卡片数量计算得到的平均层叠尺寸小于预设阈值,则第二卡片列表中第二卡片第一侧的卡片以预设阈值作为层叠尺寸进行层叠显示。
通过该设计,在第二卡片第一侧的屏幕剩余长度不足以使得第二卡片第一侧的所有卡片均完整显示的情况下,可以尽量保证在层叠显示之后,用户可以辨别这些层叠卡片。
一种可能的设计中,若第二卡片第一侧的卡片的尺寸一致,则预设阈值为卡片尺寸的一半;或者,若第二卡片第一侧的卡片的尺寸不一致,则预设阈值为最小卡片尺寸的一半;或者,若第二卡片第一侧的卡片的尺寸不一致,每种尺寸对应一个预设阈值,该预设阈值是卡片尺寸的一半。
一种可能的设计中,第三卡片位于N个卡片中的第一序号位置,在响应于第一操作,将预设区域从显示第一卡片列表切换为显示第二卡片列表之后,该方法还包括:接收到用于将第一卡片的序号位置切换至第一序号位置的第二操作;响应于第二操作,将预设区域从显示第二卡片列表切换为显示第三卡片列表,第三卡片列表中包括的卡片均完整显示,且第三卡片列表中的第一卡片位于第一序号位置、第三卡片列表中的第三卡片位于第一序号位置的相邻位置。如此,只需要在屏幕上进行很小距离的滑动,就可以实现将第一移动到第三卡片所在的序号位置。
一种可能的设计中,第二操作包括持续拖动第一卡片并将第一卡片移动到第一序号位置的滑动操作;或者,第二操作包括作用于第一卡片的触摸操作,以及将除第一卡片之外的其它卡片整体移动以使第一卡片位于第一序号位置的滑动操作。通过该设计,可以为用户提供两种可以实现便捷地移动第一卡片的方式。
一种可能的设计中,预设区域用于显示按照左右维度依次排列的卡片或按照上下维度依次排列的卡片。
一种可能的设计中,若预设区域用于显示按照左右维度依次排列的卡片,则第二卡片的第一侧为第二卡片的左侧或右侧;或者,若预设区域用于显示按照上下维度依次排列的卡片,则第二卡片的第一侧为第二卡片的上侧或下侧。
一种可能的设计中,第一卡片列表中显示的卡片均完整显示。
一种可能的设计中,任意相邻的两个卡片之间的卡片间距为0或者预设值。
第二方面,本申请实施例还提供一种装置,该装置包括执行上述任一方面的任意一种可能的设计的方法的模块/单元。这些模块/单元可以通过硬件实现,也可以通过硬件执行相应的软件实现。
第三方面,本申请实施例提供一种电子设备,包括处理器和存储器。其中,存储器用于存储一个或多个计算机程序;当存储器存储的一个或多个计算机程序被处理器执行时,使得该电子设备能够实现上述第一方面的任意一种可能的设计的方法。
第四方面,本申请实施例中还提供一种计算机可读存储介质,所述计算机可读存储介质包括计算机程序,当计算机程序在终端上运行时,使得所述终端执行上述任一方面的任意一种可能的设计的方法。
第五方面,本申请实施例还提供一种包含计算机程序产品,当所述计算机程序产品在终端上运行时,使得所述终端执行上述任一方面的任意一种可能的设计的方法。
本申请的这些方面或其他方面在以下实施例的描述中会更加简明易懂。
附图说明
图1为本申请实施例提供的一种终端的硬件结构示意图;
图2为本申请实施例提供的左右维度的预设区域示意图;
图3为本申请实施例提供的上下维度的预设区域示意图;
图4为本申请实施例提供的一组卡片示意图;
图5为本申请实施例提供的另一组卡片示意图;
图6为本申请实施例提供的另一组卡片位置切换示意图;
图7为本申请实施例提供的卡片位置切换方法示意图;
图8A为本申请实施例提供的又一组卡片示意图;
图8B为本申请实施例提供的又一组卡片示意图;
图9为本申请实施例提供的又一组卡片示意图;
图10为本申请实施例提供的又一组卡片示意图;
图11为本申请实施例提供的又一组卡片示意图;
图12为本申请实施例提供的又一组卡片示意图;
图13为本申请实施例提供的又一组卡片示意图;
图14为本申请实施例提供的又一组卡片示意图;
图15为本申请实施例提供的又一组卡片示意图;
图16为本申请实施例提供的终端的硬件结构示意图。
具体实施方式
为了使本申请实施例的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施例作进一步地详细描述。
首先,对本申请中的部分术语进行解释说明,以便本领域技术人员理解。
(1)卡片,作为一个大小可伸缩的容器,可集中承载一种或以一种元素为核心的一小组元素,卡片可以包括但不限于万能卡片、窗口、窗口小窗、应用程序(application,APP)等。卡片上可以包括但不限于以下内容:名称、图片、文字等。
(2)置顶:是指在对卡片进行的一种状态设置操作,当某张卡片被设置为置顶时,该卡片会被显示在预设区域的最顶端,不会被其它卡片遮挡。
(3)本申请实施例涉及的至少一个,包括一个或者多个;其中,多个是指大于或者等于两个。
另外,需要理解的是,在本申请的描述中,“第一”、“第二”等词汇,仅用于区分描述的目的,而不能理解为指示或暗示相对重要性,也不能理解为指示或暗示顺序。
本申请实施例中的技术方案可以应用于具有触摸屏的终端,该终端例如可以为车辆或能够位于车辆上的电子设备,又例如可以为手机、平板电脑、笔记本计算机或具备无线通讯功能的可穿戴设备(如智能手表或智能眼镜等)等。该终端包含能够实现数据处理功能的器件(比如处理器,或,应用处理器,或,图像处理器,或,其他处理器),以及能够显示用户界面的器件(比如显示屏)。该终端的示例性实施例包括但不限于搭载鸿蒙 或者其它操作系统的设备。上述终端也可以是其它便携式设备,诸如具有触敏表面(例如触控面板)的膝上型计算机(laptop)等。还应当理解的是,在本申请其他一些实施例中,上述终端也可以不是便携式设备,而是具有触敏表面(例如触控面板)的台式计算机。
下面结合图1,进一步说明电子设备的结构。
如图1所示,终端100可以包括处理器110、存储器120、显示屏130、传感器模块140,以及等。其中传感器模块140可以包括触摸传感器141等。显示屏130可以是触摸显示屏。
可以理解的是,本发明实施例示意的结构并不构成对终端100的具体限定。在本申请另一些实施例中,终端100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元,例如:处理器110可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processingunit,GPU),图像信号处理器(image signal processor,ISP),控制器,存储器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中,本申请实施例提供的方案可以由处理器110来控制或调用其他部件来完成。其中,控制器可以是终端100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。
终端100可以通过GPU、显示屏130、以及应用处理器等实现显示功能。显示屏130用于显示图像、视频等。比如,在显示屏130上显示终端屏幕的主界面,或者锁屏界面,或者负一屏界面,或者系统自带的通讯应用的用户界面,或者其他三方应用的用户界面等,以及在这些显示界面上显示本申请实施例中所述的服务卡片。
GPU为图像处理的微处理器,连接显示屏130和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。处理器110可包括一个或多个GPU,其执行程序指令以生成或改变显示信息。比如,GPU基于卡片参数、数据等进行图形渲染,生成需要展示的卡片。
显示屏130包括显示面板。显示面板可以采用液晶显示屏(liquid crystaldisplay,LCD),有机发光二极管(organic light-emitting diode,OLED),有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的,AMOLED),柔性发光二极管(flex light-emitting diode,FLED),Miniled,MicroLed,Micro-oLed,量子点发光二极管(quantum dot light emitting diodes,QLED)等。
触摸传感器141,也称“触控面板”。触摸传感器141可以设置于显示屏130,由触摸传感器141与显示屏130组成触摸屏,也称“触控屏”或“触摸屏”。触摸传感器141用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏130提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器141也可以设置于终端100的表面,与显示屏130所处的位置不同。
终端100还可以通过音频模块150,扬声器151,受话器152,麦克风153,耳机接口154,以及应用处理器等实现音频功能。例如音乐播放,录音等。
终端100还可以包括用于给各个部件供电的电源160、(比如电池)。
尽管图1未示出,终端100还可以包括定位装置、摄像头、无线通信装置、近场通信(near field communication,NFC)装置等,在此不予赘述。
可以理解的是,本申请实施例示意的结构并不构成对终端100的具体限定。在本申请另一些实施例中,终端100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
终端的显示屏上的预设区域可以显示卡片,该预设区域可以是显示屏的整个显示区域,也可以是显示屏的部分显示区域。该预设区域例如为如图2所示的车辆的中控屏上左右维度的显示区域,又例如为如图3所示的终端触摸屏上的上下维度的显示区域,本申请对此不作限制。以下实施例以预设区域为左右维度的显示区域为例对卡片位置切换方法进行描述,应理解,以下卡片位置切换方法的具体实现也适用于上下维度的显示区域中显示的卡片。
在实际应用中,可能卡片的数量比较多。当卡片的数量较多时,可能在预设区域不能显示所有的卡片,只会显示一部分。或者,在预设区域显示卡片的数量被设置上限值,例如,只允许显示6张卡片或8张卡片,具体上限值可以根据实际需求或屏幕大小进行设置,此处不作限制。
例如终端上包括编号1~20的尺寸一样的卡片,在预设区域只能完全显示6个卡片,例如图2所示,当前在预设区域内完全显示卡片5~10,那么卡片1~4以及卡片11~20在屏幕外并未显示,用户可以在预设区域从左向右滑动屏幕,如图4所示,直至最左侧的卡片显示在预设区域,这时卡片1~6完全显示在预设区域内;用户也可以在预设区域从右向左滑动屏幕,如图5所示,直至最右侧的卡片显示在预设区域,这时卡片15~20完全显示在预设区域内。
当需要切换某个卡片的位置时,例如用户想要将图2中的卡片9切换至卡片2所在的位置,如图6所示,用户手指长按卡片9,然后将卡片9向左拖动至卡片2所在位置(在此之前卡片2并未在预设区域显示),在拖动过程中,卡片9拖动到预设区域的最左侧后一直长按直到卡片2显示在预设区域的最左侧,此时松开用户手指时卡片9推挤开卡片2,卡片2~7中每个卡片分别向右移动一个位置,从而实现将卡片9切换至卡片2所在位置,即卡片9移动到预设区域的最左侧,卡片9的右侧依次显示卡片2~6。这个拖动过程需要用户长按并拖动卡片9的距离与时间都较长,甚至导致容易在切换卡片位置的过程中导致流程的中断,给交互带来了不便,影响用户的体验。
基于此,本申请实施例提供的一种卡片位置切换方法,能够缩短卡片切换的操作时间和距离,提升用户的使用体验。该方法应用于上述图1所示的终端,该终端具有触摸屏,该终端包括依次排列的N个卡片,N为大于或等于2的整数,终端中包括的卡片可以移动、新增或删除。
如图7所示,本申请实施例提供的卡片位置切换方法的流程如下。
S701,在触摸屏的预设区域显示第一卡片列表。
其中,第一卡片列表可以包括上述N个卡片中的至少两个卡片。
需要说明的是,终端包括的N个卡片可以全部在预设区域显示,即第一卡片列表包括上述N个卡片,示例的,以终端包括6个卡片为例,序号分别为卡片1~卡片6,例如预设区域可以显示6张卡片,那么第一卡片列表包括卡片1~卡片6。
在其他一些实施例中,终端包括的N个卡片也可以部分在预设区域显示,这部分在预设区域显示的卡片即为第一卡片列表中的卡片,除此之外,N个卡片中还有一部分卡片未在预设区域显示,这部分未在预设区域显示的卡片,可以通过在预设区域进行滑动操作显示在预设区域。示例的,以终端包括11个卡片为例,序号分别为卡片1~卡片11,例如预设区域可以完整显示6张卡片,如图8A中(1)所示,第一卡片列表包括卡片5~卡片10,此外,还有卡片1~4以及卡片11并未显示在预设区域。用户可以通过操作实现切换第一卡片列表中的任一个卡片在终端中的序号位置。
可选的,第一卡片列表中显示的卡片可以是均完整显示。应理解,第一卡片列表中显示卡片也可以是一部分卡片完整显示,一部分卡片是部分显示或者层叠显示;或者,第一卡片列表中显示的卡片均层叠显示。
S702,接收到作用于第一卡片列表中的第一卡片的第一操作。
该第一操作例如可以为作用于第一卡片的触摸操作,例如触摸操作为长按操作。示例的,仍以如图8A中(1)所示的第一卡片列表包括卡片5~卡片10为例,用户想要切换第一卡片列表中的第一卡片(例如为卡片9)的序号位置时,用户可以对卡片9进行操作。
S703,响应于第一操作,将预设区域从显示第一卡片列表切换为显示第二卡片列表。
此处,第二卡片列表至少包括第一卡片列表中的所有卡片,第一卡片在第二卡片列表中处于选中状态,第一卡片处于选中状态时可以对第一卡片进行位置移动,第二卡片列表中的与第一卡片(例如为卡片9)相邻的第二卡片(例如为卡片10)完整显示。当第一卡片处于选中状态时可以在第一操作的焦点位置悬浮显示该第一卡片。
示例的,仍以如图8A中(1)所示的第一卡片列表包括卡片5~卡片10为例,对第一卡片(例如为卡片9)进行触摸操作后,第一卡片(卡片9)处于选中状态,此时,可以在第一操作的焦点位置处悬浮显示该卡片9,该卡片9可以是以初始尺寸悬浮显示,也可以是以相比初始尺寸缩小后悬浮显示。可选的,处于选中状态的第一卡片可以透明度降低或者虚化显示,这样用户可以看到被第一卡片部分遮挡的第二卡片的内容,便于用户辨别第二卡片。
如图8A中(2)所示的第二卡片列表中,第二卡片(例如为卡片10)完整显示,卡片10可以移动到第一操作所在的焦点位置处完整显示,但卡片10并未参与折叠。在其它一些实施例中,卡片10也可以在原来的位置完整显示,即卡片10的位置不变(这种情况并未在图8A中示出),然后在后续移动卡片9时再将卡片10移动到第一操作所在的焦点位置处置顶显示,本申请对此不作限定,图8A中以卡片10移动至第一操作(例如长按操作)所在的焦点位置处置顶显示为例进行示例。
上述示例中第一卡片是在屏幕内的,也就是说,第一卡片是在预设区域中完全显示的。在其它一些实施例中,第一卡片在部分显示在屏幕外,如图8B中(1)所示的第一卡片列表,第一卡片为卡片10,对卡片10进行长按操作后,如图8B中(2)所示,卡片10右侧的卡片11移动到长按操作的焦点位置,且卡片11被卡片10遮挡部分区域,卡片11部分显示,卡片10处于选中状态,卡片10可以悬浮显示。
本申请实施例中,是以第二卡片完整显示为例进行说明的,在其它一些实施例中,也可以除第一卡片外的所有卡片都参与层叠,也就是说,第二卡片也参与层叠。
本申请实施例中,第二卡片列表中所述第二卡片第一侧的所有卡片的显示方式为根据所述N个卡片中位于所述第二卡片第一侧的每个卡片的尺寸、任意相邻卡片之间的卡片间距以及卡片数量确定的。需要说明的是,卡片间距可以为0,也可以不为0,若卡片间距不为0,例如可以为预设值。以下实施例中以卡片间距不为0为例进行说明的,如果卡片间距为0,则在层叠时可以不考虑卡片间距。
此外,需要说明的是,若预设区域用于显示按照左右维度依次排列的卡片,则第二卡片的第一侧为第二卡片的左侧或右侧;或者,若预设区域用于显示按照上下维度依次排列的卡片,则第二卡片的第一侧为第二卡片的上侧或下侧。下文中对第二卡片的第一侧的所有卡片的显示方式进行了详细描述,示例性的,例如第二卡片的第一侧为第二卡片的左侧,第二卡片的左侧的所有卡片的显示方式也同样适用于第二卡片的右侧的所有卡片的显示,后文不再赘述。
具体来说,第二卡片列表中第二卡片两侧中的任一侧卡片的显示方式可以为下述方式一或方式二,以第二卡片的第一侧为例进行说明:
方式一,若终端包括的N个卡片中位于第二卡片第一侧的所有卡片以及卡片间距的总和小于或等于第二卡片第一侧的屏幕剩余长度,则第二卡片列表中位于第二卡片第一侧的所有卡片均完整显示。其中,第二卡片第一侧的屏幕剩余长度为第二卡片第一侧的边缘与预设区域的第一侧边之间的距离。需要说明的是,本申请实施例中涉及的屏幕剩余长度指的是预设区域中的长度,而并不一定是终端整个显示区域的屏幕剩余长度。
示例的,沿用上述示例中终端包括的N个卡片分别为卡片1~卡片11,在对如图8A中(1)所示的第一卡片列表中的卡片9进行触摸操作后,如图8A中(1)所示的第二卡片列表中,卡片10在触摸操作的焦点位置处完整显示,这里虽然卡片10被卡片9部分覆盖,但卡片10并未参与层叠,卡片1~卡片11中卡片10右侧只有一个卡片11,卡片11的尺寸总和小于卡片10的右侧边缘与卡片10右侧的预设区域右侧边之间的距离d1,所以卡片11置顶显示,即卡片11完全显示。
方式二,若所述N个卡片中位于所述第二卡片第一侧的所有卡片无法均完整显示在所述第二卡片的第一侧,例如在N个卡片中位于第二卡片第一侧的所有卡片以及卡片间距的总和大于第二卡片第一侧的屏幕剩余长度时,则第二卡片列表中位于第二卡片第一侧的至少部分卡片层叠显示。
示例的,沿用上述示例中终端包括的N个卡片分别为卡片1~卡片11,在对如图8A中(1)所示的第一卡片列表中的卡片9进行长按操作后,如图8A中(2)所示的第二卡片列表中,卡片10在长按操作的焦点位置处完整显示,卡片1~卡片11中除卡片9之外、且在卡片10左侧的卡片包括卡片1~卡片8,卡片1~卡片8的尺寸总和大于卡片10的左侧边缘与卡片10左侧的预设区域左侧边之间的距离d2,所以卡片1~卡片8层叠显示。
在图8A中(2)所示的示例中,第二卡片列表除了包括第一卡片列表的所有卡片(包括卡片5~卡片10),还包括卡片1~卡4以及卡片11,其中,卡片9悬浮显示、卡片1~8层叠显示、卡片10完整显示,卡片11置顶显示。
在其它一些实施例中,如果终端包括的N个卡片中卡片11右侧还有其它卡片,其它卡片的尺寸总和大于卡片10的右侧边缘与卡片10右侧的预设区域右侧边之间的距离,那么卡片10右侧的卡片也层叠显示。以终端包括卡片1~卡片14为例,如图9中(1)所示的第一卡片列表包括卡片5~卡片10,在对第一卡片(卡片9)进行长按操作后,如图9中(2)所示,第二卡片(卡片10)在长按操作的焦点位置处部分显示,但卡片10并未参与层叠,卡片10左侧的卡片1~卡片8层叠显示在预设区域,受限于卡片10右侧边缘与预设区域右侧边之间的距离,在卡片10右侧只有卡片11~卡片12层叠显示在预设区域,卡片13~卡片14并未显示在预设区域中,即在预设区域显示的第二卡片列表中包括悬浮显示的卡片9、部分显示的卡片10、卡片10左侧层叠显示的卡片1~卡片8、以及卡片10右侧层叠显示的卡片11~卡片12。
本申请实施例中,通过对第二卡片两侧中任一侧不能全部显示的卡片进行层叠显示,可以在切换预设区域内的任一个卡片的位置时缩短卡片切换的操作时间和操作距离,从而可以提升用户的使用体验。
本申请实施例中,在上述S702后,即对第一卡片列表中的第一卡片进行第一操作后,终端包括的N个卡片中分别位于第二卡片两侧的各个卡片按照层叠规则进行显示。
下面提供几种可能的实施方式。
可能的实施方式一,当终端包括的N个卡片的尺寸一样,以卡片尺寸为a为例,当第二卡片第一侧的屏幕剩余长度可以完全显示终端包括的多个位于第二卡片第一侧的所有卡片,那么第二卡片列表中第二卡片第一侧的所有卡片完全显示;当第二卡片第一侧的屏幕剩余长度不能够完全显示终端包括的多个位于第二卡片第一侧的所有卡片,此时可以层叠显示这些卡片中的至少部分卡片,层叠尺寸为层叠显示的卡片在排列方向上显示的长度,例如图9所示的示例中,卡片在预设区域中按照左右维度排列,即排列方向为左右方向,那么卡片层叠后的层叠尺寸为层叠显示的卡片在左右方向上显示的长度,卡片在上下方向上的显示尺寸是不变的,后文不再赘述。可以理解的是,如果卡片在预设区域中按照如图3所示的上下维度排列,即排列方向为上下方向,卡片层叠后的层叠尺寸为层叠显示的卡片在上下方向上显示的长度,卡片在左右方向上的显示尺寸是不变的。应理解,叠层显示的所有卡片的层叠尺寸可以一致的,也可以是不一致的,例如对于不同尺寸的卡片,每个卡片的层叠尺寸可以是每个卡片完整长度的1/2,例如卡片A和卡片B的卡片尺寸不同,卡片A的层叠尺寸可以是卡片A的卡片尺寸的1/2,卡片B的层叠尺寸可以是卡片B的卡片尺寸的1/2。此处关于层叠尺寸的说明也同样适用于后文中出现的层叠尺寸,后文不再赘述。
在可能的实施方式一中,可以将第二卡片第一侧的各个卡片的层叠尺寸设置为固定值,例如该固定值为该固定值也可以设置为其它数值,例如设置为其它能够使得用户分辨出卡片的数值,此处不作限定。
可能的实施方式二,当终端包括的N个卡片的尺寸一样,以卡片尺寸为a为例,可以设置一个层叠尺寸阈值,卡片的层叠尺寸不小于层叠尺寸阈值,例如层叠尺寸阈值设置为这样可以保证在卡片层叠之后可以根据卡片上的内容识别是什么卡片,当然层叠尺寸阈值也可以设置为其它能够使得用户分辨出卡片的数值,此处不限定为/>例如当层叠尺寸为也能够使得用户分辨出是什么卡片,那么也可以将层叠尺寸阈值设置为/>以下层叠规则中以层叠尺寸阈值为/>为例进行说明。
第二卡片两侧的各个卡片的层叠规则如下:
首先,判断n*(a+c)的值小于或等于第二卡片第一侧的屏幕剩余长度L,若n*(a+c)的值小于或等于屏幕剩余长度L,则确定第二卡片第一侧的卡片的最终层叠尺寸x为a,也就是说,第二卡片列表中的第二卡片第一侧的卡片均完全显示,且相邻两个卡片之间的间距为c;若n*(a+c)的值大于屏幕剩余长度L,则第二卡片的第一侧的至少部分卡片层叠显示,然后进行后续的卡片的层叠尺寸确定。
其次,若第二卡片的第一侧的至少部分卡片层叠显示,通过以下公式(1)进行计算第二卡片的第一侧的卡片的平均层叠尺寸:
在公式(1)中,A为第二卡片第一侧的屏幕剩余长度,c为卡片完全显示时相邻卡片之间的卡片间距,n为终端包括的N个卡片中位于第二卡片第一侧的卡片数量,x为第二卡片第一侧的卡片的层叠尺寸。
在一个示例中,以第一卡片为如图10所示的卡片6,第二卡片为如图10所示的卡片7为例,在对第一卡片列表中的卡片6进行第一操作后,卡片7置顶显示,卡片6处于选中状态并悬浮显示在卡片7上方,卡片7左侧的屏幕剩余长度L1为卡片7的左侧边缘与预设区域的左侧边之间的距离,卡片7左侧的卡片数量为n1,第一卡片列表中卡片间距为c,分别将A1、c以及n1代入上述公式(1)中,得到卡片7左侧的卡片的层叠尺寸的计算结果x1。类似的,卡片7右侧的屏幕剩余长度L2为卡片7的右侧边缘与预设区域的右侧边之间的距离,卡片7右侧的卡片数量为n2,分别将A2、c以及n2代入上述公式(1)中,得到卡片7右侧的卡片的层叠尺寸的计算结果x2。
然后,根据公式(1)的计算结果,按照以下方式确定出第二卡片第一侧的卡片的最终的层叠尺寸x:
方式一,当根据公式(1)计算得到的层叠尺寸x大于或等于且n*(a+c)的值大于第二卡片第一侧的屏幕剩余长度L时,那么确定第二卡片第一侧的卡片的最终层叠尺寸x即为上述公式(1)的计算结果x,也就是说,第二卡片列表中的第二卡片第一侧的卡片以层叠尺寸为x进行层叠显示。例如图10所示的第二卡片列表中,卡片7右侧的卡片8~卡片12按照计算得到的层叠尺寸的计算结果x2进行层叠显示。
方式二,当根据公式(1)计算得到的层叠尺寸x小于时,如图10所示,第二卡片第一侧的卡片的最终层叠尺寸为/>也就是说,第二卡片列表中的第二卡片第一侧的卡片以层叠尺寸/>为进行层叠显示。例如图10所示的示例中,对图10中(1)所示的卡片6进行第一操作后,图10中(2)所示,卡片7部分显示,卡片7左侧还有卡片1~卡片5,按照上述公式(1)计算得到的平均层叠尺寸x2小于/>卡片1~卡片5无法全部显示,所以按照层叠尺寸/>进行层叠显示,卡片7左侧的屏幕剩余长度L1只能够以层叠尺寸/>显示2个卡片,所以在如图10所示的第二卡片列表中,只能够显示卡片4和卡片5,而且卡片4和卡片5的层叠尺寸/>
上述层叠规则中,是以卡片的层叠尺寸最小不低于为例进行说明的,如果层叠尺寸阈值为其它值,例如为/>那么将上述方式一至方式三中的/>替换为/>即可。
下面以终端包括的N个卡片的尺寸一样、第一卡片为卡片A、第二卡片为卡片B为例,结合图11对第二卡片列表中第二卡片右侧的卡片数量不同时的显示方式进行对比说明。
如图11中(1)所示,第一卡片列表中依次包括卡片1、卡片2、卡片A、卡片B以及卡片3,对卡片A进行长按操作后,卡片B置顶显示,卡片A悬浮显示在卡片B上方。
下面示出第一卡片列表相同、终端包括的卡片数量不同时分别对应第二卡片列表,如图11中(2)~(7)所示,卡片B的左侧的两个卡片,卡片1的尺寸、卡片2的尺寸以及2c的总和大于卡片B左侧的屏幕剩余长度,所以第二卡片列表1~6中,卡片1和卡片2层叠显示,终端包括的N个卡片中卡片B右侧的卡片数量不同时显示方式也不同,下面分别进行说明。
以终端包括5个卡片依次为卡片1、卡片2、卡片A、卡片B、以及卡片3为例,如图11中(2)所示,在对卡片A进行长按后,卡片B右侧只有卡片3,卡片B右侧的屏幕剩余长度大于卡片3的尺寸,所以第二卡片列表1中卡片B右侧的卡片3完全显示。
以终端包括6个卡片依次为卡片1、卡片2、卡片A、卡片B、卡片3以及卡片4为例,如图11中(3)所示,在对卡片A进行长按后,卡片B右侧有卡片3和卡片4,其中,卡片3的尺寸、卡片4的尺寸以及2c的总和小于卡片B右侧的屏幕剩余长度,所以第二卡片列表2中卡片B右侧的卡片3和卡片4完全显示。
以终端包括7个卡片依次为卡片1、卡片2、卡片A、卡片B、卡片3、卡片4以及卡片5为例,如图11中(4)所示,在对卡片A进行长按后,卡片B右侧有卡片3、卡片4以及卡片5,其中,卡片3的尺寸、卡片4的尺寸、卡片5的尺寸以及3c的总和大于卡片B右侧的屏幕剩余长度,且,按照上述公式(1)计算的层叠尺寸大于所以第二卡片列表3中卡片B右侧的卡片3、卡片4以及卡片5层叠显示,层叠尺寸为公式(1)计算出的平均层叠尺寸。
以终端包括8个卡片依次为卡片1、卡片2、卡片A、卡片B、卡片3、卡片4、卡片5以及卡片6为例,如图11中(5)所示,在对卡片A进行长按后,卡片B右侧有卡片3、卡片4、卡片5以及卡片6,其中,卡片3的尺寸、卡片4的尺寸、卡片5的尺寸、卡片6的尺寸以及4c的总和大于卡片B右侧的屏幕剩余长度,且,按照上述公式(1)计算的层叠尺寸大于所以第二卡片列表4中卡片B右侧的卡片3、卡片4、卡片5以及卡片6层叠显示,层叠尺寸为公式(1)计算出的平均层叠尺寸。
以终端包括9个卡片依次为卡片1、卡片2、卡片A、卡片B、卡片3、卡片4、卡片5、卡片6以及卡片7为例,如图11中(6)所示,在对卡片A进行长按后,卡片B右侧有卡片3、卡片4、卡片5、卡片6以及卡片7,其中,卡片3的尺寸、卡片4的尺寸、卡片5的尺寸、卡片6的尺寸、卡片7的尺寸以及5c的总和大于卡片B右侧的屏幕剩余长度,且,按照上述公式(1)计算的层叠尺寸大于所以第二卡片列表5中卡片B右侧的卡片3、卡片4、卡片5、卡片6以及卡片7层叠显示,层叠尺寸为公式(1)计算出的平均层叠尺寸。/>
以终端包括10个卡片依次为卡片1、卡片2、卡片A、卡片B、卡片3、卡片4、卡片5、卡片6以及卡片8为例,如图11中(7)所示,在对卡片A进行长按后,卡片B右侧有卡片3、卡片4、卡片5、卡片6、卡片7以及卡片8,其中,卡片3的尺寸、卡片4的尺寸、卡片5的尺寸、卡片6的尺寸、卡片7的尺寸、卡片8的尺寸以及6c的总和大于卡片B右侧的屏幕剩余长度,且,按照上述公式(1)计算的层叠尺寸小于所以第二卡片列表5中卡片B右侧的卡片3、卡片4、卡片5、卡片6以及卡片7层叠显示,层叠尺寸为/>
可能的实施方式三,终端包括的N个卡片的尺寸不一样,以第二卡片右侧的n个卡片为例,当n个卡片的卡片尺寸之和与n*c的总和小于或等于第二卡片右侧的屏幕剩余长度L,那么第二卡片列表中第二卡片第一侧的所有卡片完全显示。
当n个卡片的卡片尺寸之和与n*c的总和大于第二卡片右侧的屏幕剩余长度L时,第二卡片列表中第二卡片第一侧的所有卡片层叠显示,每个卡片的层叠尺寸可以为设置该卡片的卡片尺寸的k倍,k大于0且小于1,此处对k的值不作限定。为了保证层叠显示之后用户可以辨别卡片,k的取值尽量大一点,例如k取值为0.5;又例如k取值为0.8。
可能的实施方式四,终端包括的N个卡片的尺寸不一样,以第二卡片右侧的n个卡片为例,与上述可能的实施例三不同的是,当n个卡片的卡片尺寸之和与n*c的总和大于第二卡片右侧的屏幕剩余长度L时,第二卡片列表中第二卡片右侧的卡片层叠显示,需要满足以下规则:
(1)在第二卡片列表中显示的第二卡片右侧的卡片中,不同卡片对应的层叠尺寸与卡片尺寸成正比,例如图12所示终端中包括两种尺寸的卡片,一种尺寸a1,如卡片A和卡片C;另一种卡片尺寸为a2,如卡片B和卡片D,其中a1小于a2。卡片C和卡片D层叠显示,卡片C的层叠尺寸为b1,卡片D的层叠尺寸为b2,b1小于b2,在第二卡片列表中层叠显示的卡片C和卡片D满足以下公式(2):
按照以下公式(3)计算卡片C的层叠尺寸b1:
按照以下公式(4)计算卡片D的层叠尺寸b2:
(2)第二卡片右侧的卡片中最小尺寸的卡片的层叠尺寸大于该最小尺寸的m倍,m大于0且小于1,此处对m的具体数值不作限定。为了保证层叠显示之后用户可以辨别卡片,m的取值尽量大一点,例如m取值为0.5。
首先,按照上述(1)中的公式计算第二卡片右侧最小尺寸的卡片的层叠尺寸,然后,判断第二卡片右侧最小尺寸的卡片的层叠尺寸的计算结果是否大于最小尺寸的m倍,若大于,则以上述(1)中的公式计算卡片C和卡片D的层叠尺寸;若小于,则第二卡片右侧各个卡片的层叠尺寸为各自的卡片尺寸的m倍。
例如图12中,以m为0.5为例,若按照上述公式(3)计算出最小尺寸的卡片C的尺寸大于0.5a1,则卡片C的最终层叠尺寸为上述公式(3)的计算结果b1,卡片D的最终层叠尺寸为上述公式(4)的计算结果b2。
在其它一些实施例中,如果图12中(2)所示的卡片B右侧除了显示的卡片C和卡片D之外,还有其它未显示的多个卡片,使得按照上述公式(3)计算出卡片C的尺寸小于0.5a1,则卡片C的最终层叠尺寸为0.5a1,则卡片D的最终层叠尺寸为0.5a2。
在上述S703之后,即预设区域显示第二卡片列表之后,以第三卡片位于终端包括的N个卡片中的第一序号位置、第一卡片位于终端包括的N个卡片中的第二序号位置为例,用户可以通过第二操作实现将第一卡片切换至第一序号位置处。
一种可能的实施方式中,第二操作包括持续拖动第一卡片并将第一卡片移动到第一序号位置的滑动操作,终端接收到该第二操作并在第二操作释放时,响应于该第二操作,将预设区域从显示第二卡片列表切换为显示第三卡片列表。
其中,在第二操作释放时,第一卡片位于第一序号位置,第三卡片位于第一卡片的相邻位置,第三卡片列表中包括的卡片完全显示。终端包括的N个卡片以第一卡片所在焦点位置为基准在预设区域显示,在预设区域中第一卡片右侧为按照卡片的序号越来越大的顺序排列,直至右侧的屏幕剩余长度为0,在预设区域中第一卡片左侧的卡片按照卡片的序号越来越小的顺序排列,直至右侧的屏幕剩余长度为0。
在一个示例中,以终端包括11个卡片为例,分别为卡片1~卡片11,如图13所示,第一卡片为卡片9,第二卡片为卡片10,如图13中(1)所示,第二卡片列表1中的卡片9处于选中状态,卡片10的部分区域被卡片9遮挡,所以卡片10部分显示,卡片1~卡片8层叠显示,当用户想要将卡片9移动到卡片2所在的序号位置,可以对卡片9进行第二操作,终端接收到作用于卡片9的长按操作以及向左移动卡片9至卡片2所在位置的滑动操作,此时,如图13中(2)所示的第二卡片列表2所示,卡片2的部分区域被卡片9遮挡,所以卡片2部分显示,卡片9在第二操作的焦点位置处(也是卡片2当前所在位置处)悬浮显示,卡片2左侧和右侧的卡片均层叠显示,层叠尺寸可以参照上述实施例中第二卡片的第一侧的卡片的层叠规则相关内容确定,此处不再赘述。
当用户手指在第二操作的焦点位置处离开触摸屏时,第二操作释放,此时,如图13中(3)所示的第三卡片列表,卡片9在第二操作的焦点位置(即卡片2原来所在的位置)处置顶显示,卡片2移动到卡片9的右侧相邻位置,卡片9左侧依次排列有部分显示的卡片1,受限于卡片9左侧的剩余屏幕长度的大小,卡片1只显示一部分。卡片9右侧依次排列有置顶显示的卡片2、卡片3、卡片4、卡片5、卡片6,受限于卡片9右侧的剩余屏幕长度的大小,卡片2、卡片3、卡片4、卡片5完整显示,卡片6只显示一部分,卡片7~8以及卡片10~11未在预设区域显示。通过该示例,在需要移动卡片9时,只需要移动很小的距离就可以完成将卡片9移动到卡片2所在的序号位置,操作起来更方便。
上述图13所示的示例中,示出了将第二卡片列表中的第一卡片(卡片9)移动到预设区域显示的第三卡片所在的序号位置。本申请实施例也可以实现将第二卡片列表中的第一卡片移动到预设区域未显示的第三卡片所在的序号位置,下面提供一个具体的示例进行说明。
以终端包括12个卡片为例,分别为卡片1~卡片12,如图14所示,第一卡片为卡片11,如图14中(1)所示,第二卡片列表1中的卡片11处于选中状态,卡片1~卡片2未显示在预设区域,卡片3~卡片12层叠显示。
当用户想要将卡片9移动到卡片1所在的序号位置,可以对卡片9进行第二操作,终端接收到作用于卡片9的长按操作以及向左移动卡片9至最左侧(即卡片3所在的位置)的滑动操作,此时,如图14中(2)所示的第二卡片列表2,卡片3完整显示,但是卡片3不参与层叠,卡片3的部分区域被卡片9遮挡,此时可以继续在卡片所在位置长按卡片9,卡片3左侧的卡片2和卡片1会依次显示在预设区域,卡片1和卡片2显示在预设区域的过程可以为:可以是卡片2先完整显示,卡片3~卡片12层叠显示,待到卡片1显示在预设区域时,如图14中(3)所示的第二卡片列表3,卡片1完整显示,卡片2~卡片12按照上述实施例中的层叠规则进行层叠显示。
在其它一些实施例中,也可以在卡片1显示在预设区域时,卡片1~卡片12按照上述实施例中的层叠规则进行层叠显示。在又一种实施例中,也可以卡片2出现在预设区域时是2完整显示预设区域,然后在卡片1出现在预设区域时,卡片1和卡片2均完整显示在预设区域,卡片3~卡片12按照上述实施例中的层叠规则进行层叠显示。
然后,当用户手指在预设区域的最左侧离开屏幕时,释放第二操作,如图14中(4)所示,卡片9完整显示在预设区域的最左侧,卡片9右侧依次完整显示卡片1~卡片5。
通过该示例,只需要移动很小的距离就可以完成将卡片9移动到未在预设区域显示的卡片1所在的序号位置,而且操作起来更方便。
另一种可能的实施方式中,第二操作包括作用于第一卡片的触摸操作,以及将除第一卡片之外的其它卡片整体移动以使第一卡片位于第一序号位置的滑动操作。终端接收到该第二操作并在第二操作释放时,响应于该第二操作,将预设区域从显示第二卡片列表切换为显示第三卡片列表。
其中,在第二操作释放时,第一卡片位于第一序号位置,第三卡片位于第一卡片的相邻位置,第三卡片列表中包括的卡片完全显示。终端包括的N个卡片以第一卡片所在焦点位置为基准在预设区域显示,在预设区域中第一卡片右侧为按照卡片的序号越来越大的顺序排列,直至右侧的屏幕剩余长度为0,在预设区域中第一卡片左侧的卡片按照卡片的序号越来越小的顺序排列,直至右侧的屏幕剩余长度为0。
在一个示例中,以终端包括11个卡片为例,分别为卡片1~卡片11,如图15所示,第一卡片为卡片9,第二卡片为卡片10,如图15中(1)所示,第二卡片列表1中的卡片9处于选中状态,卡片10的部分区域被卡片9遮挡,所以卡片10部分显示,卡片1~卡片8层叠显示,当用户想要将卡片9移动到卡片3所在的序号位置,用户可以一个手指对卡片9进行长按操作,另一个手指在预设区域进行向右的滑动操作,终端接收到该滑动操作后,将除卡片9之外的其它卡片整体移动,如图15中(2)所示的第二卡片列表2,当卡片3移动至长按操作的焦点位置(也是卡片9当前所在位置)时停止滑动,此时,如图15中(2)所示,卡片3的部分区域被卡片9遮挡,所以卡片3部分显示,卡片9在长按操作的焦点位置处(也是卡片3当前所在位置处)悬浮显示,卡片3左侧的卡片1和卡片2完整显示,卡片3右侧的卡片均层叠显示,层叠尺寸可以参照上述实施例中第二卡片的第一侧的卡片的层叠规则相关内容确定,此处不再赘述。
当用户手指在长按操作的焦点位置处离开触摸屏时,第二操作释放,此时,如图15中(3)所示的第三卡片列表,卡片9在长按操作的焦点位置处置顶显示,卡片3移动到卡片9的左侧相邻位置,卡片9左侧依次排列有置顶显示的卡片3、卡片2以及卡片1,受限于卡片9右侧的剩余屏幕长度的大小,卡片9右侧不能完整显示卡片4~卡片8以及卡片10~卡片11,所以需要层叠显示,在该示例中,卡片3右侧只能够显示2个卡片,即卡片4和卡片5均以卡片尺寸的一半层叠显示。在该示例中,只需要在屏幕上进行很小距离的滑动,就可以实现将卡片9移动到卡片3所在的序号位置。
上述本申请提供的实施例中,从终端作为执行主体的角度对本申请实施例提供的方法进行了介绍。为了实现上述本申请实施例提供的方法中的各功能,终端可以包括硬件结构和/或软件模块,以硬件结构、软件模块、或硬件结构加软件模块的形式来实现上述各功能。上述各功能中的某个功能以硬件结构、软件模块、还是硬件结构加软件模块的方式来执行,取决于技术方案的特定应用和设计约束条件。
基于以上实施例以及相同构思,本申请实施例还提供一种终端,用于执行上述方法实施例中终端所执行的步骤,相关特征的可参见上述方法实施例,在此不再赘述。
请参见图16,该电子设备包括:一个或多个处理器1601和存储器1602,其中存储器1602中存储有程序指令,当程序指令被设备执行时,可以实现本申请实施例中的方法步骤。
其中,处理器1601可以是通用处理器、数字信号处理器(digital signalprocessor,DSP)、专用集成电路(application specific integrated circuit,ASIC)、现成可编程门阵列(field programmable gate array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成,或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存取存储器(random access memory,RAM)、闪存、只读存储器(read-only memory,ROM)、可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器,处理器读取存储器中的指令,结合其硬件完成上述方法的步骤。
装置的具体实现方式的相关特征可以参照上文的方法部分,此处不再赘述。
基于相同的技术构思,本申请实施例还提供一种芯片,所述芯片与设备中的存储器耦合,使得所述芯片在运行时调用所述存储器中存储的程序指令,实现本申请实施例上述方法。
基于相同的技术构思,本申请实施例还提供一种计算机存储介质,所述计算机可读存储介质包括计算机程序,当计算机程序在电子设备上运行时,使得所述电子设备执行本申请实施例上述方法。
基于相同的技术构思,本申请实施例还提供一种计算机程序产品,所述计算机程序产品包括指令,当所述指令被执行时,使得计算机执行实现本申请实施例上述方法。
本申请的各个实施例可以单独使用,也可以相互结合使用,以实现不同的技术效果。
以上所述,以上实施例仅用以对本申请的技术方案进行了详细介绍,但以上实施例的说明只是用于帮助理解本申请实施例的方法,不应理解为对本申请实施例的限制。本技术领域的技术人员可轻易想到的变化或替换,都应涵盖在本申请实施例的保护范围之内。
上述实施例中所用,根据上下文,术语“当…时”可以被解释为意思是“如果…”或“在…后”或“响应于确定…”或“响应于检测到…”。类似地,根据上下文,短语“在确定…时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定…”或“响应于确定…”或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。
在上述实施例中,可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时,可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时,全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一个计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如DVD)、或者半导体介质(例如固态硬盘)等。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统、装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统、装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本申请的技术方案的目的。
以上所述,仅为本申请的具体实施方式。熟悉本技术领域的技术人员根据本申请提供的具体实施方式,可想到变化或替换,都应涵盖在本申请的保护范围之内。
Claims (13)
1.一种卡片位置切换方法,其特征在于,应用于具有触摸屏的终端,所述终端包括N个卡片,所述N为大于或等于2的整数;所述方法包括:
在所述触摸屏的预设区域显示第一卡片列表,所述第一卡片列表包括所述N个卡片中的至少两个卡片,所述至少两个卡片包括第一卡片和与所述第一卡片相邻的第二卡片;
接收到作用于所述第一卡片列表中的第一卡片的第一操作;
响应于所述第一操作,将所述预设区域从显示所述第一卡片列表切换为显示第二卡片列表,所述第二卡片列表至少包括所述第一卡片列表中的所有卡片,其中所述第一卡片处于选中状态;
其中,若所述N个卡片中位于所述第二卡片第一侧的所有卡片无法均完整显示在所述第二卡片的第一侧时,则所述第二卡片列表中位于所述第二卡片第一侧的至少部分卡片层叠显示。
2.如权利要求1所述的方法,其特征在于,若所述N个卡片中位于所述第二卡片第一侧的所有卡片的尺寸以及卡片间距的总和小于或等于所述第二卡片第一侧的屏幕剩余长度,则所述第二卡片列表中位于所述第二卡片第一侧的所有卡片均完整显示。
3.如权利要求1或2所述的方法,其特征在于,所述方法还包括:
当所述第二卡片列表中位于所述第二卡片第一侧的至少部分卡片层叠显示时,通过以下方式计算层叠尺寸,所述层叠尺寸为层叠显示的卡片在排列方向上显示的长度:
若所述N个卡片中位于所述第二卡片第一侧的所有卡片以及卡片间距的总和大于所述第二卡片第一侧的屏幕剩余长度,则所述第二卡片列表中所述第二卡片第一侧的卡片以预设阈值作为层叠尺寸进行层叠显示;或者,
若所述N个卡片中位于所述第二卡片第一侧的所有卡片以及卡片间距的总和大于所述第二卡片第一侧的屏幕剩余长度、且根据所述屏幕剩余长度和所述第二卡片第一侧的卡片数量计算得到的平均层叠尺寸大于或等于所述预设阈值,则所述第二卡片列表中所述第二卡片第一侧的卡片以所述平均层叠尺寸作为层叠尺寸进行层叠显示;或者,
若所述N个卡片中位于所述第二卡片第一侧的所有卡片以及卡片间距的总和大于所述第二卡片第一侧的屏幕剩余长度、且根据所述屏幕剩余长度和所述第二卡片第一侧的卡片数量计算得到的平均层叠尺寸小于所述预设阈值,则所述第二卡片列表中所述第二卡片第一侧的卡片以所述预设阈值作为层叠尺寸进行层叠显示。
4.如权利要求3所述的方法,其特征在于,若所述第二卡片第一侧的卡片的尺寸一致,则所述预设阈值为卡片尺寸的一半;或者,若所述第二卡片第一侧的卡片的尺寸不一致,则所述预设阈值为最小卡片尺寸的一半;或者,若所述第二卡片第一侧的卡片的尺寸不一致,每种尺寸对应一个所述预设阈值,所述预设阈值是卡片尺寸的一半。
5.如权利要求1-4任一项所述的方法,其特征在于,第三卡片位于所述N个卡片中的第一序号位置,所述响应于所述第一操作,将所述预设区域从显示所述第一卡片列表切换为显示第二卡片列表之后,所述方法还包括:
接收到用于将所述第一卡片的序号位置切换至所述第一序号位置的第二操作;
响应于所述第二操作,将所述预设区域从显示所述第二卡片列表切换为显示第三卡片列表,所述第三卡片列表中包括的卡片均完整显示,且第三卡片列表中的所述第一卡片位于所述第一序号位置、所述第三卡片列表中的所述第三卡片位于所述第一序号位置的相邻位置。
6.如权利要求5所述的方法,其特征在于,
所述第二操作包括持续拖动所述第一卡片并将所述第一卡片移动到所述第一序号位置的滑动操作;或者,
所述第二操作包括作用于所述第一卡片的触摸操作,以及将除所述第一卡片之外的其它卡片整体移动以使所述第一卡片位于所述第一序号位置的滑动操作。
7.如权利要求1-6任一项所述的方法,其特征在于,所述预设区域用于显示按照左右维度依次排列的卡片或按照上下维度依次排列的卡片。
8.如权利要求1-7任一项所述的方法,其特征在于,若所述预设区域用于显示按照左右维度依次排列的卡片,则所述第二卡片的第一侧为所述第二卡片的左侧或右侧;或者,
若所述预设区域用于显示按照上下维度依次排列的卡片,则所述第二卡片的第一侧为所述第二卡片的上侧或下侧。
9.如权利要求1-8任一项所述的方法,其特征在于,所述第一卡片列表中显示的卡片均完整显示。
10.如权利要求2-9任一项所述的方法,其特征在于,任意相邻的两个卡片之间的卡片间距为0或者预设值。
11.一种终端,其特征在于,包括处理器、存储器、触摸屏,所述终端还包括N个卡片,所述N为大于或等于2的整数;
所述触摸屏,用于接收用户的操作;
所述存储器用于存储一个或多个计算机程序,所述计算机程序被所述处理器执行时,使得所述电子设备执行如权利要求1-9任一项所述的方法。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质包括计算机程序,当计算机程序在终端上运行时,使得所述电子设备执行如权利要求1至10任一项所述的方法。
13.一种计算机程序产品,其特征在于,所述计算机程序产品包括计算机程序或指令,当所述计算机程序或指令被终端执行时,实现如上述权利要求1至10中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210476376.4A CN117008780A (zh) | 2022-04-29 | 2022-04-29 | 一种卡片位置切换方法及终端 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210476376.4A CN117008780A (zh) | 2022-04-29 | 2022-04-29 | 一种卡片位置切换方法及终端 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN117008780A true CN117008780A (zh) | 2023-11-07 |
Family
ID=88566024
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210476376.4A Pending CN117008780A (zh) | 2022-04-29 | 2022-04-29 | 一种卡片位置切换方法及终端 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117008780A (zh) |
-
2022
- 2022-04-29 CN CN202210476376.4A patent/CN117008780A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10042391B2 (en) | Electronic device with foldable display and method of operating the same | |
US10360871B2 (en) | Method for sharing screen with external display device by electronic device and electronic device | |
EP2940572A1 (en) | Method and electronic device for managing display objects | |
EP3678017A1 (en) | Method and apparatus for outputting contents using a plurality of displays | |
US20130321444A1 (en) | Method and apparatus for transitioning between pages on a display screen | |
KR102254597B1 (ko) | 플렉서블 디스플레이를 포함하는 전자 장치 및 전자 장치의 화면 운영 방법 | |
EP3113008A1 (en) | A method and an electronic device for one-hand user interface | |
US10055119B2 (en) | User input method and apparatus in electronic device | |
US11698705B2 (en) | Electronic device and screen control method thereof | |
US10078793B2 (en) | Method and device for displaying image | |
US20170269765A1 (en) | Electronic device including touch panel and method of controlling the electronic device | |
US20240045560A1 (en) | Method for capturing images for multi windows and electronic device therefor | |
US10929085B2 (en) | Electronic apparatus for controlling display of virtual input interface in environment of a plurality of output screens and operating method thereof | |
US20230177648A1 (en) | Electronic device, and method for processing writing input thereof | |
JP2014160170A (ja) | 表示制御装置とその制御方法、情報機器、および、プログラム | |
CN117008780A (zh) | 一种卡片位置切换方法及终端 | |
US11750727B2 (en) | Electronic device including a plurality of displays and method for operating same | |
US10635372B2 (en) | Display device having a transparent display and a method for controlling the display device to render content on a surface of the transparent display that a user faces | |
US20220180582A1 (en) | Electronic device and method for controlling application thereof | |
KR20220079189A (ko) | 플렉서블 디스플레이 전자 장치 및 그 동작 방법 | |
KR20220061797A (ko) | 전자 장치 및 그의 화면 제어 방법 | |
CN105808067A (zh) | 一种图标移动方法及终端 | |
JP7105984B2 (ja) | 情報処理装置 | |
JP7090791B2 (ja) | 情報処理装置 | |
US10395132B2 (en) | Electronic device for extracting distance of object and displaying information and method thereof |
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 |