CN114756151A - 一种界面元素显示方法及设备 - Google Patents
一种界面元素显示方法及设备 Download PDFInfo
- Publication number
- CN114756151A CN114756151A CN202011564390.7A CN202011564390A CN114756151A CN 114756151 A CN114756151 A CN 114756151A CN 202011564390 A CN202011564390 A CN 202011564390A CN 114756151 A CN114756151 A CN 114756151A
- Authority
- CN
- China
- Prior art keywords
- floating
- terminal
- mobile phone
- display
- interface
- 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 116
- 238000007667 floating Methods 0.000 claims abstract description 992
- 230000006870 function Effects 0.000 claims description 48
- 238000004590 computer program Methods 0.000 claims description 8
- 230000008569 process Effects 0.000 abstract description 45
- 230000003993 interaction Effects 0.000 abstract description 37
- 239000010410 layer Substances 0.000 description 79
- 230000000875 corresponding effect Effects 0.000 description 75
- 230000004044 response Effects 0.000 description 40
- 238000003825 pressing Methods 0.000 description 29
- 230000001960 triggered effect Effects 0.000 description 23
- 238000004891 communication Methods 0.000 description 19
- 230000033001 locomotion Effects 0.000 description 19
- 238000010586 diagram Methods 0.000 description 17
- 230000001413 cellular effect Effects 0.000 description 15
- 238000007726 management method Methods 0.000 description 15
- 238000012545 processing Methods 0.000 description 15
- 230000001976 improved effect Effects 0.000 description 14
- 238000010295 mobile communication Methods 0.000 description 12
- 230000005540 biological transmission Effects 0.000 description 7
- 239000000284 extract Substances 0.000 description 6
- 230000008093 supporting effect Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000011156 evaluation Methods 0.000 description 4
- 229920001621 AMOLED Polymers 0.000 description 3
- 230000001133 acceleration Effects 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
- 238000013500 data storage Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000012015 optical character recognition Methods 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 210000000988 bone and bone Anatomy 0.000 description 2
- 230000009850 completed effect Effects 0.000 description 2
- 239000012792 core layer Substances 0.000 description 2
- 230000005057 finger movement Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 239000000203 mixture Substances 0.000 description 2
- 241001580935 Aglossa pinguinalis Species 0.000 description 1
- 230000003321 amplification Effects 0.000 description 1
- 238000013528 artificial neural network Methods 0.000 description 1
- 230000003416 augmentation Effects 0.000 description 1
- 230000003190 augmentative effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000002596 correlated effect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 230000005611 electricity Effects 0.000 description 1
- 238000004880 explosion Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 210000001145 finger joint Anatomy 0.000 description 1
- 241000411851 herbal medicine Species 0.000 description 1
- 230000001939 inductive effect Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 239000010985 leather Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 230000001537 neural effect Effects 0.000 description 1
- 238000003199 nucleic acid amplification method Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000002096 quantum dot Substances 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
- 238000001179 sorption measurement Methods 0.000 description 1
- 230000005236 sound signal Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
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/04817—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 using icons
-
- 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
-
- 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
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
技术领域
本申请涉及电子设备领域,尤其涉及一种界面元素显示方法及设备。
背景技术
目前,手机等终端已成为人们日常生活及工作中使用频率较高的电子设备。通过在手机中安装应用程序(application,APP,以下简称为应用),可以完善手机功能,为用户提供更佳的使用体验。但在用户日常使用手机的过程中,如果需进行跨应用查看或分享信息,则会出现交互流程繁琐、操作步骤多的问题,人机交互性能差。
例如,用户1在使用手机的购物应用时,想给用户2分享当前浏览商品的图片,则需要先将该商品的图片保存到手机的图库应用中,然后打开手机的即时通信应用找到用户2,打开与用户2的聊天界面,之后通过聊天界面的快捷入口打开图库应用,选择保存的商品的图片,最后点击发送,才可通过即时通信应用将商品的图片分享给用户2。又例如,用户A使用手机中的购物应用购买了某商品,需要经过多个操作步骤才能查看到商品是否发货,商品的物流等信息。
发明内容
本申请实施例提供一种界面元素显示方法及设备,解决了跨应用查看或分享信息时,交互流程繁琐、操作步骤多,人机交互性能较差的问题。
为解决上述问题,本申请采用如下技术方案:
第一方面,本申请实施例提供一种界面元素显示方法,应用于终端,该方法可以包括:终端在终端的显示屏上显示应用的第一界面,该第一界面包括第一元素;终端在接收到对第一元素的拖拽操作后,在终端的显示屏上显示第一元素随拖拽操作移动的动画;终端在接收到拖拽释放操作后,在终端的显示屏上显示第一浮动元素,第一浮动元素的内容与第一元素的内容相同。
采用以上技术方案,终端可根据用户操作,将界面上的任意元素以浮动元素的形式显示在终端屏幕上。之后,无论用户在应用内切换页面或退出该应用或打开其他应用,该浮动元素可继续显示在终端屏幕上,用于实现跨应用的信息查看,文件传输,信息分享等操作。
在一种可能的实现方式中,第一界面还包括在第一元素预设范围内的第二元素;第一浮动元素还包括第二元素的内容。这样,可根据用户操作,将第一界面中预定的元素以浮动元素的形式呈现在终端屏幕上,进一步的满足用户跨应用的信息查看,文件传输,信息分享等需求。
在另一种可能的实现方式中,第一元素为文本类元素,统一资源定位符(URL)网址,图片类元素,图标类元素,卡片类元素,列表联系人类元素,视频窗口类元素或文件资源类元素中的一种或多种。
其中,第一元素为文本类元素时,第一浮动元素的内容可以为文本类元素中的全部或部分文本;第一元素为URL网址时,第一浮动元素的内容为链接图标,该连接图标用于链接到URL网址对应的网页;第一元素为图片类元素时,第一浮动元素的内容为图片类元素中的图片;第一元素为图标类元素时,第一浮动元素的内容为图标类元素中的图标;第一元素为列表类元素,第一浮动元素的内容为列表类元素包括的联系人头像;第一元素为文件资源类元素时,第一浮动元素的内容为链接图标,连接图标用于链接到文件资源。
在另一种可能的实现方式中,在终端在显示屏上显示第一界面之后,该方法还可以包括:终端在接收到第一操作后,将第一界面中支持浮动显示的元素以第一形式显示,不支持浮动显示的元素以第二形式显示;第一元素为支持浮动显示的元素,第一形式与第二形式不同。这样,可以将界面中支持浮动显示的元素突出显示,方便用户查看哪些元素支持浮动显示,提高了用户体验。
在另一种可能的实现方式中,第一操作为对预定功能控件的操作;或第一操作为对第一界面中支持浮动显示的元素的操作。
在另一种可能的实现方式中,终端在终端的显示屏上显示第一浮动元素之后,该方法还可以包括:终端在终端的显示屏上显示第二界面,第二界面包括第三元素;终端在接收到对第三元素的第二操作后,在终端的显示屏上显示第二浮动元素,第二浮动元素的内容与第三元素的内容相同,第二浮动元素和第一浮动元素按照预设排列规则显示在终端的显示屏上。其中,第二操作包括拖拽操作和拖拽释放操作,或当第三元素为文本类元素或URL网址时,该第二操作还可以为复制操作。该技术方案支持在终端屏幕上同时显示多个浮动元素,满足用户的需求。另外,可根据生成时间的先后等排序规则显示各浮动元素。
在另一种可能的实现方式中,终端在终端的显示屏上显示第二浮动元素之前,该方法还可以包括:终端确定终端的显示屏上显示的浮动元素的个数小于N,N为在显示屏上允许同时显示的浮动元素的最大个数。可以对终端屏幕上最多允许同时显示的浮动元素的个数进行限制,不仅可满足用户需求,而且不会因为界面中浮动元素个数过多影响用户使用体验。
在另一种可能的实现方式中,该方法还可以包括:终端在确定终端的显示屏上显示的浮动元素的个数等于N时,删除N个浮动元素中按照预设排列规则排在第一个的浮动UI元素,并显示第二浮动元素。在设置了允许同时显示的浮动元素的上限的情况下,当当前屏幕上浮动元素的个数已达到上限时,用户触发生成新的浮动元素,可以将最早生成的浮动元素删除,然后显示新生成的浮动元素。
在另一种可能的实现方式中,终端在终端的显示屏上显示第二浮动元素之前,该方法还可以包括:终端确定终端的显示屏上显示的浮动元素中不存在与第二浮动元素类型相同的浮动元素。
在另一种可能的实现方式中,该方法还可以包括:终端在确定终端的显示屏上显示的浮动元素中存在与第二浮动元素类型相同的第三浮动元素时,终端将第二浮动元素和第三浮动元素合并为浮动元素组后显示在终端的显示屏上。
在另一种可能的实现方式中,该方法还包括:终端在接收到对浮动元素组的第三操作后,在终端的显示屏上显示第二浮动元素和第三浮动元素。
在用户触发生成新的浮动元素的情况下,如果当前界面中存在与该新生成的浮动元素同类型的元素,则可以自动将新生成的浮动元素与该元素合并为浮动元素组后显示。如果不存在,则显示该新的浮动元素。这样,可以自动将同类型的浮动元素归类显示,提高了用户的使用体验。并且支持将浮动元素组展开供用户查看。
在另一种可能的实现方式中,该方法还可以包括:终端在接收到对第一浮动元素的第四操作后,删除第一浮动元素;或,终端在第一浮动元素在终端的显示屏上显示预设时长后,删除第一浮动元素。
在另一种可能的实现方式中,第一浮动元素上显示有以下标识中的一个或多个:应用的标识,消息提醒信息,指示信息;指示信息用于指示第一浮动元素的类型。这样,便于用户获知浮动元素的来源于哪个应用,或其类型。
在另一种可能的实现方式中,在第一元素为文本类元素,URL网址,图片类元素或文件资源类元素的情况下,终端在显示屏上显示第一浮动元素之后,该方法还可以包括:终端显示包括输入框的界面;终端在接收到对第一浮动元素的拖拽操作,并在输入框位置的释放拖拽操作后,终端将第一浮动元素对应的内容填充到输入框中。对于文本类,图片类,卡片类,文件资源类和视频窗口类的浮动元素可通过将浮动元素拖入输入框内,触发终端通过即时通信应用发送给好友。简化了跨应用分享信息时的交互流程和操作步骤,提高了人机交互性能。
在另一种可能的实现方式中,在第一元素为URL网址的情况下,终端在显示屏上显示第一浮动元素之后,该方法还可以包括:终端在接收到用户对第一浮动元素的操作后,显示URL网址对应的网页。这样,URL类的浮动UI元素支持直接点开跳转,提高了人机交互性能。
在另一种可能的实现方式中,在第一元素为图标类元素或列表联系人类元素的情况下,终端在显示屏上显示第一浮动元素之后,该方法还可以包括:终端在接收到对第一浮动元素的第五操作后,终端执行第一功能,第一功能与终端接收到用户对第一元素的操作后执行的功能相同。这样,从不同应用的联系人列表中提取出来的代表特定联系人的浮动元素,根据具体业务场景支持发送文件、拨打电话等功能。简化了触发终端执行功能时交互流程和操作步骤,提高了人机交互性能。
在另一种可能的实现方式中,在第一元素为列表联系人类元素的情况下,终端在显示屏上显示第一浮动元素之后,该方法还可以包括:终端在接收到对界面中文本,URL网址或图片的拖拽操作,并在第一浮动元素位置的释放拖拽操作后,终端将文本,URL网址或图片发送给第一浮动元素对应联系人的终端。文件,图片,文字和URL等内容通过拖拽至列表联系人类的浮动元素上可直接将该内容分享给对应联系人。简化了跨应用分享信息时的交互流程和操作步骤,提高了人机交互性能。
在其他一些实施例中,还可以通过其他操作触发中终端将界面中的元素以浮动元素的形式显示在终端屏幕上。如,终端在终端的显示屏上显示一界面;终端在接收到用户的截屏操作后,截取显示屏上显示的该界面的内容,生成截图;之后,终端在终端的显示屏上显示浮动元素,该浮动元素包括该截图。或者,终端在终端的显示屏上显示一界面;终端在接收到用户的截屏操作后,截取显示屏上显示的该界面的内容,生成截图并显示该截图;之后,终端在接收到用户对该截图的拖拽操作,后又释放拖拽的操作后,终端的显示屏上显示浮动元素,该浮动元素包括该截图。又如,终端的显示屏上显示一界面,该界面中包括预定按钮;终端在接收到用对该预定按钮的操作后,在显示屏上显示浮动元素,该浮动元素的内容与该界面中部分元素的内容相同。
第二方面,本申请实施例提供一种界面元素显示方法,应用于终端,该方法可以包括:终端在终端的显示屏上显示第一界面,第一界面包括第一元素,第一元素为文本类元素或URL网址;终端在接收到对第一元素的复制操作后,在终端的显示屏上显示第一浮动元素,第一浮动元素的内容与第一元素的内容相同。
采用以上技术方案,终端可根据用户操作,将界面上的文本类元素或URL网址以浮动元素的形式显示在终端屏幕上。之后,无论用户在应用内切换页面或退出该应用或打开其他应用,该浮动元素可继续显示在终端屏幕上,用于实现跨应用的信息查看,文件传输,信息分享等操作。并且,结合系统现有的交互逻辑,如触发终端显示针对该元素的复制按钮后,用户通过对该复制按钮进行点击操作,便可触发文本类元素或URL网址以浮动元素的形式显示在终端屏幕上,提高了用户的使用体验。
在一种可能的实现方式中,终端在显示屏上显示第一浮动元素之后,该方法还可以包括:终端显示包括输入框的界面;终端在接收到对第一浮动元素的拖拽操作,并在输入框位置的释放拖拽操作后,终端将第一浮动元素对应的内容填充到输入框中。简化了跨应用分享信息时的交互流程和操作步骤,提高了人机交互性能。
第三方面,本申请实施例提供一种显示装置,该显示装置可以应用于终端,该装置可以包括:显示单元,用于在终端的显示屏上显示应用的第一界面,第一界面包括第一元素;输入单元,用于接收对第一元素的拖拽操作;显示单元,还用于在终端的显示屏上显示第一元素随拖拽操作移动的动画;输入单元,还用于接收拖拽释放操作;显示单元,还用于在终端的显示屏上显示第一浮动元素,第一浮动元素的内容与第一元素的内容相同。
在一种可能的实现方式中,第一界面还包括在第一元素预设范围内的第二元素;第一浮动元素还包括第二元素的内容。
在另一种可能的实现方式中,第一元素为文本类元素,URL网址,图片类元素,图标类元素,卡片类元素,列表联系人类元素,视频窗口类元素或文件资源类元素中的一种或多种。
在另一种可能的实现方式中,输入单元,还用于接收第一操作;显示单元,还用于将第一界面中支持浮动显示的元素以第一形式显示,不支持浮动显示的元素以第二形式显示;第一元素为支持浮动显示的元素,第一形式与第二形式不同。
在另一种可能的实现方式中,第一操作为对预定功能控件的操作;或第一操作为对第一界面中支持浮动显示的元素的操作。
在另一种可能的实现方式中,显示单元,还用于在终端的显示屏上显示第二界面,第二界面包括第三元素;输入单元,还用于接收对第三元素的第二操作;显示单元,还用于在终端的显示屏上显示第二浮动元素,第二浮动元素的内容与第三元素的内容相同,第二浮动元素和第一浮动元素按照预设排列规则显示在终端的显示屏上。其中,第二操作可以包括拖拽操作和拖拽释放操作,或第一元素为文本类元素或URL网址的情况下,第二操作可以为复制操作。
在另一种可能的实现方式中,该显示装置,还可以包括:确定单元,用于确定终端的显示屏上显示的浮动元素的个数小于N,N为在显示屏上允许同时显示的浮动元素的最大个数。
在另一种可能的实现方式中,该显示装置还可以包括:删除单元,用于在确定单元确定终端的显示屏上显示的浮动元素的个数等于N时,删除N个浮动元素中按照预设排列规则排在第一个的浮动UI元素,并显示第二浮动元素。
在另一种可能的实现方式中,确定单元,还用于确定终端的显示屏上显示的浮动元素中不存在与第二浮动元素类型相同的浮动元素。
在另一种可能的实现方式中,显示单元,还用于在确定单元确定终端的显示屏上显示的浮动元素中存在与第二浮动元素类型相同的第三浮动元素时,将第二浮动元素和第三浮动元素合并为浮动元素组后显示在终端的显示屏上。
在另一种可能的实现方式中,输入单元,还用于接收对浮动元素组的第三操作;显示单元,用于在终端的显示屏上显示第二浮动元素和第三浮动元素。
在另一种可能的实现方式中,输入单元,还用于接收对第一浮动元素的第四操作,删除单元,还用于删除第一浮动元素;或,删除单元,还用于在第一浮动元素在终端的显示屏上显示预设时长后,删除第一浮动元素。
在另一种可能的实现方式中,第一浮动元素上显示有以下标识中的一个或多个:应用的标识,消息提醒信息,指示信息;指示信息用于指示第一浮动元素的类型。
在另一种可能的实现方式中,在第一元素为文本类元素,URL网址,图片类元素或文件资源类元素的情况下,显示单元,还用于显示包括输入框的界面;输入单元,还用于接收对第一浮动元素的拖拽操作,并在输入框位置的释放拖拽操作;显示装置还可以包括:填充单元,用于将第一浮动元素对应的内容填充到输入框中。
在另一种可能的实现方式中,在第一元素为图标类元素或列表联系人类元素的情况下,输入单元,还用于接收对第一浮动元素的第五操作;显示装置还可以包括:执行单元,用于执行第一功能,第一功能与终端接收到用户对第一元素的操作后执行的功能相同。
在另一种可能的实现方式中,在第一元素为列表联系人类元素的情况下,输入单元,还用于接收对界面中文本,URL网址或图片的拖拽操作,并在第一浮动元素位置的释放拖拽操作;该显示装置还可以包括:发送单元,用于将文本,URL网址或图片发送给第一浮动元素对应联系人的终端。
第四方面,本申请实施例提供一种显示装置,应用于终端,该显示装置可以包括:显示单元,用于在终端的显示屏上显示第一界面,第一界面包括第一元素,第一元素为文本类元素或统一资源定位符URL网址;输入单元,用于接收对第一元素的复制操作;显示单元,还用于在终端的显示屏上显示第一浮动元素,第一浮动元素的内容与第一元素的内容相同。
在一种可能的实现方式中,显示单元,还用于显示包括输入框的界面;输入单元,还用于接收对第一浮动元素的拖拽操作,并在输入框位置的释放拖拽操作;该显示装置还可以包括:填充单元,用于将第一浮动元素对应的内容填充到输入框中。
第五方面,本申请实施例提供一种显示装置,包括:处理器;用于存储处理器可执行指令的存储器;其中,处理器被配置为执行指令时使得显示装置实现如第一方面或第一方面可能的实现方式中任一项所述的方法,或者实现如第二方面或第二方面可能的实现方式中任一项所述的方法。
第六方面,本申请实施例提供一种计算机可读存储介质,其上存储有计算机程序指令,计算机程序指令被电子设备执行时使得电子设备实现如第一方面或第一方面可能的实现方式中任一项所述的方法,或者实现如第二方面或第二方面可能的实现方式中任一项所述的方法。
第七方面,本申请实施例提供一种电子设备(如上述终端),该电子设备包括显示屏,一个或多个处理器和存储器;显示屏,处理器和存储器耦合;存储器用于存储计算机程序代码,计算机程序代码包括计算机指令,当计算机指令被电子设备执行时,使得该电子设备执行如第一方面或第一方面可能的实现方式中任一项所述的方法,或者执行如第二方面或第二方面可能的实现方式中任一项所述的方法。
第八方面,本申请实施例提供一种计算机程序产品,包括计算机可读代码,或者承载有计算机可读代码的非易失性计算机可读存储介质,当所述计算机可读代码在电子设备(如上述终端)中运行时,电子设备中的处理器执行第一方面或第一方面的可能的实现方式中任一项所述的方法,或者执行如第二方面或第二方面可能的实现方式中任一项所述的方法。
可以理解地,上述提供的第三方面及其任一种可能的实现方式所述的显示装置,第四方面及其任一种可能的实现方式所述的显示装置,第五方面所述的显示装置,第六方面所述的计算机可读存储介质,第七方面所述的电子设备,及第八方面所述的计算机程序产品所能达到的有益效果,可参考如第一方面及其任一种可能的实现方式中或第二方面及其任一种可能的实现方式中的有益效果,此处不再赘述。
附图说明
图1为本申请实施例提供的一种相关技术中显示界面的示意图;
图2为本申请实施例提供的另一种相关技术中显示界面的示意图;
图3为本申请实施例提供的一种手机的结构示意图;
图4为本申请实施例提供的一种终端的软件架构的组成示意图;
图5A为本申请实施例提供的一种显示界面的示意图;
图5B为本申请实施例提供的另一种显示界面的示意图;
图6为本申请实施例提供的一种界面元素显示方法的流程示意图;
图7为本申请实施例提供的又一种显示界面的示意图;
图8为本申请实施例提供的又一种显示界面的示意图;
图9为本申请实施例提供的又一种显示界面的示意图;
图10为本申请实施例提供的又一种显示界面的示意图;
图11为本申请实施例提供的又一种显示界面的示意图;
图12为本申请实施例提供的另一种界面元素显示方法的流程示意图;
图13A为本申请实施例提供的又一种显示界面的示意图;
图13B为本申请实施例提供的又一种显示界面的示意图;
图14为本申请实施例提供的又一种显示界面的示意图;
图15为本申请实施例提供的又一种显示界面的示意图;
图16为本申请实施例提供的又一种显示界面的示意图;
图17为本申请实施例提供的又一种显示界面的示意图;
图18为本申请实施例提供的又一种显示界面的示意图;
图19为本申请实施例提供的又一种显示界面的示意图;
图20为本申请实施例提供的又一种显示界面的示意图;
图21为本申请实施例提供的又一种显示界面的示意图;
图22为本申请实施例提供的又一种显示界面的示意图;
图23为本申请实施例提供的又一种显示界面的示意图;
图24为本申请实施例提供的又一种显示界面的示意图;
图25为本申请实施例提供的又一种显示界面的示意图;
图26为本申请实施例提供的又一种显示界面的示意图;
图27为本申请实施例提供的又一种显示界面的示意图;
图28为本申请实施例提供的又一种显示界面的示意图;
图29为本申请实施例提供的又一种显示界面的示意图;
图30为本申请实施例提供的又一种显示界面的示意图;
图31为本申请实施例提供的又一种显示界面的示意图;
图32为本申请实施例提供的一种显示装置的组成示意图;
图33为本申请实施例提供的一种芯片系统的组成示意图。
具体实施方式
目前,可通过在手机等终端中安装应用,完善手机功能,为用户提供更佳的使用体验。但是,在日常使用手机的过程中,经常会遇到以下场景:给好友分享某商品的图片,需要先保存到图库应用中,然后从图库应用里点选图片,才能完成分享,交互非常麻烦;朋友分享的电话号码等内容,如果是通过图片分享的,则无法直接复制,如果利用(opticalcharacter recognition,OCR)识别后复制,OCR识别又不准确,用户只能在手机上来回切换打字界面和图片界面;给朋友发送某网站的网址,将该网址复制后,复制的内容只被保存在了粘贴板,对用户并不可见,且还需要切换多个应用才能分享给朋友,体验差;购买了某商品,需要经过多个操作步骤才能查看到商品是否发货,商品的物流等信息,交互流程长等等。这些场景均反映出用户日常使用手机等终端时,如果需进行跨应用查看或分享信息,则会出现交互流程繁琐,操作步骤多的问题,人机交互性能差。
当前技术提供了一些方案,来解决上述问题。
相关技术一:华为定制了侧边(dock)栏功能。用户可通过执行从手机屏幕的左边缘或右边缘向手机屏幕中间区域的滑动操作,触发手机显示dock栏,该dock栏在手机屏幕上的显示位置不可挪动,用户点击dock栏外的其他区域时,dock栏被关闭。dock栏中包括一个或多个应用的图标,为用户提供快捷入口,以便能够快速打开对应应用,从而简化用户使用多个应用时的交互流程,提高使用效率。例如,结合图1,如图1中的(a)所示,手机显示备忘录界面101。用户想将备忘录中的内容通过微信TM分享给好友。用户可在手机屏幕上执行从屏幕的右边缘开始向手机屏幕中间区域的滑动操作。作为对该滑动操作的响应,手机可显示dock栏102,该dock栏102中包括一个或多个应用的图标,如包括微信TM的图标103。在用户对该dock栏102中的微信TM的图标103进行操作,如点击操作后,如图1中的(b)所示,手机可以自由(freeform)小窗104(或者称为浮窗)的形式显示微信TM的界面。之后,用户在微信TM的界面中选择好友,以将需要分享的内容通过微信TM分享出去。但是,dock栏仅提供了打开应用的快捷入口,用户仍需要经过较为繁琐的步骤才能将内容分享给好友,人机交互性能仍没得到较好的提升。
相关技术二:微信TM定义了浮窗(或者说收藏栏)功能。该浮窗是小程序或文章链接暂存的入口。例如,结合图2,如图2中的(a)所示,用户浏览微信TM中某公众号的资讯页面201。用户可通过执行从手机屏幕左侧向右的滑动操作,以触发手机返回该资讯页面201的上一级页面。如图2中的(b)所示,随着用户手指的滑动,手机可显示资讯页面201的部分区域和资讯页面201的上一级页面的部分区域202。响应于用户的该滑动操作,手机还可在手机屏幕的右下角显示浮窗指示区域203。在用户将手指滑入该浮窗指示区域203后,如图2中的(c)所示,手机以收藏抽屉的形式显示浮窗204,并在用户松手后,浮窗204自动吸附在屏幕边缘,该浮窗204包括了资讯页面201的链接,也就是说资讯页面201被收录在了收藏栏中,用户点击收藏栏可查看收录的资讯页面201。其中,微信TM的浮窗中最多可同时暂存(或者说收藏)五个小程序或文章链接。当浮窗中收藏了多个小程序或文章链接时,用户点击该浮窗,可查看收藏列表。但是,浮窗仅在微信TM内一直显示,当微信TM退出后,浮窗不再显示。也就是说,在微信TM退出后,浮窗便无法起到快捷入口的作用,这样,也就无法解决跨应用查看或分享信息时人机交互性能差的问题。另外,微信TM的浮窗功能仅能将整个页面的链接以浮窗的形式暂存起来,不能支持页面中某些或某个元素以浮窗形式的暂存。
相关技术三:安卓TM提供了泡泡(bubble)功能。应用(如即时通信应用)通过调用该功能对应的接口,在接收到对应用户操作(如长按或左滑联系人列表,点击更多按钮,然后选择打开浮动聊天头像)后,可将该应用中联系人头像以泡泡的形式吸附显示在手机屏幕边缘。但是,安卓TM提供的泡泡功能仅用于提供联系人的聊天界面的快捷入口。即用户对以泡泡形式显示的联系人头像执行点击操作后,手机可显示该联系人的聊天界面,无其他功能,且不支持除联系人头像外的其他内容以泡泡形式的显示,且触发将联系人头像以泡泡的形式显示的操作步骤多,交互复杂,人机交互性能并不能得到很好的提升。
可以看到的是,以上相关技术提供的方案并不能很好地解决跨应用查看或分享信息时人机交互性能差的问题。
本申请实施例提供一种界面元素显示方法,该方法可以应用于终端。采用本实施例提供的方法,终端在接收到用户对界面中任意元素的拖拽、复制等操作后,可将该元素转换为浮动用户界面(user interface,UI)元素后显示在终端屏幕上,如吸附显示在终端屏幕边缘。另外,无论用户在应用内切换页面,还是退出应用,该浮动UI元素可继续显示在终端屏幕上,且显示在界面的最上层。本实施例中的浮动UI元素可被移动位置,支持与其他界面元素的交互,在被点击后开启对应界面,接收用户拖入的内容并发送出去等功能。这样,能够帮助用户用更便捷的交互方式实现本地跨应用的文件传输,信息分享等操作。简化了跨应用交互时的交互流程,缩减了操作步骤,提高了人机交互性能。
示例性的,本申请实施例中的终端可以为手机,平板电脑,手持计算机,PC,蜂窝电话,个人数字助理(personal digital assistant,PDA),可穿戴式设备(如智能手表),车载电脑,游戏机,以及增强现实(augmented reality,AR)\虚拟现实(virtual reality,VR)设备等,本实施例对终端的具体形式不做特殊限制。另外,本实施例提供的技术方案除了可以应用于上述终端(或者说移动终端)外,还可以应用于其他电子设备,如智能家居设备(如电视机)等。
下面将结合附图对本申请实施例的实施方式进行详细描述。
在本实施例中,以终端为手机为例。请参考图3,为本申请实施例提供的一种手机的结构示意图。以下实施例中的方法可以在具有上述硬件结构的手机中实现。
如图3所示,手机可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,电池142,天线1,天线2,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,马达191,指示器192,摄像头193以及显示屏194等。可选的,手机还可以包括移动通信模块150,用户标识模块(subscriberidentification module,SIM)卡接口195等。
其中,传感器模块180可以包括压力传感器180A,陀螺仪传感器180B,气压传感器180C,磁传感器180D,加速度传感器180E,距离传感器180F,接近光传感器180G,指纹传感器180H,温度传感器180J,触摸传感器180K,环境光传感器180L,骨传导传感器180M等。
可以理解的是,本实施例示意的结构并不构成对手机的具体限定。在另一些实施例中,手机可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元,例如:处理器110可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processingunit,GPU),图像信号处理器(image signal processor,ISP),控制器,存储器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。
控制器可以是手机的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。
处理器110中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器110的等待时间,因而提高了系统的效率。
在一些实施例中,处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit,I2C)接口,集成电路内置音频(inter-integrated circuitsound,I2S)接口,脉冲编码调制(pulse code modulation,PCM)接口,通用异步收发传输器(universal asynchronous receiver/transmitter,UART)接口,移动产业处理器接口(mobile industry processor interface,MIPI),通用输入输出(general-purposeinput/output,GPIO)接口,SIM接口,和/或USB接口等。
充电管理模块140用于从充电器接收充电输入。充电管理模块140为电池142充电的同时,还可以通过电源管理模块141为手机供电。电源管理模块141用于连接电池142,充电管理模块140与处理器110。电源管理模块141也可接收电池142的输入为手机供电。
手机的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。手机中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。例如:可以将天线1复用为无线局域网的分集天线。在另外一些实施例中,天线可以和调谐开关结合使用。
当手机包括移动通信模块150时,移动通信模块150可以提供应用在手机上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块150可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大,经天线1转为电磁波辐射出去。在一些实施例中,移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中,移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中,调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后,被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A,受话器170B等)输出声音信号,或通过显示屏194显示图像或视频。在一些实施例中,调制解调处理器可以是独立的器件。在另一些实施例中,调制解调处理器可以独立于处理器110,与移动通信模块150或其他功能模块设置在同一个器件中。
无线通信模块160可以提供应用在手机上的包括无线局域网(wireless localarea networks,WLAN)(如Wi-Fi网络),蓝牙(bluetooth,BT),全球导航卫星系统(globalnavigation satellite system,GNSS),调频(frequency modulation,FM),NFC,红外技术(infrared,IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波,将电磁波信号调频以及滤波处理,将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号,对其进行调频,放大,经天线2转为电磁波辐射出去。
在一些实施例中,手机的天线1和移动通信模块150耦合,天线2和无线通信模块160耦合,使得手机可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(code divisionmultiple access,CDMA),宽带码分多址(wideband code division multiple access,WCDMA),时分码分多址(time-division code division multiple access,TD-SCDMA),长期演进(long term evolution,LTE),BT,GNSS,WLAN,NFC,FM,和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system,GPS),全球导航卫星系统(globalnavigation satellite system,GLONASS),北斗卫星导航系统(beidou navigationsatellite system,BDS),准天顶卫星系统(quasi-zenith satellite system,QZSS)和/或星基增强系统(satellite based augmentation systems,SBAS)。
手机通过GPU,显示屏194,以及应用处理器等实现显示功能。GPU为图像处理的微处理器,连接显示屏194和应用处理器。处理器110可包括一个或多个GPU,其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像,视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display,LCD),有机发光二极管(organic light-emittingdiode,OLED),有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode,AMOLED),柔性发光二极管(flex light-emittingdiode,FLED),Miniled,MicroLed,Micro-oLed,量子点发光二极管(quantum dot lightemitting diodes,QLED)等。在一些实施例中,手机可以包括1个或N个显示屏194,N为大于1的正整数。
手机可以通过ISP,摄像头193,视频编解码器,GPU,显示屏194以及应用处理器等实现拍摄功能。在一些实施例中,手机可以包括1个或N个摄像头193,N为大于1的正整数。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展手机的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码,所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令,从而执行手机的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中,存储程序区可存储操作系统,至少一个功能所需的应用程序(比如声音播放功能,图像播放功能等)等。存储数据区可存储手机使用过程中所创建的数据(比如音频数据,电话本等)等。此外,内部存储器121可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件,闪存器件,通用闪存存储器(universal flash storage,UFS)等。
手机可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
压力传感器180A用于感受压力信号,可以将压力信号转换成电信号。在一些实施例中,压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多,如电阻式压力传感器,电感式压力传感器,电容式压力传感器等。当有触摸操作作用于显示屏194,手机根据压力传感器180A检测所述触摸操作强度。手机也可以根据压力传感器180A的检测信号计算触摸的位置。
陀螺仪传感器180B可以用于确定手机的运动姿态。气压传感器180C用于测量气压。磁传感器180D包括霍尔传感器。手机可以利用磁传感器180D检测翻盖皮套的开合。加速度传感器180E可检测手机在各个方向上(一般为三轴)加速度的大小。距离传感器180F,用于测量距离。手机可以利用接近光传感器180G检测用户手持手机贴近耳朵通话,以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式,口袋模式自动解锁与锁屏。环境光传感器180L用于感知环境光亮度。指纹传感器180H用于采集指纹。手机可以利用采集的指纹特性实现指纹解锁,访问应用锁,指纹拍照,指纹接听来电等。温度传感器180J用于检测温度。
触摸传感器180K,也称“触控面板”。触摸传感器180K可以设置于显示屏194,由触摸传感器180K与显示屏194组成触摸屏,也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器180K也可以设置于手机的表面,与显示屏194所处的位置不同。
骨传导传感器180M可以获取振动信号。按键190包括开机键,音量键等。按键190可以是机械按键。也可以是触摸式按键。马达191可以产生振动提示。马达191可以用于来电振动提示,也可以用于触摸振动反馈。指示器192可以是指示灯,可以用于指示充电状态,电量变化,也可以用于指示消息,未接来电,通知等。
当手机包括SIM卡接口195时,SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195,或从SIM卡接口195拔出,实现和手机的接触和分离。手机可以支持1个或N个SIM卡接口,N为大于1的正整数。手机通过SIM卡和网络交互,实现通话以及数据通信等功能。在一些实施例中,手机采用eSIM,即:嵌入式SIM卡。eSIM卡可以嵌在手机中,不能和手机分离。
本申请实施例以终端的软件系统是Android系统为例,示例性说明终端的软件结构。请参考图4,为本申请实施例提供的一种终端的软件架构的组成示意图。
其中,终端的软件系统可以采用分层架构,事件驱动架构,微核架构,微服务架构,或云架构。以终端的软件系统是分层架构为例。分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。
在一些实施例中,如图4所示,终端可以包括应用层和框架层(framework,FWK)。应用层可以包括一系列应用程序包。例如,应用程序包可以包括设置,计算器,相机,导航,购物,短信息,视频播放器,音乐播放器,电话等应用。应用层包括的应用可以是终端的系统应用,也可以是第三方应用,本申请实施例在此不做具体限制。应用层还可以包括拖拽服务模块,元素控制模块(controller)。本实施例在此不做具体限制。
框架层主要负责为应用层的应用提供应用编程接口(application programminginterface,API)和编程框架。框架层可以包括窗口管理器(window manager,WM)等。其中,管理管理器也可以称为窗口管理模块,本实施例在此不做具体限制。
当然,终端还可以包括其他层,如内核层(图4中未示出)等。该内核层是硬件和软件之间的层。内核层至少可以包含显示驱动,摄像头驱动,音频驱动,传感器驱动等。
在本申请实施例中,基于上述软件架构,终端当前显示某应用的界面时,在接收到用户对该界面中任意元素的拖拽或复制等操作后,可将该元素转换为浮动UI元素后显示在终端屏幕上,如吸附显示在终端屏幕边缘。之后,无论用户在应用内切换页面或退出该应用或打开其他应用,该浮动UI元素可继续显示在终端屏幕上,用于实现跨应用的信息查看,文件传输,信息分享等操作。
以下以终端为手机为例,结合附图对本申请实施例提供的界面元素显示方法进行详细介绍。其中,在本实施例中,支持以浮动UI元素显示的界面元素可以是界面中的任意元素。如,可以是文本类,图片类,图标类,卡片类,列表联系人类,视频窗口类,文件资源类等界面元素。
以下对不同类型的界面元素以浮动UI元素显示在手机屏幕上的过程进行举例介绍。
结合图5A,图5B和图6,对文本类元素以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,触发文本类元素以浮动UI元素的形式显示的操作可以是用户对文本类元素的拖拽操作,还可以是针对文本类元素的复制操作。
例如,结合图5A,以触发文本类元素以浮动UI元素的形式显示的操作是用户对文本类元素的拖拽操作为例。如图5A中的(a)所示,手机当前显示某应用的资讯页面501。用户在想将资讯页面501中的某些文本以浮动UI元素的形式显示在手机屏幕上时,可针对该文本执行拖拽操作。在用户释放拖拽后,手机可将该文本以浮动UI元素的形式显示在手机屏幕上。
其中,上述拖拽操作可以包括一个或多个操作。示例性的,拖拽操作可以包括触发文本浮起的操作和触发浮起文本移动的操作。
例如,以触发文本浮起的操作为对文本的长按并选中的操作,触发浮起文本移动的操作为对浮起文本的按下并移动的操作为例。继续参考图5A中的(a)所示,用户可长按并选中资讯页面501中的文本502。资讯页面501可以为本申请实施例中的第一界面。文本502可以为本申请实施例中的第一元素。手机可接收到用户针对文本502的长按及选中操作。响应于该长按及选中操作,手机可将文本502显示为浮起的状态。如,如图5A中的(b)所示,手机可进行背景虚化处理,并显示浮起的文本502。之后,用户通过按下浮起的文本502并移动手指,可使得文本502在手机屏幕上跟随用户手指的移动而移动。例如,如图5A中的(b)所示,用户可使用手指对浮起的文本502执行按下操作,并移动手指,如向右移动手指。响应于用户的操作,手机可显示文本502随用户手指移动的动画,给用户以文本502被用户拖拽的视觉效果。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图5A中的(c)所示,手机可在手机屏幕上显示浮动UI元素503,该浮动UI元素503中的内容与文本502相同,即被用户选中拖拽的文本以浮动UI元素的形式显示在手机屏幕上。如,浮动UI元素503可吸附显示在手机屏幕的边缘(如屏幕左边缘或屏幕右边缘,图5A中的(c)以吸附显示在屏幕右边缘为例示出)。浮动UI元素503可以为本申请实施例中的第一浮动元素。
又例如,结合图5B,以触发文本类元素以浮动UI元素的形式显示的操作是针对文本类元素复制操作为例。如图5B中的(a)所示,手机当前显示某应用的资讯页面601。用户在想将资讯页面601中的某些文本以浮动UI元素的形式显示在手机屏幕上时,可针对该文本执行复制操作。手机在接收到该复制操作后,可将该文本以浮动UI元素的形式显示在手机屏幕上。
其中,针对文本的复制操作可以包括一个或多个操作。示例性的,针对文本的复制操作可以包括长按文本的操作和对复制按钮的操作。继续参考图5B中的(a)所示,用户可长按资讯页面601中的文本602。资讯页面601可以为本申请实施例中的第一界面。文本602可以为本申请实施例中的第一元素。如图5B中的(b)所示,响应于用户对文本602的长按操作,手机可显示操作菜单,该操作菜单中包括复制按钮603。手机在接收到用户对复制按钮603的操作,如点击操作后,如图5B中的(c)所示,手机可在手机屏幕上显示浮动UI元素604,该浮动UI元素604中的内容与文本602相同,即被用户复制的文本以浮动UI元素的形式显示在手机屏幕上。浮动UI元素604可以为本申请实施例中的第一浮动元素。
其中,上述拖拽操作和拖拽释放操作可以为本申请实施例中的第二操作。上述复制操作可以为本申请实施例中的第二操作。
需要说明的是,以上图5A和图5B所示实施例,是以文本类元素是应用的资讯页面所包含的文本为例进行说明的。该应用可以是手机的系统应用,也可以是第三方应用,本实施例在此不做限制。另外,文本类元素也可以是其他页面所包含的文本,如,即时通信应用的聊天界面中的聊天内容,又如,购物应用的页面所包含的文本等,本实施例在此也不做具体限制。
结合图4,如图6所示,作为一种示例,文本类元素以浮动UI元素呈现在手机屏幕上的具体实现过程可以是:手机,如手机应用层的应用接收到用户对文本的拖拽操作后,可触发针对该文本的拖拽,并获取拖拽事件发送给手机应用层的拖拽服务模块。如,手机应用层的应用获取拖拽事件的过程可以是:用户执行拖拽操作后,手机的框架层可监听到该拖拽操作(如具体可以是对浮起文本的长按操作),作为响应,手机的框架层可生成拖拽事件(DragEvent)。手机应用层的应用可通过回调获取到框架层生成的拖拽事件。其中,拖拽事件中可包括被拖拽文本的内容和被拖拽元素的类型(如文本类)。手机应用层的拖拽服务模块接收到拖拽事件后,可与手机应用层的元素控制模块配合根据拖拽事件中被拖拽元素的类型和文本的内容构造阴影(shadow)。如被拖拽元素的类型为文本类,则手机应用层的拖拽服务模块可将拖拽事件中包括的文本的内容传输给元素控制模块,元素控制模块可根据文本的内容生成shadow。之后,手机应用层的元素控制模块可将生成的shadow传输给手机框架层的窗口管理器,以便窗口管理器以浮动UI元素的形式显示该shadow。如,窗口管理器在手机屏幕上显示一个圆角文本框,该圆角文本框即为浮动UI元素,其中包括被用户拖拽的文本。类似的,手机应用层的应用接收到用户对文本的复制操作后,也可以触发手机的框架层将复制的文本的内容发送给手机应用层的拖拽服务模块,以便拖拽服务模块与元素控制模块配合构造shadow,并交由手机框架层的窗口管理器以浮动UI元素的形式显示该shadow,从而实现文本类元素以浮动UI元素的形式在手机屏幕上的呈现。
采用以上图5A或图5B所示实施例的技术方案,对于文本类的界面元素,用户通过执行拖拽操作或复制操作,可将对应文本以浮动UI元素的形式显示在手机屏幕上,如吸附显示在终端屏幕边缘。即通过浮动UI元素可将用户拖拽或复制的文本显性的呈现在手机屏幕上。且在接收到用户在该应用内切换页面,或退出该应用,或开启其他应用的操作后,该浮动UI元素可继续显示在手机屏幕上,使得跨应用查看信息更加方便。且该浮动UI元素可被移动位置。如用户可对该浮动UI元素执行拖拽操作,如在浮动UI元素的显示位置按下并移动手指。响应于用户的拖拽操作,手机可显示该浮动UI元素在手机屏幕上移动的动画。另外,在用户想跨页面或跨应用使用该文本,如将该文本输入其他应用的输入框时,无需来回切换页面或应用,通过将该浮动UI元素拖拽到输入框内,便可实现该浮动UI元素中的文本到输入框内填充。具体的,作为一种示例,在手机在其屏幕上以浮动UI元素的形式显示文本后,手机(如手机的框架层)可将该浮动UI元素的标识与该文本的内容关联存储在手机中。之后,手机在显示包括输入框的某应用界面的情况下,在接收到用户对浮动UI元素的拖拽操作后,可显示该浮动UI元素移动的动画。在用户将该浮动UI元素拖拽到输入框的显示位置悬停并释放手指后,作为对该操作的响应,手机可将浮动UI元素中的文本填充到输入框中。如,在用户将该浮动UI元素拖拽到输入框的显示位置并悬停后,手机应用层的元素控制模块可通知手机的框架层将与该浮动UI元素对应的数据,即与该浮动UI元素的标识对应的文本的内容发送给该应用。之后,在用户松开手指,即释放拖拽后,手机应用层的该应用可接收手机框架层发送的文本的内容,并将该文本填充到输入框中。
结合图7和图8,对图片类元素以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,触发图片类元素以浮动UI元素的形式显示的操作可以是用户对图片类元素的拖拽操作。
例如,结合图7,如图7中的(a)所示,手机显示图库应用的界面701。该界面701中包括多个图片。界面701可以为本申请实施例中的第一界面。用户在想将界面701中的某图片以浮动UI元素的形式显示在手机屏幕上时,可针对该图片执行拖拽操作。在用户释放拖拽后,手机可将该图片(如图片的缩略图)以浮动UI元素的形式显示在手机屏幕上。
其中,该拖拽操作可以包括一个或多个操作。示例性的,拖拽操作可以包括触发图片浮起的操作和触发浮起图片移动的操作。
例如,以触发图片浮起的操作为对图片的长按操作,触发浮起图片移动的操作为对浮起图片的按下并移动的操作为例。继续参考图7中的(a)所示,用户可长按图库应用的界面701中的图片702。图片702可以为本申请实施例中的第一元素。手机可接收到用户对图片702的长按操作。响应于该长按操作,手机可将图片702显示为浮起的状态。如,如图7中的(b)所示,手机可进行背景虚化处理,并显示浮起的图片702。之后,用户通过按下浮起的图片702并移动手指,可使得图片702在手机屏幕上跟随用户手指的移动而移动。例如,如图7中的(b)所示,用户可使用手指对浮起的图片702执行按下操作,并移动手指,如向右移动手指。响应于用户的操作,手机可显示图片702随用户手指移动的动画,给用户以图片702被用户拖拽的视觉效果。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图7中的(c)所示,手机可在手机屏幕上显示浮动UI元素703,该浮动UI元素703中包括图片702,如图片702的缩略图,即被用户拖拽的图片以浮动UI元素的形式显示在手机屏幕上。如,浮动UI元素703可吸附显示在手机屏幕的边缘(如屏幕左边缘或屏幕右边缘,图7中的(c)以吸附显示在屏幕右边缘为例示出)。浮动UI元素703可以为本申请实施例中的第一浮动元素。拖拽操作和拖拽释放操作可以为本申请实施例中的第二操作。
又例如,结合图8,在用户进行截图操作后,生成的截图可以浮动UI元素的形式显示在手机屏幕上。
其中,用户触发手机进行截图的操作,如称为截图操作可以是对截图按钮的操作(如点击操作),也可以是对手机的功能键(如,音量控制按键:音量“+”键,音量“-”键,开关按键等)或功能组合键(如,音量“+”键与开关按键的组合)的操作,还可以是输入的预设手势,如指关节敲击等。想要截取的内容可以是手机屏幕当前显示的全部内容,也可以是部分内容。如果想要截取的内容是手机屏幕当前显示的部分内容,上述截图操作还可以包括通过画圈或框选的方式选取截取区域的操作。在手机接收到截图操作后,手机可启动截图功能,以截取手机屏幕当前显示的全部或部分内容,从而生成截图。在截图生成后,手机可将生成的截图以浮动UI元素的形式显示在手机屏幕上。
如,结合图8,以截图操作为对截图按钮的操作为例。如图8中的(a)所示,手机显示桌面801。在用户想要使用截图功能时,可执行从手机屏幕上边缘开始到指向下边缘的滑动操作。手机可接收到该滑动操作。作为对该滑动操作的响应,如图8中的(b)所示,手机显示菜单栏802,该菜单栏802中包括截图按钮803。用户可对该截图按钮803进行操作,如点击操作。手机接收到用户对截图按钮803的点击操作后,可启动截图功能,以截取手机屏幕当前显示桌面801中的内容,从而生成截图。在截图生成后,手机可将生成的截图以浮动UI元素的形式显示在手机屏幕上。作为一种示例,手机可先将生成的截图以悬浮窗的形式显示在手机屏幕上,然后截图以逐渐缩小的动效变为浮动UI元素(如图8中的(d)所示的浮动UI元素805)后吸附显示在手机屏幕边缘。作为又一种示例,如图8中的(c)所示,手机可先将生成的截图以悬浮窗的形式显示在手机屏幕上,如显示截图804。用户可按下截图804并移动手指(如向右移动手指),以使得截图804在手机屏幕上跟随用户手指的移动而移动。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图8中的(d)所示,手机可在手机屏幕上显示浮动UI元素805,该浮动UI元素805中包括截图804,如截图804的缩略图,即生成的截图以浮动UI元素的形式显示在手机屏幕上。如,浮动UI元素805可吸附显示在手机屏幕的边缘(如屏幕左边缘或屏幕右边缘,图8中的(d)以吸附显示在屏幕右边缘为例示出)。
需要说明的是,以上图7所示实施例,是以图片类元素是图库应用中的图片为例进行说明的。图片类元素也可以是手机其他应用的页面中所包含的图片,如,即时通信应用的聊天界面中的分享给好友或好友分享的图片,又如,浏览器的页面所包含的图片等,本实施例在此也不做具体限制。
另外,图片类元素以浮动UI元素呈现在手机屏幕上的具体实现过程与图6所示文本类元素以浮动UI元素呈现在手机屏幕上的具体实现过程类似,此处不再一一赘述。区别在于,拖拽事件中包括被拖拽的图片和被拖拽元素的类型(如图片类),手机应用层的元素控制模块可根据图片生成shadow。
采用以上图7或图8所示实施例的技术方案,对于图片类的界面元素,用户通过执行拖拽操作或截图操作,可将对应图片以浮动UI元素的形式显示在手机屏幕上,如吸附显示在终端屏幕边缘。且在接收到用户在该应用内切换页面,或退出该应用,或开启其他应用的操作后,该浮动UI元素可继续显示在手机屏幕上,使得跨应用查看或分享信息更加方便。如,在手机接收到用户对浮动UI元素的点击操作后,手机可调用系统的应用选择器,供用户选择使用哪个应用查看以浮动UI元素形式显示的图片。如,在手机在其屏幕上以浮动UI元素的形式显示图片后,手机(如手机的框架层)可将该浮动UI元素的标识与该图片关联存储在手机中。在用户选择了查看图片的应用后,该应用可根据存储的关联关系,将浮动UI元素中的图片通过该应用展示给用户。且浮动UI元素可被移动位置。又如,在用户想跨页面或跨应用使用该图片,如将该图片分享给好友时,无需再次打开图库应用进行查看,选择,通过将该浮动UI元素拖拽到与该好友的聊天界面的输入框内,便可将该浮动UI元素中的图片分享给好友等,提高了交互效率。具体实现与将以浮动UI元素形式显示的文本填充到输入框中的实现类似,此处不在详细赘述。
结合图9,对统一资源定位符(uniform resource locator,URL)网址以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,URL网址以浮动UI元素的形式显示在手机屏幕上的过程与文本类元素以浮动UI元素的形式显示在手机屏幕上的过程类似,详细过程不再重复描述。此处通过一个示例对URL网址以浮动UI元素的形式显示在手机屏幕上的过程进行说明。其中,类似于图5A和图5B所示实施例的描述,触发URL网址以浮动UI元素的形式显示的操作可以是用户对URL网址的拖拽操作,还可以是针对URL网址的复制操作。例如,结合图9,以触发URL网址以浮动UI元素的形式显示的操作是针对URL网址的复制操作为例。如图9中的(a)所示,手机当前显示网页901。用户在想将网页901的URL网址以浮动UI元素的形式显示在手机屏幕上时,可针对该URL网址执行复制操作。手机在接收到该复制操作后,可将该URL网址以浮动UI元素的形式显示在手机屏幕上。该复制操作可以为本申请实施例中的第二操作。
其中,针对URL网址的复制操作可以包括一个或多个操作。示例性的,针对URL网址的复制操作可以包括长按网址栏(或网址栏中的URL网址)的操作和对复制按钮的操作。继续参考图9中的(a)所示,用户可长按网页901中的网址栏902。网页901可以为本申请实施例中的第一界面。址栏902中的URL网址可以为本申请实施例中的第一元素。如图9中的(b)所示,响应于用户对网址栏902的长按操作,手机可显示操作菜单,该操作菜单中包括复制按钮903。手机在接收到用户对复制按钮903的操作,如点击操作后,如图9中的(c)所示,手机可在手机屏幕上显示浮动UI元素904,该浮动UI元素904中包括链接图标。浮动UI元素904可以为本申请实施例中的第一浮动元素。其中,链接图标用于链接到网址栏902中的URL网址对应的网页,即被用户复制的URL网址以浮动UI元素的形式显示在手机屏幕上。
需要说明的是,URL网址以浮动UI元素呈现在手机屏幕上的具体实现过程与图6所示文本类元素以浮动UI元素呈现在手机屏幕上的具体实现过程类似,此处不再一一赘述。区别在于,拖拽事件中包括URL网址和以浮动UI元素呈现的元素类型为URL,手机应用层的元素控制模块可将链接图标作为shadow。
采用以上图9所示实施例的技术方案,对于URL网址,用户通过执行拖拽操作或复制操作,可将URL网址以浮动UI元素的形式显示在手机屏幕上,如吸附显示在终端屏幕边缘。且在接收到用户在该应用内切换页面,或退出该应用,或开启其他应用的操作后,该浮动UI元素可继续显示在手机屏幕上,使得跨应用查看或分享信息更加方便。如,在手机接收到用户对浮动UI元素的点击操作后,手机可跳转到以浮动UI元素呈现的URL网址的网页。如,在手机在其屏幕上以浮动UI元素的形式显示URL网址后,手机(如手机的框架层)可将该浮动UI元素的标识与该URL网址关联存储在手机中。在用户点击了该浮动UI元素后,手机可根据存储的关联关系,将与浮动UI元素的标识对应的URL网址用对应应用打开展示给用户。该应用可以是用户设置的默认应用,也可以是系统自动选择的应用。且浮动UI元素可被移动位置。又如,在用户想跨页面或跨应用使用该URL网址,如将该URL网址分享给好友时,通过将该浮动UI元素拖拽到与该好友的聊天界面的输入框内,便可将该浮动UI元素中的URL网址粘贴到输入框内,以分享给好友等。具体实现与将以浮动UI元素形式显示的文本填充到输入框中的实现类似,此处不在详细赘述。
结合图10,对文件资源类元素以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,文件资源类元素可以指的是在手机系统中以文件形式保存的图片、文档、压缩包以及其他类型的文件资源。触发文件资源类元素以浮动UI元素的形式显示的操作可以是用户对文件资源类元素的拖拽操作。
例如,如图10中的(a)所示,手机显示文件资源管理页面1001。资源管理页面1001可以为本申请实施例中的第一界面。用户在想将文件资源管理页面1001中的一个或多个文件资源以浮动UI元素的形式显示在手机屏幕上时,可针对该文件资源执行拖拽操作。在用户释放拖拽后,手机可将该文件资源以浮动UI元素的形式显示在手机屏幕上。
其中,上述拖拽操作可以包括一个或多个操作。示例性的,拖拽操作可以包括触发文件资源浮起的操作和触发浮起文件资源移动的操作。
例如,以触发文件资源浮起的操作为对文件资源的长按并选中的操作,触发浮起文件资源移动的操作为对浮起文件资源的按下并移动的操作为例。继续参考图10中的(a)所示,用户可对文件资源管理页面1001中的选择按钮1002进行点击操作。响应于该操作,如图10中的(b)所示,手机进入对文件资源管理页面1001中文件资源的选择模式。用户可在该选择模式下选择文件资源。如手机接收到用户对文件资源“zyy”1003的选择操作,则该文件资源“zyy”1003处于选中状态。文件资源“zyy”1003可以为本申请实施例中的第一元素。用户可长按选中的文件资源“zyy”1003。响应于用户的操作,手机可将文件资源“zyy”1003显示为浮起的状态。如,如图10中的(c)所示,手机可进行背景虚化处理,并显示浮起的文件资源“zyy”1003。之后,用户通过按下浮起的文件资源“zyy”1003并移动手指(如向右移动手指),可使得文件资源“zyy”1003在手机屏幕上跟随用户手指的移动而移动。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图10中的(d)所示,手机可在手机屏幕上显示浮动UI元素1004,该浮动UI元素1004中包括链接图标。其中,链接图标用于链接到文件资源“zyy”1003对应在手机中的存储地址,即被用户拖拽的文件资源以浮动UI元素的形式显示在手机屏幕上。如,浮动UI元素1004可吸附显示在手机屏幕的边缘(如屏幕左边缘或屏幕右边缘,图10中的(d)以吸附显示在屏幕右边缘为例示出)。浮动UI元素1004可以为本申请实施例中的第一浮动元素。拖拽操作和拖拽释放操作可以为本申请实施例中的第二操作。
需要说明的是,文件资源类元素以浮动UI元素呈现在手机屏幕上的具体实现过程与图6所示文本类元素以浮动UI元素呈现在手机屏幕上的具体实现过程类似,此处不再一一赘述。区别在于,拖拽事件中包括文件资源在手机中的存储地址和以浮动UI元素呈现的元素类型为文件资源类,手机应用层的元素控制模块可将链接图标作为shadow。
类似的,采用以上图10所示实施例的技术方案,对于文件资源类元素,用户通过执行拖拽操作,可将文件资源类元素以浮动UI元素的形式显示在手机屏幕上,如吸附显示在终端屏幕边缘。且在接收到用户在该应用内切换页面,或退出该应用,或开启其他应用的操作后,该浮动UI元素可继续显示在手机屏幕上,使得跨应用查看或分享信息更加方便。如,在用户想跨页面或跨应用使用该文件资源,如将该文件资源分享给好友时,通过将该浮动UI元素拖拽到与该好友的聊天界面的输入框内,便可将该浮动UI元素对应的文件资源分享给好友。具体实现与将以浮动UI元素形式显示的文本填充到输入框中的实现类似,此处不在详细赘述。
结合图11,对列表类元素以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,列表类元素是安卓TM原生的控件类型,如ListView,RecyclerView等均为列表类元素。其中,具体可以是社交类,通讯类,购物类等应用中的列表类元素。触发列表类元素以浮动UI元素的形式显示的操作可以是用户对列表内列表项包括的元素,如列表项中表示用户头像的元素的拖拽操作。例如,如图11中的(a)所示,手机当前显示微信的首页1101。微信的首页1101可以为本申请实施例中的第一界面。用户在想将微信TM的首页1101中的列表类元素,如与一个或多个好友的聊天列表项以浮动UI元素的形式显示在手机屏幕上时,可针对列表项中联系人头像执行拖拽操作。在用户释放拖拽后,手机可将联系人头像以浮动UI元素的形式显示在手机屏幕上。
其中,上述拖拽操作可以包括一个或多个操作。示例性的,拖拽操作可以包括触发联系人头像浮起的操作和触发浮起的联系人头像移动的操作。
例如,以触发联系人头像浮起的操作为对联系人头像的长按操作,触发浮起联系人头像移动的操作为对浮起联系人头像的按下并移动的操作为例。继续参考图11中的(a)所示,用户可长按微信TM的首页1101中的好友BB的联系人头像1102。联系人头像11102可以为本申请实施例中的第一元素。手机可接收到用户针对联系人头像1102的长按操作。响应于该长按操作,手机可将联系人头像1102显示为浮起的状态。如,如图11中的(b)所示,手机可进行背景虚化处理,并显示浮起的联系人头像1102。之后,用户通过按下浮起的联系人头像1102并移动手指(如向右移动手指),可使得联系人头像1102在手机屏幕上跟随用户手指的移动而移动。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图11中的(c)所示,手机可在手机屏幕上显示浮动UI元素1103,该浮动UI元素1103包括联系人头像1102,即被用户拖拽的列表项中的联系人头像以浮动UI元素的形式显示在手机屏幕上。浮动UI元素1103可以为本申请实施例中的第一浮动元素。拖拽操作和拖拽释放操作可以为本申请实施例中的第二操作。
需要说明的是,以上图11所示实施例,是以列表类元素是微信中的列表项为例进行说明的。列表类元素也可以是其他应用界面中的列表项,如,通讯录中的列表项,又如,短信息中的列表项等,本实施例在此也不做具体限制。
结合图4,如图12所示,作为一种示例,列表类元素以浮动UI元素呈现在手机屏幕上的具体实现过程可以是:手机,如手机应用层的应用接收到用户对列表项中某元素的拖拽操作后,可触发针对该元素的拖拽。手机应用层的应用可获取拖拽事件发送给手机应用层的拖拽服务模块。如,手机应用层的应用获取拖拽事件的过程可以是:用户执行拖拽操作后,手机的框架层可监听到该拖拽操作(如具体可以是对浮起联系人头像的长按操作),作为响应,手机的框架层可生成拖拽事件(DragEvent)。手机应用层的应用可通过回调获取到框架层生成的拖拽事件。其中,拖拽事件中可包括用户执行长按操作时按压点的坐标和被拖拽元素的类型(如列表类)。手机应用层的拖拽服务模块接收到拖拽事件后,可与手机应用层的元素控制模块配合根据拖拽事件中按压点的坐标和被拖拽元素的类型(如列表类)构造阴影(shadow)。如手机应用层的拖拽服务模块确定被拖拽元素的类型为列表类,则手机应用层的拖拽服务模块可将拖拽事件中按压点的坐标传输给手机框架层的窗口管理器。窗口管理器可根据按压点的坐标,确定按压点预设范围内的控件,并截取该控件的截图传输给手机应用层的元素控制模块,以便元素控制模块根据截图生成shadow。其中,按压点的预设范围内可以是以按压点为中心的预定像素(如1个像素,或大于1个像素)距离内。之后,手机应用层的元素控制模块可将生成的shadow传输给手机框架层的窗口管理器,以便窗口管理器以浮动UI元素的形式显示该shadow。如,窗口管理器在手机屏幕上显示一个圆形元素,该圆形元素即为浮动UI元素,其中包括用户按压点的控件截图,如联系人头像。
采用以上图11所示实施例的技术方案,对于列表类的界面元素,用户通过执行拖拽操作,可将列表项,如列表项包括的元素以浮动UI元素的形式显示在手机屏幕上。即通过浮动UI元素可将用户拖拽的列表项中的元素呈现在手机屏幕上。且在接收到用户在该应用内切换页面,或退出该应用,或开启其他应用的操作后,该浮动UI元素可继续显示在手机屏幕上。该浮动UI元素支持原列表项被点击后所支持的操作。即用户执行对应操作(该操作可以为本申请实施例中的第五操作),如点击该浮动UI元素后手机所作出的响应(或者说执行的功能,该功能可以为本申请实施例中的第一功能),与用户点击原列表项后手机所作出的响应相同。其具体实现可以是:在用户对列表项中某元素,如联系人头像执行拖拽操作后,手机应用层的应用可将点击该联系人头像后需要触发的意图(intent)发送给手机应用层的拖拽服务模块,以便手机在其屏幕上以浮动UI元素的形式显示该联系人头像后,手机可将该浮动UI元素的标识与上述需要触发的intent关联存储在手机中。之后,在手机接收到用户对浮动UI元素的操作,如点击操作后,手机可调用对应的需要触发的intent,以作出对应响应。
例如,结合图11所示示例,用户通过拖拽好友BB的联系人头像,触发其以浮动UI元素的形式显示在手机屏幕上后,用户触发手机退出了微信TM应用,并如图13A中的(a)所示,手机显示桌面1301。好友BB的联系人头像继续以浮动UI元素的形式显示在手机屏幕上,如图13A中的(a)中所示的浮动UI元素1302。另外,手机将浮动UI元素1302的标识与需要触发的intent关联存储在手机中。如需要触发的intent为显示与好友BB的聊天界面。在手机接收到用户对浮动UI元素1302的操作,如点击操作后,作为对该操作的响应,如图13A中的(b)所示,手机显示与好友BB的聊天界面1303。
又例如,结合图14,如图14中的(a)所示,手机显示通信录界面1401。手机在接收到用户对通讯录界面1401中联系人Sam的头像1402的拖拽操作后,如图14中的(b)所示,手机显示浮动UI元素1403,该浮动UI元素1403包括联系人Sam的头像1402,即被用户拖拽的通讯录界面1401中联系人Sam的头像1402以浮动UI元素的形式显示在手机屏幕上。另外,手机将浮动UI元素1403的标识与需要触发的intent关联存储在手机中。如需要触发的intent为拨打电话给对应联系人。如图14中的(c)所示,用户触发手机退出了通讯录,手机显示桌面1404。浮动UI元素1403继续显示在手机屏幕上。之后,在手机接收到用户对浮动UI元素1403的操作,如点击操作后,作为对该操作的响应,手机可拨打电话给联系人Sam。另如图14中的(d)所示,手机还可显示拨号界面1405。
另外,对于以浮动UI元素的形式显示的联系人头像,在图片、URL或文本等内容被拖动到该浮动UI元素上时,手机可将该内容直接发送给对应的联系人。其中,拖动内容的操作可以包括触发内容浮起的操作和触发浮起内容移动的操作。以触发内容浮起的操作为对内容的长按操作,触发浮起内容移动的操作为对浮起内容的按下并移动的操作为例。例如,结合图11所示示例,用户通过拖拽好友BB的联系人头像,触发其以浮动UI元素的形式显示在手机屏幕上后,用户打开了图库应用。如图13B中的(a)所示,手机显示图库应用的界面1304。好友BB的联系人头像继续以浮动UI元素的形式显示在手机屏幕上,如图13B中的(a)中所示的浮动UI元素1305。手机接收到用户对图库应用的界面1304中图片1306的长按操作后,如图13B中的(b)所示,手机将图片1306浮起显示。之后,手机接收到用户按下浮起的图片1306并移动的操作,手机显示该图片1306移动的动画。如果手机接收到用户将图片1306移动到浮动UI元素1305的位置时释放拖拽的操作,则手机将该图片1306发送给好友BB。另外,如图13B中的(c)所示,手机还可自动打开与好友BB的聊天界面1307,并显示发送成功的消息。其中,手机发送图片给好友的具体实现可以是,在手机将浮动UI元素的标识与需要触发的intent(如,需要触发的intent为显示与好友BB的聊天界面)关联存储在手机中的基础上,手机在接收到用户将内容(如图片1306)拖拽到该浮动UI元素的位置释放拖拽的操作后,可调用对应的需要触发的intent,以启动聊天界面。手机还可构造素材数据(ClipData),并将用户拖拽的内容存到该ClipData中。之后,手机在启动的聊天界面中释放该ClipData,这样,应用将处理该ClipData,即将ClipData中的内容发送给对应联系人好友。需要说明的是,图13B所示示例是以将图片直接拖拽到以浮动UI元素呈现的联系人头像上,可触发手机将图片直接发送给对应联系人为例进行说明的。可以理解的是,在本实施例中,用户拖拽如文本,图片,URL,文件等至能响应发送事件的浮动UI元素(如上述以浮动UI元素呈现的联系人头像)上释放时均触发发送操作,这样可提升分享、发送内容等常规操作的交互效率。
以上示例是以手机将浮动UI元素的标识与需要触发的intent关联存储在手机中,用于在接收到用户对浮动UI元素的操作后,触发手机做出对应响应为例进行说明的。在其他一些实施例中,手机也可以不将浮动UI元素的标识与需要触发的intent关联存储在手机中,而是在接收到用户对浮动UI元素的操作后,将对应的操作事件发送给应用,以触发应用根据该操作事件作出对应响应。例如,在接收到用户对浮动UI元素的操作后,手机可判断是否存储了与该浮动UI元素的标识对应的intent。如果存储了与该浮动UI元素的标识对应的intent,则手机可启动该intent,以对用户的操作进行响应。如果未存储,且应用仍在前台显示,手机可将对应的操作事件传输给主屏,以触发应用根据该操作事件作出对应响应。如果该应用退到后台,手机可将应用的界面移到虚拟屏上进行绘制。在确定未存储与该浮动UI元素的标识对应的intent后,手机可将对应的操作事件发送到绘制该应用界面的虚拟屏,以触发应用根据该操作事件作出对应响应。
结合图15,对图标类元素以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,图标类元素可以指的是界面中被定义了点击事件的图形元素。触发图标类元素以浮动UI元素的形式显示的操作可以是用户对图标类元素的拖拽操作。
例如,如图15中的(a)所示,手机显示淘宝TM的界面1501。淘宝TM的界面1501可以为本申请实施例中的第一界面。该界面1501中包括多个控件。用户在想将淘宝的界面1501中的一个或多个控件以浮动UI元素的形式显示在手机屏幕上时,可针对该控件执行拖拽操作。在用户释放拖拽后,手机可将该控件以浮动UI元素的形式显示在手机屏幕上。其中,上述拖拽操作可以包括一个或多个操作。示例性的,拖拽操作可以包括触发控件浮起的操作和触发浮起控件移动的操作。
例如,以触发控件浮起的操作为对控件的长按操作,触发浮起控件移动的操作为对浮起控件的按下并移动的操作为例。继续参考图15中的(a)所示,用户可对淘宝TM的界面1501中待收货控件1502进行长按操作。待收货控件1502可以为本申请实施例中的第一元素。响应于该长按操作,手机可将待收货控件1502显示为浮起的状态。如,如图15中的(b)所示,手机可进行背景虚化处理,并显示浮起的待收货控件1502。用户通过按下浮起的待收货控件1502并移动手指(如向右移动手指),可使得待收货控件1502在手机屏幕上跟随用户手指的移动而移动。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图15中的(c)所示,手机可在手机屏幕上显示浮动UI元素1503,该浮动UI元素1503中包括待收货控件1502对应的图标,即被用户拖拽的控件以浮动UI元素的形式显示在手机屏幕上。浮动UI元素1503可以为本申请实施例中的第一浮动元素。拖拽操作和拖拽释放操作可以为本申请实施例中的第二操作。
需要说明的是,图标类元素以浮动UI元素呈现在手机屏幕上的具体实现过程与图12所示列表类元素以浮动UI元素呈现在手机屏幕上的具体实现过程类似,此处不再一一赘述。区别在于,手机接收到用户对控件的拖拽操作,如长按操作后,可触发拖拽。拖拽事件中被拖拽元素的类型为图标类。
可以理解的是,采用以上图15所示实施例的技术方案,对于图标类元素,用户通过执行拖拽操作,可将图标类元素以浮动UI元素的形式显示在手机屏幕上。且在接收到用户在该应用内切换页面,或退出该应用,或开启其他应用的操作后,该浮动UI元素可继续显示在手机屏幕上。该浮动UI元素支持控件被点击后所支持的操作。即用户执行对应操作(该操作可以为本申请实施例中的第五操作),如点击该浮动UI元素后手机所作出的响应(或者说执行的功能,该功能可以为本申请实施例中的第一功能),与用户点击原控件手机所作出的响应相同。其具体实现可以是:如果应用仍在前台显示,在接收到用户对浮动UI元素的操作后,手机可将对应的操作事件传输给主屏,以触发应用根据该操作事件作出对应响应。如果该应用退到后台,手机可将应用的移到虚拟屏上进行绘制。在接收到用户对浮动UI元素的操作后,手机可将对应的操作事件发送到绘制该应用界面的虚拟屏,以触发应用根据该操作事件作出对应响应。也就是说,结合图15所示示例,手机在接收到用户对浮动UI元素1503的操作,如点击操作后,手机可显示待收货的详情界面。
结合图16和图17,对卡片类元素以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,卡片类元素可以指的是用于展示信息元素。界面中哪些元素为卡片类元素可以是预先定义的。如可将对应配置文件预先存储在手机中,该配置文件中包括卡片类元素的标识。如可以是导航类,购物类应用的中的元素。在一些实施例中,触发卡片类元素以浮动UI元素的形式显示的操作可以是用户对卡片类元素的拖拽操作。
例如,如图16中的(a)所示,手机显示导航界面1601。导航界面1601可以为本申请实施例中的第一界面。用户在想将导航界面1601中的一个或多个元素以浮动UI元素的形式显示在手机屏幕上时,可针对该元素执行拖拽操作。在用户释放拖拽后,手机可将该元素以浮动UI元素的形式显示在手机屏幕上。其中,上述拖拽操作可以包括一个或多个操作。示例性的,拖拽操作可以包括触发元素浮起的操作和触发浮起元素移动的操作。
例如,以触发元素浮起的操作为对元素所在的显示区域的长按操作,触发浮起元素移动的操作为对浮起元素的按下并移动的操作为例。继续参考图16中的(a)所示,用户可对导航界面1601中元素1602所在的显示区域进行长按操作。元素1602可以为本申请实施例中的第一元素。响应于该长按操作,手机可根据配置文件提取导航界面1601中的部分卡片类元素,如可提取按压点预设范围内的卡片元素并将提取的卡片类元素显示为浮起的状态。如,如图16中的(a)所示,手机提取导航界面1601中的元素1602和元素1603。元素1603可以为本申请实施例中的第二元素。如图16中的(b)所示,手机进行背景虚化处理,并显示浮起的元素1604,该元素1604包括提取的元素1602和元素1603。用户通过按下浮起的元素1604并移动手指(如向右移动手指),可使得元素1604在手机屏幕上跟随用户手指的移动而移动。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图16中的(c)所示,手机可在手机屏幕上显示浮动UI元素1605,该浮动UI元素1605中包括提取的元素1602和元素1603,即被用户拖拽的元素以浮动UI元素的形式显示在手机屏幕上。浮动UI元素1605可以为本申请实施例中的第一浮动元素。其中,提取的元素的以浮动UI元素的形式显示时,其布局与该元素在界面中的布局可以相同,也可以不同。在提取的元素以浮动UI元素的形式显示时的布局与其在界面中的布局相同的情况下,手机在提取出元素后,可根据其在当前界面中的布局对提取出的元素进行布局后,以浮动UI元素的形式显示在手机屏幕上。在提取的元素以浮动UI元素的形式显示时的布局与其在界面中的布局不同的情况下,作为一种示例,手机中可预先存储有对应的布局文件,该布局文件中包括提取出的元素的布局配置,如包括元素1602和元素1603的布局配置。手机在提取出元素,如上述元素1602和元素1603后,可根据布局文件对元素1602和元素1603进行布局后,以浮动UI元素的形式显示,如显示效果如图16中的(c)所示的浮动UI元素1605。拖拽操作和拖拽释放操作可以为本申请实施例中的第二操作。
需要说明的是,图16所示示例中,卡片类元素以浮动UI元素呈现在手机屏幕上的具体实现过程与图12所示列表类元素以浮动UI元素呈现在手机屏幕上的具体实现过程类似,此处不再一一赘述。区别在于,手机接收到用户对元素的拖拽操作,如可以是接收到对元素所在的显示区域的长按操作后,可触发拖拽。拖拽事件中被拖拽元素的类型为卡片类。另外,在具体实现时,手机可根据用户按压点的坐标将按压点预设范围内的卡片元素作为后续以浮动UI元素呈现的元素。
在其他一些实施例中,触发卡片类元素以浮动UI元素的形式显示的操作可以是用户对界面中预定按钮的操作。
例如,如图17中的(a)所示,手机显示购物应用的购物详情界面1701。用户在想将购物详情界面1701中的一个或多个元素以浮动UI元素的形式显示在手机屏幕上时,可对预定按钮,如分享按钮1706进行操作(如点击操作)。手机在接收到用户对分享按钮的点击操作后,可将购物详情界面1701中的部分元素,如卡片类元素以浮动UI元素的形式显示在手机屏幕上。
例如,继续参考图17中的(a)所示,用户对购物应用的购物详情界面1701中的分享按钮1706进行操作,如点击操作。响应于该点击操作,手机可提取购物详情界面1701中的卡片类元素,如可提取商品预览1702,商品价格1707,商品简介1703,加入购物车按钮1704和立即购买按钮1705。之后,如图17中的(b)所示,手机可在手机屏幕上显示浮动UI元素1708,该浮动UI元素1708中包括提取的商品预览1702,商品价格1707,商品简介1703,加入购物车按钮1704和立即购买按钮1705。
其中,手机在接收到用户对界面中的预定按钮的操作后,可以根据对应的配置文件提取该界面中的卡片类元素,以便其可以浮动UI元素的形式呈现给用户。该配置文件中定义了在接收到用户对预定按钮的操作后界面中的哪些元素以浮动UI元素的形式呈现。
可以理解的是,采用以上图16和图17所示实施例的技术方案,对于卡片类元素,用户通过执行拖拽操作或对预定按钮进行操作,可将卡片类元素以浮动UI元素的形式显示在手机屏幕上。且在接收到用户在该应用内切换页面,或退出该应用,或开启其他应用的操作后,该浮动UI元素可继续显示在手机屏幕上,方便用户继续查看。另外,还可使得跨应用分享信息更加方便。如,在用户想将该卡片类元素分享给好友时,通过将浮动UI元素(如图17中的(b)所示的浮动UI元素1708)拖拽到与该好友的聊天界面的输入框内,便可将该浮动UI元素分享给好友。具体实现与将以浮动UI元素形式显示的文本填充到输入框中分享给好友的实现类似,此处不在详细赘述。另外,好友接收到该浮动UI元素后,可以在手机显示的聊天界面中点击接收到的浮动UI元素,以触发手机显示对应的购物详情界面。
结合图18,对视频窗口类元素以浮动UI元素的形式显示在手机屏幕上的过程进行举例说明。
其中,视频窗口类元素是安卓TM原生的控件类型,如TextureView,SurfaceView,或webview中的video元素均为视频窗口类元素。触发视频窗口类元素以浮动UI元素的形式显示的操作可以是用户对视频窗口类元素的拖拽操作。
例如,如图18中的(a)所示,手机显示视频详情界面1801。视频详情界面1801可以为本申请实施例中的第一界面。用户在想将视频详情界面1801中的视频元素以浮动UI元素的形式显示在手机屏幕上时,可针对该视频元素执行拖拽操作。在用户释放拖拽后,手机可将该视频元素以浮动UI元素的形式显示在手机屏幕上。其中,上述拖拽操作可以包括一个或多个操作。示例性的,拖拽操作可以包括触发视频元素浮起的操作和触发浮起视频元素移动的操作。
例如,以触发视频元素浮起的操作为对视频元素的长按操作,触发浮起视频元素移动的操作为对浮起视频元素的按下并移动的操作为例。继续参考图18中的(a)所示,用户可对视频详情界面1801中视频元素1802进行长按操作。视频元素1802可以为本申请实施例中的第一元素。响应于该长按操作,手机可将视频元素1802显示为浮起的状态。如,如图18中的(b)所示,手机可进行背景虚化处理,并显示浮起的视频元素1802。用户通过按下浮起的视频元素1802并移动手指(如向右移动手指),可使得视频元素1802在手机屏幕上跟随用户手指的移动而移动。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,如图18中的(c)所示,手机可在手机屏幕上显示浮动UI元素1803,该浮动UI元素1803中包括视频元素1802,即被用户拖拽的视频元素以浮动UI元素的形式显示在手机屏幕上。浮动UI元素1803可以为本申请实施例中的第一浮动元素。拖拽操作和拖拽释放操作可以为本申请实施例中的第二操作。
其中,视频窗口类元素以浮动UI元素呈现在手机屏幕上的具体实现过程可以是:手机,如手机应用层的应用接收到用户对视频窗口类元素的拖拽操作后,可触发针对该视频窗口类元素的拖拽。手机应用层的应用可获取拖拽事件发送给手机应用层的拖拽服务模块。如,手机应用层的应用获取拖拽事件的过程可以是:用户执行拖拽操作后,手机的框架层可监听到该拖拽操作(如具体可以是对视频窗口类元素的长按操作),作为响应,手机的框架层可生成拖拽事件(DragEvent)。手机应用层的应用可通过回调获取到框架层生成的拖拽事件。其中,拖拽事件中可包括按压点的坐标,应用的标识(如包名),视频窗口类元素的标识和被拖拽元素的类型(如视频窗口类)。手机应用层的拖拽服务模块可启动虚拟屏,并传递虚拟屏的标识和应用的包名给手机框架层的窗口管理器。手机框架层的窗口管理器根据虚拟屏的标识和应用的包名,可将该包名所指示应用的界面,即上述视频详情界面移到虚拟屏上绘制。手机应用层的拖拽服务模块还可与手机应用层的元素控制模块配合根据拖拽事件构造阴影(shadow)。如手机应用层的拖拽服务模块确定被拖拽元素的类型为视频窗口类,则手机应用层的拖拽服务模块可将拖拽事件中按压点的坐标传输给手机框架层的窗口管理器。窗口管理器可根据按压点的坐标,确定按压点附近的元素,并截取该元素的截图传输给手机应用层的元素控制模块,以便元素控制模块根据截图生成shadow,并将生成的shadow传输给手机框架层的窗口管理器,以便窗口管理器添加该shadow至手机的主屏。之后,在用户释放拖拽后,手机应用层的拖拽服务模块根据拖拽事件中视频窗口类元素的标识,可从虚拟屏上绘制的界面中提取出对应的视频窗口类元素,如视频元素,并将提取出视频窗口类元素映射到主屏的shadow,即实现视频窗口类元素以浮动UI元素的形式显示的效果。
采用以上图18所示实施例的技术方案,对于视频窗口类元素,用户通过执行拖拽操作,可将视频窗口类元素以浮动UI元素的形式显示在手机屏幕上。且在接收到用户在该应用内切换页面,或退出该应用(如图18中的(d)所示显示桌面1804),或开启其他应用的操作后,该浮动UI元素(如图18中的(d)所示浮动UI元素1803)可继续显示在手机屏幕上,供用户继续查看。这样可方便用户在继续查看该视频窗口类元素展示的视频的同时,对手机的其他界面进行操作。另外,在视频窗口类元素中所承载的视频是本地视频时,用户可通过将浮动UI元素(如图18中的(c)所示的浮动UI元素1803)拖拽到与该好友的聊天界面的输入框内,便可将该视频分享给好友。具体实现与将以浮动UI元素形式显示的文本填充到输入框中分享给好友的实现类似,此处不在详细赘述。
可以理解的是,一个界面可以包括多个界面元素。界面中支持以浮动UI元素的形式显示的界面元素可以是三方应用自定义的,也可以是系统推荐的。也就是说三方应用或系统可定义界面中的一个或多个界面元素支持以浮动UI元素的呈现。例如,三方应用的开发人员可预先定义该应用的界面中哪些元素支持以浮动UI元素的形式呈现,并将对应的配置文件配置在手机中。又如,系统开发人员可将对应推荐模型配置在手机中,该推荐模型用于识别界面中哪些元素支持以浮动UI元素的形式呈现。基于此,为了便于用户获知界面中的哪些元素支持以浮动UI元素的形式呈现,在本实施例中,手机在显示界面时,可以在接收到对应的用户操作后,将该界面(该界面可以为本申请实施例中的第一界面)中支持以浮动UI元素的形式呈现的元素以第一形式显示,如突出显示,不支持以浮动UI元素的形式呈现的元素以第二形式显示。其中,该用户操作可以是用户对界面中的元素的预设操作,如长按操作,双击操作等。该用户操作也可以是用户对对应开关按钮的操作。该用户操作可以为本申请实施例中的第一操作。该开关按钮可以为本申请实施例中的预定功能控件。
例如,以用户操作是用户对界面中元素的长按操作为例。结合图19,以手机显示淘宝TM的界面1901为例。如图19中的(a)所示,用户可对界面1901中的待付款控件1902进行长按操作。手机接收到对待付款控件1902的长按操作后,可判断该待付款控件1902是否支持以浮动UI元素的形式呈现。如果待付款控件1902支持以浮动UI元素的形式呈现,则手机可根据对应配置文件或推荐模型,识别界面1901中所有支持以浮动UI元素的形式呈现的元素。如图19中的(b)所示,手机识别出待付款控件1902,待发货控件1903,待收货控件1904,评价控件1905,我的快递控件1906和收藏中心控件1907支持以浮动UI元素的形式呈现。之后,手机可将这些支持以浮动UI元素的形式呈现的元素突出显示,如显示为浮起的状态。如,如图19中的(b)所示,手机可进行背景虚化处理,并显示浮起的待付款控件1902,待发货控件1903,待收货控件1904,评价控件1905,我的快递控件1906和收藏中心控件1907。如果待付款控件1902不支持以浮动UI元素的形式呈现,手机可不做响应。
又例如,以用户操作是用户对对应开关按钮的操作为例。结合图20,继续以手机显示淘宝TM的界面2001为例。如图20中的(a)所示,用户在想查看该界面2001中的哪些元素支持以浮动UI元素的形式呈现时,可执行从手机屏幕上边缘开始到指向下边缘的滑动操作。作为对该滑动操作的响应,如图20中的(b)所示,手机显示菜单栏2002,该菜单栏2002中包括浮动UI元素功能的开关按钮2003。用户可对该开关按钮2003进行操作,如点击操作。手机接收到用户对开关按钮2003的点击操作后,手机可根据对应配置文件或推荐模型,识别界面2001中所有支持以浮动UI元素的形式呈现的元素,并将支持以浮动UI元素的形式呈现的元素显示为浮起的状态。如,如图20中的(c)所示,手机可进行背景虚化处理,并将支持以浮动UI元素的形式呈现的元素:待付款控件2004,待发货控件2005,待收货控件2006,评价控件2007,我的快递控件2008和收藏中心控件2009浮起显示。
通过将界面中支持以浮动UI元素的形式呈现的元素突出显示,其他元素模糊显示,以提示用户该界面中的哪些元素支持以浮动UI元素的形式呈现。需要说明的是,除了将支持以浮动UI元素的形式呈现的元素显示为浮起状态外,还可以放大展示,或者仅将支持以浮动UI元素的形式呈现的元素放大展示,本实施例在此对突出显示的形式不做具体限制。例如,如图21所示,继续以手机显示淘宝TM的界面为例。在手机接收到用户对界面中的元素的预设操作或对对应开关按钮的操作后,作为响应,手机可以给当前界面添加深色蒙版,如图21中的2101,支持以浮动UI元素的形式呈现的元素置于深色蒙版之上(如,待付款控件2102,待发货控件2103,待收货控件2104,评价控件2105,我的快递控件2106和收藏中心控件2107置于深色蒙版之上),其他元素置于深色蒙版之下。当然支持以浮动UI元素的形式呈现的元素,也可以放大呈现。之后,用户可通过执行对应操作(如拖拽操作)以触发对应元素以浮动UI元素的形式显示在手机屏幕上。在用户执行完对应操作(如拖拽操作)或者关闭对应开关按钮后,界面可恢复初始的显示状态。
根据以上实施例的描述可知,用户通过执行对应操作,可触发界面中的元素以浮动UI元素的形式呈现在手机屏幕上。在一些实施例中,在手机屏幕上可仅允许显示一个浮动UI元素。在其他一些实施例中,手机屏幕上可允许同时显示多个浮动UI元素。在允许同时显示多个浮动UI元素时,可对允许同时显示的浮动UI元素的最大个数(如最大个数为N)进行限制。如,可由系统默认配置是否允许同时在手机屏幕上显示多个浮动UI元素,如系统默认配置在手机屏幕上只允许显示一个浮动UI元素。又如,手机可提供配置界面,供用户选择是否允许同时在手机屏幕上显示多个浮动UI元素,如用户选择允许同时在手机屏幕上显示多个浮动UI元素。在用户选择允许同时显示多个浮动UI元素的情况下,还可由用户设置允许同时显示的浮动UI元素的最大个数。再如,可由用户选择是否允许同时在手机屏幕上显示多个浮动UI元素,在用户选择允许同时显示多个浮动UI元素的情况下,允许同时显示的浮动UI元素的最大个数由是系统的默认配置。
在手机屏幕上允许同时显示多个浮动UI元素的情况下,用户可通过执行对应操作(如拖拽操作,复制操作等),以触发手机将多个元素以浮动UI元素的形式显示在手机屏幕上。在一些实施例中,手机可根据预设排列规则这多个浮动UI元素。如手机根据浮动UI元素生成时间的先后顺序,将多个浮动UI元素依次排列显示在手机屏幕上,如依次从上到下排列显示在手机屏幕的边缘。例如,结合图22,如图22中的(a)所示,手机在手机屏幕的左边缘显示有浮动UI元素2201。用户触发手机生成浮动UI元素2202。如图22中的(b)所示,手机可将浮动UI元素2202排列显示在浮动UI元素2201之后。用户又触发手机生成浮动UI元素2203,如图22中的(c)所示,手机可将浮动UI元素2203排列显示在浮动UI元素2201和浮动UI元素2202之后。也就是说,手机可将最早生成的浮动UI元素显示在最上方,后续生成的浮动UI元素按生成的时间先后顺序依次排列。
在一些实施例中,在手机屏幕上允许同时显示多个浮动UI元素,且设置了允许同时显示的浮动UI元素的最大个数的情况下,如果手机屏幕上已经显示的浮动UI元素的个数已达到最大个数的限制,则在用户再次触发手机以浮动UI元素的形式显示界面元素时,手机可自动删除最早生成的浮动UI元素,并将本次生成的浮动UI元素显示在手机屏幕上。例如,结合图23,手机当前显示有5个浮动UI元素,且允许同时显示的浮动UI元素的最大个数为5个。如图23中的(a)所示,手机当前显示有5个浮动UI元素,分别为浮动UI元素2302,浮动UI元素2303,浮动UI元素2304,浮动UI元素2305和浮动UI元素2306。其中,浮动UI元素2302为最早生成的浮动UI元素。如图23中的(a)所示,手机显示图库应用的界面2301,该界面2301可以为本申请实施例中的第二界面。用户通过拖拽界面2301中的图片2307,以触发图片2307以浮动UI元素的形式显示在手机屏幕上。图片2307可以为本申请实施例中的第三元素。由于此时手机屏幕上显示的浮动UI元素的个数已达到上限,因此手机在接收到用户的拖拽释放操作后,如图23中的(b)所示,手机可删除(或者说不显示)浮动UI元素2302,而在屏幕上显示浮动UI元素2308,以及浮动UI元素2303,浮动UI元素2304,浮动UI元素2305和浮动UI元素2306。如,手机可将新生成的浮动UI元素2308(浮动UI元素2308可以为本申请实施例中的第二浮动元素)自动排列显示在已显示的浮动UI元素队列的最下方,已显示的浮动UI元素依次上移,队列最上方的浮动UI元素2302被自动顶替消失。在一些实施例中,在新生成的浮动UI元素自动顶替最早生成的浮动UI元素显示在屏幕上之前,手机还可以显示提示消息,以提示用户新生成的浮动UI元素将顶替最早生成的浮动UI元素显示在屏幕上。在提示后,再将新生成的浮动UI元素自动顶替最早生成的浮动UI元素显示在屏幕上。
其中,上述图23所示实施例中,在手机屏幕上已经显示的浮动UI元素的个数已达到最大个数的限制的情况下,用户再次触发手机以浮动UI元素的形式显示界面元素时,是否允许新生成的浮动UI元素自动顶替最早生成的浮动UI元素显示在屏幕上,可以是系统的默认配置,也可以提供设置界面供用户设置。如,当用户设置了允许新生成的浮动UI元素自动顶替最早生成的浮动UI元素显示在屏幕上时,在手机屏幕上已经显示的浮动UI元素的个数已达到最大个数的限制,用户再次触发手机以浮动UI元素的形式显示界面元素时,手机可将新生成的浮动UI元素自动顶替最早生成的浮动UI元素显示在屏幕上。如果用户设置不允许新生成的浮动UI元素自动顶替最早生成的浮动UI元素显示在屏幕上,则在手机屏幕上已经显示的浮动UI元素的个数已达到最大个数的限制,用户再次触发手机以浮动UI元素的形式显示界面元素时,手机显示提示消息,如提示消息可以为“数量已达上限,请删除已有浮动UI元素”,提示用户屏幕的浮动UI元素个数已达到最大个数的限制,不能允许再增加显示新的浮动UI元素。当然,上述图23所示实施例中的自动顶替规则,如自动顶替最早生成的浮动UI元素也仅是一种示例,在其他一些实施例中,自动顶替的规则也可以是自动顶替最晚生成的浮动UI元素,或者自动顶替使用频率最低的浮动UI元素等,本实施例在此不做限制。该自动顶替规则可以是系统预定义的,也可提供设置界面供用户设置。
如上述实施例的描述,用户可通过执行对应操作(如拖拽操作,复制操作等),触发手机将界面中各种类型(如文本类,图片类,图标类,卡片类,列表联系人类,视频窗口类,文件资源类)的元素以浮动UI元素的形式显示在手机屏幕上。因此,可以认为,对应生成的浮动UI元素也具备对应类型,如,浮动UI元素的类型与该元素的类型相同。基于此,在其他一些实施例中,在手机屏幕上允许同时显示多个浮动UI元素,且设置了允许同时显示的浮动UI元素的最大个数的情况下,如果手机屏幕上已经显示的浮动UI元素的个数已达到最大个数的限制,则在用户再次触发手机以浮动UI元素的形式显示界面元素时,手机可先判断当前显示的浮动UI元素中,是否存在与新生成的浮动UI元素类型(或者说是否存在与该界面元素类型)相同的浮动UI元素,如果不存在,则可按照图23所示的实施例在手机屏幕上显示浮动UI元素。如果存在,如当前显示的浮动UI元素中浮动UI元素1与新生成的浮动UI元素类型相同,则可将新生成的浮动UI元素(该浮动UI元素可以为本申请实施例中的第二浮动元素)与该浮动UI元素1(该浮动UI元素1可以为本申请实施例中的第三浮动元素)自动合并为一个浮动UI元素组显示在手机屏幕上。
例如,结合图24,如图24中的(a)所示,手机当前显示有5个浮动UI元素,分别为浮动UI元素2402,浮动UI元素2403,浮动UI元素2404,浮动UI元素2405和浮动UI元素2406。其中,浮动UI元素2402为列表联系人类的浮动UI元素。浮动UI元素2403为文件资源类的浮动UI元素。浮动UI元素2404为图标类的浮动UI元素。浮动UI元素2405为图片类的浮动UI元素。浮动UI元素2406为卡片类的浮动UI元素。如图24中的(a)所示,手机显示图库应用的界面2401,用户通过拖拽界面2401中的图片2407,以触发图片2407以浮动UI元素(新生成的浮动UI元素的类型为图片类)的形式显示在手机屏幕上。由于此时手机屏幕上显示的浮动UI元素的个数已达到上限,因此手机在接收到用户的拖拽释放操作后,手机可判断当前显示的浮动UI元素中,是否存在与新生成的浮动UI元素类型(图片类)相同的浮动UI元素。结合图24的示例可知,手机可确定出当前显示的浮动UI元素2405与新生成的浮动UI元素类型相同,均为图片类,则手机将新生成的浮动UI元素与该浮动UI元素2405合并显示,如图24中的(c)所示,手机显示浮动UI元素组2408。在一些实施例中,手机在确定当前显示的浮动UI元素中,存在与新生成的浮动UI元素类型相同的浮动UI元素时,手机还可将与该新生成的浮动UI元素类型相同的已显示的浮动UI元素突出显示,以提示用户新生成的浮动UI元素将与其合并显示。如,图24中的(b)所示,在用户拖拽图片2407的过程中,手机可进行背景虚化处理,显示浮起的图片2407。手机还可将已显示的浮动UI元素中与新生成的浮动UI元素类型相同的浮动UI元素2405清晰显示,其他浮动UI元素模糊显示。之后,在用户释放拖拽后,如图24中的(c)所示,手机显示浮动UI元素组2408。另外,在手机将多个(两个或两个以上)的浮动UI元素合并显示后,手机还可在浮动UI元素组上显示提示信息,以提示该浮动UI元素组包括的浮动UI元素的个数。如图24中的(c)所示,手机在浮动UI元素组2408上(如右上角)显示角标2409,该角标2409中包括的数字“2”用于指示浮动UI元素组2408包括2个浮动UI元素,或者说是由2个浮动UI元素合并而成的。
需要说明的是,以上示例是以已显示的浮动UI元素中与新生成的浮动UI元素类型相同的浮动UI元素存在一个为例进行说明的。在其他一些实施例中,当已显示的浮动UI元素中与新生成的浮动UI元素类型相同的浮动UI元素存在多个时,手机可自动选择这多个浮动UI元素中的一个或多个与新生成的浮动UI元素合并为一个浮动UI元素组。手机也可根据用户的操作,将这多个浮动UI元素中用户选择的浮动UI元素与新生成的浮动UI元素合并为一个浮动UI元素组。
以上图24所示实施例是以屏幕上显示的浮动UI元素的数量达到上限的情况下,又有新的浮动UI元素生成时,手机将同类型的浮动UI元素合并为浮动UI元素组显示在手机屏幕上为例进行说明的。在其他一些实施例中,在生成浮动UI元素的过程中,如果用户的一次操作会触发手机生成多个浮动UI元素,则手机也可以将生成的这多个浮动UI元素中同类型的浮动UI元素自动合并为一个浮动UI元素组呈现给用户。也就是说,当用户同时触发多个同类型的元素以浮动UI元素的形式呈现时,手机会将生成的这多个元素的浮动UI元素自动合并为一个浮动UI元素组后呈现给用户。
例如,结合图25,以用户同时触发多个图片类元素以浮动UI元素的形式呈现,且触发图片类元素以浮动UI元素呈现的操作为拖拽操作为例。如,拖拽操作包括触发图片浮起的操作和触发浮起图片移动的操作。触发图片浮起的操作为对图片的长按操作,触发浮起图片移动的操作为对浮起图片的按下并移动的操作。
如图25中的(a)所示,手机显示图库应用的界面2501,图库应用的界面2501中包括多个图片。用户可长按图库应用的界面2501中的图片2502。如图25中的(b)所示,用户长按图库应用的界面2501中的图片2503。手机可接收到用户对图片2502和图片2503的长按操作。响应于该长按操作,手机可将图片2502和图片2503显示为浮起的状态。如,如图25中的(c)所示,手机可进行背景虚化处理,并显示浮起的图片2502和图片2503。之后,用户通过按下浮起的图片2502和图片2503并移动手指(如,向右移动手指),可使得图片2502和图片2503在手机屏幕上跟随用户手指的移动而移动。之后,用户可松开手指,以释放拖拽。在用户松开手指后,手机可接收到用户的拖拽释放操作。在手机接收到该拖拽释放操作后,手机可生成图片2502的浮动UI元素和图片2503的浮动UI元素,由于这两个浮动UI元素的类型相同,均为图片类,因此,如图25中的(d)所示,手机可在手机屏幕上显示浮动UI元素组2504。该浮动UI元素组2504包括图片2502的浮动UI元素和图片2503的浮动UI元素,或者说是由图片2502的浮动UI元素和图片2503的浮动UI元素合并而成的。如图25中的(d)所示,手机在浮动UI元素组2504上(如右上角)显示角标2505,该角标2505中包括的数字“2”用于指示浮动UI元素组2504包括2个浮动UI元素,或者说是由2个浮动UI元素合并而成的。
类似的,在用户同时触发多个其他同类型,如文件资源类,文本类,图标类,卡片类,列表联系人类,视频窗口类等的元素以浮动UI元素的形式呈现时,手机也可以将生成的多个浮动UI元素自动合并为一个浮动UI元素组后显示在手机屏幕上。手机还可在浮动UI元素组上显示提示信息,以提示该浮动UI元素组包括的浮动UI元素的个数。另外,在本实施例中,一个浮动UI元素组中允许包括的浮动UI元素的个数可以不受限制,也可以设置上限(如,9个)。其中,该上限可以提供设置界面供用户设置,也可以是系统的默认配置。
对于以浮动UI元素组呈现的浮动UI元素,手机也可以根据用户操作,将浮动UI元素组展开,以供用户查看浮动UI元素组中的各浮动UI元素。例如,如图26中的(a)所示,手机当前显示有:浮动UI元素2601,浮动UI元素2602,浮动UI元素2603,浮动UI元素组2604和浮动UI元素2605。其中,浮动UI元素组2604包括两个浮动UI元素。手机接收用户可对浮动UI元素组2604的操作(该操作可以为本申请实施例中的第三操作),如点击操作,双击操作或长按操作。作为对该操作的响应,手机可显示该浮动UI元素组2604中包括的浮动UI元素。如,如图26中的(b)所示,手机将其他浮动UI元素,即浮动UI元素2601,浮动UI元素2602,浮动UI元素2603和浮动UI元素2605隐藏,展开浮动UI元素组2604,显示浮动UI元素2604-1和浮动UI元素2604-2。之后,在接收到用户的操作,如对显示浮动UI元素的区域外的其他区域的操作后,手机可自动收起浮动UI元素组,并将其他的浮动UI元素重新显示,显示效果恢复图26中的(a)所示。另外,如上述实施例的描述,允许同时显示在手机屏幕上的浮动UI元素的个数可能存在上限要求。在浮动UI元素组包括的浮动UI元素的个数大于该上限时,在接收到用户对该浮动UI元素组的操作后,手机可在手机屏幕上显示该浮动UI元素组中的部分浮动UI元素,其他浮动UI元素暂不显示。其中,显示的浮动UI元素的个数与该上限相同。之后,手机在接收到用户的上下滑动操作时,可触发手机切换显示的浮动UI元素组中的浮动UI元素。
对于以浮动UI元素组呈现的浮动UI元素,手机也可以根据用户操作(该操作与图26所示实施例中的用户操作不同),将浮动UI元素组拆分(或者说分离),以便浮动UI元素组中的各浮动UI元素单独显示在手机屏幕上。例如,如图27中的(a)所示,手机当前显示浮动UI元素组2701。其中,浮动UI元素组2701包括两个浮动UI元素。手机接收用户可对浮动UI元素组2701的操作,如点击操作,双击操作或长按操作。作为对该操作的响应,如图27中的(b)所示,手机将浮动UI元素组2701包括的浮动UI元素2702和浮动UI元素2703独立显示在手机屏幕上。另外,如上述实施例的描述,允许同时显示在手机屏幕上的浮动UI元素的个数可能存在上限要求。在接收到用户用于分离浮动UI元素组的操作后,手机可先判断在将浮动UI元素组分离显示后,屏幕上显示的所有浮动UI元素组是否超过上限,如果未超过上限,则响应于用于分离浮动UI元素组的操作,将浮动UI元素组分离后显示在手机屏幕上。如果超过上限,则手机可不执行分离浮动UI元素组的操作,手机可以暂时将浮动UI元素组展开显示,之后自动收回继续以浮动UI元素组的形式展示。
在本实施例中,对于在手机屏幕上显示的浮动UI元素,手机可自动或根据用户操作(该用户操作可以为本申请实施例中的第四操作),将其删除,不再显示在手机屏幕上。
例如,手机接收到用户用于删除浮动UI元素的操作后,可将对应的浮动UI元素删除,不再显示在手机屏幕上。该用于删除浮动UI元素的操作可以是对浮动UI元素的长按操作,或双击操作,或拖拽操作。其中拖拽操作可以是按住浮动UI元素并快速向一个方向(如向上,或向下)滑动(如在预设时间内滑动的距离满足预定条件)的操作。
又例如,浮动UI元素在手机屏幕上允许显示的时长可以是不受限制的(也就是说,在用户不主动删除的情况下,其将一直显示在手机屏幕上),也可以是受限制的。如,可以是设置(用户设置或系统默认设置)浮动UI元素的最长存在时间。如可设置浮动UI元素的最大存在时间为X小时,则在浮动UI元素生成显示在手机屏幕后,手机可开始计时,以确定该浮动UI元素在手机屏幕上的存在时间。在计时时长等于最大存在时间X小时后,手机可自动将该浮动UI元素删除,不再显示在手机屏幕上。或者,在浮动UI元素生成显示在手机屏幕后,手机可开始计时,如果在X小时内未接收到用户对该浮动UI元素的操作,则在计时时长等于最大存在时间X小时后,手机自动将该浮动UI元素删除,不再显示在手机屏幕上。如果在X小时内接收到用户对该浮动UI元素的操作,则重新计时。在该实施例中,为了方便用户获知浮动UI元素在屏幕上的存在时间,在浮动UI元素生成并显示在手机屏幕后,手机计时的过程中,手机可显示对应的提示信息,用于提示用户浮动UI元素的存在时间。如,如图28中的(a)所示,手机显示浮动UI元素2801。手机还可显示环形条2802,该环形条2802随手机针对该浮动UI元素2801的计时时长的增加而增长。当计时时长等于最大存在时间时,环形条2802变为封闭的环形。且在计时时长等于最大存在时间时,手机将浮动UI元素2801删除,不再显示在手机屏幕上,如手机可显示该浮动UI元素2801炸掉的动画(如,类似于泡泡炸掉的动画)后,将该浮动UI元素2801从手机屏幕上删除。
再例如,可预先设置用于删除浮动UI元素的区域,在手机接收到用户将浮动UI元素拖拽到该区域并释放拖拽(该操作可以为本申请实施例中的第四操作)后,手机可将该浮动UI元素删除,不再显示在手机屏幕上。例如,如图28中的(b)所示,手机显示浮动UI元素2803。手机接收到用户拖拽该浮动UI元素2803的操作后,可在手机屏幕上显示该浮动UI元素2803随用户手指的移动而移动的动画。另外手机还可显示删除按钮2804,该删除按钮2804所在区域即为用于删除浮动UI元素的区域。如果手机确定用户将浮动UI元素2803拖拽至该删除按钮2804所在区域,并释放拖拽,手机可将浮动UI元素2803删除,不再显示在手机屏幕上。
需要说明的是,以上实施例是以浮动UI元素的样式为圆形为例示出的,在其他一些实施例中,浮动UI元素的样式还可以是矩形、圆角矩形、椭圆形、多边形及其他不规则的UI形状,本实施例在此对浮动UI元素的样式不做具体限制。浮动UI元素中的内容(或者说能够以浮动UI元素呈现的元素)也不限于本实施例中的文本类,图片类,图标类,卡片类,列表联系人类,视频窗口类,文件资源类等元素。当然,浮动UI元素中的内容也可以是这些类型元素的彼此组合。另外,以上实施例中是以浮动UI元素显示在屏幕的左边缘或右边缘为例进行说明的,在其他一些实施例中,浮动UI元素也可以显示在屏幕的其他位置,如上边缘等,本实施例在此对浮动UI元素的显示位置(或者说布局位置)不做具体限制。浮动UI元素的显示位置具体可以是系统默认配置的,也可以提供设置界面供用户设置。可以看到的是,以上实施例中,是以浮动UI元素以不透明的方式,完整的显示在屏幕边缘为例示出的。在其他一些实施例中,结合图29,浮动UI元素,如,图29中的(a)所示的浮动UI元素2901也可以半透明的方式显示,或者如图29中的(b)所示,浮动UI元素2902也可以在屏幕边缘进行部分隐藏,或者如图29中的(c)所示,浮动UI元素2903在屏幕边缘进行部分隐藏。浮动UI元素以何种方式显示可以是系统默认配置的,也可以提供设置界面供用户设置。
另外,如上述图24-图27所示的示例,浮动UI元素组上可显示有提示信息,如角标,用于提示浮动UI元素组包括的浮动UI元素的个数。浮动UI元素组上是否显示角标,可以是系统默认的配置,也可以提供设置界面供用户设置。如,可提供设置界面供用户设置是否在浮动UI元素组上显示用于提示浮动UI元素组包括的浮动UI元素个数的角标,即可设置显示或不显示该角标。在其他一些实施例中,对于浮动UI元素而言,还可以显示其他角标。
如,如图30中的(a)所示,对于列表联系人类的浮动UI元素,如图30中的(a)所示的浮动UI元素3001,手机可以在接收到该联系人的消息时,在浮动UI元素上显示消息提醒信息,如图30中的(a)所示,可以角标3002的形式显示消息提醒信息,角标3002中的数字可用于指示接收到的消息数量。当然,是否显示该消息提醒信息可以是系统默认的配置,也可以提供设置界面供用户设置。如果在接收到联系人的消息时浮动UI元素上显示消息提醒信息,则在用户查看后该消息提醒信息可消失不再显示。
又如,可以在浮动UI元素上显示用于指示该浮动UI元素的来源的应用的标识,如应用的图标,以方便用户识别该浮动UI元素的原始来源,即来源于哪个应用。例如,继续以列表联系人类的浮动UI元素为例,手机显示如图30中的(b)所示的浮动UI元素3003,该浮动UI元素3003上显示有用于指示该浮动UI元素3003的来源的应用的图标3004。其中,是否显示用于指示浮动UI元素来源的应用的标识可以是系统默认的配置,也可以提供设置界面供用户设置。如系统默认配置对于列表联系人类的浮动UI元素默认会显示应用的标识。又如可提供设置界面供用户设置某一种或多种浮动UI元素的显示应用的标识,其他类型的浮动UI元素不显示。
再如,可以在浮动UI元素上显示用于指示该浮动UI元素类型(如链接)的符号。例如,以文件资源类的浮动UI元素为例,手机显示如图30中的(c)所示的浮动UI元素3005,该浮动UI元素3005上显示有用于指示该浮动UI元素3005的类型(如链接)的符号3006。
在其他一些实施例中,上述示例中的角标可能会存在同时出现的场景,如浮动UI元素上显示有消息提醒信息和用于指示该浮动UI元素来源的应用的标识。又如,浮动UI元素组上有消息提醒信息(如图30中的(a)所示)和用于提示浮动UI元素组包括的浮动UI元素的个数的提示信息(如图27中的(a)所示)。在浮动UI元素组上同时包含消息提醒信息和提示信息时,为了区分,可在浮动UI元素组的不同位置显示这两种信息,如在左上角显示消息提醒信息,在左下角显示提示信息。进一步的,还可以采用不同的显示形式区分这两种信息,以这两种信息均以角标的形式呈现为例,如消息提醒信息对应角标和提示信息对应角标的颜色不同,或者形状不同(如一个角标是圆形,一个角标是方形)等。在两种信息不是同时出现的场景中,也可以对这两种信息加以区分,具体可参照这两种信息同时出现场景中的描述。
另外,如上述实施例的描述,屏幕上显示的浮动UI元素可被用户拖拽,在屏幕上移动。在其他一些实施例中,在浮动UI元素在手机屏幕上移动的过程中,手机可根据浮动UI元素当前所处区域,显示对应提示(如以角标的形式提示),以提示用户当前区域是否支持交互。如,结合图31,以浮动UI元素为文本类的浮动UI元素为例。如图31中的(a)所示,手机显示浮动UI元素3101。用户可按下浮动UI元素3101并移动,以触发浮动UI元素3101随着用户手指的移动而移动。如图31中的(b)所示,在浮动UI元素3101移动到不可交互的区域时,浮动UI元素3101上显示角标3102,该角标3102用于提示用户当前区域不支持交互。如图31中的(c)所示,在浮动UI元素3101移动到可交互的区域,如输入框3103的所在区域时,浮动UI元素3101上显示角标3104,该角标3104用于提示用户当前区域支持交互。在用户释放拖拽后,该浮动UI元素3101所承载的文本可粘贴到输入框3103中。如图31中的(d)所示,在浮动UI元素3101移动到删除区域(该区域可以是预定义的)3106时,浮动UI元素3101上显示角标3105,该角标3105用于提示用户在该区域释放拖拽后,该浮动UI元素3101将被删除。
由上述实施例的描述可知,在通过拖拽的方式触发元素以浮动UI元素形式呈现的场景中,在用户对元素进行拖拽,并释放拖拽后,即可触发手机将该元素以浮动UI元素的形式呈现在手机屏幕上。在其他一些实施例中,也可预先定义触发区域,当用户拖拽元素至该触发区域,并在该触发区域释放拖拽时,手机可将该元素以浮动UI元素的形式呈现在手机屏幕上。如果用户拖拽元素至其他区域并释放拖拽,则不触发手机执行将元素以浮动UI元素的形式呈现的操作。
采用以上技术方案,手机可根据用户操作,将界面上的任意元素以浮动UI元素的形式显示在手机屏幕上。之后,无论用户在应用内切换页面或退出该应用或打开其他应用,该浮动UI元素可继续显示在手机屏幕上,用于实现跨应用的信息查看,文件传输,信息分享等操作。如,文本类,图片类,卡片类,文件资源类和视频窗口类的浮动UI元素支持通过即时通信应用发送给好友等交互。文件,图片,文字和URL等内容通过拖拽至列表联系人类的浮动UI元素上可直接将该内容分享给对应联系人。URL类的浮动UI元素支持直接点开跳转。从不同应用的联系人列表中提取出来的代表特定联系人的浮动UI元素,根据具体业务场景支持发送文件、拨打电话等功能。另外,结合系统现有的交互逻辑生成浮动UI元素。
图32为本申请实施例提供的一种显示装置的组成示意图。该装置可以应用于终端。如图32所示,该装置可以包括:显示单元3201和输入单元3202。
显示单元3201,用于在终端的显示屏上显示应用的第一界面,第一界面包括第一元素。
输入单元3202,用于接收对第一元素的拖拽操作。
显示单元3201,还用于在终端的显示屏上显示第一元素随拖拽操作移动的动画。
输入单元3202,还用于接收拖拽释放操作。
显示单元3201,还用于在终端的显示屏上显示第一浮动元素,第一浮动元素的内容与第一元素的内容相同。
进一步的,第一界面还可以包括在第一元素预设范围内的第二元素;第一浮动元素还包括第二元素的内容。
进一步的,第一元素可以为文本类元素,URL网址,图片类元素,图标类元素,卡片类元素,列表联系人类元素,视频窗口类元素或文件资源类元素中的一种或多种。
进一步的,输入单元3202,还用于接收第一操作。
显示单元3201,还用于将第一界面中支持浮动显示的元素以第一形式显示,不支持浮动显示的元素以第二形式显示;第一元素为支持浮动显示的元素,第一形式与第二形式不同。
进一步的,第一操作可以为对预定功能控件的操作;或第一操作可以为对第一界面中支持浮动显示的元素的操作。
进一步的,显示单元3201,还用于在终端的显示屏上显示第二界面,第二界面包括第三元素。
输入单元3202,还用于接收对第三元素的第二操作。
显示单元3201,还用于在终端的显示屏上显示第二浮动元素,第二浮动元素的内容与第三元素的内容相同,第二浮动元素和第一浮动元素按照预设排列规则显示在终端的显示屏上。其中,第二操作可以包括拖拽操作和拖拽释放操作,或第一元素为文本类元素或URL网址的情况下,第二操作也可以为复制操作。
进一步的,该显示装置还可以包括:确定单元3203,用于确定终端的显示屏上显示的浮动元素的个数小于N,N为在显示屏上允许同时显示的浮动元素的最大个数。
进一步的,该显示装置还可以包括:删除单元3204,用于在确定单元确定终端的显示屏上显示的浮动元素的个数等于N时,删除N个浮动元素中按照预设排列规则排在第一个的浮动UI元素,并显示第二浮动元素。
进一步的,确定单元3203,还用于确定终端的显示屏上显示的浮动元素中不存在与第二浮动元素类型相同的浮动元素。
进一步的,显示单元3201,还用于在确定单元3203确定终端的显示屏上显示的浮动元素中存在与第二浮动元素类型相同的第三浮动元素时,将第二浮动元素和第三浮动元素合并为浮动元素组后显示在终端的显示屏上。
进一步的,输入单元3202,还用于接收对浮动元素组的第三操作;显示单元3201,用于在终端的显示屏上显示第二浮动元素和第三浮动元素。
进一步的,输入单元3202,还用于接收对第一浮动元素的第四操作,删除单元3204,还用于删除第一浮动元素。或,删除单元3204,还用于在第一浮动元素在终端的显示屏上显示预设时长后,删除第一浮动元素。
进一步的,第一浮动元素上显示有以下标识中的一个或多个:应用的标识,消息提醒信息,指示信息;指示信息用于指示第一浮动元素的类型。
进一步的,在第一元素为文本类元素,URL网址,图片类元素或文件资源类元素的情况下,显示单元3201,还用于显示包括输入框的界面。
输入单元3202,还用于接收对第一浮动元素的拖拽操作,并在输入框位置的释放拖拽操作。
显示装置还可以包括:填充单元3205,用于将第一浮动元素对应的内容填充到输入框中。
进一步的,在第一元素为图标类元素或列表联系人类元素的情况下,输入单元3202,还用于接收对第一浮动元素的第五操作。
显示装置还可以包括:执行单元3206,用于执行第一功能,第一功能与终端接收到用户对第一元素的操作后执行的功能相同。
在另一种可能的实现方式中,在第一元素为列表联系人类元素的情况下,输入单元3202,还用于接收对界面中文本,URL网址或图片的拖拽操作,并在第一浮动元素位置的释放拖拽操作。
该显示装置还可以包括:发送单元3207,用于将文本,URL网址或图片发送给第一浮动元素对应联系人的终端。
在另一种可能的实现方式中,显示单元3201,用于在终端的显示屏上显示第一界面,第一界面包括第一元素,第一元素为文本类元素或URL网址。输入单元3202,用于接收对第一元素的复制操作。显示单元3201,还用于在终端的显示屏上显示第一浮动元素,第一浮动元素的内容与第一元素的内容相同。
本申请实施例还提供一种显示装置,该装置可以应用于电子设备,如上述实施例中的终端。该装置可以包括:处理器;用于存储处理器可执行指令的存储器;其中,处理器被配置为执行指令时使得该显示装置实现上述方法实施例中终端(如手机)执行的各个功能或者步骤。
本申请实施例提供一种电子设备(如上述终端),该电子设备包括显示屏,一个或多个处理器和存储器;显示屏,处理器和存储器耦合;存储器用于存储计算机程序代码,计算机程序代码包括计算机指令,当计算机指令被电子设备执行时,使得该电子设备实现上述方法实施例中终端(如手机)执行的各个功能或者步骤。当然,该电子设备包括但不限于上述显示屏、存储器和一个或多个处理器。例如,该电子设备的结构可以参考图3所示的手机的结构。
本申请实施例还提供一种芯片系统,该芯片系统可以应用于前述实施例中的终端。如图33所示,该芯片系统包括至少一个处理器3301和至少一个接口电路3302。该处理器3301可以是上述终端中的处理器。处理器3301和接口电路3302可通过线路互联。该处理器3301可以通过接口电路3302从上述终端的存储器接收并执行计算机指令。当计算机指令被处理器3301执行时,可使得终端执行上述实施例中手机执行的各个步骤。当然,该芯片系统还可以包含其他分立器件,本申请实施例对此不作具体限定。
本申请实施例还提供一种计算机可读存储介质,用于存储上述终端运行的计算机指令。
本申请实施例还提供一种计算机程序产品,包括上述终端运行的计算机指令。
通过以上实施方式的描述,所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述模块或单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个装置,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是一个物理单元或多个物理单元,即可以位于一个地方,或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个可读取存储介质中。基于这样的理解,本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该软件产品存储在一个存储介质中,包括若干指令用以使得一个设备(可以是单片机,芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(read only memory,ROM)、随机存取存储器(random access memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上内容,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何在本申请揭露的技术范围内的变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。
Claims (20)
1.一种界面元素显示方法,应用于终端,其特征在于,所述方法包括:
所述终端在所述终端的显示屏上显示应用的第一界面,所述第一界面包括第一元素;
所述终端在接收到对所述第一元素的拖拽操作后,在所述终端的显示屏上显示所述第一元素随所述拖拽操作移动的动画;
所述终端在接收到拖拽释放操作后,在所述终端的显示屏上显示第一浮动元素,所述第一浮动元素的内容与所述第一元素的内容相同。
2.根据权利要求1所述的方法,其特征在于,所述第一界面还包括在所述第一元素预设范围内的第二元素;
所述第一浮动元素还包括所述第二元素的内容。
3.根据权利要求1或2所述的方法,其特征在于,所述第一元素为文本类元素,统一资源定位符URL网址,图片类元素,图标类元素,卡片类元素,列表联系人类元素,视频窗口类元素或文件资源类元素中的一种或多种。
4.根据权利要求1-3中任一项所述的方法,其特征在于,在所述终端在所述显示屏上显示所述第一界面之后,所述方法还包括:
所述终端在接收到第一操作后,将所述第一界面中支持浮动显示的元素以第一形式显示,不支持浮动显示的元素以第二形式显示;所述第一元素为支持浮动显示的元素,所述第一形式与所述第二形式不同。
5.根据权利要求4所述的方法,其特征在于,所述第一操作为对预定功能控件的操作;或所述第一操作为对所述第一界面中支持浮动显示的元素的操作。
6.根据权利要求1-5中任一项所述的方法,其特征在于,所述终端在所述终端的显示屏上显示所述第一浮动元素之后,所述方法还包括:
所述终端在所述终端的显示屏上显示第二界面,所述第二界面包括第三元素;
所述终端在接收到对所述第三元素的第二操作后,在所述终端的显示屏上显示第二浮动元素,所述第二浮动元素的内容与所述第三元素的内容相同,所述第二浮动元素和所述第一浮动元素按照预设排列规则显示在所述终端的显示屏上;
所述第二操作包括拖拽操作和拖拽释放操作,或所述第二操作为复制操作。
7.根据权利要求6所述的方法,其特征在于,所述终端在所述终端的显示屏上显示所述第二浮动元素之前,所述方法还包括:
所述终端确定所述终端的显示屏上显示的浮动元素的个数小于N,N为在显示屏上允许同时显示的浮动元素的最大个数。
8.根据权利要求7所述的方法,其特征在于,所述方法还包括:
所述终端在确定所述终端的显示屏上显示的浮动元素的个数等于N时,删除N个浮动元素中按照所述预设排列规则排在第一个的浮动元素,并显示所述第二浮动元素。
9.根据权利要求6所述的方法,其特征在于,所述终端在所述终端的显示屏上显示所述第二浮动元素之前,所述方法还包括:
所述终端确定所述终端的显示屏上显示的浮动元素中不存在与所述第二浮动元素类型相同的浮动元素。
10.根据权利要求9所述的方法,其特征在于,所述方法还包括:
所述终端在确定所述终端的显示屏上显示的浮动元素中存在与所述第二浮动元素类型相同的第三浮动元素时,所述终端将所述第二浮动元素和所述第三浮动元素合并为浮动元素组后显示在所述终端的显示屏上。
11.根据权利要求10所述的方法,其特征在于,所述方法还包括:
所述终端在接收到对所述浮动元素组的第三操作后,在所述终端的显示屏上显示所述第二浮动元素和所述第三浮动元素。
12.根据权利要求1-11中任一项所述的方法,其特征在于,所述方法还包括:
所述终端在接收到对所述第一浮动元素的第四操作后,删除所述第一浮动元素;或,
所述终端在所述第一浮动元素在所述终端的显示屏上显示预设时长后,删除所述第一浮动元素。
13.根据权利要求1-12中任一项所述的方法,其特征在于,所述第一浮动元素上显示有以下标识中的一个或多个:所述应用的标识,消息提醒信息,指示信息;所述指示信息用于指示所述第一浮动元素的类型。
14.根据权利要求1-13中任一项所述的方法,其特征在于,在所述第一元素为文本类元素,URL网址,图片类元素或文件资源类元素的情况下,所述终端在显示屏上显示所述第一浮动元素之后,所述方法还包括:
所述终端显示包括输入框的界面;
所述终端在接收到对所述第一浮动元素的拖拽操作,并在所述输入框位置的释放拖拽操作后,所述终端将所述第一浮动元素对应的内容填充到所述输入框中。
15.根据权利要求1-14中任一项所述的方法,其特征在于,在所述第一元素为图标类元素或列表联系人类元素的情况下,所述终端在显示屏上显示所述第一浮动元素之后,所述方法还包括:
所述终端在接收到对所述第一浮动元素的第五操作后,所述终端执行第一功能,所述第一功能与所述终端接收到用户对所述第一元素的操作后执行的功能相同。
16.根据权利要求1-15中任一项所述的方法,其特征在于,在所述第一元素为列表联系人类元素的情况下,所述终端在显示屏上显示所述第一浮动元素之后,所述方法还包括:
所述终端在接收到对界面中文本,URL网址或图片的拖拽操作,并在所述第一浮动元素位置的释放拖拽操作后,所述终端将所述文本,URL网址或图片发送给所述第一浮动元素对应联系人的终端。
17.一种界面元素显示方法,应用于终端,其特征在于,所述方法包括:
所述终端在所述终端的显示屏上显示第一界面,所述第一界面包括第一元素,所述第一元素为文本类元素或统一资源定位符URL网址;
所述终端在接收到对所述第一元素的复制操作后,在所述终端的显示屏上显示第一浮动元素,所述第一浮动元素的内容与所述第一元素的内容相同。
18.根据权利要求17所述的方法,其特征在于,所述终端在显示屏上显示所述第一浮动元素之后,所述方法还包括:
所述终端显示包括输入框的界面;
所述终端在接收到对所述第一浮动元素的拖拽操作,并在所述输入框位置的释放拖拽操作后,所述终端将所述第一浮动元素对应的内容填充到所述输入框中。
19.一种显示装置,其特征在于,包括:处理器;用于存储所述处理器可执行指令的存储器;
其中,所述处理器被配置为执行所述指令时使得所述显示装置实现如权利要求1-18中任一项所述的方法。
20.一种计算机可读存储介质,其上存储有计算机程序指令,其特征在于,所述计算机程序指令被电子设备执行时使得所述电子设备实现如权利要求1-18中任一项所述的方法。
Priority Applications (6)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011564390.7A CN114756151A (zh) | 2020-12-25 | 2020-12-25 | 一种界面元素显示方法及设备 |
CN202210122687.0A CN114647351B (zh) | 2020-12-25 | 2020-12-25 | 一种界面元素显示方法及设备 |
CN202080100104.3A CN115516413A (zh) | 2020-04-24 | 2020-12-31 | 一种对象拖拽方法及设备 |
US17/920,867 US20240053879A1 (en) | 2020-04-24 | 2020-12-31 | Object Drag Method and Device |
PCT/CN2020/142420 WO2021212922A1 (zh) | 2020-04-24 | 2020-12-31 | 一种对象拖拽方法及设备 |
EP20932244.5A EP4130963A4 (en) | 2020-04-24 | 2020-12-31 | METHOD AND DEVICE FOR SLIDING OBJECTS |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011564390.7A CN114756151A (zh) | 2020-12-25 | 2020-12-25 | 一种界面元素显示方法及设备 |
Related Child Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210122687.0A Division CN114647351B (zh) | 2020-12-25 | 2020-12-25 | 一种界面元素显示方法及设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114756151A true CN114756151A (zh) | 2022-07-15 |
Family
ID=81994134
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011564390.7A Pending CN114756151A (zh) | 2020-04-24 | 2020-12-25 | 一种界面元素显示方法及设备 |
CN202210122687.0A Active CN114647351B (zh) | 2020-12-25 | 2020-12-25 | 一种界面元素显示方法及设备 |
Family Applications After (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210122687.0A Active CN114647351B (zh) | 2020-12-25 | 2020-12-25 | 一种界面元素显示方法及设备 |
Country Status (1)
Country | Link |
---|---|
CN (2) | CN114756151A (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117453087A (zh) * | 2022-07-26 | 2024-01-26 | 荣耀终端有限公司 | 卡片显示方法、终端设备 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110333814A (zh) * | 2019-05-31 | 2019-10-15 | 华为技术有限公司 | 一种分享内容的方法及电子设备 |
CN111782427A (zh) * | 2020-07-16 | 2020-10-16 | Oppo广东移动通信有限公司 | 一种内容操作方法、装置及计算机可读存储介质 |
Family Cites Families (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9612732B2 (en) * | 2014-11-13 | 2017-04-04 | Microsoft Technology Licensing, Llc | Content transfer to non-running targets |
CN104918095A (zh) * | 2015-05-19 | 2015-09-16 | 乐视致新电子科技(天津)有限公司 | 多媒体流数据预览展示方法及装置 |
CN107925694B (zh) * | 2016-08-10 | 2020-02-21 | 华为技术有限公司 | 管理通知消息的方法、终端及计算机可读存储介质 |
CN107479784B (zh) * | 2017-07-31 | 2022-01-25 | 腾讯科技(深圳)有限公司 | 表情展示方法、装置及计算机可读存储介质 |
CN107908489A (zh) * | 2017-11-27 | 2018-04-13 | 维沃移动通信有限公司 | 复制粘贴的方法和移动终端 |
CN108762619B (zh) * | 2018-06-08 | 2021-02-23 | Oppo广东移动通信有限公司 | 浮标显示方法、装置、终端及存储介质 |
CN111290675B (zh) * | 2020-03-02 | 2023-02-17 | Oppo广东移动通信有限公司 | 截屏图片的分享方法、装置、终端及存储介质 |
CN114356197A (zh) * | 2020-04-24 | 2022-04-15 | 华为技术有限公司 | 数据的传输方法及装置 |
CN111858522A (zh) * | 2020-08-06 | 2020-10-30 | Oppo广东移动通信有限公司 | 文件分享方法、装置、终端及存储介质 |
-
2020
- 2020-12-25 CN CN202011564390.7A patent/CN114756151A/zh active Pending
- 2020-12-25 CN CN202210122687.0A patent/CN114647351B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110333814A (zh) * | 2019-05-31 | 2019-10-15 | 华为技术有限公司 | 一种分享内容的方法及电子设备 |
CN111782427A (zh) * | 2020-07-16 | 2020-10-16 | Oppo广东移动通信有限公司 | 一种内容操作方法、装置及计算机可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN114647351A (zh) | 2022-06-21 |
CN114647351B (zh) | 2023-03-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110489043B (zh) | 一种悬浮窗口的管理方法及相关装置 | |
CN114764298B (zh) | 一种跨设备的对象拖拽方法及设备 | |
CN108496150B (zh) | 一种屏幕截图和读取的方法及终端 | |
CN110865744B (zh) | 一种分屏显示方法与电子设备 | |
CN109683761B (zh) | 内容收藏方法、装置及存储介质 | |
CN116055610B (zh) | 显示图形用户界面的方法和移动终端 | |
CN114710575A (zh) | 显示方法及相关装置 | |
CN110825301A (zh) | 一种界面切换方法及电子设备 | |
CN111078091A (zh) | 分屏显示的处理方法、装置及电子设备 | |
CN114281225A (zh) | 一种窗口显示方法及设备 | |
WO2018072149A1 (zh) | 图片处理方法、装置、电子设备及图形用户界面 | |
CN113805980A (zh) | 一种显示通知的方法和终端 | |
CN110806831A (zh) | 一种触摸屏的响应方法及电子设备 | |
CN112068907A (zh) | 一种界面显示方法和电子设备 | |
CN112835495B (zh) | 开启应用程序的方法、装置及终端设备 | |
CN113852714A (zh) | 一种用于电子设备的交互方法和电子设备 | |
CN114647351B (zh) | 一种界面元素显示方法及设备 | |
CN115801943A (zh) | 显示方法、电子设备及存储介质 | |
CN113961115A (zh) | 对象编辑方法、电子设备、介质以及程序产品 | |
CN115150502A (zh) | 一种应用小部件的显示方法及设备 | |
CN114244951B (zh) | 应用程序打开页面的方法及其介质和电子设备 | |
US20240126404A1 (en) | Information Display Method and Electronic Device | |
EP4365722A1 (en) | Method for displaying dock bar in launcher and electronic device | |
CN117573262A (zh) | 界面显示方法、界面定制方法、装置、设备及存储介质 | |
CN115268735A (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 |