CN114138143A - 查询界面的显示方法、装置、终端及存储介质 - Google Patents

查询界面的显示方法、装置、终端及存储介质 Download PDF

Info

Publication number
CN114138143A
CN114138143A CN202111396911.7A CN202111396911A CN114138143A CN 114138143 A CN114138143 A CN 114138143A CN 202111396911 A CN202111396911 A CN 202111396911A CN 114138143 A CN114138143 A CN 114138143A
Authority
CN
China
Prior art keywords
control
display
screening
search
information
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
Application number
CN202111396911.7A
Other languages
English (en)
Inventor
皮思遥
阮超
王园园
欧阳雨婷
高天
刘祥棉
刘晓
毛涛
赵劲松
李思琦
夏明钰
夏志迪
周飞
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Sankuai Online Technology Co Ltd
Original Assignee
Beijing Sankuai Online Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Sankuai Online Technology Co Ltd filed Critical Beijing Sankuai Online Technology Co Ltd
Priority to CN202111396911.7A priority Critical patent/CN114138143A/zh
Publication of CN114138143A publication Critical patent/CN114138143A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817Interaction 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
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/24Querying
    • G06F16/248Presentation of query results
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction 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/0485Scrolling or panning
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Abstract

本申请提供了一种查询界面的显示方法、装置、终端及存储介质,属于互联网技术领域。该方法包括:显示查询界面,查询界面包括搜索控件和筛选控件,且搜索控件和筛选控件设置在查询界面中的同一布局容器内;响应于接收对筛选控件的滑动操作,确定滑动操作对应的滑动距离;基于滑动距离,确定搜索控件的形态显示信息和图文显示信息,以及,确定筛选控件的位置显示信息;基于形态显示信息、图文显示信息和位置显示信息,调整搜索控件和筛选控件在布局容器中的显示布局。由于接收对筛选控件的滑动操作时,通过形态显示信息、图文显示信息和位置显示信息,动态调整搜索控件和筛选控件在布局容器中的显示布局,提高了显示界面的有效屏占比。

Description

查询界面的显示方法、装置、终端及存储介质
技术领域
本申请涉及互联网技术领域,特别涉及一种查询界面的显示方法、装置、终端及存储介质。
背景技术
随着互联网技术的发展,越来越多的用户通过互联网平台查询信息。目前,用户可以基于搜索控件输入关键字来搜索目标信息,也可以基于筛选控件筛查出同一类别的多个信息,从同一类别的多个信息中查找目标信息。
相关技术中,搜索控件和筛选控件设置在同一显示界面内;当用户打算搜索信息时,可以通过触发搜索控件,输入关键字来搜索信息,当用户打算筛选某一类别的信息时,可以通过触发筛选控件来筛选该类别的信息。例如,在音乐应用上,用户通过搜索控件输入关键字来搜索想听的歌曲;再如,在新闻媒体应用上,用户通过筛选控件筛选出某一类别的多个新闻,从该类别的多个新闻中查找想看的热点新闻。
但是,由于在显示界面内,搜索控件和筛选控件之间是相互独立的,这样当筛选控件的数量较多时,导致搜索控件和筛选控件所占用的显示区域较大,所以降低了显示界面的有效屏占比。
发明内容
本申请实施例提供了一种查询界面的显示方法、装置、终端及存储介质,能够提高显示界面的有效屏占比。所述技术方案如下:
根据本申请实施例的一方面,提供了一种查询界面的显示方法,所述方法包括:显示查询界面,所述查询界面包括搜索控件和筛选控件,且所述搜索控件和所述筛选控件设置在所述查询界面中的同一布局容器内;
响应于接收对所述筛选控件的滑动操作,确定所述滑动操作对应的滑动距离,所述滑动操作用于调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局;
基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,以及,确定所述筛选控件的位置显示信息,所述形态显示信息和所述图文显示信息用于表示所述筛选控件被滑动后,所述搜索控件的形态和图文,所述位置显示信息用于表示所述筛选控件被滑动后,所述筛选控件的位置;
基于所述形态显示信息、所述图文显示信息和所述位置显示信息,调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局。
在一种可能的实现方式中,所述确定所述滑动操作对应的滑动距离,包括:
监听所述筛选控件上的滚动事件,确定所述滚动事件的滚动距离为所述滑动操作对应的滑动距离;或者,
监听所述筛选控件中第一个筛选子控件偏离原位置的距离,得到所述滑动操作对应的滑动距离。
在另一种可能的实现方式中,所述形态显示信息包括所述搜索控件的显示宽度,所述图文显示信息包括图标信息和文本信息中的至少一项;
所述基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,包括:
在所述滑动距离不大于零的情况下,确定所述搜索控件的显示宽度为所述搜索控件的初始宽度,确定所述图文显示信息包括所述图标信息和所述文本信息;
在所述滑动距离大于零的情况下,基于所述初始宽度与所述滑动距离的差值,确定所述搜索控件的显示宽度,确定所述图文显示信息包括所述图标信息。
在另一种可能的实现方式中,所述基于所述初始宽度与所述滑动距离的差值,确定所述搜索控件的显示宽度,包括:
在所述差值不小于所述搜索控件的最小宽度的情况下,确定所述搜索控件的显示宽度为所述差值;
在所述差值小于所述搜索控件的最小宽度的情况下,确定所述搜索控件的显示宽度为所述最小宽度。
在另一种可能的实现方式中,所述筛选控件包括多个筛选子控件;
所述确定所述筛选控件的位置显示信息,包括:
对于每个筛选子控件,确定所述筛选子控件的初始位置;
确定所述初始位置与所述滑动距离之和为所述筛选子控件的位置显示信息。
在另一种可能的实现方式中,所述形态显示信息包括所述搜索控件的显示宽度,所述图文显示信息包括图标信息和文本信息中的至少一项;
所述基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,包括:
在所述滑动距离不大于零的情况下,确定所述搜索控件的显示宽度为所述搜索控件的初始宽度,确定所述图文显示信息包括所述图标信息和所述文本信息;
响应于所述滑动距离大于零,基于所述搜索控件与所述筛选控件之间的边距、所述滑动距离、所述搜索控件的初始宽度和所述搜索控件的最小宽度,确定所述搜索控件的显示宽度,确定所述图文显示信息包括所述图标信息。
在另一种可能的实现方式中,所述基于所述搜索控件与所述筛选控件之间的边距、所述滑动距离、所述搜索控件的初始宽度和所述搜索控件的最小宽度,确定所述搜索控件的显示宽度,包括:
在所述滑动距离大于第一距离的情况下,确定所述搜索控件的显示宽度为所述搜索控件的最小宽度,所述第一距离为所述边距与所述初始宽度之和与第二距离的差值,所述第二距离为所述最小宽度的一半;
在所述滑动距离不大于所述第一距离的情况下,确定所述搜索控件的显示宽度为所述初始宽度与所述移动距离的差值。
在另一种可能的实现方式中,所述筛选控件包括多个筛选子控件;
将所述搜索控件和所述筛选控件设置在所述查询界面中的同一布局容器内的过程,包括:
从所述多个筛选子控件中确定目标筛选控件,所述目标筛选控件为所述多个筛选子控件中第一个筛选子控件或者最后一个筛选子控件;
将所述搜索控件与所述目标筛选控件显示在所述布局容器的同一区域,其中,所述筛选控件在所述布局容器内的显示优先级低于所述搜索控件在所述布局容器内的显示优先级。
在另一种可能的实现方式中,所述基于所述形态显示信息、所述图文显示信息和所述位置显示信息,调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局,包括:
基于所述形态显示信息,调整所述搜索控件的显示尺寸,以及,基于所述图文显示信息,调整所述搜索控件的图文信息,以及,基于所述位置显示信息,调整所述筛选控件在所述布局容器内的显示位置。
在另一种可能的实现方式中,所述图文显示信息包括图标信息;所述基于所述图文显示信息,调整所述搜索控件的图文信息,包括:
将所述搜索控件从第一显示模式切换为第二显示模式,所述第一显示模式包括图标信息和文本信息,所述第二显示模式包括图标信息。
在另一种可能的实现方式中,所述方法还包括:
响应于监听到所述搜索控件上的点击事件,显示搜索界面,所述搜索界面内设置有搜索输入框;或者,
响应于监听到所述筛选控件包括的任一筛选子控件上的点击事件,显示所述筛选子控件对应的类别结果信息。
在另一种可能的实现方式中,所述显示所述筛选子控件对应的类别结果信息之后,所述方法还包括:
响应于监听到所述搜索控件上的点击事件,显示搜索界面,所述搜索界面内设置有搜索输入框,接收所述搜索输入框内输入的关键字信息,基于所述关键字信息,从所述类别结果信息中确定与所述关键字信息匹配的搜索结果信息。
根据本申请实施例的另一方面,提供了一种查询界面的显示装置,所述装置包括:
显示模块,用于显示查询界面,所述查询界面包括搜索控件和筛选控件,且所述搜索控件和所述筛选控件设置在所述查询界面中的同一布局容器内;
第一确定模块,用于响应于接收对所述筛选控件的滑动操作,确定所述滑动操作对应的滑动距离,所述滑动操作用于调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局;
第二确定模块,用于基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,以及,确定所述筛选控件的位置显示信息,所述形态显示信息和所述图文显示信息用于表示所述筛选控件被滑动后,所述搜索控件的形态和图文,所述位置显示信息用于表示所述筛选控件被滑动后,所述筛选控件的位置;
调整模块,用于基于所述形态显示信息、所述图文显示信息和所述位置显示信息,调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局。
在一种可能的实现方式中,所述第一确定模块,用于监听所述筛选控件上的滚动事件,确定所述滚动事件的滚动距离为所述滑动操作对应的滑动距离;或者,
监听所述筛选控件中第一个筛选子控件偏离原位置的距离,得到所述滑动操作对应的滑动距离。
在另一种可能的实现方式中,所述形态显示信息包括所述搜索控件的显示宽度,所述图文显示信息包括图标信息和文本信息中的至少一项;所述第二确定模块,用于在所述滑动距离不大于零的情况下,确定所述搜索控件的显示宽度为所述搜索控件的初始宽度,确定所述图文显示信息包括所述图标信息和所述文本信息;在所述滑动距离大于零的情况下,基于所述初始宽度与所述滑动距离的差值,确定所述搜索控件的显示宽度,确定所述图文显示信息包括所述图标信息。
在另一种可能的实现方式中,所述第二确定模块,用于在所述差值不小于所述搜索控件的最小宽度的情况下,确定所述搜索控件的显示宽度为所述差值;在所述差值小于所述搜索控件的最小宽度的情况下,确定所述搜索控件的显示宽度为所述最小宽度。
在另一种可能的实现方式中,所述筛选控件包括多个筛选子控件;所述第二确定模块,用于对于每个筛选子控件,确定所述筛选子控件的初始位置;确定所述初始位置与所述滑动距离之和为所述筛选子控件的位置显示信息。
在另一种可能的实现方式中,所述形态显示信息包括所述搜索控件的显示宽度,所述图文显示信息包括图标信息和文本信息中的至少一项;所述第二确定模块,用于在所述滑动距离不大于零的情况下,确定所述搜索控件的显示宽度为所述搜索控件的初始宽度,确定所述图文显示信息包括所述图标信息和所述文本信息;响应于所述滑动距离大于零,基于所述搜索控件与所述筛选控件之间的边距、所述滑动距离、所述搜索控件的初始宽度和所述搜索控件的最小宽度,确定所述搜索控件的显示宽度,确定所述图文显示信息包括所述图标信息。
在另一种可能的实现方式中,所述第二确定模块,用于在所述滑动距离大于第一距离的情况下,确定所述搜索控件的显示宽度为所述搜索控件的最小宽度,所述第一距离为所述边距与所述初始宽度之和与第二距离的差值,所述第二距离为所述最小宽度的一半;在所述滑动距离不大于所述第一距离的情况下,确定所述搜索控件的显示宽度为所述初始宽度与所述移动距离的差值。
在另一种可能的实现方式中,所述筛选控件包括多个筛选子控件;所述显示模块,用于从所述多个筛选子控件中确定目标筛选控件,所述目标筛选控件为所述多个筛选子控件中第一个筛选子控件或者最后一个筛选子控件;将所述搜索控件与所述目标筛选控件显示在所述布局容器的同一区域,其中,所述筛选控件在所述布局容器内的显示优先级低于所述搜索控件在所述布局容器内的显示优先级。
在另一种可能的实现方式中,所述调整模块,用于基于所述形态显示信息,调整所述搜索控件的显示尺寸,以及,基于所述图文显示信息,调整所述搜索控件的图文信息,以及,基于所述位置显示信息,调整所述筛选控件在所述布局容器内的显示位置。
在另一种可能的实现方式中,所述图文显示信息包括图标信息;所述调整模块,用于将所述搜索控件从第一显示模式切换为第二显示模式,所述第一显示模式包括图标信息和文本信息,所述第二显示模式包括图标信息。
在另一种可能的实现方式中,所述显示模块,还用于响应于监听到所述搜索控件上的点击事件,显示搜索界面,所述搜索界面内设置有搜索输入框;或者,所述显示模块,还用于响应于监听到所述筛选控件包括的任一筛选子控件上的点击事件,显示所述筛选子控件对应的类别结果信息。
在另一种可能的实现方式中,所述显示模块,还用于响应于监听到所述搜索控件上的点击事件,显示搜索界面,所述搜索界面内设置有搜索输入框,接收所述搜索输入框内输入的关键字信息,基于所述关键字信息,从所述类别结果信息中确定与所述关键字信息匹配的搜索结果信息。
根据本申请实施例的另一方面,提供了一种终端,所述终端包括:处理器和存储器,所述存储器中存储有至少一条程序代码,所述至少一条程序代码由所述处理器加载并执行以实现上述任一可能实现方式所述的查询界面的显示方法中的操作。
根据本申请实施例的另一方面,提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有至少一条程序代码,所述至少一条程序代码由处理器加载并具有以实现如所述查询界面的显示方法中所执行的操作。
根据本申请实施例的另一方面,提供了一种计算机程序产品,所述计算机程序产品包括至少一条程序代码,所述至少一条程序代码由处理器加载并执行,以实现上述任一种可能实现方式中所述的查询界面的显示方法所执行的操作。
本申请实施例提供的技术方案的有益效果至少包括:
本申请实施例提供了一种查询界面的显示方法,由于接收对筛选控件的滑动操作时,能够根据滑动距离确定的形态显示信息、图文显示信息和位置显示信息,动态调整搜索控件和筛选控件在布局容器中的显示布局,实现了将搜索控件和筛选控件两个控件设置在同一布局容器内,进而减少了搜索控件和筛选控件所占用的显示区域,所以提高了显示界面的有效屏占比。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种查询界面的显示方法的流程图;
图2是本申请实施例提供的一种查询界面的显示方法的流程图;
图3是本申请实施例提供的一种查询界面内的布局容器的布局示意图;
图4是本申请实施例提供的一种筛选控件和搜索控件在布局容器中的显示布局的示意图;
图5是本申请实施例提供的一种筛选控件和搜索控件在布局容器中的显示布局的示意图;
图6是本申请实施例提供的一种搜索控件的线性布局示意图;
图7是本申请实施例提供的一种查询界面的显示方法的流程示意图;
图8是本申请实施例提供的一种筛选控件和搜索控件初始状态时在布局容器中的显示布局的示意图;
图9是本申请实施例提供的一种筛选控件和搜索控件中间状态时在布局容器中的显示布局的示意图;
图10是本申请实施例提供的一种搜索控件的显示模式切换示意图;
图11是本申请实施例提供的一种查询界面的显示方法的流程图;
图12是本申请实施例提供的一种查询界面的显示方法的流程示意图;
图13是本申请实施例提供的一种筛选控件和搜索控件中间状态时在布局容器中的显示布局的示意图;
图14是本申请实施例提供的一种查询界面的显示装置的结构框图;
图15是本申请实施例提供的一种终端的结构框图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施方式作进一步地详细描述。
图1是本申请实施例提供的一种查询界面的显示方法的流程图。参见图1,该方法包括以下步骤:
101、显示查询界面,查询界面包括搜索控件和筛选控件,且搜索控件和筛选控件设置在查询界面中的同一布局容器内。
102、响应于接收对筛选控件的滑动操作,确定滑动操作对应的滑动距离,滑动操作用于调整搜索控件和筛选控件在布局容器中的显示布局。
103、基于滑动距离,确定搜索控件的形态显示信息和图文显示信息,以及,确定筛选控件的位置显示信息,形态显示信息和图文显示信息用于表示筛选控件被滑动后,搜索控件的形态和图文,位置显示信息用于表示筛选控件被滑动后,筛选控件的位置。
104、基于形态显示信息、图文显示信息和位置显示信息,调整搜索控件和筛选控件在布局容器中的显示布局。
在一种可能的实现方式中,确定滑动操作对应的滑动距离,包括:
监听筛选控件上的滚动事件,确定滚动事件的滚动距离为滑动操作对应的滑动距离;或者,
监听筛选控件中第一个筛选子控件偏离原位置的距离,得到滑动操作对应的滑动距离。
在另一种可能的实现方式中,形态显示信息包括搜索控件的显示宽度,图文显示信息包括图标信息和文本信息中的至少一项;
基于滑动距离,确定搜索控件的形态显示信息和图文显示信息,包括:
在滑动距离不大于零的情况下,确定搜索控件的显示宽度为搜索控件的初始宽度,确定图文显示信息包括图标信息和文本信息;
在滑动距离大于零的情况下,基于初始宽度与滑动距离的差值,确定搜索控件的显示宽度,确定图文显示信息包括图标信息。
在另一种可能的实现方式中,基于初始宽度与滑动距离的差值,确定搜索控件的显示宽度,包括:
在差值不小于搜索控件的最小宽度的情况下,确定搜索控件的显示宽度为差值;
在差值小于搜索控件的最小宽度的情况下,确定搜索控件的显示宽度为最小宽度。
在另一种可能的实现方式中,筛选控件包括多个筛选子控件;
确定筛选控件的位置显示信息,包括:
对于每个筛选子控件,确定筛选子控件的初始位置;
确定初始位置与滑动距离之和为筛选子控件的位置显示信息。
在另一种可能的实现方式中,形态显示信息包括搜索控件的显示宽度,图文显示信息包括图标信息和文本信息中的至少一项;
基于滑动距离,确定搜索控件的形态显示信息和图文显示信息,包括:
在滑动距离不大于零的情况下,确定搜索控件的显示宽度为搜索控件的初始宽度,确定图文显示信息包括图标信息和文本信息;
响应于滑动距离大于零,基于搜索控件与筛选控件之间的边距、滑动距离、搜索控件的初始宽度和搜索控件的最小宽度,确定搜索控件的显示宽度,确定图文显示信息包括图标信息。
在另一种可能的实现方式中,基于搜索控件与筛选控件之间的边距、滑动距离、搜索控件的初始宽度和搜索控件的最小宽度,确定搜索控件的显示宽度,包括:
在滑动距离大于第一距离的情况下,确定搜索控件的显示宽度为搜索控件的最小宽度,第一距离为边距与初始宽度之和与第二距离的差值,第二距离为最小宽度的一半;
在滑动距离不大于第一距离的情况下,确定搜索控件的显示宽度为初始宽度与移动距离的差值。
在另一种可能的实现方式中,筛选控件包括多个筛选子控件;
将搜索控件和筛选控件设置在查询界面中的同一布局容器内的过程,包括:
从多个筛选子控件中确定目标筛选控件,目标筛选控件为多个筛选子控件中第一个筛选子控件或者最后一个筛选子控件;
将搜索控件与目标筛选控件显示在布局容器的同一区域,其中,筛选控件在布局容器内的显示优先级低于搜索控件在布局容器内的显示优先级。
在另一种可能的实现方式中,基于形态显示信息、图文显示信息和位置显示信息,调整搜索控件和筛选控件在布局容器中的显示布局,包括:
基于形态显示信息,调整搜索控件的显示尺寸,以及,基于图文显示信息,调整搜索控件的图文信息,以及,基于位置显示信息,调整筛选控件在布局容器内的显示位置。
在另一种可能的实现方式中,图文显示信息包括图标信息;基于图文显示信息,调整搜索控件的图文信息,包括:
将搜索控件从第一显示模式切换为第二显示模式,第一显示模式包括图标信息和文本信息,第二显示模式包括图标信息。
在另一种可能的实现方式中,方法还包括:
响应于监听到搜索控件上的点击事件,显示搜索界面,搜索界面内设置有搜索输入框;或者,
响应于监听到筛选控件包括的任一筛选子控件上的点击事件,显示筛选子控件对应的类别结果信息。
在另一种可能的实现方式中,显示筛选子控件对应的类别结果信息之后,方法还包括:
响应于监听到搜索控件上的点击事件,显示搜索界面,搜索界面内设置有搜索输入框,接收搜索输入框内输入的关键字信息,基于关键字信息,从类别结果信息中确定与关键字信息匹配的搜索结果信息。
本申请实施例提供了一种查询界面的显示方法,由于接收对筛选控件的滑动操作时,能够根据滑动距离确定的形态显示信息、图文显示信息和位置显示信息,动态调整搜索控件和筛选控件在布局容器中的显示布局,实现了将搜索控件和筛选控件两个控件设置在同一布局容器内,进而减少了搜索控件和筛选控件所占用的显示区域,所以提高了显示界面的有效屏占比。
图2是本申请实施例提供的一种查询界面的显示方法的流程图,由终端执行。在本申请实施例中,以监听筛选控件上的滚动事件确定滑动距离为例进行说明。参见图2,该方法包括以下步骤:
201、终端显示查询界面,查询界面包括搜索控件和筛选控件,且搜索控件和筛选控件设置在查询界面中的同一布局容器内。
在一种可能的实现方式中,终端内安装有多个应用,一个应用对应一个应用图标,查询界面为应用的主界面。相应的,本步骤为:响应于接收到任一应用对应的应用图标上的指定操作,终端显示该应用的查询界面。可选地,指定操作为点击操作。
在本申请实施例中,由于查询界面为应用的主界面,当打开应用之后,用户可以直接通过查询界面查询信息,从而节省了用户查询信息的操作步骤,所以提高了查询信息的效率。
在一种可能的实现方式中,布局容器为FrameLayout(FrameLayout,帧布局)容器。在本申请实施例中,对搜索控件和筛选控件在布局容器内的位置不作具体限定,可以根据需要进行设定并修改。可选地,搜索控件与筛选控件之间为线性布局。例如,参见图3,搜索控件与筛选控件并列设置在布局容器内。在水平方向上,搜索按钮设置在布局容器的左侧,筛选按钮设置在布局容器的右侧;在垂直方向上,搜索按钮和筛选按钮垂直居中设置在布局容器内。
在本申请实施例中,由于搜索控件和筛选控件设置在查询界面中的同一布局容器内,从而减少了搜索控件和筛选控件所占用的显示区域,所以提高了显示界面的有效屏占比。
在一种可能的实现方式中,筛选控件包括多个筛选子控件。其中,终端将搜索控件和筛选控件设置在查询界面中的同一布局容器内有两种实现方式;
第一种实现方式,终端将搜索控件和筛选控件设置在查询界面中的同一布局容器内的过程为:终端从多个筛选子控件中确定目标筛选控件,目标筛选控件为多个筛选子控件中第一个筛选子控件或者最后一个筛选子控件;将搜索控件与目标筛选控件显示在同一区域内,其中,筛选控件的显示优先级低于搜索控件的显示优先级。
需要说明的一点是,一个筛选子控件对应一个类别,在本申请实施例中,对多个筛选子控件的数量不作具体要求,可以根据需要进行设定并修改。例如,多个筛选子控件的数量为6个;分别为:“美食”子控件、“休闲”子控件、“景点”子控件、“购物”子控件、“酒店”子控件和“电影”子控件。
在本申请实施例中,搜索控件和筛选控件设置在查询界面中的同一布局容器内,且搜索控件与目标筛选控件显示在同一区域内,进一步减少了搜索控件和筛选控件所占用的显示区域,提高了显示界面的有效屏占比。
需要说明的另一点是,目标筛选控件的尺寸不大于搜索控件的尺寸。在一种可能的实现方式中,目标筛选控件的尺寸与搜索控件的尺寸相同。例如,参见图4,多个筛选子控件包括“第0项”筛选子控件、“第1项”筛选子控件、“第2项”筛选子控件、“第3项”筛选子控件等。目标筛选控件为第一个筛选子控件,也即,“第0项”筛选子控件;其中,搜索控件与“第0项”筛选子控件显示在同一区域内,且“第0项”筛选子控件尺寸与搜索控件的尺寸相同。
在本申请实施例中,通过在筛选控件内设置“第0项”筛选子控件,在未触发滑动操作时,搜索按钮和“第1项”筛选子控件之间存在边距,且在触发滑动操作时,搜索按钮和“第1项”筛选子控件之间也会重合,实现互动,从而提高了该显示方法的灵活性。
第二种实现方式,终端将搜索控件和筛选控件设置在查询界面中的同一布局容器内的过程为:确定搜索控件与筛选控件的重叠区域,根据重叠区域的范围,将搜索控件和筛选控件设置在查询界面中;其中,筛选控件在布局容器内的显示优先级低于搜索控件在布局容器内的显示优先级。
可选的,参见图5,重叠区域的范围与搜索控件的显示宽度。相应的,终端确定重叠区域的范围的步骤为:终端确定搜索控件的最大宽度与最小宽度的差值为重叠区域的范围。
在本申请实施例中,通过将搜索控件和筛选控件重叠设置在查询界面中,在未触发滑动操作时,搜索按钮和“第1项”筛选子控件之间存在边距,且在触发滑动操作时,搜索按钮和“第1项”筛选子控件之间也会重合,实现互动,从而提高了该显示方法的灵活性。
202、终端响应于接收对筛选控件的滑动操作,监听筛选控件上的滚动事件,确定滚动事件的滚动距离为滑动操作对应的滑动距离,该滑动操作用于调整搜索控件和筛选控件在布局容器中的显示布局。
在一种可能的实现方式中,筛选控件包括多个筛选子控件,用户可以通过滑动操作调整搜索控件和筛选控件在布局容器中的显示布局,从而使多个筛选子控件在布局容器中滚动显示,用户可以从多个筛选子控件中选择任一合适的筛选子控件。可选地,筛选控件为CategoryListView(类别列表控件)类型的控件,该类型的控件继承自RecyclerView(循环控件),该类型的控件可以实现筛选子控件在布局容器内的水平滚动功能。
在一种可能的实现方式中,终端内安装的操作系统为安卓系统,终端通过RecyclerView.OnScrollListener()监听筛选控件上的滚动事件。相应的,本步骤为:终端响应于接收对筛选控件的滑动操作,通过RecyclerView.OnScrollListener()监听该滑动操作对应的滚动事件,确定滚动事件的滚动距离为该滑动操作对应的滑动距离。
在本申请实施例中,由于终端通过监听筛选控件上的滚动事件确定滑动距离,而滚动事件的滚动距离与实际滑动距离相符合,所以提高了确定的滑动距离的准确性。
203、终端基于滑动距离,确定搜索控件的形态显示信息和图文显示信息,以及,确定筛选控件的位置显示信息,形态显示信息和图文显示信息用于表示筛选控件被滑动后,搜索控件的形态和图文,位置显示信息用于表示筛选控件被滑动后,筛选控件的位置。
在一种可能的实现方式中,形态显示信息包括搜索控件的显示宽度,图文显示信息包括图标信息和文本信息中的至少一项。当图文显示信息包括图标信息和文本信息时,图标信息和文本信息在搜索控件内的布局方式可以是任一布局方式。例如,参见图6,搜索控件的图文显示信息包括图标信息和文本信息;图标信息和文本信息在搜索控件内的布局方式为线性布局。
在本申请实施例中,筛选控件被滑动后,搜索控件的形态和图文能够随着滑动距离的变化而变化;筛选控件的位置随着滑动距离的变化而变化。相应的,滑动距离不同时,搜索控件和筛选控件在布局容器中的显示布局不同。搜索控件对应的形态显示信息和图文显示信息随滑动距离而变化,筛选控件的位置显示信息随滑动距离而发生变化。
在一种可能的实现方式中,终端根据初始宽度与滑动距离的差值,确定搜索控件的显示宽度。相应的,终端基于滑动距离,确定搜索控件的形态显示信息和图文显示信息的步骤为:终端在滑动距离不大于零的情况下,确定搜索控件的显示宽度为搜索控件的初始宽度,确定图文显示信息包括图标信息和文本信息;在滑动距离大于零的情况下,基于初始宽度与滑动距离的差值,确定搜索控件的显示宽度,确定图文显示信息包括图标信息。可选地,文本信息包括搜索文案。
在本申请实施例中,在滑动距离大于零的情况下,图文显示信息只包括图标信息,根据初始宽度与滑动距离的差值,动态调整搜索控件的显示宽度,从而减小了搜索控件对用户操作筛选控件的干扰;在滑动距离不大于零的情况下,确定搜索控件的显示宽度为初始宽度,图文显示信息包括图标信息和文本信息,从而减小了筛选控件对用户操作搜索控件的干扰;实现了通过滑动操作调整搜索控件和筛选控件在布局容器中的显示布局,提高了该显示方法的灵活性。
需要说明的一点是,滑动距离大于零表示筛选控件向靠近搜索控件的一侧滑动,滑动距离小于零表示筛选控件向远离搜索控件的一侧滑动。可选地,搜索控件的初始宽度为搜索控件的最大宽度,搜索控件的初始图文显示信息包括图标信息和文本信息。例如,参见图7;当未触发滑动操作时,搜索控件和筛选控件保持当前状态,此时,滑动距离不大于零,搜索控件宽度为初始宽度,图文显示信息包括图标信息和文本信息。可选地,继续参见图7,MaxWidth表示搜索控件的最大宽度,MinWidth表示搜索控件的最小宽度。M表示初始宽度与滑动距离之间的差值,也即,M=MaxWidth-滑动距离。文本信息包括搜索文案。
在本申请实施例中,在未触发滑动操作时,确定搜索控件的显示宽度为初始宽度,图文显示信息包括图标信息和文本信息,从而减小了筛选控件对用户操作搜索控件的干扰,提高了该显示方法的灵活性。
在一种可能的实现方式中,继续参见图7,终端根据差值与最大宽度,确定搜索控件的显示宽度。相应的,终端基于初始宽度与滑动距离的差值,确定搜索控件的显示宽度的步骤为:终端在差值大于搜索控件的最大宽度的情况下,确定搜索控件的显示宽度为最大宽度;在差值不大于搜索控件的最大宽度的情况下,确定搜索控件的显示宽度为该差值。
在本申请实施例中,由于在差值大于搜索控件的最大宽度的情况下,终端确定搜索控件的显示宽度为最大宽度,从而避免了搜索控件因显示宽度过大而影响用户操作的情况,所以提高了该显示方法的灵活性。
在一种可能的实现方式中,继续参见图7,终端根据差值与最小宽度,确定搜索控件的显示宽度。相应的,终端基于初始宽度与滑动距离的差值,确定搜索控件的显示宽度的步骤为:终端在差值不小于搜索控件的最小宽度的情况下,确定搜索控件的显示宽度为差值;在差值小于搜索控件的最小宽度的情况下,确定搜索控件的显示宽度为最小宽度。
在本申请实施例中,由于在差值小于搜索控件的最小宽度的情况下,终端确定搜索控件的显示宽度为最小宽度,从而避免了搜索控件因显示宽度过小而影响用户操作的情况,所以提高了该显示方法的灵活性。
在一种可能的实现方式中,筛选控件包括多个筛选子控件;筛选控件的位置显示信息包括每个筛选子控件的位置显示信息。相应的,终端确定筛选控件的位置显示信息的步骤为:终端对于每个筛选子控件,确定筛选子控件的初始位置;确定初始位置与滑动距离之和为筛选子控件的位置显示信息。
在本申请实施例中,由于根据每个筛选子控件的初始位置与滑动距离,确定该筛选子控件的位置显示信息,这样终端接收对筛选控件的滑动操作时,多个筛选子控件可以滑动显示,便于用户选择合适的筛选子控件,提高了该显示方法的智能性。
204、终端基于形态显示信息、图文显示信息和位置显示信息,调整搜索控件和筛选控件在布局容器中的显示布局。
在一种可能的实现方式中,本步骤为:终端基于形态显示信息,调整搜索控件的显示尺寸,以及,基于图文显示信息,调整搜索控件的图文信息,以及,基于位置显示信息,调整筛选控件在布局容器内的显示位置。
在一种可能的实现方式中,形态显示信息包括搜索控件的显示宽度,相应的,终端基于显示宽度,确定搜索控件当前的显示尺寸。例如,参见图8,在未触发滑动操作时,搜索控件的显示宽度为初始宽度。再如,参见图9,在触发滑动操作时,搜索控件的显示宽度为初始宽度与滑动距离的差值。
在一种可能的实现方式中,图文显示信息包括图标信息。相应的,终端基于图文显示信息,调整搜索控件的图文信息的步骤为:终端将搜索控件从第一显示模式切换为第二显示模式,第一显示模式包括图标信息和文本信息,第二显示模式包括图标信息。例如,参见图10,第一显示模式包括图标信息和文本信息;第二显示模式包括图标信息。可选地,第一显示模式为最大化模式,第二显示模式为最小化模式。
在一种可能的实现方式中,图文显示信息包括图标信息;图标信息包括搜索图标,文本信息包括搜索文本。其中,终端调整搜索控件的图文信息的方式有以下两种情况。
第一种情况,终端只调整搜索文本。相应的,终端调整搜索控件的图文信息的步骤为:终端隐藏搜索文本。
在本申请实施例中,当滑动距离大于零的情况下,图文显示信息只包括图标信息,此时,终端隐藏搜索文本,减少了搜索文本对筛选控件的干扰,从而便于用户操作筛选控件,提高了该显示方法的灵活性。
第二种情况,终端调整搜索图标和搜索文本。相应的;终端调整搜索控件的图文信息的步骤为:终端隐藏搜索文本;将搜索图标的尺寸从第一尺寸切换为第二尺寸,其中,第二尺寸不大于第一尺寸。
在本申请实施例中,当滑动距离大于零的情况下,图文显示信息只包括图标信息,此时,终端隐藏搜索文本,并将搜索图标的尺寸缩小,减少了搜索文本和搜索图标对筛选控件的干扰,从而便于用户操作筛选控件,提高了该显示方法的灵活性。
在一种可能的实现方式中,位置显示信息包括筛选控件在布局容器中的显示位置。相应的,终端调整筛选控件的步骤为:终端基于位置显示信息,调整筛选控件的在布局容器内的显示位置。
在另一种可能的实现方式中,筛选控件包括多个筛选子控件,位置显示信息包括每个筛选子控件在布局容器中的显示位置。相应的,终端调整筛选控件的步骤为:终端根据位置显示信息,调整每个筛选子控件在布局容器中的显示位置。
在本申请实施例中,由于根据每个筛选子控件的初始位置与滑动距离,调整筛选子控件的位置显示信息,这样终端接收对筛选控件的滑动操作时,多个筛选子控件可以滑动显示,便于用户选择合适的筛选子控件,提高了该显示方法的智能性。
需要说明的一点是,在确定搜索控件或者合适的筛选子控件之后,用户可以通过触发点击事件,实现信息查询。相应的,终端响应于监听到搜索控件上的点击事件,显示搜索界面,搜索界面内设置有搜索输入框;或者,响应于监听到筛选控件包括的任一筛选子控件上的点击事件,显示筛选子控件对应的类别结果信息。
在一种可能的实现方式中,终端内安装的操作系统为安卓系统,终端通过View.OnClickListener(控件点击监听器)监听搜索控件上的点击事件以及筛选控件上的点击事件。
在另一种可能的实现方式中,终端内安装的操作系统为ios系统,终端通过NVSchemeModelWebsearch(网页参数监听)监听搜索控件和筛选控件上的点击事件,实现跳转至搜索页面进行结果搜索。在一种可能的实现方式中,筛选控件为NVMapTabCategoryFilterTagsModel(类别标签筛选控件),该筛选控件的类别为NVMapTabCategoryFilterTagsCell(地图类别标签单元筛选控件);该类别控件继承自UICollectionViewCell(界面单元聚集控件)。
在本申请实施例中,用户通过触发搜索控件上的点击事件,通过搜索输入框输入关键字,从而实现了信息搜索,并且,通过触发筛选控件上的点击事件,筛选该筛选控件对应的多个类别信息,从而实现了信息筛选,由此可知,该查询界面的显示方法,通过同一布局容器内的搜索控件和筛选控件,实现了信息搜索和信息筛选,从而提高了查询信息的效率。
在另一种可能的实现方式中,显示筛选子控件对应的类别结果信息之后,终端响应监听到搜索控件上的点击事件,显示搜索界面,搜索界面内设置有搜索输入框,接收搜索输入框内输入的关键字信息,基于关键字信息,从类别结果信息中确定与关键字信息匹配的搜索结果信息。
在本申请实施例中,由于先通过筛选子控件筛选出类别结果信息,然后通过在搜索输入框输入关键字,进一步从类别结果信息中搜索信息,从而能够尽快确定用户打算查询的信息,所以提高了查询信息的效率。
本申请实施例提供了一种查询界面的显示方法,由于接收对筛选控件的滑动操作时,能够根据滑动距离确定的形态显示信息、图文显示信息和位置显示信息,动态调整搜索控件和筛选控件在布局容器中的显示布局,实现了将搜索控件和筛选控件两个控件设置在同一布局容器内,进而减少了搜索控件和筛选控件所占用的显示区域,所以提高了显示界面的有效屏占比。
图11是本申请实施例提供的一种查询界面的显示方法的流程图,由终端执行。在本申请实施例中,以监听筛选控件中第一个筛选子控件偏离原位置的距离确定滑动距离为例进行说明。参见图11,该方法包括以下步骤:
1101、终端显示查询界面,查询界面包括搜索控件和筛选控件,且搜索控件和筛选控件设置在查询界面中的同一布局容器内。
步骤1101与步骤201相同,在此不再进行赘述。
1102、终端响应于接收对筛选控件的滑动操作,监听筛选控件中第一个筛选子控件偏离原位置的距离,得到滑动操作对应的滑动距离,滑动操作用于调整搜索控件和筛选控件在布局容器中的显示布局。
在一种可能的实现方式中,本步骤为:终端响应于接收对筛选控件的滑动操作,监听筛选控件中第一个筛选子控件偏离原位置的距离,得到滑动操作对应的滑动距离。在一种可能的实现方式中,终端内安装的操作系统为ios系统,终端通过RACObserve(self.categoryFilterTagsView.collectionView,contentOffset)监听筛选控件中第一个筛选子控件偏离原位置的距离。
在本申请实施例中,由于终端通过监听第一个筛选子控件偏离原位置的距离确定滑动距离,这样只需对第一个筛选子控件进行监听即可,所以提高了确定的滑动距离的效率。
1103、终端基于滑动距离,确定搜索控件的形态显示信息和图文显示信息,以及,确定筛选控件的位置显示信息,形态显示信息和图文显示信息用于表示筛选控件被滑动后,搜索控件的形态和图文,位置显示信息用于表示筛选控件被滑动后,筛选控件的位置。
在一种可能的实现方式中,终端基于初始宽度与滑动距离的差值,确定搜索控件的显示宽度。该确定方法与步骤203中的确定方法相同,在此不再进行赘述。
在另一种可能的实现方式中,终端基于搜索控件与筛选控件之间的边距、滑动距离、搜索控件的初始宽度和搜索控件的最小宽度,确定搜索控件的显示宽度。相应的,终端基于滑动距离,确定搜索控件的形态显示信息和图文显示信息的步骤为:在滑动距离不大于零的情况下,确定搜索控件的显示宽度为搜索控件的初始宽度,确定图文显示信息包括图标信息和文本信息;响应于滑动距离大于零,基于搜索控件与筛选控件之间的边距、滑动距离、搜索控件的初始宽度和搜索控件的最小宽度,确定搜索控件的显示宽度,确定图文显示信息包括图标信息。
在本申请实施例中,由于终端通过边距、滑动距离、搜索控件的初始宽度和搜索控件的最小宽度等多个参数,确定搜索控件的显示宽度,提高了通过多个参数确定的搜索控件的显示宽度的准确性。
在一种可能的实现方式中,参见图12,终端基于搜索控件与筛选控件之间的边距、滑动距离、搜索控件的初始宽度和搜索控件的最小宽度,确定搜索控件的显示宽度的步骤为:在滑动距离大于第一距离的情况下,确定搜索控件的显示宽度为搜索控件的最小宽度,第一距离为边距与初始宽度之和与第二距离的差值,第二距离为最小宽度的一半;在滑动距离不大于第一距离的情况下,确定搜索控件的显示宽度为初始宽度与移动距离的差值。
可选地,继续参见图12,MaxWidth表示搜索控件的初始宽度,MinWidth表示搜索控件的最小宽度,Gap表示搜索控件与筛选控件之间的边距,M表示初始宽度与滑动距离之间的差值,也即,M=MaxWidth-滑动距离。第二距离为MinWidth/2;第一距离为:MaxWidth+Gap-MinWidth/2。例如,参见图13,在滑动距离大于第一距离的情况下,确定搜索控件的显示宽度为搜索控件的最小宽度。
在本申请实施例中,由于在滑动距离大于第一距离的情况下,确定搜索控件的显示宽度为搜索控件的最小宽度,避免了搜索控件因显示宽度过小而影响用户操作的情况,所以提高了该显示方法的灵活性。
1104、终端基于形态显示信息、图文显示信息和位置显示信息,调整搜索控件和筛选控件在布局容器中的显示布局。
步骤1104与步骤204相同,在此不再进行赘述。
本申请实施例提供了一种查询界面的显示方法,由于接收对筛选控件的滑动操作时,能够根据滑动距离确定的形态显示信息、图文显示信息和位置显示信息,动态调整搜索控件和筛选控件在布局容器中的显示布局,实现了将搜索控件和筛选控件两个控件设置在同一布局容器内,进而减少了搜索控件和筛选控件所占用的显示区域,所以提高了显示界面的有效屏占比。
图14是本申请实施例提供的一种查询界面的显示装置的结构示意图。参见图14,该装置包括:
显示模块1401,用于显示查询界面,查询界面包括搜索控件和筛选控件,且搜索控件和筛选控件设置在查询界面中的同一布局容器内;
第一确定模块1402,用于响应于接收对筛选控件的滑动操作,确定滑动操作对应的滑动距离,滑动操作用于调整搜索控件和筛选控件在布局容器中的显示布局;
第二确定模块1403,用于基于滑动距离,确定搜索控件的形态显示信息和图文显示信息,以及,确定筛选控件的位置显示信息,形态显示信息和图文显示信息用于表示筛选控件被滑动后,搜索控件的形态和图文,位置显示信息用于表示筛选控件被滑动后,筛选控件的位置;
调整模块1404,用于基于形态显示信息、图文显示信息和位置显示信息,调整搜索控件和筛选控件在布局容器中的显示布局。
在一种可能的实现方式中,第一确定模块1402,用于监听筛选控件上的滚动事件,确定滚动事件的滚动距离为滑动操作对应的滑动距离;或者,第一确定模块,用于监听筛选控件中第一个筛选子控件偏离原位置的距离,得到滑动操作对应的滑动距离。
在另一种可能的实现方式中,形态显示信息包括搜索控件的显示宽度,图文显示信息包括图标信息和文本信息中的至少一项;第二确定模块1403,用于在滑动距离不大于零的情况下,确定搜索控件的显示宽度为搜索控件的初始宽度,确定图文显示信息包括图标信息和文本信息;在滑动距离大于零的情况下,基于初始宽度与滑动距离的差值,确定搜索控件的显示宽度,确定图文显示信息包括图标信息。
在另一种可能的实现方式中,第二确定模块1403,用于在差值不小于搜索控件的最小宽度的情况下,确定搜索控件的显示宽度为差值;在差值小于搜索控件的最小宽度的情况下,确定搜索控件的显示宽度为最小宽度。
在另一种可能的实现方式中,筛选控件包括多个筛选子控件;第二确定模块1403,用于对于每个筛选子控件,确定筛选子控件的初始位置;确定初始位置与滑动距离之和为筛选子控件的位置显示信息。
在另一种可能的实现方式中,形态显示信息包括搜索控件的显示宽度,图文显示信息包括图标信息和文本信息中的至少一项;第二确定模块1403,用于在滑动距离不大于零的情况下,确定搜索控件的显示宽度为搜索控件的初始宽度,确定图文显示信息包括图标信息和文本信息;响应于滑动距离大于零,基于搜索控件与筛选控件之间的边距、滑动距离、搜索控件的初始宽度和搜索控件的最小宽度,确定搜索控件的显示宽度,确定图文显示信息包括图标信息。
在另一种可能的实现方式中,第二确定模块1403,用于在滑动距离大于第一距离的情况下,确定搜索控件的显示宽度为搜索控件的最小宽度,第一距离为边距与初始宽度之和与第二距离的差值,第二距离为最小宽度的一半;在滑动距离不大于第一距离的情况下,确定搜索控件的显示宽度为初始宽度与移动距离的差值。
在另一种可能的实现方式中,筛选控件包括多个筛选子控件;显示模块1401,用于从多个筛选子控件中确定目标筛选控件,目标筛选控件为多个筛选子控件中第一个筛选子控件或者最后一个筛选子控件;将搜索控件与目标筛选控件显示在布局容器的同一区域,其中,筛选控件在布局容器内的显示优先级低于搜索控件在布局容器内的显示优先级。
在另一种可能的实现方式中,调整模块1404,用于基于形态显示信息,调整搜索控件的显示尺寸,以及,基于图文显示信息,调整搜索控件的图文信息,以及,基于位置显示信息,调整筛选控件在布局容器内的显示位置。
在另一种可能的实现方式中,图文显示信息包括图标信息;调整模块,用于将搜索控件从第一显示模式切换为第二显示模式,第一显示模式包括图标信息和文本信息,第二显示模式包括图标信息。
在另一种可能的实现方式中,显示模块1401,还用于响应于监听到搜索控件上的点击事件,显示搜索界面,搜索界面内设置有搜索输入框;或者,该结果显示模块,用于响应于监听到筛选控件包括的任一筛选子控件上的点击事件,显示筛选子控件对应的类别结果信息。
在另一种可能的实现方式中,显示模块1401,还用于响应于监听到搜索控件上的点击事件,显示搜索界面,搜索界面内设置有搜索输入框,接收搜索输入框内输入的关键字信息,基于关键字信息,从类别结果信息中确定与关键字信息匹配的搜索结果信息。
本申请实施例提供了一种查询界面的显示装置,由于接收对筛选控件的滑动操作时,能够根据滑动距离确定的形态显示信息、图文显示信息和位置显示信息,动态调整搜索控件和筛选控件在布局容器中的显示布局,实现了将搜索控件和筛选控件两个控件设置在同一布局容器内,进而减少了搜索控件和筛选控件所占用的显示区域,所以提高了显示界面的有效屏占比。
需要说明的是:上述实施例提供的查询界面的显示装置在进行查询界面的显示时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将服务器的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的查询界面的显示装置与查询界面的显示方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
图15示出了本发明一个示例性实施例提供的终端1500的结构框图。该终端1500可以是:智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio LayerIII,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group AudioLayer IV,动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1500还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常,终端1500包括有:处理器1501和存储器1502。
处理器1501可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器1501可以采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1501也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central ProcessingUnit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器1501可以在集成有GPU(Graphics Processing Unit,图像处理器),GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器1501还可以包括AI(Artificial Intelligence,人工智能)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器1502可以包括一个或多个计算机可读存储介质,该计算机可读存储介质可以是非暂态的。存储器1502还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中,存储器1502中的非暂态的计算机可读存储介质用于存储至少一个指令,该至少一个指令用于被处理器1501所执行以实现本申请中方法实施例提供的查询界面的显示方法。
在一些实施例中,终端1500还可选包括有:外围设备接口1503和至少一个外围设备。处理器1501、存储器1502和外围设备接口1503之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1503相连。具体地,外围设备包括:射频电路1504、显示屏1505、摄像头1506、音频电路1507、定位组件1508和电源1509中的至少一种。
外围设备接口1503可被用于将I/O(Input/Output,输入/输出)相关的至少一个外围设备连接到处理器1501和存储器1502。在一些实施例中,处理器1501、存储器1502和外围设备接口1503被集成在同一芯片或电路板上;在一些其他实施例中,处理器1501、存储器1502和外围设备接口1503中的任意一个或两个可以在单独的芯片或电路板上实现,本实施例对此不加以限定。
射频电路1504用于接收和发射RF(Radio Frequency,射频)信号,也称电磁信号。射频电路1504通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1504将电信号转换为电磁信号进行发送,或者,将接收到的电磁信号转换为电信号。可选地,射频电路1504包括:天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1504可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于:城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity,无线保真)网络。在一些实施例中,射频电路1504还可以包括NFC(Near Field Communication,近距离无线通信)有关的电路,本申请对此不加以限定。
显示屏1505用于显示UI(UserInterface,用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1505是触摸显示屏时,显示屏1505还具有采集在显示屏1505的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1501进行处理。此时,显示屏1505还可以用于提供虚拟按钮和/或虚拟键盘,也称软按钮和/或软键盘。在一些实施例中,显示屏1505可以为一个,设置终端1500的前面板;在另一些实施例中,显示屏1505可以为至少两个,分别设置在终端1500的不同表面或呈折叠设计;在再一些实施例中,显示屏1505可以是柔性显示屏,设置在终端1500的弯曲表面上或折叠面上。甚至,显示屏1505还可以设置成非矩形的不规则图形,也即异形屏。显示屏1505可以采用LCD(Liquid Crystal Display,液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。
摄像头组件1506用于采集图像或视频。可选地,摄像头组件1506包括前置摄像头和后置摄像头。通常,前置摄像头设置在终端的前面板,后置摄像头设置在终端的背面。在一些实施例中,后置摄像头为至少两个,分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种,以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality,虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中,摄像头组件1506还可以包括闪光灯。闪光灯可以是单色温闪光灯,也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合,可以用于不同色温下的光线补偿。
音频电路1507可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波,并将声波转换为电信号输入至处理器1501进行处理,或者输入至射频电路1504以实现语音通信。出于立体声采集或降噪的目的,麦克风可以为多个,分别设置在终端1500的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1501或射频电路1504的电信号转换为声波。扬声器可以是传统的薄膜扬声器,也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时,不仅可以将电信号转换为人类可听见的声波,也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中,音频电路1507还可以包括耳机插孔。
定位组件1508用于定位终端1500的当前地理位置,以实现导航或LBS(LocationBased Service,基于位置的服务)。定位组件1508可以是基于美国的GPS(GlobalPositioning System,全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。
电源1509用于为终端1500中的各个组件进行供电。电源1509可以是交流电、直流电、一次性电池或可充电电池。当电源1509包括可充电电池时,该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。
在一些实施例中,终端1500还包括有一个或多个传感器1510。该一个或多个传感器1510包括但不限于:加速度传感器1511、陀螺仪传感器1512、压力传感器1513、指纹传感器1514、光学传感器1515以及接近传感器1516。
加速度传感器1511可以检测以终端1500建立的坐标系的三个坐标轴上的加速度大小。比如,加速度传感器1511可以用于检测重力加速度在三个坐标轴上的分量。处理器1501可以根据加速度传感器1511采集的重力加速度信号,控制显示屏1505以横向视图或纵向视图进行用户界面的显示。加速度传感器1511还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器1512可以检测终端1500的机体方向及转动角度,陀螺仪传感器1512可以与加速度传感器1511协同采集用户对终端1500的3D动作。处理器1501根据陀螺仪传感器1512采集的数据,可以实现如下功能:动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器1513可以设置在终端1500的侧边框和/或显示屏1505的下层。当压力传感器1513设置在终端1500的侧边框时,可以检测用户对终端1500的握持信号,由处理器1501根据压力传感器1513采集的握持信号进行左右手识别或快捷操作。当压力传感器1513设置在显示屏1505的下层时,由处理器1501根据用户对显示屏1505的压力操作,实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器1514用于采集用户的指纹,由处理器1501根据指纹传感器1514采集到的指纹识别用户的身份,或者,由指纹传感器1514根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时,由处理器1501授权该用户执行相关的敏感操作,该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1514可以被设置终端1500的正面、背面或侧面。当终端1500上设置有物理按键或厂商Logo时,指纹传感器1514可以与物理按键或厂商Logo集成在一起。
光学传感器1515用于采集环境光强度。在一个实施例中,处理器1501可以根据光学传感器1515采集的环境光强度,控制显示屏1505的显示亮度。具体地,当环境光强度较高时,调高显示屏1505的显示亮度;当环境光强度较低时,调低显示屏1505的显示亮度。在另一个实施例中,处理器1501还可以根据光学传感器1515采集的环境光强度,动态调整摄像头组件1506的拍摄参数。
接近传感器1516,也称距离传感器,通常设置在终端1500的前面板。接近传感器1516用于采集用户与终端1500的正面之间的距离。在一个实施例中,当接近传感器1516检测到用户与终端1500的正面之间的距离逐渐变小时,由处理器1501控制显示屏1505从亮屏状态切换为息屏状态;当接近传感器1516检测到用户与终端1500的正面之间的距离逐渐变大时,由处理器1501控制显示屏1505从息屏状态切换为亮屏状态。
本领域技术人员可以理解,图15中示出的结构并不构成对终端1500的限定,可以包括比图示更多或更少的组件,或者组合某些组件,或者采用不同的组件布置。
本申请实施例还提供了一种计算机可读存储介质,该计算机可读存储介质中存储有至少一条程序代码,该至少一条程序代码由处理器加载并执行,以实现如上述任一种可能实现方式中所述的查询界面的显示方法。
本申请实施例还提供了一种计算机程序产品,计算机程序产品包括至少一条程序代码,该至少一条程序代码由处理器加载并执行,以实现如上述任一种可能实现方式中所述的查询界面的显示方法。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
以上所述仅为本申请实施例的可选实施例,并不用以限制本申请实施例,凡在本申请实施例的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。

Claims (15)

1.一种查询界面的显示方法,其特征在于,所述方法包括:
显示查询界面,所述查询界面包括搜索控件和筛选控件,且所述搜索控件和所述筛选控件设置在所述查询界面中的同一布局容器内;
响应于接收对所述筛选控件的滑动操作,确定所述滑动操作对应的滑动距离,所述滑动操作用于调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局;
基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,以及,确定所述筛选控件的位置显示信息,所述形态显示信息和所述图文显示信息用于表示所述筛选控件被滑动后,所述搜索控件的形态和图文,所述位置显示信息用于表示所述筛选控件被滑动后,所述筛选控件的位置;
基于所述形态显示信息、所述图文显示信息和所述位置显示信息,调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局。
2.根据权利要求1所述的方法,其特征在于,所述确定所述滑动操作对应的滑动距离,包括:
监听所述筛选控件上的滚动事件,确定所述滚动事件的滚动距离为所述滑动操作对应的滑动距离;或者,
监听所述筛选控件中第一个筛选子控件偏离原位置的距离,得到所述滑动操作对应的滑动距离。
3.根据权利要求1所述的方法,其特征在于,所述形态显示信息包括所述搜索控件的显示宽度,所述图文显示信息包括图标信息和文本信息中的至少一项;
所述基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,包括:
在所述滑动距离不大于零的情况下,确定所述搜索控件的显示宽度为所述搜索控件的初始宽度,确定所述图文显示信息包括所述图标信息和所述文本信息;
在所述滑动距离大于零的情况下,基于所述初始宽度与所述滑动距离的差值,确定所述搜索控件的显示宽度,确定所述图文显示信息包括所述图标信息。
4.根据权利要求3所述的方法,其特征在于,所述基于所述初始宽度与所述滑动距离的差值,确定所述搜索控件的显示宽度,包括:
在所述差值不小于所述搜索控件的最小宽度的情况下,确定所述搜索控件的显示宽度为所述差值;
在所述差值小于所述搜索控件的最小宽度的情况下,确定所述搜索控件的显示宽度为所述最小宽度。
5.根据权利要求1所述的方法,其特征在于,所述筛选控件包括多个筛选子控件;
所述确定所述筛选控件的位置显示信息,包括:
对于每个筛选子控件,确定所述筛选子控件的初始位置;
确定所述初始位置与所述滑动距离之和为所述筛选子控件的位置显示信息。
6.根据权利要求1所述的方法,其特征在于,所述形态显示信息包括所述搜索控件的显示宽度,所述图文显示信息包括图标信息和文本信息中的至少一项;
所述基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,包括:
在所述滑动距离不大于零的情况下,确定所述搜索控件的显示宽度为所述搜索控件的初始宽度,确定所述图文显示信息包括所述图标信息和所述文本信息;
响应于所述滑动距离大于零,基于所述搜索控件与所述筛选控件之间的边距、所述滑动距离、所述搜索控件的初始宽度和所述搜索控件的最小宽度,确定所述搜索控件的显示宽度,确定所述图文显示信息包括所述图标信息。
7.根据权利要求6所述的方法,其特征在于,所述基于所述搜索控件与所述筛选控件之间的边距、所述滑动距离、所述搜索控件的初始宽度和所述搜索控件的最小宽度,确定所述搜索控件的显示宽度,包括:
在所述滑动距离大于第一距离的情况下,确定所述搜索控件的显示宽度为所述搜索控件的最小宽度,所述第一距离为所述边距与所述初始宽度之和与第二距离的差值,所述第二距离为所述最小宽度的一半;
在所述滑动距离不大于所述第一距离的情况下,确定所述搜索控件的显示宽度为所述初始宽度与所述移动距离的差值。
8.根据权利要求1所述的方法,其特征在于,所述筛选控件包括多个筛选子控件;
将所述搜索控件和所述筛选控件设置在所述查询界面中的同一布局容器内的过程,包括:
从所述多个筛选子控件中确定目标筛选控件,所述目标筛选控件为所述多个筛选子控件中第一个筛选子控件或者最后一个筛选子控件;
将所述搜索控件与所述目标筛选控件显示在所述布局容器的同一区域,其中,所述筛选控件在所述布局容器内的显示优先级低于所述搜索控件在所述布局容器内的显示优先级。
9.根据权利要求1所述的方法,其特征在于,所述基于所述形态显示信息、所述图文显示信息和所述位置显示信息,调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局,包括:
基于所述形态显示信息,调整所述搜索控件的显示尺寸,以及,基于所述图文显示信息,调整所述搜索控件的图文信息,以及,基于所述位置显示信息,调整所述筛选控件在所述布局容器内的显示位置。
10.根据权利要求9所述的方法,其特征在于,所述图文显示信息包括图标信息;所述基于所述图文显示信息,调整所述搜索控件的图文信息,包括:
将所述搜索控件从第一显示模式切换为第二显示模式,所述第一显示模式包括图标信息和文本信息,所述第二显示模式包括图标信息。
11.根据权利要求1所述的方法,其特征在于,所述方法还包括:
响应于监听到所述搜索控件上的点击事件,显示搜索界面,所述搜索界面内设置有搜索输入框;或者,
响应于监听到所述筛选控件包括的任一筛选子控件上的点击事件,显示所述筛选子控件对应的类别结果信息。
12.根据权利要求11所述的方法,其特征在于,所述显示所述筛选子控件对应的类别结果信息之后,所述方法还包括:
响应于监听到所述搜索控件上的点击事件,显示搜索界面,所述搜索界面内设置有搜索输入框,接收所述搜索输入框内输入的关键字信息,基于所述关键字信息,从所述类别结果信息中确定与所述关键字信息匹配的搜索结果信息。
13.一种查询界面的显示装置,其特征在于,所述装置包括:
显示模块,用于显示查询界面,所述查询界面包括搜索控件和筛选控件,且所述搜索控件和所述筛选控件设置在所述查询界面中的同一布局容器内;
第一确定模块,用于响应于接收对所述筛选控件的滑动操作,确定所述滑动操作对应的滑动距离,所述滑动操作用于调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局;
第二确定模块,用于基于所述滑动距离,确定所述搜索控件的形态显示信息和图文显示信息,以及,确定所述筛选控件的位置显示信息,所述形态显示信息和所述图文显示信息用于表示所述筛选控件被滑动后,所述搜索控件的形态和图文,所述位置显示信息用于表示所述筛选控件被滑动后,所述筛选控件的位置;
调整模块,用于基于所述形态显示信息、所述图文显示信息和所述位置显示信息,调整所述搜索控件和所述筛选控件在所述布局容器中的显示布局。
14.一种终端,其特征在于,所述终端包括:
处理器和存储器,所述存储器中存储有至少一条指令,所述至少一条指令由所述处理器加载并执行以实现权利要求1至12任一项权利要求所述的查询界面的显示方法所执行的操作。
15.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有至少一条指令,所述至少一条指令由处理器加载并执行以实现如权利要求1至12任一项权利要求所述的查询界面的显示方法所执行的操作。
CN202111396911.7A 2021-11-23 2021-11-23 查询界面的显示方法、装置、终端及存储介质 Pending CN114138143A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111396911.7A CN114138143A (zh) 2021-11-23 2021-11-23 查询界面的显示方法、装置、终端及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111396911.7A CN114138143A (zh) 2021-11-23 2021-11-23 查询界面的显示方法、装置、终端及存储介质

Publications (1)

Publication Number Publication Date
CN114138143A true CN114138143A (zh) 2022-03-04

Family

ID=80390985

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111396911.7A Pending CN114138143A (zh) 2021-11-23 2021-11-23 查询界面的显示方法、装置、终端及存储介质

Country Status (1)

Country Link
CN (1) CN114138143A (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030025737A1 (en) * 2001-08-02 2003-02-06 Breinberg Steven Adam System and method for automatic and dynamic layout of resizable dialog type windows
CN102356375A (zh) * 2009-03-16 2012-02-15 微软公司 连续和不连续的属性的平滑布局动画
CN104991707A (zh) * 2015-07-20 2015-10-21 青岛海信移动通信技术股份有限公司 一种显示用户界面方法及装置
CN112905075A (zh) * 2021-02-24 2021-06-04 深圳市富途网络科技有限公司 页面显示方法、装置及介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030025737A1 (en) * 2001-08-02 2003-02-06 Breinberg Steven Adam System and method for automatic and dynamic layout of resizable dialog type windows
CN102356375A (zh) * 2009-03-16 2012-02-15 微软公司 连续和不连续的属性的平滑布局动画
CN104991707A (zh) * 2015-07-20 2015-10-21 青岛海信移动通信技术股份有限公司 一种显示用户界面方法及装置
CN112905075A (zh) * 2021-02-24 2021-06-04 深圳市富途网络科技有限公司 页面显示方法、装置及介质

Similar Documents

Publication Publication Date Title
CN112162671B (zh) 直播数据处理方法、装置、电子设备及存储介质
CN110602321B (zh) 应用程序切换方法、装置、电子装置及存储介质
CN108449641B (zh) 播放媒体流的方法、装置、计算机设备和存储介质
CN111079012A (zh) 直播间推荐方法、装置、存储介质及终端
CN111880712B (zh) 页面显示方法、装置、电子设备及存储介质
CN109922356B (zh) 视频推荐方法、装置和计算机可读存储介质
CN109634688B (zh) 会话界面的显示方法、装置、终端及存储介质
CN111897465B (zh) 弹窗显示方法、装置、设备及存储介质
CN111694478A (zh) 内容展示方法、装置、终端及存储介质
CN112565806A (zh) 虚拟礼物赠送方法、装置、计算机设备及介质
CN108664300B (zh) 一种画中画模式下的应用界面显示方法及装置
CN112825040A (zh) 用户界面的显示方法、装置、设备及存储介质
CN114546545A (zh) 图文显示方法、装置、终端及存储介质
CN111158575B (zh) 终端执行处理的方法、装置、设备以及存储介质
CN109032492B (zh) 一种切歌的方法及装置
CN111949341A (zh) 展示信息的方法、装置、设备及存储介质
CN113613053B (zh) 视频推荐方法、装置、电子设备及存储介质
CN112612405B (zh) 窗口显示方法、装置、设备及计算机可读存储介质
CN112732133B (zh) 消息处理的方法、装置、电子设备及存储介质
CN109189525B (zh) 加载子页面的方法、装置、设备及计算机可读存储介质
CN109101166B (zh) 音频控制方法、装置及存储介质
CN113301422A (zh) 获取视频封面的方法、终端及存储介质
CN108881715B (zh) 拍摄模式的启用方法、装置、终端及存储介质
CN111694535A (zh) 闹钟信息显示方法及装置
CN114138143A (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