技术领域Technical Field
本申请涉及领域终端技术领域，尤其涉及一种显示方法及相关装置。The present application relates to the field of terminal technology, and in particular to a display method and related devices.
背景技术Background technique
在电子设备(例如手机、平板等)中，应用程序的用户界面(user interface，UI)包括不同的元素，比如导航栏、工具栏、内容视图，等等。通常来说，用户在使用电子设备的过程中，可能滑动应用程序的用户界面来查看内容视图中的更多内容。目前，在用户界面的滑动过程中，导航栏和工具栏的显示效果不佳，用户体验差。In electronic devices (such as mobile phones and tablets), the user interface (UI) of an application includes different elements, such as a navigation bar, a toolbar, a content view, etc. Generally speaking, when using an electronic device, a user may slide the user interface of an application to view more content in the content view. Currently, during the sliding process of the user interface, the display effect of the navigation bar and the toolbar is poor, resulting in a poor user experience.
发明内容Summary of the invention
本申请实施例提供的一种显示方法及相关装置，可以在顶部区域和/或底部区域显示模糊效果，给用户带来良好的视觉效果。A display method and related device provided in an embodiment of the present application can display a blur effect in the top area and/or the bottom area, bringing a good visual effect to the user.
第一方面，本申请提供一种显示方法，应用于电子设备，该方法可以包括：In a first aspect, the present application provides a display method, applied to an electronic device, which may include:
显示第一应用的页面，所述第一应用的页面包括顶部区域、内容区域和底部区域，所述第一应用的页面的显示层级中，所述顶部区域和所述底部区域位于所述内容区域之上；Displaying a page of a first application, the page of the first application comprising a top area, a content area, and a bottom area, wherein in a display hierarchy of the page of the first application, the top area and the bottom area are located above the content area;
在所述内容区域中的第一元素与所述顶部区域重叠时，对所述第一元素进行模糊处理，在所述顶部区域显示所述第一元素的模糊效果；When a first element in the content area overlaps with the top area, blurring the first element, and displaying the blurred effect of the first element in the top area;
在所述内容区域中的第二元素与所述底部区域重叠时，对所述第二元素进行模糊处理，在所述底部区域显示所述第二元素的模糊效果。When a second element in the content area overlaps the bottom area, blur processing is performed on the second element, and the blur effect of the second element is displayed in the bottom area.
其中，第一应用的页面包括多种控件，比如说包括状态栏、背景层、标题栏、内容视图、三键导航和导航条中的一种或多种。顶部区域包括位于第一应用的页面顶部的控件，包括状态栏控件、标题栏控件、搜索栏控件等等中的一种或多种。底部区域包括第一应用的页面底部的控件，包括底部页签、工具栏、三键导航和导航条中的一种或多种。内容区域包括第一应用的内容视图中的元素。Among them, the page of the first application includes multiple controls, for example, one or more of a status bar, a background layer, a title bar, a content view, a three-button navigation, and a navigation bar. The top area includes controls located at the top of the page of the first application, including one or more of a status bar control, a title bar control, a search bar control, and the like. The bottom area includes controls at the bottom of the page of the first application, including one or more of a bottom tab, a toolbar, a three-button navigation, and a navigation bar. The content area includes elements in the content view of the first application.
可以理解的是，模糊效果在设计上通常被用来增加现代感和时尚感，这样可以让应用看起来更吸引用户，吸引用户留在应用中。使用模糊效果可以帮助创建一致的应用页面，使得页面内的各个部分看起来协调一致，提升整体的美观性。另外，使用模糊效果可以创建视觉层级，使得页面(或者界面)元素之间的关系更加明确，有助于用户理解页面(或者界面)的结构和层次。比如说将原本显示在内容区域(比如说内容视图)中的第一元素，通过模糊处理后使得具有模糊效果的第一元素显示在顶部区域(具体可以是显示在顶部区域的标题栏控件)，和/或，将原本显示在内容区域(比如说内容视图)中的第而元素，通过模糊处理后使得具有模糊效果的第二元素显示在顶部区域(具体可以是显示在底部区域的工具栏控件)，这样可以提高第一应用的页面内各个部分(比如说内容视图、标题栏和工具栏)的一致性，给用户提供良好的视觉效果。It is understandable that blur effects are usually used to increase the sense of modernity and fashion in design, so that the application looks more attractive to users and attracts users to stay in the application. Using blur effects can help create consistent application pages, so that the various parts of the page look coordinated and consistent, and improve the overall aesthetics. In addition, using blur effects can create visual hierarchies, making the relationship between page (or interface) elements clearer, which helps users understand the structure and hierarchy of the page (or interface). For example, the first element originally displayed in the content area (such as the content view) is blurred so that the first element with a blurred effect is displayed in the top area (specifically, it can be a title bar control displayed in the top area), and/or, the second element originally displayed in the content area (such as the content view) is blurred so that the second element with a blurred effect is displayed in the top area (specifically, it can be a toolbar control displayed in the bottom area), which can improve the consistency of the various parts of the page of the first application (such as the content view, the title bar and the toolbar) and provide users with good visual effects.
在第一方面的一种可能的实施方式中，所述方法还包括：In a possible implementation of the first aspect, the method further includes:
接收第一滑动操作；receiving a first sliding operation;
响应于所述第一滑动操作，判断所述内容区域中的元素是否与所述顶部区域重叠，和/或，是否与所述底部区域重叠；In response to the first sliding operation, determining whether an element in the content area overlaps with the top area and/or overlaps with the bottom area;
当所述第一滑动操作为向上滑动时，所述内容区域中的所述第一元素与所述顶部区域重叠；When the first sliding operation is sliding upward, the first element in the content area overlaps with the top area;
当所述第一滑动操作为向下滑动时，所述内容区域中的所述第二元素与所述底部区域重叠。When the first sliding operation is sliding downward, the second element in the content area overlaps the bottom area.
可以看出，在滑动的过程中，电子设备可以判断向上滑动时，内容区域中的元素是否与顶部区域重叠，在确定重叠时，可以开启顶部区域的模糊效果；电子设备还可以判断向下滑动时，内容区域中的元素是否与底部区域重叠，在确定重叠时，可以开启底部区域的模糊效果。通过判断是否重叠作为开启模糊效果的条件，可以为开启模糊效果提供较为准确的开启时机，避免不必要的渲染。It can be seen that during the sliding process, the electronic device can determine whether the elements in the content area overlap with the top area when sliding upwards, and when the overlap is determined, the blur effect of the top area can be turned on; the electronic device can also determine whether the elements in the content area overlap with the bottom area when sliding downwards, and when the overlap is determined, the blur effect of the bottom area can be turned on. By determining whether there is overlap as a condition for turning on the blur effect, a more accurate turning-on time can be provided for turning on the blur effect, avoiding unnecessary rendering.
在第一方面的一种可能的实施方式中，所述判断所述内容区域中的元素是否与所述顶部区域重叠，和/或，是否与所述底部区域重叠，包括：In a possible implementation of the first aspect, determining whether the element in the content area overlaps with the top area and/or overlaps with the bottom area includes:
获取所述内容区域的第一显示高度，根据所述内容区域的第一显示高度判断所述内容区域中的第一元素是否与所述顶部区域重叠；和/或，Acquire a first display height of the content area, and determine whether a first element in the content area overlaps with the top area according to the first display height of the content area; and/or,
获取所述内容区域的第二显示高度，根据所述内容区域的第二显示高度判断所述内容区域中的第二元素是否与所述底部区域重叠。A second display height of the content area is acquired, and whether a second element in the content area overlaps with the bottom area is determined according to the second display height of the content area.
可以看出，内容区域的显示高度不同，则内容区域中元素的显示位置也不同，通过内容区域的显示高度来判断与底部区域的重叠和/或顶部区域的重叠，可以提高判断的准确性。It can be seen that if the display height of the content area is different, the display position of the elements in the content area will also be different. The overlap with the bottom area and/or the top area can be judged by the display height of the content area to improve the accuracy of the judgment.
在第一方面的一种可能的实施方式中，所述根据所述内容区域的第一显示高度判断所述内容区域中的第一元素是否与所述顶部区域重叠，包括：In a possible implementation of the first aspect, determining whether the first element in the content area overlaps with the top area according to the first display height of the content area includes:
根据所述内容区域的第一显示高度所指示的向上滑动的滑动量大于或等于第一阈值，确定所述内容区域中的第一元素与所述顶部区域重叠，其中，所述第一阈值用于表明所述内容区域中的元素与所述顶部区域之间的最小距离。Based on the upward sliding amount indicated by the first display height of the content area being greater than or equal to a first threshold, it is determined that the first element in the content area overlaps with the top area, wherein the first threshold is used to indicate the minimum distance between the element in the content area and the top area.
可以看出，第一显示高度可以用于指示向上滑动的滑动量，在向上滑动的滑动量大于或者等于第一阈值时，电子设备可以通过向上滑动的滑动量来确定是否与顶部区域发生重叠，而滑动量是基于用户在显示屏上的操作所确定的，所以可以基于用户的操作来开启顶部区域的模糊效果，满足用户的操作需求，为用户提供良好的视觉效果。It can be seen that the first display height can be used to indicate the amount of upward sliding. When the amount of upward sliding is greater than or equal to the first threshold, the electronic device can determine whether there is overlap with the top area by the amount of upward sliding. The sliding amount is determined based on the user's operation on the display screen, so the blur effect of the top area can be turned on based on the user's operation to meet the user's operating needs and provide the user with a good visual effect.
在第一方面的一种可能的实施方式中，所述根据所述内容区域的第二显示高度判断所述内容区域中的第二元素是否与所述底部区域重叠，包括：In a possible implementation of the first aspect, determining whether the second element in the content area overlaps with the bottom area according to the second display height of the content area includes:
根据所述内容区域的第二显示高度所指示的向下滑动的滑动量大于或等于第二阈值，确定所述内容区域中的第二元素与所述顶部区域重叠，其中，所述第二阈值用于表明所述内容区域中的元素与所述底部区域之间的最小距离。Based on the downward sliding amount indicated by the second display height of the content area being greater than or equal to a second threshold, it is determined that the second element in the content area overlaps with the top area, wherein the second threshold is used to indicate the minimum distance between the element in the content area and the bottom area.
可以看出，第二显示高度可以用于指示向下滑动的滑动量，在向下滑动的滑动量大于或者等于第二阈值时，电子设备可以通过向下滑动的滑动量来确定是否与底部区域发生重叠，而滑动量是基于用户在显示屏上的操作所确定的，所以可以基于用户的操作来开启底部区域的模糊效果，满足用户的操作需求，为用户提供良好的视觉效果。It can be seen that the second display height can be used to indicate the amount of downward sliding. When the amount of downward sliding is greater than or equal to the second threshold, the electronic device can determine whether there is an overlap with the bottom area by the amount of downward sliding. The sliding amount is determined based on the user's operation on the display screen, so the blur effect of the bottom area can be turned on based on the user's operation to meet the user's operating needs and provide the user with a good visual effect.
在第一方面的一种可能的实施方式中，所述电子设备包括应用程序框架层，所述显示第一应用的页面，包括：In a possible implementation of the first aspect, the electronic device includes an application framework layer, and the page displaying the first application includes:
启动所述第一应用，调用所述应用程序框架层中的模糊模板控件；Starting the first application and calling the fuzzy template control in the application framework layer;
按照所述模糊模板控件将所述第一应用的页面划分得到所述顶部区域、所述内容区域和所述底部区域。The page of the first application is divided into the top area, the content area and the bottom area according to the fuzzy template control.
可以看出，本申请在应用程序框架层中新增了一个控件，即模糊模板控件，该控件可以改变原有页面的显示层级，使得在现在的显示层级中，顶部区域和底部区域覆盖显示在内容区域的上方，为顶部区域和底部区域的模糊效果提供内容基础。It can be seen that this application adds a new control in the application framework layer, namely the blur template control, which can change the display hierarchy of the original page so that in the current display hierarchy, the top area and the bottom area are displayed over the content area, providing a content basis for the blur effect of the top area and the bottom area.
在第一方面的一种可能的实施方式中，所述方法还包括：In a possible implementation of the first aspect, the method further includes:
调用所述应用程序框架层中的模糊模板控件判断所述内容区域中的元素是否与顶部区域重叠，和/或，是否与所述底部区域重叠。The fuzzy template control in the application framework layer is called to determine whether the elements in the content area overlap with the top area and/or whether they overlap with the bottom area.
可以看出，本申请在应用程序框架层中所新增的模糊模板控件可以来判断是否重叠，从而调用系统中的其他模块来显示模糊效果。It can be seen that the fuzzy template control newly added in the application framework layer of this application can be used to determine whether there is overlap, thereby calling other modules in the system to display the fuzzy effect.
在第一方面的一种可能的实施方式中，所述方法还包括：In a possible implementation of the first aspect, the method further includes:
在所述内容区域中的第一元素与所述顶部区域没有重叠时，在所述顶部区域不显示所述第一元素的模糊效果；When the first element in the content area does not overlap with the top area, the blur effect of the first element is not displayed in the top area;
在所述内容区域中的第二元素与所述底部区域没有重叠时，在所述底部区域不显示所述第二元素的模糊效果。When the second element in the content area does not overlap with the bottom area, the blur effect of the second element is not displayed in the bottom area.
可以看出，在没有重叠时，为了使得第一应用中的各个部分看起来协调一致，可以取消模糊效果从而不显示模糊效果。It can be seen that when there is no overlap, in order to make the various parts in the first application look coordinated, the blur effect can be cancelled so that the blur effect is not displayed.
第二方面，本申请实施例提供的一种电子设备，所述电子设备包括：一个或多个处理器；存储器；所述存储器与所述一个或多个处理器耦合，所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，所述一个或多个处理器调用所述计算机指令以使得所述电子设备执行第一方面或第一方面的任一种可能的实现方式中描述的显示方法。In a second aspect, an electronic device is provided by an embodiment of the present application, the electronic device comprising: one or more processors; a memory; the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code comprises computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute the display method described in the first aspect or any possible implementation of the first aspect.
第三方面，本申请提供一种芯片或者芯片系统，该芯片或者芯片系统包括至少一个处理器和通信接口，通信接口和至少一个处理器通过线路互联，至少一个处理器用于运行计算机程序或指令，以执行第一方面或第一方面的任意一种可能的实现方式中描述的显示方法。其中，芯片中的通信接口可以为输入/输出接口、管脚或电路等。In a third aspect, the present application provides a chip or a chip system, the chip or chip system includes at least one processor and a communication interface, the communication interface and the at least one processor are interconnected by a line, and the at least one processor is used to run a computer program or instruction to execute the display method described in the first aspect or any possible implementation of the first aspect. The communication interface in the chip can be an input/output interface, a pin or a circuit, etc.
在一种可能的实现中，本申请实施例中上述描述的芯片或者芯片系统还包括至少一个存储器，该至少一个存储器中存储有指令。该存储器可以为芯片内部的存储单元，例如，寄存器、缓存等，也可以是该芯片的存储单元(例如，只读存储器、随机存取存储器等)。In a possible implementation, the chip or chip system described above in the embodiment of the present application further includes at least one memory, in which instructions are stored. The memory may be a storage unit inside the chip, such as a register, a cache, etc., or a storage unit of the chip (e.g., a read-only memory, a random access memory, etc.).
第四方面，本申请实施例提供了一种计算机存储介质，该计算机存储介质存储有计算机程序，该计算机程序被处理器执行时，使得计算机执行如第一方面或第一方面的任一种可能的实现方式中描述的显示方法。In a fourth aspect, an embodiment of the present application provides a computer storage medium, which stores a computer program. When the computer program is executed by a processor, the computer executes the display method described in the first aspect or any possible implementation of the first aspect.
第五方面，本申请实施例提供了一种计算机程序产品，当该计算机程序产品在通信装置上运行时，使得该通信装置执行如第一方面或第一方面的任一种可能的实现方式中描述的显示方法。In a fifth aspect, an embodiment of the present application provides a computer program product, which, when executed on a communication device, enables the communication device to execute a display method as described in the first aspect or any possible implementation of the first aspect.
应当理解的是，本申请中对技术特征、技术方案、有益效果或类似语言的描述并不是暗示在任意的单个实施例中可以实现所有的特点和优点。相反，可以理解的是对于特征或有益效果的描述意味着在至少一个实施例中包括特定的技术特征、技术方案或有益效果。因此，本说明书中对于技术特征、技术方案或有益效果的描述并不一定是指相同的实施例。进而，还可以任何适当的方式组合本实施例中所描述的技术特征、技术方案和有益效果。本领域技术人员将会理解，无需特定实施例的一个或多个特定的技术特征、技术方案或有益效果即可实现实施例。在其他实施例中，还可在没有体现所有实施例的特定实施例中识别出额外的技术特征和有益效果。It should be understood that the description of technical features, technical solutions, beneficial effects or similar language in this application does not imply that all features and advantages can be realized in any single embodiment. On the contrary, it is understood that the description of features or beneficial effects means that specific technical features, technical solutions or beneficial effects are included in at least one embodiment. Therefore, the description of technical features, technical solutions or beneficial effects in this specification does not necessarily refer to the same embodiment. Furthermore, the technical features, technical solutions and beneficial effects described in the present embodiment can also be combined in any appropriate manner. Those skilled in the art will understand that the embodiment can be realized without one or more specific technical features, technical solutions or beneficial effects of a specific embodiment. In other embodiments, additional technical features and beneficial effects can also be identified in a specific embodiment that does not embody all embodiments.
附图说明BRIEF DESCRIPTION OF THE DRAWINGS
以下对本申请实施例用到的附图进行介绍。The following is an introduction to the drawings used in the embodiments of the present application.
图1是本申请实施例提供的一种用户界面的显示层级的示意图；FIG1 is a schematic diagram of a display hierarchy of a user interface provided in an embodiment of the present application;
图2A至图2E是本申请实施例提供的一种页面滑动的示意；2A to 2E are schematic diagrams of page sliding provided in an embodiment of the present application;
图3所示为本申请实施例提供的一种电子设备的结构示意图；FIG3 is a schematic diagram showing the structure of an electronic device provided in an embodiment of the present application;
图4示例性示出一种电子设备的软件架构示意图；FIG4 exemplarily shows a schematic diagram of a software architecture of an electronic device;
图5是本申请实施例提供的另一种用户界面的显示层级的示意图；FIG5 is a schematic diagram of another display hierarchy of a user interface provided in an embodiment of the present application;
图6A至图6F示例性示出了在图库应用中显示“模糊效果”的UI；6A to 6F exemplarily show a UI displaying a “blur effect” in a gallery application;
图7示例性示出了本申请实施例提供的一种显示方法的流程示意图；FIG. 7 exemplarily shows a flow chart of a display method provided in an embodiment of the present application;
图8是本申请实施例提供的一种向上滑动的滑动量的示意图；FIG8 is a schematic diagram of a sliding amount of an upward sliding provided in an embodiment of the present application;
图9是本申请实施例提供的一种向下滑动的滑动量的示意图；FIG9 is a schematic diagram of a downward sliding amount provided by an embodiment of the present application;
图10示例性示出了本申请实施例提供的一种显示模糊效果的模块交互流程图。FIG. 10 exemplarily shows a module interaction flow chart for displaying a blur effect provided in an embodiment of the present application.
具体实施方式Detailed ways
本申请以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括复数表达形式，除非其上下文中明确地有相反指示。还应当理解，本申请中使用的术语“和/或”是指并包含一个或多个所列出项目的任何或所有可能组合。The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to be used as limitations to the present application. As used in the specification and appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include plural expressions, unless there is a clear indication to the contrary in the context. It should also be understood that the term "and/or" used in the present application refers to and includes any or all possible combinations of one or more listed items.
以下，术语“第一”、“第二”仅用于描述目的，而不能理解为暗示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征，在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features, and in the description of the embodiments of the present application, unless otherwise specified, "plurality" means two or more.
本申请的说明书和权利要求书及附图中的术语“用户界面(user interface，UI)”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。应用程序的用户界面是通过java、可扩展标记语言(extensible markup language，XML)等特定计算机语言编写的源代码，界面源代码在终端设备上经过解析，渲染，最终呈现为用户可以识别的内容，比如图片、文字、按钮等控件。控件(control)也称为部件(widget)，是用户界面的基本元素，典型的控件有工具栏(toolbar)、菜单栏(menu bar)、文本框(text box)、按钮(button)、滚动条(scrollbar)、图片和文本。界面中的控件的属性和内容是通过标签或者节点来定义的，比如XML通过<Textview>、<ImgView>、<VideoView>等节点来规定界面所包含的控件。一个节点对应界面中一个控件或属性，节点经过解析和渲染之后呈现为用户可视的内容。此外，很多应用程序，比如混合应用(hybrid application)的界面中通常还包含有网页。网页，也称为页面，可以理解为内嵌在应用程序界面中的一个特殊的控件，网页是通过特定计算机语言编写的源代码，例如超文本标记语言(hyper text markup language，HTML)，层叠样式表(cascading style sheets，CSS)，java脚本(JavaScript，JS)等，网页源代码可以由浏览器或与浏览器功能类似的网页显示组件加载和显示为用户可识别的内容。网页所包含的具体内容也是通过网页源代码中的标签或者节点来定义的，比如HTML通过<p>、<img>、<video>、<canvas>来定义网页的元素和属性。The term "user interface (UI)" in the specification, claims and drawings of this application refers to the medium interface for interaction and information exchange between an application or operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The user interface of an application is a source code written in a specific computer language such as Java and extensible markup language (XML). The interface source code is parsed and rendered on the terminal device, and finally presented as content that the user can recognize, such as pictures, text, buttons and other controls. Controls (controls), also known as widgets, are basic elements of the user interface. Typical controls include toolbars, menu bars, text boxes, buttons, scroll bars, pictures and text. The properties and contents of controls in the interface are defined by tags or nodes. For example, XML specifies the controls contained in the interface through nodes such as <Textview>, <ImgView>, and <VideoView>. A node corresponds to a control or attribute in the interface, and the node is presented as user-visible content after parsing and rendering. In addition, many applications, such as hybrid applications, usually include web pages in their interfaces. A web page, also called a page, can be understood as a special control embedded in the application interface. A web page is a source code written in a specific computer language, such as hypertext markup language (HTML), cascading style sheets (CSS), JavaScript (JS), etc. The web page source code can be loaded and displayed as user-recognizable content by a browser or a web page display component with similar functions to a browser. The specific content contained in a web page is also defined by tags or nodes in the web page source code. For example, HTML defines the elements and attributes of a web page through <p>, <img>, <video>, and <canvas>.
用户界面常用的表现形式是图形用户界面(graphic user interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。The most common form of user interface is graphical user interface (GUI), which refers to a user interface related to computer operation that is displayed in a graphical manner. It can be an icon, window, control or other interface element displayed on the display screen of an electronic device, where a control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets and other visual interface elements.
首先对本申请实施例中涉及的技术术语进行介绍。First, the technical terms involved in the embodiments of the present application are introduced.
(1)控件(1) Controls
在计算机编程当中，控件(或称部件，组件，widget或control)是一种图形用户界面元素，其显示的信息排列可以由用户改变，例如视窗或文本框。控件是一种基本的可视构件块，包含在应用程序中，控制着该应用程序处理的所有数据以及关于这些数据的交互操作。控件的不同组合通常打包在部件工具箱中，程序员可以构建图形用户界面(GUIs)。大多操作系统包括一套用于程序设计的控件，程序员可以将它们加入应用程序，并指定它们的行为。控件通常定义为面向对象编程(object oriented programmin，OOP)的类。因此许多控件产生于类继承。In computer programming, a widget (or part, component, widget, or control) is a graphical user interface element that displays information in an arrangement that can be changed by the user, such as a window or text box. A widget is a basic visual building block that is included in an application and controls all data that the application handles and the interactions with that data. Different combinations of widgets are usually packaged in widget toolkits, and programmers can build graphical user interfaces (GUIs). Most operating systems include a set of widgets for programming, which programmers can add to applications and specify their behavior. Widgets are usually defined as classes in object oriented programming (OOP). Therefore, many widgets are derived from class inheritance.
以安卓系统为例，以下为系统提供的一些典型控件的示例：Taking the Android system as an example, the following are some examples of typical controls provided by the system:
线性布局(Linear Layout)控件：用以实现流式布局，可以控制放置在控件中的元素水平或垂直排列。Linear Layout control: used to implement flow layout, which can control the horizontal or vertical arrangement of elements placed in the control.
列表视图(ListView)控件：用来以列表方式显示元素(或称对象，可以包含文字和图片)。通过此控件，可以将元素组成带有或不带有列标头的列，并显示伴随的图标和文字。可以使用ListView控件将称作ListItem元素(可以包含文字和图片)的列表条目组织成下列四种不同的视图之一：大(标准)图标，小图标，列表，报表。另外，该控件还可以管理列表中元素的排序方法和选定元素的外观。ListView control: used to display elements (or objects, which can contain text and pictures) in a list format. With this control, elements can be organized into columns with or without column headers, and accompanying icons and text can be displayed. You can use the ListView control to organize list items called ListItem elements (which can contain text and pictures) into one of the following four different views: large (standard) icons, small icons, lists, and reports. In addition, the control can also manage the sorting method of the elements in the list and the appearance of the selected element.
网格视图(GridView)控件：用来以网格方式显示元素(或称对象，可以包含文字和图片)。GridView control: used to display elements (or objects, which can contain text and pictures) in a grid format.
循环视图(RecyclerView)控件：可以以列表方式、网格方式等显示元素(或称对象，可以包含文字和图片)。相较于ListView控件，RecyclerView控件具有更强大的元素复用机制，提供更多种布局管理器(LayoutMananger)用来处理多种布局，可以自定义布局管理器来决定条目的排布规则，比如可以提供：与ListView控件类似的线性布局，实现横向或纵向列表方向的元素布局；网格布局，可以指定元素数量；瀑布流布局，可以指定列表方向，也可以指定同方向的元素数量。RecyclerView control: can display elements (or objects, which can include text and images) in a list or grid format. Compared with ListView control, RecyclerView control has a more powerful element reuse mechanism and provides more layout managers to handle multiple layouts. You can customize the layout manager to determine the arrangement rules of items. For example, it can provide: linear layout similar to ListView control to realize element layout in horizontal or vertical list direction; grid layout, you can specify the number of elements; waterfall layout, you can specify the list direction, you can also specify the number of elements in the same direction.
视图翻页(ViewPager)控件：提供多页面切换的效果。该控件是容器类，可以在该控件中添加其它控件。ViewPager控件需要PagerAdapter适配器类为它提供数据，可以通过创建适配器(adapter)给该控件填充多个视图(view)，当用户进行左右滑动操作时，可以图像视图(ImageView)控件：用来显示图像(图片)。ViewPager control: provides the effect of switching multiple pages. This control is a container class, and other controls can be added to it. The ViewPager control requires the PagerAdapter adapter class to provide it with data. You can create an adapter to fill multiple views for this control. When the user swipes left or right, you can ImageView control: used to display images (pictures).
在一个用户界面中，根据布局的需要，可以使用一种或多种控件，也可以在一个控件内部嵌套使用控件。下面以LinearLayout控件为例，基于LinearLayout控件可以设置一个水平布局的视图，该视图为父视图；在父视图上基于LinearLayout控件设置两个高度等于父视图高度的第一子视图和第二子视图，两个子视图的布局方式都设置为垂直排列；在第二子视图中基于LinearLayout控件设置第三子视图和第四子视图，这两个子视图沿垂直方向排列于父视图之上，并且宽度与父视图相等。In a user interface, one or more controls can be used according to the needs of the layout, or controls can be nested inside a control. Taking the LinearLayout control as an example, a horizontal layout view can be set based on the LinearLayout control, which is the parent view; on the parent view, two subviews, the first and second subviews, whose heights are equal to the height of the parent view, are set based on the LinearLayout control, and the layout of the two subviews is set to vertical arrangement; in the second subview, the third and fourth subviews are set based on the LinearLayout control, and the two subviews are arranged vertically on the parent view, and their widths are equal to the parent view.
需要说明的是，以上仅为一种控件嵌套使用的示例，在其它示例中，实现父视图的控件与实现子视图的控件，也可以是不同类型的控件，本申请实施例对此不作限制。It should be noted that the above is only an example of nested use of controls. In other examples, the controls that implement the parent view and the controls that implement the child view may also be different types of controls, and the embodiments of the present application do not limit this.
(2)元素、子元素(2) Elements and sub-elements
控件用于对用户界面中的元素(或称对象，或数据等)进行布局。本申请实施例中，如果将控件看做容器，那么放置于其中的对象(比如文字或图片等)，则称为元素。由于控件可以嵌套使用，则子控件(或子视图)中的元素相对于父控件(或父视图)来说，就称为子元素。示例性地，第四子视图中可以进一步基于ImageView控件设置一个第一图片，这样该第一图片相对于该ImageView控件来说，是该ImageView控件的内部元素，而相对于第四子视图来说，则为该子视图内部的子元素。Controls are used to layout elements (or objects, or data, etc.) in the user interface. In the embodiment of the present application, if the control is regarded as a container, then the objects placed therein (such as text or pictures, etc.) are called elements. Since controls can be nested, the elements in the child controls (or child views) are called child elements relative to the parent control (or parent view). Exemplarily, a first picture can be further set based on the ImageView control in the fourth subview, so that the first picture is an internal element of the ImageView control relative to the ImageView control, and is a sub-element inside the subview relative to the fourth subview.
请参见图1，图1是本申请实施例提供的一种用户界面的显示层级的示意图。Please refer to FIG. 1 , which is a schematic diagram of a display hierarchy of a user interface provided in an embodiment of the present application.
从图1所示的平面结构可以看出，在用户界面10中，可以使用一种或多种控件，比如说状态栏111控件、背景层115控件、标题栏112控件、内容视图113控件、三键导航116控件和导航条117控件。其中，在图1所示的显示层级中，状态栏111、标题栏112、内容视图113、三键导航116和导航条117这几个控件的视图的布局方式为：沿水平方向排列于背景层115之上(以水平方向的左侧为下侧，右侧为上侧为例进行说明)，并且宽度与背景层115大致相等。从图1还可以看出，如果将内容视图113作为容器，那么放置其中的对象示例性地包括搜索栏1131、子页签1132、底部页签1133或者工具栏114。在一种实现中，放置于内容视图113中的搜索栏1131也可以放置于标题栏112中。As can be seen from the planar structure shown in FIG. 1 , one or more controls can be used in the user interface 10, such as a status bar 111 control, a background layer 115 control, a title bar 112 control, a content view 113 control, a three-button navigation 116 control, and a navigation bar 117 control. Among them, in the display hierarchy shown in FIG. 1 , the layout of the views of the status bar 111, the title bar 112, the content view 113, the three-button navigation 116, and the navigation bar 117 controls is as follows: they are arranged horizontally on the background layer 115 (the left side in the horizontal direction is the lower side, and the right side is the upper side as an example for explanation), and the width is approximately equal to the background layer 115. It can also be seen from FIG. 1 that if the content view 113 is used as a container, the objects placed therein exemplarily include a search bar 1131, a sub-tab 1132, a bottom tab 1133, or a toolbar 114. In one implementation, the search bar 1131 placed in the content view 113 can also be placed in the title bar 112.
从图1所示的立体结构可以看出，背景层115位于用户界面10的最下层，为一个高度和宽度等于用户界面10的高度和宽度的视图，用于提供透明的背景色。状态栏111位于用户界面10的最上层，为一个高度和宽度等于用户界面10的高度和宽度的透明视图，用于在最顶部提供状态信息。标题栏112、内容视图113三键导航116和/或导航条117位于用户界面10的中间层，为状态栏111所在层的下一层，以及背景层115所在层的上一层。As can be seen from the three-dimensional structure shown in FIG1 , the background layer 115 is located at the bottom layer of the user interface 10, and is a view with a height and width equal to the height and width of the user interface 10, and is used to provide a transparent background color. The status bar 111 is located at the top layer of the user interface 10, and is a transparent view with a height and width equal to the height and width of the user interface 10, and is used to provide status information at the top. The title bar 112, the content view 113 three-button navigation 116 and/or the navigation bar 117 are located in the middle layer of the user interface 10, which is the next layer of the status bar 111 layer, and the previous layer of the background layer 115 layer.
从图1所示的立体结构可以看出，标题栏112、内容视图113、三键导航116和/或导航条117分别为宽度大致等于用户界面的宽度的视图，这几个视图的布局方式为位于同一平面，且相互之间不重叠，分别位于该平面的不同区域。其中，标题栏112位于用户界面10的顶部，三键导航116或者导航条117位于用户界面10的底部，内容视图113位于用户界面10的中部，在标题栏112和三键导航116或者导航条117之间。在内容视图113所在的平面中，搜索栏1131、子页签1132、底部页签1133或者工具栏114的布局方式为位于内容视图113的不同区域，其中，搜索栏1131位于内容视图113的顶部，子页签1132位于内容视图113的中间，底部页签1133或者工具栏114位于内容视图113的底部。It can be seen from the three-dimensional structure shown in FIG1 that the title bar 112, the content view 113, the three-button navigation 116 and/or the navigation bar 117 are views whose width is approximately equal to the width of the user interface. The layout of these views is located in the same plane, and they do not overlap with each other, and are located in different areas of the plane. Among them, the title bar 112 is located at the top of the user interface 10, the three-button navigation 116 or the navigation bar 117 is located at the bottom of the user interface 10, and the content view 113 is located in the middle of the user interface 10, between the title bar 112 and the three-button navigation 116 or the navigation bar 117. In the plane where the content view 113 is located, the layout of the search bar 1131, the sub-tab 1132, the bottom tab 1133 or the toolbar 114 is located in different areas of the content view 113, wherein the search bar 1131 is located at the top of the content view 113, the sub-tab 1132 is located in the middle of the content view 113, and the bottom tab 1133 or the toolbar 114 is located at the bottom of the content view 113.
在一种实现中，若用户界面中不存在三键导航116或者导航条117，则底部页签1133和/或工具栏114显示在用户界面的底部。In one implementation, if the three-button navigation 116 or the navigation bar 117 does not exist in the user interface, the bottom tab 1133 and/or the toolbar 114 are displayed at the bottom of the user interface.
请参见图2A至图2E，图2A至图2E是本申请实施例提供的一种页面滑动的示意图。其中，图2A至图2E以图库应用程序为例，基于图1所示的用户界面的显示层级示例性地说明页面的滑动过程。Please refer to Figures 2A to 2E, which are schematic diagrams of page sliding provided in an embodiment of the present application. Figures 2A to 2E take a gallery application as an example and exemplarily illustrate the page sliding process based on the display hierarchy of the user interface shown in Figure 1.
如图2A所示，相册的用户界面10包括状态栏111、标题栏112、内容视图113和工具栏114，等等。基于图1所示的显示层级，状态栏111位于整个用户界面的顶部，可包括移动通信信号(又可称为蜂窝信号)的一个或多个信号强度指示符、无线高保真(wirelessfidelity，Wi-Fi)信号强度指示符，电池状态指示符、时间指示符等。标题栏112也被称为导航栏，位于状态栏111的下方，用于显示标题“相册”、增加控件和更多控件，在一种实现中，标题栏112还可以包括搜索栏，用于提供搜索照片、地点、人物等的入口。工具栏114也可以称为标签栏，位于用户界面的最底部，可包括“照片”控件、“相册”控件、“时刻”控件和“创作”控件，以提供不同子任务、视图和/或模式的切换入口，让用户可以进行快速切换。As shown in FIG2A , the user interface 10 of the album includes a status bar 111, a title bar 112, a content view 113, a toolbar 114, and the like. Based on the display hierarchy shown in FIG1 , the status bar 111 is located at the top of the entire user interface and may include one or more signal strength indicators of a mobile communication signal (also referred to as a cellular signal), a wireless fidelity (Wi-Fi) signal strength indicator, a battery status indicator, a time indicator, and the like. The title bar 112 is also referred to as a navigation bar, located below the status bar 111, and is used to display the title “Album”, add controls, and more controls. In one implementation, the title bar 112 may also include a search bar to provide an entry for searching for photos, places, people, and the like. The toolbar 114 may also be referred to as a tab bar, located at the very bottom of the user interface, and may include a “Photo” control, an “Album” control, a “Moment” control, and a “Create” control to provide a switching entry for different subtasks, views, and/or modes, allowing the user to quickly switch.
内容视图113也可以称为内容展示区域，位于用户界面的中间，包括不同的子页签，子页签用于展示图库应用程序的各种图片或者用于切换到不同的图片。其中，内容视图113可以以列表形式、卡片形式、集合形式、图片形式和文本形式中的一种或多种方式来展示。The content view 113 may also be referred to as a content display area, which is located in the middle of the user interface and includes different sub-tabs, which are used to display various images of the gallery application or to switch to different images. The content view 113 may be displayed in one or more of a list form, a card form, a collection form, an image form, and a text form.
可以理解的是，由于电子设备的显示屏的显示区域有限，当内容视图113中所包括的内容较多时，电子设备的显示屏不能一次性显示所有的内容，可以隐藏部分内容。如图2B所示，内容视图113可显示“相机”区域、“所有照片”区域、“截屏录屏”区域、“视频”区域和“分享”区域。当用户想查看更多内容时，可向上滑动内容视图113所在页面。因此，电子设备在接收到向上滑动页面的用户操作211时，可以根据该向上滑动页面的用户操作211调整当前显示的内容，显示如图2C所示的用户界面。It is understandable that, due to the limited display area of the display screen of the electronic device, when the content view 113 includes a lot of content, the display screen of the electronic device cannot display all the content at once, and some of the content can be hidden. As shown in FIG2B , the content view 113 can display the "Camera" area, the "All Photos" area, the "Screenshot" area, the "Video" area, and the "Share" area. When the user wants to view more content, the page where the content view 113 is located can be swiped up. Therefore, when the electronic device receives the user operation 211 of sliding the page up, it can adjust the currently displayed content according to the user operation 211 of sliding the page up, and display the user interface shown in FIG2C .
如图2C所示，在向上滑动过程中，内容视图113中的内容与位于顶部的标题栏112发生了重叠。由于标题栏112和内容视图113属于相互独立的显示层级，标题栏112中所显示的内容与内容视图113中所显示的内容不存在关联关系，所以电子设备需要隐藏内容视图113中重叠部分的内容，比如说隐藏“相机”区域中与标题栏112发生重叠的内容。As shown in FIG2C , during the upward sliding process, the content in the content view 113 overlaps with the title bar 112 at the top. Since the title bar 112 and the content view 113 belong to independent display levels, the content displayed in the title bar 112 is not associated with the content displayed in the content view 113, so the electronic device needs to hide the overlapping content in the content view 113, for example, hide the content in the "camera" area that overlaps with the title bar 112.
如图2D所示，电子设备在接收到向下滑动页面的用户操作212时，可以根据该向下滑动页面的用户操作212调整当前显示的内容，显示如图2E所示的用户界面。As shown in FIG. 2D , when the electronic device receives a user operation 212 of sliding the page downward, it can adjust the currently displayed content according to the user operation 212 of sliding the page downward, and display a user interface as shown in FIG. 2E .
如图2E所示，在向下滑动过程中，内容视图113中的内容与位于底部的工具栏114发生了重叠。由于工具栏114和内容视图113属于相互独立的显示层级，工具栏114中所显示的内容与内容视图113中所显示的内容不存在关联关系，所以电子设备需要隐藏内容视图113中与工具栏114发生重叠的内容。As shown in FIG2E , during the downward sliding process, the content in the content view 113 overlaps with the toolbar 114 at the bottom. Since the toolbar 114 and the content view 113 belong to independent display levels, the content displayed in the toolbar 114 has no association with the content displayed in the content view 113, so the electronic device needs to hide the content in the content view 113 that overlaps with the toolbar 114.
从图2C和图2E可以看出，在向上滑动或者向下滑动的过程中，标题栏112和工具栏114所显示的背景颜色始终不变。其中，从图1可以看出，用户界面的背景层为透明背景，因此标题栏112和工具栏114所显示的背景颜色与该应用程序的颜色模式有关，若应用程序的颜色模式为浅色(light)模式，则标题栏112和工具栏114所显示的背景颜色为白色；若应用程序的颜色模式为深色(dark)模式，则标题栏112和工具栏114所显示的背景颜色为黑色。As can be seen from FIG. 2C and FIG. 2E , during the process of sliding up or sliding down, the background color displayed by the title bar 112 and the toolbar 114 remains unchanged. As can be seen from FIG. 1 , the background layer of the user interface is a transparent background, so the background color displayed by the title bar 112 and the toolbar 114 is related to the color mode of the application. If the color mode of the application is a light mode, the background color displayed by the title bar 112 and the toolbar 114 is white; if the color mode of the application is a dark mode, the background color displayed by the title bar 112 and the toolbar 114 is black.
容易理解的是，若内容视图113中所显示的内容为携带有色彩的内容(比如说图片)，在内容视图113中的内容与标题栏112和/或工具栏114发生重叠时，由于标题栏112和/或工具栏114所显示的背景颜色始终不变，比如说始终显示为白色或黑色，那么内容视图113中携带有色彩的内容在与标题栏112和/或工具栏114发生重叠后是突然消失的，从而导致在滑动过程中内容视图113与标题栏112和/或工具栏114之间的空间关系/位置关系是割裂的，缺乏联动性，给用户带好不好的视觉效果，用户体验差。It is easy to understand that if the content displayed in the content view 113 is colored content (such as a picture), when the content in the content view 113 overlaps with the title bar 112 and/or the toolbar 114, since the background color displayed by the title bar 112 and/or the toolbar 114 remains unchanged, for example, it is always displayed as white or black, then the colored content in the content view 113 suddenly disappears after overlapping with the title bar 112 and/or the toolbar 114, resulting in the spatial relationship/position relationship between the content view 113 and the title bar 112 and/or the toolbar 114 being disconnected during the sliding process, lacking linkage, bringing a good or bad visual effect to the user, and a poor user experience.
有鉴于此，本申请提供了一种显示方法及相关装置，应用于电子设备，电子设备配置有显示屏，可以通过显示屏响应用户发起的显示请求，例如显示应用程序内的操作界面，又或者显示应用程序内存储在数据库内的内容，比如显示图库应用存储于数据库内的图像。In view of this, the present application provides a display method and related devices, which are applied to an electronic device. The electronic device is equipped with a display screen and can respond to display requests initiated by the user through the display screen, such as displaying an operation interface within an application, or displaying content stored in a database within the application, such as displaying images stored in a database by a gallery application.
电子设备的应用程序框架层包括模糊模板控件，模糊模板控件可用于提供模糊目标，电子设备显示第一应用的页面后，可按照模糊模板将第一应用的页面划分为顶部区域、内容区域和底部区域的显示层级，若判断得到内容区域与顶部区域发生重叠，则启动顶部区域的模糊效果，在顶部区域显示模糊效果；若判断得到内容区域与底部区域发生重叠，则启动底部区域的模糊效果，在底部区域显示模糊效果。The application framework layer of the electronic device includes a fuzzy template control, which can be used to provide a fuzzy target. After the electronic device displays the page of the first application, it can divide the page of the first application into display levels of a top area, a content area, and a bottom area according to the fuzzy template. If it is determined that the content area overlaps with the top area, the fuzzy effect of the top area is activated and the fuzzy effect is displayed in the top area; if it is determined that the content area overlaps with the bottom area, the fuzzy effect of the bottom area is activated and the fuzzy effect is displayed in the bottom area.
在一种实现中，电子设备可实时监测第一应用的页面滑动，从而可在监测到第一应用的页面滑动后，判断内容区域是否与顶部区域发生重叠，和/或，是否与底部区域发生重叠。In one implementation, the electronic device can monitor the page sliding of the first application in real time, so that after monitoring the page sliding of the first application, it can determine whether the content area overlaps with the top area and/or whether it overlaps with the bottom area.
因此，本申请实施例可以在顶部区域和/或底部区域显示模糊效果，使得内容区域与顶部区域和/或底部区域之间存在位置/空间上的联动性，给用户提供良好的视觉效果。Therefore, the embodiment of the present application can display a blur effect in the top area and/or the bottom area, so that there is a positional/spatial linkage between the content area and the top area and/or the bottom area, providing a good visual effect to the user.
本申请实施例中的应用程序的用户界面，也可以称之为应用窗口。应用窗口可以为应用程序活动(Activity)，也可以为应用程序活动包括的视图(View)。为了方便说明，后续将应用程序活动简称为活动进行说明。其中，电子设备的一个应用可以包括至少一个Activity，一个Activity可以包括至少一个View。在一种实施方式中，Activity是用户和应用程序之间进行交互的接口。Activity供应用程序在其中绘制界面。Activity可以填满屏幕(表现形式为全屏显示)，也可以比屏幕小且浮动在其他Activity上面(表现形式例如为悬浮窗、小窗)。在一种实施方式中，一个Activity是用户可以直观交互的东西，可以表现为一个用户界面，可以理解为一个Activity对应一个用户界面(可以包括至少一个控件)。在一种实施方式中，View是用户界面的控件的一种抽象，一个View可以是一个控件，也可以是多个控件组合的一组控件。The user interface of the application in the embodiment of the present application may also be referred to as an application window. The application window may be an application activity (Activity) or a view (View) included in the application activity. For the convenience of explanation, the application activity will be referred to as activity in the following description. Among them, an application of an electronic device may include at least one Activity, and an Activity may include at least one View. In one embodiment, Activity is an interface for interaction between a user and an application. Activity is for an application to draw an interface therein. Activity may fill the screen (in the form of full-screen display), or it may be smaller than the screen and float on top of other Activities (in the form of, for example, a floating window or a small window). In one embodiment, an Activity is something that a user can interact with intuitively, which may be expressed as a user interface, and can be understood as one Activity corresponding to one user interface (which may include at least one control). In one embodiment, View is an abstraction of a control of a user interface, and a View may be a control or a group of controls composed of multiple controls.
本申请实施例中，电子设备可以但不限于是手机、平板电脑、手持计算机、桌面型计算机、膝上型计算机、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、蜂窝电话、个人数字助理(personal digital assistant，PDA)，以及智能电视、智慧屏等智能家居设备，智能手环、智能手表、智能眼镜等可穿戴设备，增强现实(augmentedreality，AR)、虚拟现实(virtual reality，VR)、混合现实(mixed reality，MR)等扩展现实(extended reality，XR)设备，车载设备或智慧城市设备，本申请实施例对电子设备的具体类型不作特殊限制。In the embodiments of the present application, the electronic device may be, but is not limited to, a mobile phone, a tablet computer, a handheld computer, a desktop computer, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), and smart home devices such as smart TVs and smart screens, wearable devices such as smart bracelets, smart watches, and smart glasses, augmented reality (AR), virtual reality (VR), mixed reality (MR) and other extended reality (XR) devices, vehicle-mounted devices or smart city devices. The embodiments of the present application do not impose any special restrictions on the specific types of electronic devices.
示例地，以电子设备为手机为例，如图3所示为本申请实施例提供的一种电子设备的结构示意图。电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。For example, taking the electronic device as a mobile phone as an example, as shown in Figure 3, a structural diagram of an electronic device provided in an embodiment of the present application is shown. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图片信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and/or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.
控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.
处理器110中还可以设置存储器，用于存储指令和数据。在一种实施方式中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。The processor 110 may also be provided with a memory for storing instructions and data. In one embodiment, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另一种实施方式中，天线可以和调谐开关结合使用。Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In another embodiment, the antenna can be used in combination with a tuning switch.
移动通信模块150可以提供应用在电子设备100上的包括第二代移动通信技术(second generation，2G)/第三代移动通信技术(third generation，3G)/第四代移动通信技术(fourth-generation，4G)/第五代移动通信技术(fifth generation，5G)/第六代移动通信技术(six generation，6G)等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。The mobile communication module 150 can provide wireless communication solutions including the second generation (2G)/third generation (3G)/fourth generation (4G)/fifth generation (5G)/sixth generation (6G) applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, etc. the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1.
在一种实施方式中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。In one implementation, at least some functional modules of the mobile communication module 150 may be disposed in the processor 110 .
在一种实施方式中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。In one implementation, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be arranged in the same device.
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。The wireless communication module 160 can provide wireless communication solutions for application in the electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication technology (NFC), infrared technology (IR), etc.
无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。The wireless communication module 160 may be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 may also receive a signal to be sent from the processor 110, modulate the signal, amplify the signal, and convert it into an electromagnetic wave for radiation via the antenna 2.
在一种实施方式中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobilecommunications，GSM)，通用分组无线服务(general packet radio service，GPRS)，码分多址接入(code division multiple access，CDMA)，宽带码分多址(wideband codedivision multiple access，WCDMA)，时分码分多址(time-division code divisionmultiple access，TD-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidou navigation satellite system，BDS)，准天顶卫星系统(quasi-zenithsatellite system，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。In one embodiment, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple 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, and/or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and/or a satellite based augmentation system (SBAS).
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图片处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.
显示屏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)等。在一种实施方式中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。The display screen 194 is used to display pictures, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In one embodiment, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.
电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图片播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如图像数据、音频数据、电话本等)等。The internal memory 121 can be used to store computer executable program codes, which include instructions. The internal memory 121 can include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, a picture playback function, etc.), etc. The data storage area can store data created during the use of the electronic device 100 (such as image data, audio data, phone book, etc.), etc.
此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。处理器110通过运行存储在内部存储器121的指令，和/或存储在设置于处理器中的存储器的指令，执行电子设备100的各种功能应用以及数据处理。In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc. The processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 121 and/or instructions stored in a memory provided in the processor.
电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。The electronic device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.
压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一种实施方式中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In one embodiment, the pressure sensor 180A can be disposed on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc.
电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。The capacitive pressure sensor may include at least two parallel plates having conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure based on the change in capacitance.
当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。When a touch operation is applied to the display screen 194, the electronic device 100 detects the strength of the touch operation according to the pressure sensor 180A. The electronic device 100 can also calculate the touch position according to the detection signal of the pressure sensor 180A.
在一种实施方式中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。In one embodiment, touch operations acting on the same touch position but with different touch operation strengths may correspond to different operation instructions. For example, when a touch operation with a touch operation strength less than a first pressure threshold acts on a short message application icon, an instruction to view a short message is executed. When a touch operation with a touch operation strength greater than or equal to the first pressure threshold acts on a short message application icon, an instruction to create a new short message is executed.
触摸传感器180K，也称“触控器件”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。The touch sensor 180K is also called a “touch control device.” The touch sensor 180K may be disposed on the display screen 194 , and the touch sensor 180K and the display screen 194 form a touch screen, also called a “touch control screen.”
触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。The touch sensor 180K is used to detect a touch operation applied thereto or in the vicinity thereof. The touch sensor may transmit the detected touch operation to the application processor to determine the type of the touch event.
在一种实施方式中，当触摸传感器检测到的触摸操作事件包括长按事件和/或移动事件的情况下，可以通过显示屏194提供与触摸操作相关的视觉输出，比如说显示顶部区域和/底部区域的模糊效果。在另一种实施方式中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。In one embodiment, when the touch operation event detected by the touch sensor includes a long press event and/or a moving event, a visual output related to the touch operation can be provided through the display screen 194, such as a blur effect of the top area and/or the bottom area. In another embodiment, the touch sensor 180K can also be disposed on the surface of the electronic device 100, which is different from the position of the display screen 194.
骨传导传感器180M可以获取振动信号。Bone conduction sensor 180M can obtain vibration signals.
按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。The key 190 includes a power key, a volume key, etc. The key 190 may be a mechanical key or a touch key. The electronic device 100 may receive key input and generate key signal input related to user settings and function control of the electronic device 100.
马达191可以产生振动提示。Motor 191 can generate vibration prompts.
指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。Indicator 192 may be an indicator light, which may be used to indicate charging status, power changes, messages, missed calls, notifications, etc.
SIM卡接口195用于连接SIM卡。The SIM card interface 195 is used to connect a SIM card.
电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。例如，分层架构的软件系统可以是安卓(Android)系统，也可以是鸿蒙(harmony)操作系统(operating system，OS)，或其它软件系统，或上述多种软件系统共同构建的系统。本申请实施例以分层架构的Android系统为例说明电子设备100的软件结构。The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. For example, the software system of the layered architecture can be an Android system, or a Harmony operating system (OS), or other software systems, or a system constructed by the above-mentioned multiple software systems. The embodiment of the present application takes the Android system of the layered architecture as an example to illustrate the software structure of the electronic device 100.
图4示例性示出一种电子设备100的软件架构示意图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一种实施方式中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。FIG4 exemplarily shows a schematic diagram of the software architecture of an electronic device 100. The layered architecture divides the software into several layers, each layer having a clear role and division of labor. The layers communicate with each other through software interfaces. In one embodiment, the Android system is divided into four layers, namely, from top to bottom, the application layer, the application framework layer, the Android runtime (Android runtime) and the system library, and the kernel layer.
应用程序层可以包括一系列应用程序包。The application layer can include a series of application packages.
如图4所示，应用程序包可以包括图库，信息，文件，备忘录，浏览器，视频，通话，导航，蓝牙等应用程序。本申请中的应用程序也可以替换为小程序、原子化服务等其他软件。As shown in Figure 4, the application package may include applications such as gallery, information, files, memo, browser, video, call, navigation, Bluetooth, etc. The application in this application may also be replaced by other software such as mini-programs and atomic services.
其中，上述应用程序中包含用于显示的对象，比如说图片、视频、文本、文件，等等。进一步地，图片和/或视频可以为图库、文件、壁纸或者其他支持图片和/或视频选择的应用中的图片和/或视频，文本可以为信息、备忘录、文件、浏览器或者其他支持文本选择或者文本编辑的应用中的文本，文件可以为文件应用程序或者其他支持文件选择的应用中的文件等等。The above-mentioned application includes objects for display, such as pictures, videos, texts, files, etc. Further, pictures and/or videos may be pictures and/or videos in a gallery, files, wallpapers, or other applications that support picture and/or video selection, texts may be texts in messages, memos, files, browsers, or other applications that support text selection or text editing, and files may be files in a file application or other applications that support file selection, etc.
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.
如图4所示，应用程序框架层可以包括窗口管理器(window manager，WM)，内容提供器(content providers)，视图系统(view system)，资源管理器(resource manager)，输入(input)管理器，通知管理器等(notification manager)。As shown in FIG. 4 , the application framework layer may include a window manager (WM), content providers, a view system, a resource manager, an input manager, a notification manager, etc.
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小和显示屏外观，判断显示屏外观的模式是深色(dark)模式还是浅色(light)模式，以及是否分屏，是否有悬浮窗、状态栏、锁定屏幕、截取屏幕等。The window manager is used to manage window programs. The window manager can obtain the display size and display appearance, determine whether the display appearance mode is dark mode or light mode, whether it is split screen, whether there is a floating window, status bar, lock screen, capture screen, etc.
内容提供器用来存放和获取数据，并使这些数据可以被窗口管理器访问。这些数据可以包括文件，文件夹，文本，视频，图片，音频，拨打和接听的电话，浏览历史和书签，电话簿等。Content providers are used to store and retrieve data and make it accessible to the window manager. This data can include files, folders, text, videos, pictures, audio, calls made and received, browsing history and bookmarks, phone books, etc.
视图系统包括可视控件，例如，显示文字的文本控件(text view)、显示文本的图片控件(image view)，列表控件(list view)或模糊模板控件，等等。视图系统可用于构建应用程序的显示界面。显示界面可以由一个或多个视图组成，例如，包括短信通知图标的显示界面，可以包括显示文字以及显示图片的视图。The view system includes visual controls, such as text controls (text view) that display text, image controls (image view) that display text, list controls (list view) or fuzzy template controls, etc. The view system can be used to build the display interface of the application. The display interface can be composed of one or more views. For example, the display interface including the SMS notification icon can include views that display text and images.
在一种实现中，模糊模板控件用于向应用程序提供内容区、顶部导航栏区和底部工具栏的页面结构，且顶部导航栏区和底部工具栏区覆盖显示在内容区的上面。In one implementation, the fuzzy template control is used to provide the application with a page structure of a content area, a top navigation bar area, and a bottom toolbar, and the top navigation bar area and the bottom toolbar area are displayed over the content area.
例如，图库APP在运行时可以通过调用模糊模板控件在页面中创建显示层级：内容视图(位于下侧)、顶部导航栏视图和底部工具栏视图(均位于上侧)，并在上述视图中显示元素(或称对象，可以包含文字和图片)。视图系统中还设置有视图组(view group)，模糊模板控件创建可继承(extend)于视图组，即模糊模板控件是视图组的子类，能够用于视图组的所有数据和功能。For example, when the gallery app is running, it can create a display hierarchy in the page by calling the fuzzy template control: content view (located at the bottom), top navigation bar view and bottom toolbar view (both located at the top), and display elements (or objects, which can include text and pictures) in the above views. The view system also has a view group (view group), and the fuzzy template control can be created to extend the view group, that is, the fuzzy template control is a subclass of the view group and can be used for all data and functions of the view group.
在一种实现中，图库APP调用模糊模板控件后，可在页面中显示与模糊模板对应的内容视图、顶部导航栏视图和底部工具栏视图。图库APP可以在内容视图中显示一个或多个元素(比如说图库APP存储在数据库内的图片)，在顶部导航栏视图中显示图库标题(比如相册)这一类元素，在底部工具栏视图中显示标签这一类元素。In one implementation, after the gallery APP calls the blur template control, it can display the content view, top navigation bar view and bottom toolbar view corresponding to the blur template on the page. The gallery APP can display one or more elements (such as pictures stored in the database of the gallery APP) in the content view, display elements such as gallery titles (such as albums) in the top navigation bar view, and display elements such as labels in the bottom toolbar view.
在一种实现中，在页面滑动过程中，模糊模板控件确定内容视图中显示的元素与顶部导航栏视图中显示的元素发生重叠时，图库APP可以开启顶部导航栏区的模糊效果。或者模糊模板控件确定内容视图中显示的元素与底部工具栏视图中显示的元素发生重叠时，图库APP可以开启底部工具栏区的模糊效果。In one implementation, during page sliding, when the blur template control determines that the elements displayed in the content view overlap with the elements displayed in the top navigation bar view, the gallery app can turn on the blur effect of the top navigation bar area. Or when the blur template control determines that the elements displayed in the content view overlap with the elements displayed in the bottom toolbar view, the gallery app can turn on the blur effect of the bottom toolbar area.
资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.
输入(input)管理器用于从内核层获取触摸操作对应的原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)，识别该输入事件所对应的控件。在一种实现中，电子设备的触摸屏检测到对触摸屏的触摸操作后，可通过内核层的触摸驱动向应用程序框架层中的输入管理器实时上报相应的触摸参数，例如触摸点的坐标、触摸时间等。输入管理器可根据接收到的触摸参数生成对应的触摸事件，例如放下(down)事件、移动(move)事件，抬起(up)事件，等等。进而，输入管理器可实时将触摸事件发送给视图组等组件，视图组获取到最新的触摸事件后，可将该触摸事件发送给模糊模板控件，由模糊模板控件根据接收到的触发事件确定内容视图中的元素是否与顶部导航栏视图中显示的元素或者与底部工具栏视图中显示的元素发生重叠，如果发生重叠，则调用渲染模板进行模糊效果的渲染。The input manager is used to obtain the original input event corresponding to the touch operation from the kernel layer (including touch coordinates, timestamp of the touch operation, etc.) and identify the control corresponding to the input event. In one implementation, after the touch screen of the electronic device detects a touch operation on the touch screen, the touch driver of the kernel layer can report the corresponding touch parameters, such as the coordinates of the touch point, the touch time, etc., to the input manager in the application framework layer in real time. The input manager can generate corresponding touch events according to the received touch parameters, such as a down event, a move event, an up event, etc. Furthermore, the input manager can send the touch event to components such as the view group in real time. After the view group obtains the latest touch event, it can send the touch event to the fuzzy template control. The fuzzy template control determines whether the elements in the content view overlap with the elements displayed in the top navigation bar view or the elements displayed in the bottom toolbar view according to the received trigger event. If overlap occurs, the rendering template is called to render the blur effect.
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备100振动，指示灯闪烁等。The notification manager enables applications to display notification information in the status bar, which can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is prompted in the status bar, a prompt sound is emitted, the electronic device 100 vibrates, an indicator light flashes, etc.
Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。Android Runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。The core library consists of two parts: one part is the function that needs to be called by the Java language, and the other part is the Android core library.
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。The application layer and the application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)，渲染模块等。The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), rendering module, etc.
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图片文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.
三维图形处理库用于实现三维图形绘图，图片渲染，合成，和图层处理等。The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing.
2D图形引擎是2D绘图的绘图引擎。A 2D graphics engine is a drawing engine for 2D drawings.
渲染模块可以用于对顶部导航栏视图中的内容进行模糊效果的渲染或者对底部工具栏视图中的内容进行模糊效果的渲染。其中，模糊效果包括高斯模糊效果、径向模糊效果，等等。在一种实现中，渲染模糊可以对内容视图中与顶部导航栏视图发生重叠部分的内容进行模糊渲染，从而可以在顶部导航栏视图中显示模糊效果。渲染模糊可以对内容视图中与底部工具栏视图发生重叠部分的内容进行模糊渲染，从而可以在底部工具栏视图中显示模糊效果。The rendering module can be used to render the content in the top navigation bar view with a blurred effect or to render the content in the bottom toolbar view with a blurred effect. The blur effect includes a Gaussian blur effect, a radial blur effect, and the like. In one implementation, the rendering blur can be used to render the content in the content view that overlaps with the top navigation bar view, so that the blurred effect can be displayed in the top navigation bar view. The rendering blur can be used to render the content in the content view that overlaps with the bottom toolbar view, so that the blurred effect can be displayed in the bottom toolbar view.
内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.
下面以显示模糊效果为例，示例性说明电子设备100软件以及硬件的工作流程。The following uses the display blur effect as an example to illustrate the workflow of the software and hardware of the electronic device 100.
以图库应用为例，电子设备响应于打开图库应用的用户操作，显示图库应用的首页，其中，图库应用的首页包括位于顶部的导航栏控件、位于中间的内容视图和位于底部的工具栏控件。当触摸传感器180K接收到作用于内容视图上的触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件。图库应用调用应用框架层的接口，从而调用视图系统中的模糊模板控件，模糊模板控件基于输入事件判断得到内容视图与导航栏视图发生重叠，进而调用系统库中的渲染模块对发生重叠的部分进行渲染得到渲染效果，然后通过调用内核层控制显示驱动，通过显示屏194在导航栏控件中显示上述渲染效果，此时，显示屏194显示具有模糊效果的导航栏视图。Taking the gallery application as an example, the electronic device responds to the user operation of opening the gallery application and displays the homepage of the gallery application, wherein the homepage of the gallery application includes a navigation bar control at the top, a content view in the middle, and a toolbar control at the bottom. When the touch sensor 180K receives a touch operation acting on the content view, the corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into an original input event (including touch coordinates, timestamp of the touch operation, and other information). The original input event is stored in the kernel layer. The application framework layer obtains the original input event from the kernel layer and identifies the input event. The gallery application calls the interface of the application framework layer, thereby calling the fuzzy template control in the view system. The fuzzy template control determines that the content view overlaps with the navigation bar view based on the input event, and then calls the rendering module in the system library to render the overlapping part to obtain a rendering effect, and then controls the display driver by calling the kernel layer, and displays the above rendering effect in the navigation bar control through the display screen 194. At this time, the display screen 194 displays a navigation bar view with a fuzzy effect.
首先介绍本申请实施例提供的一种基于模糊模板控件的页面的显示层级的示意图。First, a schematic diagram of the display hierarchy of a page based on a fuzzy template control provided in an embodiment of the present application is introduced.
请参见图5，图5是本申请实施例提供的另一种用户界面的显示层级的示意图。Please refer to FIG. 5 , which is a schematic diagram of the display hierarchy of another user interface provided in an embodiment of the present application.
从图5所示的平面结构可以看出，在用户界面510中，可以使用一种或多种控件，比如说状态栏511、背景层515、标题栏512、内容视图513、三键导航516和导航条517。其中，在图5所示的显示层级中，由于控件可以嵌套使用，如果将内容视图513作为容器，那么放置其中的对象示例性地包括状态栏511、标题栏512、搜索栏5131、子页签5132、底部页签5133、工具栏514、三键导航516和导航条517。在一种实现中，放置于内容视图513中的搜索栏5131也可以放置于标题栏512中。It can be seen from the plane structure shown in FIG5 that one or more controls can be used in the user interface 510, such as the status bar 511, the background layer 515, the title bar 512, the content view 513, the three-button navigation 516, and the navigation bar 517. Among them, in the display hierarchy shown in FIG5, since the controls can be nested, if the content view 513 is used as a container, the objects placed therein exemplarily include the status bar 511, the title bar 512, the search bar 5131, the sub-tab 5132, the bottom tab 5133, the toolbar 514, the three-button navigation 516, and the navigation bar 517. In one implementation, the search bar 5131 placed in the content view 513 can also be placed in the title bar 512.
从图5所示的立体结构可以看出，背景层515位于用户界面510的最下层，为一个高度和宽度等于用户界面510的高度和宽度的视图，用于提供模糊效果的背景色。It can be seen from the three-dimensional structure shown in FIG. 5 that the background layer 515 is located at the bottom layer of the user interface 510 , is a view whose height and width are equal to the height and width of the user interface 510 , and is used to provide a background color with a blurred effect.
状态栏511位于用户界面510的最上层，为一个高度和宽度等于用户界面510的高度和宽度的透明视图，用于在最顶部提供状态信息。The status bar 511 is located at the top layer of the user interface 510 and is a transparent view whose height and width are equal to the height and width of the user interface 510 , and is used to provide status information at the top.
标题栏512、内容视图513、三键导航516和导航条517中的一个或均多个位于用户界面510的中间层，其中，内容视图513为一个高度和宽度等于用户界面510的高度和宽度的视图。以用户界面510所在的平面来看，标题栏512位于用户界面510的顶部，三键导航516或者导航条517位于用户界面的底部，内容视图513位于用户界面510所在的整个平面。以用户界面510的显示层级来看，标题栏512、三键导航516或者导航条517所在的层为内容视图513所在层的上一层，也即标题栏512、三键导航516或者导航条517覆盖显示在内容视图513的上方。One or more of the title bar 512, content view 513, three-button navigation 516 and navigation bar 517 are located in the middle layer of the user interface 510, wherein the content view 513 is a view whose height and width are equal to the height and width of the user interface 510. From the perspective of the plane where the user interface 510 is located, the title bar 512 is located at the top of the user interface 510, the three-button navigation 516 or the navigation bar 517 is located at the bottom of the user interface, and the content view 513 is located in the entire plane where the user interface 510 is located. From the perspective of the display level of the user interface 510, the layer where the title bar 512, the three-button navigation 516 or the navigation bar 517 is located is the upper layer of the layer where the content view 513 is located, that is, the title bar 512, the three-button navigation 516 or the navigation bar 517 is displayed over the content view 513.
在内容视图513所在的平面中，搜索栏5131、子页签5132、工具栏514或者底部页签5133的布局方式为自上而下的水平排列。In the plane where the content view 513 is located, the layout of the search bar 5131, the sub-tab 5132, the toolbar 514 or the bottom tab 5133 is arranged horizontally from top to bottom.
在一种实现中，若用户界面中不存在三键导航516或者导航条517，则底部页签5133和/或工具栏514显示在用户界面的底部。In one implementation, if the three-button navigation 516 or the navigation bar 517 does not exist in the user interface, the bottom tab 5133 and/or the toolbar 514 are displayed at the bottom of the user interface.
相较于图1所示的显示层级，图5所示的内容视图513的容器相较于图1所示的内容视图113而言，图5所示的内容视图513的容器大小更大。Compared to the display hierarchy shown in FIG. 1 , the container of the content view 513 shown in FIG. 5 is larger than the container of the content view 113 shown in FIG. 1 .
接下来介绍本申请实施例涉及的应用场景以及该场景下的用户界面示例。Next, the application scenario involved in the embodiment of the present application and the user interface example in the scenario are introduced.
首先，以图库应用为例，结合电子设备上提供的UI界面描述本申请实施例提供的“模糊效果”。First, taking the gallery application as an example, the “blur effect” provided by the embodiment of the present application is described in combination with the UI interface provided on the electronic device.
图6A至图6F示例性示出了在图库应用中显示“模糊效果”的UI。其中，图6A至图6F以图库应用程序为例，基于图5所示的用户界面的显示层级示例性地说明页面的滑动过程。6A to 6F exemplarily show a UI showing a "blur effect" in a gallery application. In particular, FIG. 6A to 6F take the gallery application as an example and exemplarily illustrate the page sliding process based on the display hierarchy of the user interface shown in FIG. 5 .
图6A示例性示出了本申请实施例涉及的系统桌面500。FIG. 6A exemplarily shows a system desktop 500 involved in an embodiment of the present application.
如图6A所示，桌面500中显示了一个放置有应用图标的页面，该页面包括有多个应用图标(例如，设置应用图标、应用市场应用图标、图库应用图标、浏览器应用图标，等等)。多个应用图标下方还显示包括有页面指示符，以表明当前显示的页面与其他页面的位置关系。页面指示符的下方显示有托盘区域。其中，托盘区域中包括有多个托盘图标，例如，相机应用图标、通讯录应用图标、电话应用图标、信息应用图标。托盘区域在页面切换时保持显示。在一些实施例中，上述页面也可以包括有多个应用图标和页面指示符，页面指示符可以不是页面的一部分，单独存在，上述托盘图标也是可选的，本申请实施例对此不作限制。As shown in FIG6A , a page with application icons is displayed on the desktop 500, and the page includes multiple application icons (for example, a settings application icon, an application market application icon, a gallery application icon, a browser application icon, etc.). A page indicator is also displayed below the multiple application icons to indicate the positional relationship between the currently displayed page and other pages. A tray area is displayed below the page indicator. Among them, the tray area includes multiple tray icons, for example, a camera application icon, an address book application icon, a phone application icon, and a message application icon. The tray area remains displayed when the page switches. In some embodiments, the above-mentioned page may also include multiple application icons and a page indicator. The page indicator may not be part of the page and may exist independently. The above-mentioned tray icon is also optional, and the embodiments of the present application are not limited to this.
电子设备可以检测到打开图库应用的用户操作，例如点击图库应用的桌面图标，响应于该操作，电子设备可以显示如图6B所示的用户界面。The electronic device may detect a user operation of opening a gallery application, such as clicking a desktop icon of the gallery application. In response to the operation, the electronic device may display a user interface as shown in FIG. 6B .
图6B示例性示出了本申请实施例提供的图库应用的首页界面(即用户界面510)。FIG. 6B exemplarily shows the home page interface (ie, user interface 510 ) of the gallery application provided in an embodiment of the present application.
如图6B所示，图库应用的用户界面510包括状态栏511、标题栏512、内容视图513和工具栏514。其中，状态栏511位于首页界面的最顶部，标题栏512位于状态栏511的下方，工具栏位于首页界面的底部，内容视图位于首页界面的中间，也即位于状态栏511的下方和工具栏514的上方。关于“状态栏511、标题栏512、内容视图513和工具栏514”的其他描述可参考图2A，此处不再赘述。As shown in FIG6B , the user interface 510 of the gallery application includes a status bar 511, a title bar 512, a content view 513, and a toolbar 514. Among them, the status bar 511 is located at the top of the home page interface, the title bar 512 is located below the status bar 511, the toolbar is located at the bottom of the home page interface, and the content view is located in the middle of the home page interface, that is, below the status bar 511 and above the toolbar 514. For other descriptions of “status bar 511, title bar 512, content view 513, and toolbar 514”, please refer to FIG2A , which will not be repeated here.
从图6B可以看出，内容视图513中可包括有多个照片分类选项，例如“相册”、“所有照片”、“截屏录像”、“视频”、“分享”，每一种照片分类中可显示属于该分类的封面图像。可以理解的是，由于电子设备的显示屏的显示区域有限，当内容视图513中所需要显示的照片分类较多，电子设备的显示屏不能一次性显示所有图库种类对应的图像时，可隐藏部分内容。如图6C所示，若用户想要查看其它内容，用户可以滑动电子设备的页面来查看其它内容，也即电子设备可以检测到滑动内容视图513的用户操作211，例如向上滑动内容视图513所在的页面，响应于该操作，电子设备可以显示如图6D所示的用户界面。As can be seen from FIG. 6B , the content view 513 may include multiple photo classification options, such as “Album”, “All Photos”, “Screenshot”, “Video”, and “Share”, and each photo classification may display the cover image belonging to that classification. It is understandable that, due to the limited display area of the display screen of the electronic device, when there are many photo categories to be displayed in the content view 513 and the display screen of the electronic device cannot display the images corresponding to all gallery categories at once, some content may be hidden. As shown in FIG. 6C , if the user wants to view other content, the user can slide the page of the electronic device to view other content, that is, the electronic device can detect the user operation 211 of sliding the content view 513, such as sliding up the page where the content view 513 is located. In response to the operation, the electronic device can display the user interface shown in FIG. 6D .
图6D示例性示出了本申请实施例提供的标题栏512所显示的“模糊效果”。在向上滑动的过程中，内容视图513可能会与标题栏512发生重叠。在内容视图513与导航栏发生重叠时，基于图5所示的显示层级，内容视图513中所显示的内容可显示在位于顶部的标题栏512的下方，加上图5所示的背景层515所带来的模糊背景，电子设备可在标题栏512中显示模糊效果521。也即，模糊效果521可以是以模糊形式呈现内容视图513中与标题栏512发生重叠的图像，包括但不限于图像中对象的形状和颜色(图6D未完全示意出)，等等。6D exemplarily shows the “blur effect” displayed by the title bar 512 provided in an embodiment of the present application. In the process of sliding upward, the content view 513 may overlap with the title bar 512. When the content view 513 overlaps with the navigation bar, based on the display hierarchy shown in FIG. 5 , the content displayed in the content view 513 may be displayed below the title bar 512 at the top, plus the blurred background brought by the background layer 515 shown in FIG. 5 , the electronic device may display a blur effect 521 in the title bar 512. That is, the blur effect 521 may be an image in the content view 513 that overlaps with the title bar 512, presented in a blurred form, including but not limited to the shape and color of the object in the image (not fully illustrated in FIG. 6D ), and so on.
可以理解的是，在向上滑动的过程中，通过标题栏512中所显示的模糊效果521可以将标题栏512与内容视图513联系起来，给用户提供一种内容视图513中的图像没有完全消失的视觉体验。举例来说，从图6C可以看出，在用户没有向上滑动之前，内容视图513的“相册”区域可显示完整的封面图像。从图6D可以看出，在用户向上滑动的过程中，内容视图513中的“相册”区域所显示的封面图像是不完整的，而标题栏512的模糊效果521可提供一种“相册”区域的封面图像中的其他部分隐藏显示在标题栏512的下方的视觉体验，给用户带来良好的视觉体验。It can be understood that, during the upward sliding process, the title bar 512 can be linked to the content view 513 through the blur effect 521 displayed in the title bar 512, providing the user with a visual experience that the image in the content view 513 has not completely disappeared. For example, as can be seen from FIG. 6C, before the user slides upward, the "album" area of the content view 513 can display a complete cover image. As can be seen from FIG. 6D, during the upward sliding process of the user, the cover image displayed in the "album" area of the content view 513 is incomplete, and the blur effect 521 of the title bar 512 can provide a visual experience that the other parts of the cover image in the "album" area are hidden and displayed below the title bar 512, giving the user a good visual experience.
需要说明的是，在继续向上滑动的过程中，内容视图513可与状态栏511发生重叠，状态栏511也可以显示模糊效果(图6D未示意出)。It should be noted that, in the process of continuing to slide upward, the content view 513 may overlap with the status bar 511, and the status bar 511 may also display a blur effect (not shown in FIG. 6D ).
如图6E所示，电子设备可以检测到向下滑动内容视图513的用户操作212，响应于该操作，电子设备可以显示如图6F所示的用户界面。图6F示例性示出了本申请实施例提供的工具栏514所显示的“模糊效果”。在向下滑动的过程中，内容视图513可能会与工具栏514发发生重叠。在内容视图513与工具栏514发生重叠时，基于图5所示的显示层级，内容视图513中所显示的内容可显示在位于底部的工具栏514的下方，加上图5所示的背景层515所带来的模糊背景，电子设备可在工具栏514中显示模糊效果522。也即，模糊效果522可以是以模糊形式呈现内容视图513中与工具栏514发生重叠的图像，包括但不限于图像中对象的形状和颜色(图6F未完全示意出)，等等。As shown in Figure 6E, the electronic device can detect the user operation 212 of sliding the content view 513 downward, and in response to the operation, the electronic device can display the user interface shown in Figure 6F. Figure 6F exemplarily shows the "blur effect" displayed by the toolbar 514 provided in an embodiment of the present application. In the process of sliding downward, the content view 513 may overlap with the toolbar 514. When the content view 513 overlaps with the toolbar 514, based on the display level shown in Figure 5, the content displayed in the content view 513 can be displayed below the toolbar 514 at the bottom, plus the blurred background brought by the background layer 515 shown in Figure 5, the electronic device can display the blur effect 522 in the toolbar 514. That is, the blur effect 522 can be an image that overlaps with the toolbar 514 in the content view 513 in a blurred form, including but not limited to the shape and color of the object in the image (not fully illustrated in Figure 6F), etc.
可以理解的是，在向下滑动的过程中，通过工具栏514中所显示的模糊效果522可以将工具栏514与内容视图513联系起来，给用户提供一种内容视图513中的图像没有完全消失的视觉体验。举例来说，从图6E可以看出，内容视图513的“收藏”区域和“地点”区域处于同一水平高度。在用户没有向下滑动之前，内容视图513的“收藏”区域和“地点”区域可显示完整的封面图像。从图6F可以看出，在用户向上滑动的过程中，内容视图513中的“收藏”区域和“地点”区域所显示的封面图像是不完整的，而工具栏514的模糊效果522可提供一种收藏”区域和“地点”区域的封面图像中的其他部分隐藏显示在工具栏514的下方的视觉体验，给用户提供一种良好的视觉体验。It can be understood that, during the downward sliding process, the toolbar 514 can be linked to the content view 513 through the blur effect 522 displayed in the toolbar 514, providing the user with a visual experience that the image in the content view 513 has not completely disappeared. For example, as can be seen from FIG. 6E, the "Collection" area and the "Place" area of the content view 513 are at the same level. Before the user slides downward, the "Collection" area and the "Place" area of the content view 513 can display a complete cover image. As can be seen from FIG. 6F, during the upward sliding process of the user, the cover image displayed in the "Collection" area and the "Place" area in the content view 513 is incomplete, and the blur effect 522 of the toolbar 514 can provide a visual experience that other parts of the cover image in the "Collection" area and the "Place" area are hidden and displayed below the toolbar 514, providing the user with a good visual experience.
图7示例性示出了本申请实施例提供的一种显示方法的流程示意图，该方法应用于电子设备。如图7所示的显示方法可以包括步骤S701至步骤S706中的一个或者多个步骤。应理解，本申请为了方便描述，故通过S701至S706这一顺序进行描述，并不旨在限定一定通过上述顺序进行执行。本申请实施例对于上述一个或多个步骤的执行的先后顺序、执行的时间、执行的次数等不做限定。FIG7 exemplarily shows a flow chart of a display method provided by an embodiment of the present application, and the method is applied to an electronic device. The display method shown in FIG7 may include one or more steps from step S701 to step S706. It should be understood that the present application is described in the order of S701 to S706 for the convenience of description, and is not intended to be limited to execution in the above order. The embodiment of the present application does not limit the order of execution, execution time, number of executions, etc. of the above one or more steps.
步骤S701，电子设备显示第一应用的页面。Step S701: the electronic device displays a page of a first application.
其中，第一应用的页面例如图6B所示。第一应用的页面包括顶部区域、内容区域和底部区域，例如下图8或者图9所示的顶部区域、内容区域和底部区域。The page of the first application is shown in Figure 6B , for example. The page of the first application includes a top area, a content area, and a bottom area, such as the top area, content area, and bottom area shown in Figure 8 or Figure 9 below.
其中，电子设备包括应用程序框架层，应用程序框架层中的模糊模板控件用于提供内容区域、顶部区域和底部区域的页面显示层级(例如图5所示的显示层级)，且顶部区域和底部区域覆盖显示在内容区域的上方。Among them, the electronic device includes an application framework layer, and the fuzzy template control in the application framework layer is used to provide a page display hierarchy of the content area, top area and bottom area (such as the display hierarchy shown in Figure 5), and the top area and bottom area are displayed over the content area.
具体地，电子设备接收对第一应用的用户操作，启动第一应用，按照模糊模板控件所提供的模糊模板将第一应用的页面划分为顶部区域、内容区域和底部区域。其中，顶部区域包括位于第一应用的页面顶部的控件，包括状态栏控件、标题栏控件、搜索栏控件等等中的一种或多种。底部区域包括第一应用的页面底部的控件，包括底部页签、工具栏、三键导航和导航条中的一种或多种。内容区域包括第一应用的内容视图中的元素。关于页面的显示层级的描述可参考图5，此处不再叙述。Specifically, the electronic device receives a user operation on the first application, starts the first application, and divides the page of the first application into a top area, a content area, and a bottom area according to the fuzzy template provided by the fuzzy template control. Among them, the top area includes controls located at the top of the page of the first application, including one or more of a status bar control, a title bar control, a search bar control, and the like. The bottom area includes controls at the bottom of the page of the first application, including one or more of a bottom tab, a toolbar, a three-button navigation, and a navigation bar. The content area includes elements in the content view of the first application. For a description of the display hierarchy of the page, please refer to Figure 5, which will not be described here.
步骤S702，电子设备按照安全区域将顶部区域、内容区域和底部区域的布局进行调整。Step S702: The electronic device adjusts the layout of the top area, the content area, and the bottom area according to the safety area.
其中，步骤S702为可选的步骤。Among them, step S702 is an optional step.
其中，安全区域也可称为安全边距，在用户界面中，安全区域包括内容与边框或者屏幕边缘之间所留出的一定距离，以确保用户能够舒适地使用界面，并避免误操作或内容被遮挡的问题。其中，安全区域的大小通过根据具体的设备和平台而定，以确保在不同屏幕尺寸和分辨率下都能正常显示和操作。The safe area is also called the safe margin. In the user interface, the safe area includes a certain distance between the content and the border or the edge of the screen to ensure that users can use the interface comfortably and avoid misoperation or content being blocked. The size of the safe area is determined according to the specific device and platform to ensure normal display and operation under different screen sizes and resolutions.
具体地，电子设备根据安全区域调整顶部区域、内容区域和底部区域中各个控件的显示范围，也即在安全区域所在的区域不显示内容，比如说刘海屏所在的区域不显示内容。Specifically, the electronic device adjusts the display range of each control in the top area, content area and bottom area according to the safe area, that is, no content is displayed in the area where the safe area is located, for example, no content is displayed in the area where the notch screen is located.
步骤S703，电子设备判断内容区域中的元素是否与顶部区域重叠。Step S703: The electronic device determines whether the elements in the content area overlap with the top area.
在一种实施方式中，电子设备接收到第一操作(例如滑动操作)时，可以执行步骤S703和/或步骤S704的判断。In one implementation, when the electronic device receives the first operation (eg, a sliding operation), the determination of step S703 and/or step S704 may be performed.
在一种实现中，电子设备接收第一滑动操作，判断内容区域中的元素是否与顶部区域重叠，当第一滑动操作为向上滑动时，内容区域中的第一元素与顶部区域重叠。In one implementation, the electronic device receives a first sliding operation and determines whether an element in the content area overlaps with the top area. When the first sliding operation is an upward sliding operation, the first element in the content area overlaps with the top area.
在一种可能的实施方式中，电子设备接收向上滑动操作，获取内容区域的第一显示高度，根据内容区域的第一显示高度来判断内容区域中的第一元素(例如图6C或者图6D所示的“相册”区域中的图像)是否与顶部区域重叠。在一种实现中，若内容区域的第一显示高度所指示的向上滑动的滑动量大于或等于第一阈值，则确定内容区域中的第一元素与顶部区域重叠，执行步骤S705；若内容区域的第一显示高度所指示的向上滑动的滑动量小于第一阈值，则确定内容区域中的第一元素与顶部区域没有重叠，则保持顶部区域的显示效果不变，不在顶部区域显示模糊效果。其中，第一阈值用于表明内容视图中的元素与顶部区域之间的最小距离。In a possible implementation, the electronic device receives an upward sliding operation, obtains a first display height of the content area, and determines whether the first element in the content area (e.g., the image in the "Album" area shown in FIG. 6C or FIG. 6D) overlaps with the top area according to the first display height of the content area. In one implementation, if the amount of upward sliding indicated by the first display height of the content area is greater than or equal to a first threshold, it is determined that the first element in the content area overlaps with the top area, and step S705 is executed; if the amount of upward sliding indicated by the first display height of the content area is less than the first threshold, it is determined that the first element in the content area does not overlap with the top area, and the display effect of the top area is kept unchanged, and the blur effect is not displayed in the top area. The first threshold is used to indicate the minimum distance between an element in the content view and the top area.
请参见图8，图8是本申请实施例提供的一种向上滑动的滑动量的示意图。如图8的(a)所示，第一应用的用户界面包括顶部区域801、内容视图802和底部区域803。其中，内容视图802包括显示区域8021和隐藏区域8022。可以理解的是，由于电子设备的显示屏的显示范围有限，所以第一应用的内容视图中的有些元素可以先在显示区域8021中显示，另一些元素可以先在隐藏区域8022中隐藏不显示。Please refer to Figure 8, which is a schematic diagram of the amount of sliding upward provided in an embodiment of the present application. As shown in (a) of Figure 8, the user interface of the first application includes a top area 801, a content view 802, and a bottom area 803. Among them, the content view 802 includes a display area 8021 and a hidden area 8022. It can be understood that due to the limited display range of the display screen of the electronic device, some elements in the content view of the first application can be displayed in the display area 8021 first, and other elements can be hidden in the hidden area 8022 first.
从图8的(a)可以看出，此时的显示区域8021具有原始显示高度，第一阈值为内容视图802的显示区域8021与顶部区域801之间的距离。As can be seen from FIG. 8 ( a ), the display area 8021 at this time has an original display height, and the first threshold is the distance between the display area 8021 of the content view 802 and the top area 801 .
在电子设备接收到用户的向上滑动操作后，响应于用户的向上滑动操作，内容视图802可调整其内容显示高度，显示如图8的(b)所示的界面。在图8的(b)所示的显示区域8023中可显示在图8的(a)所示的隐藏区域8022中所隐藏的元素，此时的显示区域8023具有第一显示高度，而内容视图802的向上滑动的滑动量＝第一显示高度-原始显示高度。After the electronic device receives the upward sliding operation of the user, in response to the upward sliding operation of the user, the content view 802 can adjust its content display height to display the interface shown in FIG8(b). The elements hidden in the hidden area 8022 shown in FIG8(a) can be displayed in the display area 8023 shown in FIG8(b), and the display area 8023 at this time has a first display height, and the sliding amount of the upward sliding of the content view 802 = the first display height - the original display height.
其中，图8的(a)所示的显示区域8021可以和其他区域(比如说顶部区域801)不重叠，为同一平面的中部区域。图8的(b)所示的显示区域8023可以和其他区域(比如说顶部区域801)重叠，在继续向上滑动的过程中，显示区域8023可以为整个内容视图802所包括的区域。The display area 8021 shown in FIG8(a) may not overlap with other areas (for example, the top area 801) and may be the middle area of the same plane. The display area 8023 shown in FIG8(b) may overlap with other areas (for example, the top area 801). During the upward sliding process, the display area 8023 may be the area included in the entire content view 802.
可以理解的是，由于顶部区域801中的各个控件是固定在界面顶部的，所以随着第一应用中的内容视图802的向上滑动，内容视图802中的元素与顶部区域801之间的距离会越来越近，当向上滑动的滑动量大于或等于第一阈值时，说明显示在内容视图802中的最上端元素已位于顶部区域801所在位置，可能与顶部区域801发生重叠。It is understandable that since the various controls in the top area 801 are fixed at the top of the interface, as the content view 802 in the first application slides upward, the distance between the elements in the content view 802 and the top area 801 will become closer and closer. When the upward sliding amount is greater than or equal to the first threshold, it means that the topmost element displayed in the content view 802 is already located at the top area 801, and may overlap with the top area 801.
需要说明的是，为了提高电子设备的显示屏的利用率，一般来说，内容视图802可显示在电子设备的显示屏中的内容高度为顶部区域801和底部区域802之间的距离。也即，原始显示高度＝顶部区域801和底部区域802之间的距离。所以，在一种实现中，模糊模板控件接收到的触摸事件用于指示向上滑动，则模糊模板控件可以确定内容视图802与顶部区域801发生重叠。It should be noted that, in order to improve the utilization rate of the display screen of the electronic device, generally speaking, the content height of the content view 802 that can be displayed on the display screen of the electronic device is the distance between the top area 801 and the bottom area 802. That is, the original display height = the distance between the top area 801 and the bottom area 802. Therefore, in one implementation, the touch event received by the fuzzy template control is used to indicate an upward slide, and the fuzzy template control can determine that the content view 802 overlaps with the top area 801.
步骤S704，电子设备判断内容区域中的元素是否与底部区域重叠。Step S704: The electronic device determines whether the elements in the content area overlap with the bottom area.
在一种实现中，电子设备接收第一滑动操作，判断内容区域中的元素是否与底部区域重叠，当第一滑动操作为向下滑动时，内容区域中的第二元素与底部区域重叠。In one implementation, the electronic device receives a first sliding operation and determines whether an element in the content area overlaps with the bottom area. When the first sliding operation is a downward slide, a second element in the content area overlaps with the bottom area.
在一种可能的实施方式中，电子设备接收向下滑动操作，获取内容区域的第二显示高度，根据内容区域的第二显示高度来判断内容区域中的第二元素(例如图6E或者图6F所示的“收藏”区域或者“地点”区域中的图像)是否与底部区域重叠，若内容区域的第二显示高度所指示的向下滑动的滑动量大于或等于第二阈值，则确定内容区域中的第二元素与底部区域重叠，执行步骤S706；若内容区域的第二显示高度所指示的向下滑动的滑动量小于第二阈值，则确定内容区域中的第二元素与底部区域没有重叠，则保持底部区域的原有显示效果不变，在底部区域不显示模糊效果。其中，第二阈值用于表明内容视图中的元素与底部区域之间的最小距离。In a possible implementation, the electronic device receives a downward sliding operation, obtains the second display height of the content area, and determines whether the second element in the content area (e.g., the image in the "Collection" area or the "Place" area shown in FIG. 6E or FIG. 6F) overlaps with the bottom area according to the second display height of the content area. If the downward sliding amount indicated by the second display height of the content area is greater than or equal to the second threshold, it is determined that the second element in the content area overlaps with the bottom area, and step S706 is executed; if the downward sliding amount indicated by the second display height of the content area is less than the second threshold, it is determined that the second element in the content area does not overlap with the bottom area, and the original display effect of the bottom area is maintained unchanged, and the blur effect is not displayed in the bottom area. The second threshold is used to indicate the minimum distance between the element in the content view and the bottom area.
请参见图9，图9是本申请实施例提供的一种向下滑动的滑动量的示意图。可以理解的是，在如图8的(b)所示的界面上继续向上滑动内容视图，内容视图802可继续调整其内容的显示高度，显示如图9的(a)所示的界面。在图9的(a)所示的界面中可显示在图8的(b)所示的隐藏区域中所隐藏的元素，此时的显示区域8024具有第二显示高度。其中，第二阈值为内容视图802的显示区域8024与底部区域803之间的距离，而原始显示高度可以是内容视图在没有滑动时的显示区域的高度(即图8的(a)所示界面中显示区域8021的显示高度)。Please refer to Figure 9, which is a schematic diagram of the amount of sliding downward provided in an embodiment of the present application. It can be understood that by continuing to slide the content view upward on the interface shown in (b) of Figure 8, the content view 802 can continue to adjust the display height of its content to display the interface shown in (a) of Figure 9. The elements hidden in the hidden area shown in (b) of Figure 8 can be displayed in the interface shown in (a) of Figure 9, and the display area 8024 at this time has a second display height. Among them, the second threshold is the distance between the display area 8024 of the content view 802 and the bottom area 803, and the original display height can be the height of the display area of the content view when there is no sliding (that is, the display height of the display area 8021 in the interface shown in (a) of Figure 8).
在电子设备接收到用户的向下滑动操作后，响应于用户的向下滑动操作，显示如图9的(b)所示的界面。可以理解的是，向下滑动内容视图所显示的元素是之前向上滑动时所滑动到顶部区域801的元素，因此，在内容视图802向下滑动时，显示区域8024的显示高度不变，所以在图9的(b)所示的界面中，向下滑动的滑动量＝第二显示高度-原始显示高度。After the electronic device receives the downward sliding operation of the user, in response to the downward sliding operation of the user, the interface shown in FIG9 (b) is displayed. It can be understood that the element displayed by sliding the content view downward is the element that was slid to the top area 801 when sliding upward before, so when the content view 802 slides downward, the display height of the display area 8024 remains unchanged, so in the interface shown in FIG9 (b), the sliding amount of sliding downward = the second display height - the original display height.
可以理解的是，由于底部区域803中的各个控件是固定在界面底部的，所以随着第一应用中的内容视图802的向下滑动，内容视图802中的元素与底部区域803之间的距离会越来越近，当向下滑动的滑动量大于或等于二阈值时，说明显示在内容视图802中的最下端元素已位于底部区域803所在位置，可以与底部区域803发生重叠。It can be understood that since the various controls in the bottom area 803 are fixed at the bottom of the interface, as the content view 802 in the first application slides downward, the distance between the elements in the content view 802 and the bottom area 803 will become closer and closer. When the downward sliding amount is greater than or equal to the second threshold, it means that the bottommost element displayed in the content view 802 is already located at the bottom area 803 and can overlap with the bottom area 803.
需要说明的是，为了提高电子设备的显示屏的利用率，一般来说，内容视图802可显示在电子设备的显示屏中的内容高度为顶部区域801和底部区域802之间的距离。也即，原始显示高度＝顶部区域801和底部区域802之间的距离。所以，在一种实现中，模糊模板控件接收到的触摸事件用于指示向下滑动，且滑动量＝内容高度-(顶部区域和底部区域之间的距离)，则模糊模板控件可以确定内容视图802与底部区域803发生重叠。It should be noted that, in order to improve the utilization rate of the display screen of the electronic device, generally speaking, the content height of the content view 802 that can be displayed in the display screen of the electronic device is the distance between the top area 801 and the bottom area 802. That is, the original display height = the distance between the top area 801 and the bottom area 802. Therefore, in one implementation, the touch event received by the fuzzy template control is used to indicate a downward slide, and the slide amount = content height - (the distance between the top area and the bottom area), then the fuzzy template control can determine that the content view 802 overlaps with the bottom area 803.
可以理解的是，因为每个应用的页面不同，所使用的控件不同，所以控件在页面上的布局不同。因此，不同的第一应用对应的第一阈值和第二阈值可能不相同。另外，随着第一应用中的内容视图的向上滑动或者向下滑动，出于滚动视图高度可能变化的考虑，第一阈值和第二阈值也可以会发生改变。It is understandable that, because each application has a different page and uses different controls, the layout of the controls on the page is different. Therefore, the first threshold and the second threshold corresponding to different first applications may be different. In addition, as the content view in the first application slides up or down, the first threshold and the second threshold may also change due to the possible change in the height of the scroll view.
步骤S705，电子设备在顶部区域显示模糊效果。Step S705: the electronic device displays a blur effect in the top area.
具体地，电子设备可以将位于顶部区域下方的内容区域中的第一元素(即顶部区域和内容区域的发生重叠时的区域内的元素)进行模糊处理得到模糊效果。Specifically, the electronic device may blur the first element in the content area below the top area (ie, the element in the area where the top area and the content area overlap) to obtain a blur effect.
进一步地，电子设备还可以根据调整顶部区域的透明度，使得顶部区域可以更好地显示模糊效果。其中，模糊处理包括但不限于均值模糊、高斯模糊、中值模糊，等等。模糊效果例如图6D所示的模糊效果521。Furthermore, the electronic device can also adjust the transparency of the top area so that the top area can better display the blur effect. The blur processing includes but is not limited to mean blur, Gaussian blur, median blur, etc. The blur effect is, for example, the blur effect 521 shown in FIG. 6D.
步骤S706，电子设备在底部区域显示模糊效果。Step S706: the electronic device displays a blur effect in the bottom area.
具体地，电子设备可以将位于底部区域下方的内容区域中的第二元素(即底部区域和内容区域的发生重叠时的区域内的元素)进行模糊处理得到模糊效果。Specifically, the electronic device may blur the second element in the content area below the bottom area (ie, the element in the area where the bottom area and the content area overlap) to obtain a blur effect.
进一步地，电子设备还可以根据调整底部区域的透明度，使得底部区域可以更好地显示模糊效果。其中，模糊处理包括但不限于均值模糊、高斯模糊、中值模糊，等等。模糊效果例如图6F所示的模糊效果522。Furthermore, the electronic device can also adjust the transparency of the bottom area so that the bottom area can better display the blur effect. The blur processing includes but is not limited to mean blur, Gaussian blur, median blur, etc. The blur effect is, for example, the blur effect 522 shown in FIG. 6F.
在本申请中，模糊处理以高斯模糊为例，高斯模糊的计算过程是将第一重叠区域和/或第二重叠区域内的元素(比如说图像)与正态分布进行卷积，高斯模糊后的图像在视觉上与透过毛玻璃观察图像时的视觉效果类似。其中，高斯模糊的模糊强度可以通过模糊半径(单位为像素)进行表示。可以理解的是，不同的应用程序，对应的高斯模糊的模糊强度可能不同。或者，不同的模糊处理方式对应的模糊强度也可能不同，本申请对此不作任何限制。In the present application, Gaussian blur is used as an example of blur processing. The calculation process of Gaussian blur is to convolve the elements (such as images) in the first overlapping area and/or the second overlapping area with the normal distribution. The image after Gaussian blur is visually similar to the visual effect of observing the image through frosted glass. Among them, the blur intensity of Gaussian blur can be represented by the blur radius (in pixels). It is understandable that different applications may have different corresponding Gaussian blur intensities. Alternatively, the blur intensities corresponding to different blur processing methods may also be different, and the present application does not impose any restrictions on this.
步骤S707，电子设备监测内容区域中的内容是否滑动。Step S707: The electronic device monitors whether the content in the content area slides.
具体地，电子设备可实时监测内容区域中的内容是否有滑动，若有滑动，则执行步骤S703或者步骤S704，若没有滑动，则保持原有显示效果不变。Specifically, the electronic device can monitor in real time whether the content in the content area slides. If so, step S703 or step S704 is executed; if not, the original display effect is kept unchanged.
图10示例性示出了本申请实施例提供的一种显示模糊效果的模块交互流程图。如图10所示，包括如下步骤：FIG10 exemplarily shows a flow chart of module interaction for displaying blur effect provided by an embodiment of the present application. As shown in FIG10 , the process includes the following steps:
步骤S1，启动第一应用。Step S1, start the first application.
具体地，用户可以点击电子设备的显示屏，启动第一应用。因此，电子设备接收用户对第一应用的用户操作(比如说触控操作)，该触控操作用户启动第一应用。Specifically, the user can click on the display screen of the electronic device to start the first application. Therefore, the electronic device receives the user's operation (for example, a touch operation) on the first application, and the touch operation user starts the first application.
步骤S2，第一应用启动第一应用的主活动。Step S2: The first application starts the main activity of the first application.
具体地，第一应用调用活动管理器，启动第一应用对应的主活动(mainactivity)。可以理解的是，每种语言都有一个程序入口，而安卓(android)程序的入口为main activity函数。其中，activity是安卓的核心类，为安卓应用程序组件，它提供一个屏幕，用户可以通过该屏幕进行交互以执行某些操作。在activity类中有onCreate事件发生，一般用于对activity进行初始化，并且通过setContentView方法将view放到activity上，绑定后，activity会显示view上的控件。因此，在第一应用启动对应的主活动后，可加载并显示第一应用的用户界面中的各个视图(view)。Specifically, the first application calls the activity manager to start the main activity (mainactivity) corresponding to the first application. It is understandable that each language has a program entry, and the entry of the Android program is the main activity function. Among them, activity is the core class of Android and is an Android application component. It provides a screen through which users can interact to perform certain operations. In the activity class, an onCreate event occurs, which is generally used to initialize the activity, and the view is placed on the activity through the setContentView method. After binding, the activity will display the controls on the view. Therefore, after the first application starts the corresponding main activity, the various views (views) in the user interface of the first application can be loaded and displayed.
其中，第一应用的用户界面中的各个视图包括标题栏控件、状态栏控件、搜索栏控件、内容视图控件、底部页签控件、工具栏控件、三键导航控件或者导航条控件等等。这样，电子设备便于对第一应用的用户界面中各个视图的控件以及各控件的内容进行显示，比如说显示如图6B所述的界面。Among them, each view in the user interface of the first application includes a title bar control, a status bar control, a search bar control, a content view control, a bottom tab control, a toolbar control, a three-button navigation control or a navigation bar control, etc. In this way, the electronic device can conveniently display the controls of each view in the user interface of the first application and the content of each control, for example, displaying the interface as shown in FIG6B.
步骤S3，主活动将第一应用的页面中的各个视图进行划分并向模糊模板控件传入。Step S3: The main activity divides each view in the page of the first application and transmits the views to the fuzzy template control.
具体地，主活动可以按照模糊模板控件所提供的模糊模板将第一应用的用户界面中的各个视图进行划分，从而得到内容区域、顶部区域和底部区域，然后将划分得到的内容区域、顶部区域和底部区域向模糊模板控件传入。其中，顶部区域和底部区域覆盖显示在内容区域的上方，顶部区域包括状态栏控件、标题栏控件或者搜索栏控件等等，内容区域包括内容视图，底部区域包括底部页签控件、工具栏控件、三键导航控件或者导航条控件。Specifically, the main activity can divide the various views in the user interface of the first application according to the fuzzy template provided by the fuzzy template control, thereby obtaining the content area, the top area and the bottom area, and then pass the divided content area, the top area and the bottom area to the fuzzy template control. Among them, the top area and the bottom area are displayed over the top of the content area, the top area includes the status bar control, the title bar control or the search bar control, etc., the content area includes the content view, and the bottom area includes the bottom tab control, the toolbar control, the three-button navigation control or the navigation bar control.
步骤S4，模糊模板控件向安全边距模块请求安全区域。Step S4: the fuzzy template control requests a safe area from the safe margin module.
步骤S5，安全边距模块向模糊模板控件返回安全区域。Step S5: The safety margin module returns the safety area to the fuzzy template control.
步骤S6，模糊模板控件根据安全区域调整控件的布局。Step S6, the fuzzy template control adjusts the layout of the control according to the safe area.
具体地，模糊模板控件根据第一应用所对应的安全区域来调整顶部区域、内容区域和底部区域中各个控件的布局，使得各个控件显示在安全区域内，在安全区域不显示各个控件。Specifically, the blurred template control adjusts the layout of each control in the top area, the content area, and the bottom area according to the safe area corresponding to the first application, so that each control is displayed in the safe area and is not displayed in the safe area.
其中，步骤S4-S6为可选的步骤。Among them, steps S4-S6 are optional steps.
步骤S7，模糊模板控件判断内容视图是否与顶部区域或者底部区域发生重叠。Step S7: the blurred template control determines whether the content view overlaps with the top area or the bottom area.
具体地，若模糊模板控件判断得到内容区域中的内容视图与顶部区域发生重叠，则执行S8-S10；若模糊模板控件判断得到内容区域中的内容视图与顶部区域发生重叠，则执行S11-S13。Specifically, if the fuzzy template control determines that the content view in the content area overlaps with the top area, S8-S10 is executed; if the fuzzy template control determines that the content view in the content area overlaps with the top area, S11-S13 is executed.
在一种可能的实施方式中，内容视图支持页面滚动功能，如果电子设备的触摸屏检测到用户输入的滑动操作，则触摸屏可通过驱动向输入管理器实时上报相应的触摸参数，例如触摸点的坐标、触摸时间等。输入管理器可根据接收到的触摸参数生成对应的触摸事件，例如，action down事件、action move事件以及action up事件等。进而，输入管理器可将生成的触摸事件向模糊模板控件传入。因此，模糊模板控件可以根据上述触摸事件所指示的滑动量判断内容视图是否与顶部区域或者底部区域发生重叠。In a possible implementation, the content view supports a page scrolling function. If the touch screen of the electronic device detects a sliding operation input by the user, the touch screen can report corresponding touch parameters, such as the coordinates of the touch point, the touch time, etc., to the input manager in real time through the driver. The input manager can generate corresponding touch events according to the received touch parameters, such as action down events, action move events, and action up events. Furthermore, the input manager can pass the generated touch events to the fuzzy template control. Therefore, the fuzzy template control can determine whether the content view overlaps with the top area or the bottom area according to the sliding amount indicated by the above touch event.
在一种实现中，若触摸事件所指示的向上滑动的滑动量大于或等于第一阈值，则确定内容视图与顶部区域发生重叠。示例性地，第一阈值用于表明内容视图中的元素与顶部区域之间的最小距离，也即显示在内容视图中的最上端元素与顶部区域之间的距离。In one implementation, if the sliding amount of the upward sliding indicated by the touch event is greater than or equal to a first threshold, it is determined that the content view overlaps the top area. Exemplarily, the first threshold is used to indicate the minimum distance between an element in the content view and the top area, that is, the distance between the topmost element displayed in the content view and the top area.
在一种实现中，若触摸事件所指示的向下滑动的滑动量大于或等于第二阈值，则确定内容视图与底部区域发生重叠。示例性地，第二阈值用于表明内容视图中的元素与底部区域之间的最小距离，也即显示在内容视图中的最下端元素与底部区域之间的距离。In one implementation, if the downward sliding amount indicated by the touch event is greater than or equal to a second threshold, it is determined that the content view overlaps the bottom area. Exemplarily, the second threshold is used to indicate the minimum distance between an element in the content view and the bottom area, that is, the distance between the bottommost element displayed in the content view and the bottom area.
步骤S8，模糊模板控件向渲染模块发送顶部区域的模糊请求。Step S8: The blur template control sends a blur request for the top area to the rendering module.
步骤S8为可选的步骤，具体地，在内容视图中的元素与顶部区域发生重叠后，说明内容视图中的元素位于顶部区域的下方，需要在顶部区域显示模糊效果，因此模糊模板控件向渲染模板发送顶部区域的模糊请求。Step S8 is an optional step. Specifically, after the elements in the content view overlap with the top area, it means that the elements in the content view are located below the top area and a blur effect needs to be displayed in the top area. Therefore, the blur template control sends a blur request for the top area to the rendering template.
步骤S9，渲染模板根据模糊请求向主活动传入顶部区域的模糊效果。Step S9: The rendering template transmits the blur effect of the top area to the main activity according to the blur request.
具体地，因为模糊模板控件可以提供模糊模板，使得顶部区域可以显示在内容区域的上方，所以模糊模板控件可以为顶部区域的模糊效果提供内容基础。因此，渲染模板可以将位于顶部区域下方的内容区域中的元素(即内容视图中的元素)进行模糊处理得到模糊效果。进一步地，渲染模板还可以根据调整顶部区域的透明度，使得顶部区域可以更好地显示模糊效果。其中，模糊处理包括但不限于均值模糊、高斯模糊、中值模糊，等等。Specifically, because the blur template control can provide a blur template so that the top area can be displayed above the content area, the blur template control can provide a content basis for the blur effect of the top area. Therefore, the rendering template can blur the elements in the content area below the top area (i.e., the elements in the content view) to obtain a blur effect. Furthermore, the rendering template can also adjust the transparency of the top area so that the top area can better display the blur effect. Among them, blur processing includes but is not limited to mean blur, Gaussian blur, median blur, and the like.
步骤S10，主活动显示顶部区域的模糊效果。Step S10, the main activity displays a blur effect on the top area.
具体地，第一应用的主活动可在第一应用的用户界面中显示顶部区域的模糊效果，也即顶部区域可显示顶部区域与内容视图的重叠区域内的元素的模糊效果。换言之，顶部区域不能显示出该元素的各个细节以及元素之间的边界，但是可以显示出该元素的颜色和大致轮廓。Specifically, the main activity of the first application can display a blurred effect of the top area in the user interface of the first application, that is, the top area can display a blurred effect of the elements in the overlapping area of the top area and the content view. In other words, the top area cannot display the details of the element and the boundaries between the elements, but can display the color and general outline of the element.
步骤S11，模糊模板控件向渲染模块发送底部区域的模糊请求。Step S11, the fuzzy template control sends a fuzzy request for the bottom area to the rendering module.
步骤S11为可选的步骤，具体地，在内容视图中的元素与底部区域发生重叠后，说明内容视图中的元素位于底部区域的下方，需要在底部区域显示模糊效果，因此模糊模板控件向渲染模板发送底部区域的模糊请求。Step S11 is an optional step. Specifically, after the element in the content view overlaps with the bottom area, it means that the element in the content view is located below the bottom area and a blur effect needs to be displayed in the bottom area. Therefore, the blur template control sends a blur request for the bottom area to the rendering template.
步骤S12，渲染模板根据模糊请求向主活动传入底部区域的模糊效果。Step S12: The rendering template transmits the blur effect of the bottom area to the main activity according to the blur request.
具体地，因为模糊模板控件可以提供模糊模板，使得底部区域可以显示在内容区域的上方，所以模糊模板控件可以为底部区域的模糊效果提供内容基础。因此，渲染模板可以将位于底部区域下方的内容区域中的元素(即内容视图中的元素)进行模糊处理，比如说高斯处理，得到模糊效果。进一步地，渲染模板还可以根据调整底部区域的透明度，使得底部区域可以更好地显示模糊效果。Specifically, because the blur template control can provide a blur template so that the bottom area can be displayed above the content area, the blur template control can provide a content basis for the blur effect of the bottom area. Therefore, the rendering template can blur the elements in the content area below the bottom area (i.e., the elements in the content view), such as Gaussian processing, to obtain a blur effect. Furthermore, the rendering template can also adjust the transparency of the bottom area so that the bottom area can better display the blur effect.
步骤S13，主活动显示底部区域的模糊效果。Step S13, the main activity displays a blur effect on the bottom area.
具体地，第一应用的主活动可在第一应用的用户界面中显示底部区域的模糊效果，也即底部区域可显示底部区域与内容视图的重叠区域内的元素的模糊效果。换言之，底部区域不能显示出该元素的各个细节以及元素之间的边界，但是可以显示出该元素的颜色和大致轮廓。Specifically, the main activity of the first application can display a blurred effect of the bottom area in the user interface of the first application, that is, the bottom area can display a blurred effect of the elements in the overlapping area of the bottom area and the content view. In other words, the bottom area cannot display the details of the element and the boundaries between the elements, but can display the color and general outline of the element.
应理解，本申请提供的上述方法实施例中的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。结合本申请实施例所公开的方法步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。It should be understood that each step in the above method embodiment provided by the present application can be completed by an integrated logic circuit of hardware in a processor or by instructions in the form of software. The method steps disclosed in the embodiments of the present application can be directly embodied as being executed by a hardware processor, or by a combination of hardware and software modules in a processor.
本申请还提供一种电子设备，该电子设备可以包括：存储器和处理器。其中，存储器可用于存储计算机程序；处理器可用于调用所述存储器中的计算机程序，以使得该电子设备执行上述任意一个实施例中的方法。The present application also provides an electronic device, which may include: a memory and a processor, wherein the memory may be used to store a computer program; and the processor may be used to call the computer program in the memory so that the electronic device executes the method in any one of the above embodiments.
本申请还提供了一种芯片系统，所述芯片系统包括至少一个处理器，用于实现上述任意一个实施例中电子设备执行的方法中所涉及的功能。The present application also provides a chip system, which includes at least one processor for implementing the functions involved in the method executed by the electronic device in any of the above embodiments.
在一种可能的设计中，所述芯片系统还包括存储器，所述存储器用于保存程序指令和数据，存储器位于处理器之内或处理器之外。In one possible design, the chip system also includes a memory, which is used to store program instructions and data, and the memory is located inside or outside the processor.
该芯片系统可以由芯片构成，也可以包含芯片和其他分立器件。The chip system may be composed of the chip, or may include the chip and other discrete devices.
可选地，该芯片系统中的处理器可以为一个或多个。该处理器可以通过硬件实现也可以通过软件实现。当通过硬件实现时，该处理器可以是逻辑电路、集成电路等。当通过软件实现时，该处理器可以是一个通用处理器，通过读取存储器中存储的软件代码来实现。Optionally, the processor in the chip system may be one or more. The processor may be implemented by hardware or by software. When implemented by hardware, the processor may be a logic circuit, an integrated circuit, etc. When implemented by software, the processor may be a general-purpose processor implemented by reading software code stored in a memory.
可选地，该芯片系统中的存储器也可以为一个或多个。该存储器可以与处理器集成在一起，也可以和处理器分离设置，本申请实施例并不限定。示例性地，存储器可以是非瞬时性处理器，例如只读存储器ROM，其可以与处理器集成在同一块芯片上，也可以分别设置在不同的芯片上，本申请实施例对存储器的类型，以及存储器与处理器的设置方式不作具体限定。Optionally, the memory in the chip system may also be one or more. The memory may be integrated with the processor or may be separately arranged with the processor, which is not limited in the embodiments of the present application. Exemplarily, the memory may be a non-transient processor, such as a read-only memory ROM, which may be integrated with the processor on the same chip or may be arranged on different chips respectively. The embodiments of the present application do not specifically limit the type of memory and the arrangement of the memory and the processor.
示例性地，该芯片系统可以是现场可编程门阵列(field programmable gatearray，FPGA)，可以是专用集成芯片(application specific integrated circuit，ASIC)，还可以是系统芯片(system on chip，SoC)，还可以是中央处理器(central processorunit，CPU)，还可以是网络处理器(network processor，NP)，还可以是数字信号处理电路(digital signal processor，DSP)，还可以是微控制器(micro controller unit，MCU)，还可以是可编程控制器(programmable logic device，PLD)或其他集成芯片。Exemplarily, the chip system can be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a microcontroller unit (MCU), a programmable logic device (PLD) or other integrated chips.
本申请还提供一种计算机程序产品，所述计算机程序产品包括：计算机程序(也可以称为代码，或指令)，当所述计算机程序被运行时，使得计算机执行上述任一个实施例中电子设备执行的方法。The present application also provides a computer program product, which includes: a computer program (also referred to as code, or instruction), which enables a computer to execute the method executed by the electronic device in any of the above embodiments when the computer program is executed.
本申请还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序(也可以称为代码，或指令)。当所述计算机程序被运行时，使得计算机执行上述任一个实施例中电子设备执行的方法。The present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program (also referred to as code or instruction). When the computer program is executed, the computer executes the method executed by the electronic device in any of the above embodiments.
本申请的各实施方式可以任意进行组合，以实现不同的技术效果。The various implementation modes of the present application can be combined arbitrarily to achieve different technical effects.
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid StateDisk)等。In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in this application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk Solid State Disk), etc.
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，该流程可以由计算机程序来指令相关的硬件完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。而前述的存储介质包括：ROM或随机存储记忆体RAM、磁碟或者光盘等各种可存储程序代码的介质。A person skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by a computer program to instruct the relevant hardware, and the program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the above-mentioned method embodiments. The aforementioned storage medium includes: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.
总之，以上所述仅为本发明技术方案的实施例而已，并非用于限定本发明的保护范围。凡根据本发明的揭露，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。In short, the above description is only an embodiment of the technical solution of the present invention, and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made according to the disclosure of the present invention shall be included in the protection scope of the present invention.
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311790943.4ACN118444867A (en) | 2023-12-22 | 2023-12-22 | A display method and related device |
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311790943.4ACN118444867A (en) | 2023-12-22 | 2023-12-22 | A display method and related device |
| Publication Number | Publication Date |
|---|---|
| CN118444867Atrue CN118444867A (en) | 2024-08-06 |
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311790943.4APendingCN118444867A (en) | 2023-12-22 | 2023-12-22 | A display method and related device |
| Country | Link |
|---|---|
| CN (1) | CN118444867A (en) |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120278756A1 (en)* | 2011-04-26 | 2012-11-01 | Google Inc. | Mobile browser context switching |
| CN104834429A (en)* | 2014-02-10 | 2015-08-12 | 联想(北京)有限公司 | Interface display method and electronic equipment |
| CN110609649A (en)* | 2019-09-25 | 2019-12-24 | 北京小米移动软件有限公司 | Interface display method, device and storage medium |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120278756A1 (en)* | 2011-04-26 | 2012-11-01 | Google Inc. | Mobile browser context switching |
| CN104834429A (en)* | 2014-02-10 | 2015-08-12 | 联想(北京)有限公司 | Interface display method and electronic equipment |
| CN110609649A (en)* | 2019-09-25 | 2019-12-24 | 北京小米移动软件有限公司 | Interface display method, device and storage medium |
| Publication | Publication Date | Title |
|---|---|---|
| CN113508360B (en) | Card display method, electronic device and computer-readable storage medium | |
| CN114237778B (en) | Interface display method and electronic device | |
| WO2022062898A1 (en) | Window display method and device | |
| CN116088725A (en) | Interface display method and device | |
| WO2023005751A1 (en) | Rendering method and electronic device | |
| EP4270911B1 (en) | Suspended ball processing method in multi-tasking scenario, and electronic device | |
| CN114095610B (en) | A notification message processing method and computer-readable storage medium | |
| CN115661301A (en) | Method for adding annotations, electronic device, storage medium and program product | |
| CN118244950B (en) | Widget display method and electronic equipment | |
| CN116048317B (en) | Display method and device | |
| CN116701795B (en) | Page display method and electronic device | |
| CN118444867A (en) | A display method and related device | |
| CN114594894A (en) | Interface element marking method, terminal device and storage medium | |
| CN117893639B (en) | Picture processing method and related device | |
| CN117707453B (en) | Method, equipment and storage medium for reading node information | |
| CN115268741B (en) | Screen capturing method, graphical interface and electronic equipment | |
| CN115220851B (en) | Method, electronic device, and readable storage medium for operating instructions | |
| CN119937889A (en) | Drag window display method and related device | |
| CN119311158A (en) | Interface display method and related device | |
| CN119718501A (en) | Interface switching method, electronic equipment and related device | |
| WO2024067122A1 (en) | Window display method and electronic device | |
| WO2025167740A1 (en) | Display method, user interface, and related apparatus | |
| WO2025161476A1 (en) | Webpage loading method and apparatus, and electronic device | |
| WO2024037346A1 (en) | Page management method and electronic device | |
| CN118394242A (en) | Suspension window management method and related device |
| 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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information | Country or region after:China Address after:Unit 3401, unit a, building 6, Shenye Zhongcheng, No. 8089, Hongli West Road, Donghai community, Xiangmihu street, Futian District, Shenzhen, Guangdong 518040 Applicant after:Honor Terminal Co.,Ltd. Address before:3401, unit a, building 6, Shenye Zhongcheng, No. 8089, Hongli West Road, Donghai community, Xiangmihu street, Futian District, Shenzhen, Guangdong Applicant before:Honor Device Co.,Ltd. Country or region before:China |