Interface display method, electronic equipment, storage medium and chip

Abstract

The invention provides an interface display method, electronic equipment, a storage medium and a chip. According to the method, a second interface can be displayed in response to a sliding operation on a first interface, a second content area in the second interface covers a title bar area, and a first tab bar is displayed in the title bar area of the second interface, so that the size of the second content area in the second interface is larger than that of a first content area in the first interface; since the size of the second content area in the second interface is larger than that of the first content area in the first interface, the second interface can display more image contents relative to the first interface, so that a user can pay more attention to the image contents, the immersion of the user in viewing images in an image library is improved, and the user experience is improved. Moreover, the method can reduce the transparency of the title characters, reduces the influence of the title characters on the attention of the user, and enables the user to distribute more attention to the image content provided by the image library application.

Description

Technical Field

[0001] The present application relates to the field of terminals, and in particular to an interface display method, electronic equipment, storage medium and chip. Background Art

[0002] Typically, a gallery can help users organize and manage images by creating albums, titles, tags, or using smart classification (such as by date, location, or person). When users view images in a gallery, the titles, tags, and other interface elements used to organize and manage images in the gallery will distract users, preventing them from fully focusing on the image content provided by the gallery, reducing their sense of immersion in viewing images in the gallery and affecting their user experience. Summary of the Invention

[0003] The present application provides an interface display method, electronic device, storage medium and chip, which can enhance the user's immersion in viewing images and improve the user experience.

[0004] In a first aspect, an interface display method is provided. An electronic device displays a first interface of a gallery application, the first interface including a title bar area and a first content area. The first content area is located below the title bar area in the first interface. The title bar area displays a title bar, the title bar includes title text, and the transparency of the title text is a first transparency, the first transparency being greater than a minimum value within a preset transparency value range. The first content area displays at least one tab bar and at least one group of image content, with one tab bar corresponding to one group of image content.

[0005] In response to a sliding operation on the first interface, the electronic device displays a second interface, where the second interface includes a title bar area and a second content area, the second content area covers the title bar area, the size of the second content area is larger than the size of the first content area, the transparency of the title text in the title bar area of the second interface is a second transparency, the second transparency is greater than or equal to the minimum value within a preset transparency value range and is less than the first transparency, a first tab bar is displayed in the title bar area of the second interface, and the first tab bar is the tab bar located at the topmost of at least one tab bar.

[0006] In an embodiment of the present application, when the electronic device responds to a sliding operation on the first interface, the second transparency of the title text included in the title bar of the second interface displayed is less than the first transparency of the title text included in the title bar of the first interface. That is to say, the embodiment of the present application can reduce the transparency of the title text, reduce the impact of the title text on the user's attention, enable the user to allocate more attention to the image content provided by the gallery application, enhance the user's immersion in viewing the image, and improve the user experience.

[0007] Moreover, in response to a sliding operation on the first interface, the electronic device can display the second content area in the second interface over the title bar area, and the first tab bar can be displayed in the title bar area of the second interface. This will make the size of the second content area in the second interface larger than the size of the first content area in the first interface. Since the size of the second content area in the second interface is larger than the size of the first content area in the first interface, the second interface can display more image content relative to the first interface, so that the user can focus more on the image content, further enhancing the user's immersion in viewing images in the gallery.

[0008] In conjunction with the first aspect, in an implementation of the first aspect, after the electronic device displays the second interface in response to a sliding operation on the first interface, the method further includes:

[0009] In response to a sliding operation on the second interface, the electronic device displays a third interface, where the third interface includes a title bar area and a second content area. A first tab bar is displayed in the title bar area of the third interface. The positions of other tab bars and at least one image content displayed in the second content area of the third interface are moved upward relative to the positions of other tab bars and at least one image content displayed in the second content area of the second interface. The other tab bars are tab bars other than the first tab bar in at least one tab bar.

[0010] In an embodiment of the present application, the electronic device displays a third interface in response to a sliding operation on the second interface, and a first tab bar is displayed in the title bar area of the third interface. That is, in the process of changing from the second interface to the third interface, the first tab bar can be displayed in a floating manner in the title bar area, and the position of at least one image content displayed in the second content area in the third interface is moved up relative to the position of at least one image content displayed in the second content area in the second interface. Since the first tab bar can be displayed in a floating manner in the title bar area of the third interface and the at least one image content displayed in the second content area in the third interface is moved up, the third interface can display more image content relative to the second interface, so that the user can pay more attention to the image content, further enhancing the user's immersion in viewing images in the gallery.

[0011] In combination with the first aspect, in a certain implementation of the first aspect, the second tab bar among the other tab bars is adjacent to the first tab bar displayed on the third interface, and the second tab bar is located below the first tab bar.

[0012] In conjunction with the first aspect, in an implementation of the first aspect, the transparency of the first tab bar in the third interface is a third transparency, and the third transparency is greater than a minimum value within a preset transparency value range; and after the electronic device displays the third interface in response to a sliding operation on the second interface, the method further includes:

[0013] In response to a sliding operation on the third interface, the fourth interface is displayed, and the fourth interface includes a title bar area. The title bar area of the fourth interface displays a second tab bar and a first tab bar. The transparency of the first tab bar in the fourth interface is a fourth transparency. The fourth transparency is greater than or equal to the minimum value within the preset transparency value range and is less than the third transparency. The transparency of the second tab bar is greater than the fourth transparency.

[0014] In an embodiment of the present application, the electronic device can display a fourth interface in response to a sliding operation on the third interface, wherein the title bar area of the fourth interface displays the second tab bar and the first tab bar, and the transparency of the first tab bar is less than the transparency of the second tab bar. This can weaken the display of the first tab bar and focus on displaying the second tab bar, allowing smooth switching between different tab bars in the title bar area to improve user experience.

[0015] In combination with the first aspect, in a certain implementation of the first aspect, the title bar includes a first interface element, the first tab bar includes label text, the color of the first interface element displayed on the second interface is the first color, the color of the label text displayed on the second interface is the second color, the color of the first interface element displayed on the third interface is the complementary color of the first color, and the color of the label text displayed on the third interface is the complementary color of the second color.

[0016] In an embodiment of the present application, the color of the label text displayed on the third interface can be the complementary color of the color of the label text displayed on the second interface, and the first interface element displayed on the third interface can be the complementary color of the first interface element displayed on the second interface, thereby improving the display effect.

[0017] In conjunction with the first aspect, in a certain implementation of the first aspect, after the electronic device responds to the sliding operation on the first interface and before displaying the second interface, the method further includes:

[0018] The electronic device displays the fifth interface, which includes a title bar area and a third content area. The third content area partially overlaps with the title bar area. The size of the third content area is larger than the size of the first content area and smaller than the size of the second content area. The transparency of the title text in the title bar area of the fifth interface is the fifth transparency, which is smaller than the first transparency and greater than the second transparency. Part of the first tab bar is displayed in the title bar area of the fifth interface.

[0019] In an embodiment of the present application, after a sliding operation is performed on the first interface, the electronic device first displays the fifth interface and then displays the second interface, wherein the size of the third content area of the fifth interface is larger than the size of the first content area of the first interface and smaller than the size of the second content area of the second interface, and the transparency of the title text of the fifth interface is smaller than the transparency of the title text of the first interface and larger than the transparency of the title text of the second interface. In this way, the first interface can be smoothly transitioned to the second interface through the fifth interface, thereby improving the display effect.

[0020] In conjunction with the first aspect, in an implementation of the first aspect, before the electronic device displays the first interface of the gallery application, the method further includes:

[0021] The electronic device displays the sixth interface, which includes a title bar area, a first search box area and a fourth content area. The first search box area is located below the title bar area. A search box is displayed in the first search box area. The fourth content area is located below the first search box area. The size of the fourth content area is smaller than that of the first content area.

[0022] In conjunction with the first aspect, in a certain implementation of the first aspect, before the electronic device displays the sixth interface and displays the first interface, the method further includes:

[0023] The electronic device displays a seventh interface, which includes the title bar area, a second search box area, and a fifth content area, wherein the second search box area partially overlaps with the title bar area, a portion of the search box is displayed in the second search box area, and the fifth content area is located below the second search box area, wherein a size of the fifth content area is larger than a size of the fourth content area and smaller than a size of the first content area; and

[0024] After displaying the seventh interface, the first interface is displayed. The first interface also includes a third search box area. The third search box area completely overlaps with the title bar area. The title bar area displayed in the first interface completely blocks the search box.

[0025] In an embodiment of the present application, during the process of changing from the sixth interface to the first interface, the seventh interface can be displayed, the second search box area in the seventh interface partially overlaps with the title bar area, a partial search box is displayed in the second search box area, the third search box area of the first interface completely overlaps with the title bar area, and the title bar area displayed in the first interface completely blocks the search box, that is, during the process of changing from the sixth interface to the first interface, the search box is gradually blocked by the title bar area until it is completely blocked. After the search box is completely blocked, the size of the first content area of the first interface is larger than the size of the fifth content area of the seventh interface, and the size of the fifth content area is larger than the fourth content area. That is to say, during the process of changing from the sixth interface to the first interface, the size of the content area gradually increases. Since the size of the content area gradually increases, more image content can be displayed in the interface, so that the user can pay more attention to the image content, thereby enhancing the user's immersion in viewing images in the gallery.

[0026] In conjunction with the first aspect, in an implementation of the first aspect, before the electronic device displays the sixth interface, the method further includes:

[0027] The electronic device displays the eighth interface, which includes an initial title bar area, an initial search box area and an initial content area. The initial search box area is located below the initial title bar area, and the initial content area is located below the initial search box area. The size of the title text in the initial title bar area is the first text size, and the first text size is larger than the text size of the title text in the title bar area. The size of the initial title bar area is larger than the size of the title bar area, and the size of the initial content area is smaller than the size of the fourth content area.

[0028] In the embodiment of the present application, since the first text size in the eighth interface is larger than the text size of the title text in the title bar area of the sixth interface, the size of the initial title bar area in the eighth interface is larger than the size of the title bar area in the sixth interface, and the size of the initial content area in the eighth interface is smaller than the size of the fourth content area of the sixth interface, the size of the title text in the sixth interface is reduced, the size of the title bar area is reduced, and the size of the content area is expanded relative to the eighth interface, thereby reducing the impact of the title text and title bar area on the user's attention. At the same time, the user can pay more attention to the image area, thereby improving the user experience.

[0029] In conjunction with the first aspect, in a possible implementation of the first aspect, after the electronic device displays the eighth interface and before displaying the seventh interface, the method further includes:

[0030] The electronic device displays a ninth interface, which includes a first title bar area, a fourth search box area and a sixth content area. The fourth search box area is located below the first title bar area, and the sixth content area is located below the fourth search box area. The size of the title text in the first title bar area is the second text size, and the second text size is larger than the text size of the title text in the title bar area and smaller than the first text size. The size of the first title bar area is larger than the size of the title bar area and smaller than the size of the initial title bar area. The size of the sixth content area is smaller than the size of the fourth content area and larger than the size of the initial content area.

[0031] In the embodiment of the present application, since the second text size of the ninth interface is larger than the text size of the title text in the title bar area of the seventh interface and smaller than the first text size of the eighth interface, and the size of the first title bar area of the ninth interface is larger than the size of the title bar area of the seventh interface and smaller than the size of the initial title bar area of the eighth interface, and the size of the sixth content area of the ninth interface is smaller than the size of the fourth content area of the seventh interface and larger than the size of the initial content area of the eighth interface, in the process of changing from the eighth interface to the ninth interface and to the seventh interface, the size of the title text gradually decreases, the size of the title bar area gradually decreases, and the size of the content area gradually expands. Since the size of the title text gradually decreases, the size of the title bar area gradually decreases, and the size of the content area gradually expands, the impact of the title text and the title bar area on the user's attention can be reduced, and the user can pay more attention to the image content, thereby improving the user experience.

[0032] In a second aspect, an electronic device is provided, wherein the electronic device is configured to execute the method provided in the first aspect. Specifically, the electronic device may include a processing unit configured to execute any possible implementation of the first aspect.

[0033] In a third aspect, an electronic device is provided, comprising: one or more processors; one or more memories; the one or more memories storing one or more computer programs, the one or more computer programs comprising instructions, which, when executed by the one or more processors, enable the electronic device to execute a method in any possible implementation of the first aspect.

[0034] In a fourth aspect, a computer-readable storage medium is provided, comprising computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the method described in the first aspect.

[0035] In a fifth aspect, a chip is provided, comprising a memory for storing instructions; and a processor for calling and executing instructions from the memory, so that an electronic device equipped with the chip executes the method described in the first aspect above. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 This is a schematic diagram of a gallery of related solutions provided.

[0037] Figure 2 2 is a schematic structural diagram of an electronic device 200 provided in an embodiment of the present application.

[0038] Figure 3 This is a software structure block diagram of an electronic device 200 provided in an embodiment of the present application.

[0039] Figure 4 This is a schematic diagram of a gallery interface provided in an embodiment of the present application.

[0040] Figure 5 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0041] Figure 6 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0042] Figure 7 This is an example diagram of a content area provided in an embodiment of the present application.

[0043] Figure 8 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0044] Figure 9 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0045] Figure 10 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0046] Figure 11 It is a schematic diagram of the overall process of the interface display method provided in an embodiment of the present application.

[0047] Figure 12 This is an example diagram of the position of an interface element provided in an embodiment of the present application.

[0048] Figure 13 This is an example diagram of a content area and a label area provided in an embodiment of the present application.

[0049] Figure 14 This is an example diagram of a hierarchical relationship provided in an embodiment of the present application.

[0050] Figure 15 This is a schematic diagram of an interface display method provided in an embodiment of the present application.

[0051] Figure 16 This is a schematic diagram of multiple layers provided in an embodiment of the present application.

[0052] Figure 17 This is another schematic diagram of multiple layers provided in an embodiment of the present application.

[0053] Figure 18 This is a schematic diagram of an interface display method provided in an embodiment of the present application.

[0054] Figure 19 This is another schematic diagram of multiple layers provided in an embodiment of the present application.

[0055] Figure 20 This is a schematic diagram of an interface display method provided in an embodiment of the present application.

[0056] Figure 21 This is another schematic diagram of multiple layers provided in an embodiment of the present application.

[0057] Figure 22 This is a schematic diagram of an interface display method provided in an embodiment of the present application.

[0058] Figure 23 This is another schematic diagram of multiple layers provided in an embodiment of the present application.

[0059] Figure 24 This is a schematic diagram of an interface display method provided in an embodiment of the present application.

[0060] Figure 25 This is another schematic diagram of multiple layers provided in an embodiment of the present application. DETAILED DESCRIPTION

[0061] The technical solutions in the embodiments of the present application will be described below with reference to the accompanying drawings.

[0062] Currently, users can take photos, record videos, etc. through electronic devices, and users can view the captured images in the gallery, which include photos and videos.

[0063] Typically, a gallery can help users organize and manage images by creating albums, titles, tags, or using smart classification (such as by date, location, or person). When users view images in a gallery, the titles, tags, and other interface elements used to organize and manage images in the gallery will distract users, preventing them from fully focusing on the image content provided by the gallery, reducing their sense of immersion in viewing images in the gallery and affecting their user experience.

[0064] For example, please refer to Figure 1 , Figure 1 This is a schematic diagram of a gallery of related solutions provided.

[0065] Figure 1The interface 110 shown is an interface for users to view images in the gallery. Areas 111 and 112 in the interface 110 display the images to be viewed. Other areas in the interface 110 display interface elements used to organize and manage images, such as a title 113, a search box 114, a positioning control 117, more controls 118, dates 115 and 116, and a bottom navigation bar 119. It should be understood that "immersion" in the use of electronic devices generally refers to the user being able to fully immerse themselves in the content or experience provided by the electronic device when using the electronic device, without being distracted by external interference or the design elements of the electronic device itself. When the user views Figure 1 When viewing the images in area 111 and area 112, the interface elements 113 to 119 will distract the user's attention, so that the user's attention cannot be fully devoted to the image content provided by the gallery, reducing the user's immersion in viewing images in the gallery.

[0066] In order to solve the above problems, an embodiment of the present application provides an interface display method, which can reduce or change the display of interface elements used to organize and manage images in the gallery, so that the user's attention is more focused on the image content provided by the gallery, thereby enhancing the user's immersion in viewing images in the gallery and improving the user experience.

[0067] The interface display method provided in the embodiment of the present application is applied to electronic devices. The electronic device may also be referred to as a terminal, user equipment (UE), mobile station (MS), mobile terminal (MT), etc. The electronic device may be a mobile phone, a tablet computer (Pad), a laptop computer, a desktop computer, a computer with wireless transceiver function, a virtual reality (VR) electronic device, an augmented reality (AR) electronic device, a wireless terminal in industrial control (industrial control), a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in smart grid (smart grid), a wireless terminal in transportation safety (transportation safety), a wireless terminal in smart city (smart city), a wireless terminal in smart home (smart home), etc. The embodiments of the present application do not limit the specific technology and specific device form adopted by the electronic device.

[0068] In order to better understand the embodiments of the present application, the structure of the electronic device according to the embodiments of the present application is introduced below.

[0069] For example, Figure 2 Schematic diagram of the structure of electronic device 200 is shown. Electronic device 200 may include processor 210, external memory interface 220, internal memory 230, antenna 1, antenna 2, mobile communication module 240, wireless communication module 250, audio module 260, speaker 260A, receiver 260B, microphone 260C, headphone jack 260D, sensor module 270, camera 280, display screen 290, etc. Sensor module 270 may include pressure sensor 270A, touch sensor 270B, etc.

[0070] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 200. In other embodiments of the present application, the electronic device 200 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0071] The processor 210 may include one or more processing units, for example, a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0072] The controller may be the nerve center and command center of the electronic device 200. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0073] A hardware decoder can be configured in the GPU. Creating a hardware decoder will occupy the hardware macroblock resources of the GPU.

[0074] The decoding program of the soft decoder can be run on the CPU, and creating a soft decoder will not occupy the hardware macroblock resources of the GPU.

[0075] Processor 210 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 210 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 210. If processor 210 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 210 latency, and thus improves system efficiency.

[0076] In this embodiment of the present application, the processor 210 may configure layout parameters of a title bar, a search box, and the like.

[0077] The wireless communication function of the electronic device 200 can be implemented through the antenna 1, the antenna 2, the mobile communication module 240, the wireless communication module 250, the modem processor and the baseband processor.

[0078] In some embodiments, antenna 1 of electronic device 200 is coupled to mobile communication module 240 , and antenna 2 is coupled to wireless communication module 250 , so that electronic device 200 can communicate with the network and other devices through wireless communication technology.

[0079] The electronic device 200 implements a display function through a GPU, a display screen 290 , and an application processor.

[0080] The display screen 290 is used to display images, videos, etc.

[0081] The electronic device 200 can implement a shooting function through an ISP, a camera 280, a video codec, a GPU, a display screen 290, and an application processor.

[0082] The ISP is used to process data fed back by the camera 280 .

[0083] The external memory interface 220 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 200.

[0084] The internal memory 230 can be used to store computer executable program codes, which include instructions. The processor 210 executes the instructions stored in the internal memory 230 to execute various functional applications and data processing of the electronic device 200. The internal memory 230 can include a program storage area and a data storage area.

[0085] The electronic device 200 can implement audio functions such as music playback and recording through the audio module 260, the speaker 260A, the receiver 260B, the microphone 260C, the headphone jack 260D, and the application processor.

[0086] The pressure sensor 270A is used to sense pressure signals and convert them into electrical signals. In some embodiments, the pressure sensor 270A can be provided on the display screen 290. When a touch operation is applied to the display screen 290, the electronic device 200 detects the intensity of the touch operation based on the pressure sensor 270A.

[0087] Touch sensor 270B, also known as a "touch panel," can be provided on display screen 290. The touch sensor 270B and display screen 290 form a touch screen, also known as a "touch screen." Touch sensor 270B is used to detect touch operations applied to or near the touch sensor.

[0088] This concludes the introduction to the hardware structure of the electronic device 200. It is understood that Figure 3 The components included in the illustrated hardware structure do not constitute a specific limitation on the electronic device 200. The electronic device 200 may have more or fewer components than shown in the figure, may combine two or more components, or may have a different component configuration. Figure 3 The various components shown in the drawings may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application specific integrated circuits.

[0089] Furthermore, an operating system runs on top of the aforementioned components, such as the iOS operating system, the Android open-source operating system, the Windows operating system, and the Hongmeng operating system. Applications can be installed and run on these operating systems.

[0090] The operating system of the electronic device 200 can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. In the embodiment of the present application, the Android operating system with a layered architecture is used as an example to illustrate the operating system of the electronic device 200.

[0091] Figure 3 This is a block diagram of the software structure of electronic device 200 according to an embodiment of the present application. A layered architecture divides software into several layers, each with distinct roles and responsibilities. Layers communicate with each other via software interfaces. In some embodiments, the Android system is divided from top to bottom into an application layer, a software development kit (UIKit), and an application framework layer.

[0092] The application layer can include a series of application packages. Figure 3 As shown in Figure 1, the application layer includes applications such as camera, gallery, calculator, map, etc. The application layer can also include a tag module, which is used to add time, location, etc. tags to images in the gallery, such as Figure 1 Label 115 and label 116 are shown in FIG.

[0093] The application framework layer provides an application programming interface (API) and programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0094] like Figure 3 As shown in Figure 1, between the application layer and the application framework layer lies the Software Development Kit (UIKit), the core framework for building and managing application user interfaces. UIKit provides a rich set of interface elements, view controllers, controls, and related functional classes, enabling developers to efficiently create beautiful, smooth, and interactive user interfaces.

[0095] Among them, UIKit includes a layout container (CoordinatorLayout).

[0096] CoordinatorLayout allows dependencies between subviews, allowing one view to rely on the behavior of another. Electronic devices can use CoordinatorLayout to easily implement interactive effects between scrolling views and other views, such as hiding, showing, and sliding during scrolling. CoordinatorLayout supports custom animation effects and can define animations for dependent views during interactions such as scrolling and dragging. By coordinating the behavior of subviews, CoordinatorLayout reduces the amount of manually written code, making the layout more concise and reducing resource consumption.

[0097] CoordinatorLayout also handles the delivery of touch events, making interactions between subviews more natural. Custom behaviors can be created by implementing the CoordinatorLayout.Behavior interface to meet specific layout needs. CoordinatorLayout also supports nested scrolling and can handle scroll events for multiple scroll views, making the scrolling experience smoother.

[0098] The layout container CoordinatorLayout includes the "title bar" subview (AppBarLayout), the "search box" subview (HeaderView), and the "content area" subview (ContentView). Among them, AppBarLayout is a scroll view, usually used as the top navigation bar of the application. It can contain Toolbar, TabLayout, etc. AppBarLayout can be used as a subview of CoordinatorLayout to achieve scrolling and animation effects.

[0099] HeaderView usually refers to the view fixed at the top in the list view, such as Figure 1 The views contained in 114 are shown. ContentView usually refers to the main content view, such as Figure 1 The views contained within 111 and 112 are shown.

[0100] The UIKit also includes a BehaviorManager, which allows CoordinatorLayout to coordinate the behavior of its subviews. Each subview can specify a Behavior through BehaviorManager, which defines how the view responds to layout changes, scrolling, and other events.

[0101] Specifically in the embodiment of the present application, BehaviorManager can calculate the layout parameters of the "title bar" subview, the "search box" subview and the "content area" subview in response to the user's sliding operation, as well as calculate the layout parameters of the subview of the label on the "content area", and then pass these layout parameters to the view framework, which draws and displays the corresponding view based on these layout parameters.

[0102] like Figure 3 As shown, the application framework layer may include a view framework and a motion effect framework.

[0103] Among them, the view framework is used to provide a series of UI components, such as buttons (Button), text boxes (TextView), lists (ListView), etc., which can be used to build the user interface of the application. The view framework is also responsible for managing the layout of subviews, which defines the position and size of subviews. The view framework also supports user interaction and can handle touch events, keyboard events, etc. The view framework is also responsible for drawing UI components on the screen. When the UI needs to be updated, the view framework is responsible for marking the areas that need to be redrawn and redrawing them at the appropriate time to ensure the smoothness and efficiency of the UI. The view framework is also responsible for the three major processes of the view: measurement, layout, and drawing.

[0104] Motion frameworks are used to add smooth and engaging animations to user interfaces, significantly enhancing the user experience. These animations can make apps appear more lively and modern, while also helping users better understand the app's functionality and operational outcomes. Motion frameworks also allow developers to create complex animations and transitions that enhance the visual appeal of an app.

[0105] It should be understood that Figure 3 The software architecture diagram shown is only for illustrative purposes and should not be construed as limiting the embodiments of the present application. Figure 3 More or fewer layers may also include, for example, a kernel layer, a hardware layer, etc.

[0106] The above embodiment introduces the hardware structure and software architecture of the electronic device 200. The following introduces the application scenario of the interface display method provided in the embodiment of the present application.

[0107] It should be understood that the interface display method provided in the embodiment of the present application can be applied to an application in which an electronic device stores images taken by a user, such as a gallery application, a social media application, and so on. Etc., cloud storage services, file managers, note-taking applications, office software, etc. The embodiment of this application is illustrated by an example of a gallery application.

[0108] It should also be understood that the interface display method provided in the embodiment of the present application can display different interface elements according to different sliding distances of the interface. The following introduces the different displayed interface elements through multiple scenarios.

[0109] Scenario 1:

[0110] Please refer to Figure 4 , Figure 4 This is a schematic diagram of a gallery interface provided in an embodiment of the present application.

[0111] like Figure 4 As shown in (a) of FIG. 4 , the interface 410 includes a gallery application 411, and the user can click on the gallery application 411. In response to the user clicking on the gallery application 411, the electronic device displays Figure 4 In the interface 420 shown in (b), the interface elements displayed in the interface 420 include a title bar 421, a search box 422, a content area 423, label areas 4241 and 4242, and a bottom navigation bar 425. Among them, the title bar 421 includes the title text "Photo" 4211, controls 4212 and 4213. The content area 423 displays the image content, and the label area is displayed above the content area. The label areas 4241 and 4242 can display the shooting time and location of the image content, such as "December 24, 2023" and "December 23, 2023". The bottom navigation bar 425 includes controls such as "Photos", "Albums", "Time" and "Create".

[0112] The user can perform an upward sliding operation in the interface 420. In response to the upward sliding operation of the user, the electronic device displays Figure 4In the interface 430 shown in (c), the interface elements displayed in the interface 430 are relative to the interface elements displayed in the interface 420, the title bar 431 is reduced in area size relative to the title bar 421, and the title text 4311 is reduced in text size relative to the title text 4211, the search box 432 moves upward relative to the position of the search box 422 on the screen, the content area 433 is enlarged in area size relative to the content area 423 and moves upward, the label area 4341 moves upward relative to the position of the label area 4241 on the screen, the label area 4342 moves upward relative to the position of the label area 4242 on the screen, and the position of the bottom navigation bar 435 on the screen remains unchanged relative to the bottom navigation bar 425. It should be understood that the layout parameters such as the position and size of the bottom navigation bar on the screen never change. Therefore, in the following embodiments, the description of the bottom navigation bar is omitted.

[0113] The user can continue to perform an upward sliding operation in the interface 430. In response to the upward sliding operation of the user, the electronic device displays Figure 4 In the interface 440 shown in (d), the interface elements displayed in the interface 440 are relative to the interface elements displayed in the interface 430, and the title bar 441 thereof is reduced to a preset size relative to the area size of the title bar 431, and then no longer reduced. The embodiment of the present application does not limit the specific numerical value of the preset size of the title bar area. The text size of the title text 4411 is reduced to a preset size relative to the text size of the title text 4311, and then no longer reduced. The embodiment of the present application does not limit the specific numerical value of the preset size of the text. The search box 442 moves upward relative to the position of the search box 432 on the screen, the content area 443 expands and moves upward relative to the area size of the content area 443, the label area 4441 moves upward relative to the position of the label area 4341 on the screen, and the label area 4442 moves upward relative to the position of the label area 4342 on the screen.

[0114] It should be understood that Figure 4 The layout state of the interface elements in the interface 440 shown in (d) can be called the final state of the scene 1. Figure 4 The layout state of the interface elements in the interface 420 shown in (b) can be called the initial state of scene one. Figure 4 The layout state of the interface elements in the interface 430 shown in (c) can be called the transition state of scene one.

[0115] It should also be understood that in the transition state of scene one, the area size of the title bar and the text size of the title text are gradually reduced, the position of the content area on the screen is gradually moved up, and the area size is gradually expanded. For example, the text size in the initial state is font size 1, and the text size in the final state is font size 5. Then, in the transition state, the text size is first reduced from font size 1 to font size 2, then from font size 2 to font size 3, and gradually reduced to font size 5. Figure 4 (b) in the figure uses an example of a reduced area size and text size of the title bar, an enlarged area size of the content area, and an upward-moved content area to illustrate.

[0116] In an embodiment of the present application, the electronic device can reduce the impact of the design elements of the gallery itself on the user's attention by reducing the area size and text size of the title bar, so that the user's attention is more focused on the image content provided by the gallery, thereby enhancing the user's immersion in viewing images in the gallery.

[0117] Furthermore, the embodiment of the present application can also expand the size of the content area so that the content area can display more images. Since the content area can display more images, the user can further focus on the image content, further enhancing the user's immersion in viewing images in the gallery.

[0118] Scenario 2:

[0119] Please refer to Figure 5 , Figure 5 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0120] Figure 5 The interface 510 shown in (a) is Figure 4 The interface 440 shown is the same as that shown in FIG. 5 , and the user can continue to perform the upward sliding operation in the interface 510. In response to the user's sliding operation, the electronic device displays Figure 5 In interface 520 shown in (b), the interface elements displayed in interface 520 are relative to those displayed in interface 510. Search box 522 is moved upward relative to the position of search box 512 on the screen, and the area of search box 522 displayed on the screen is reduced in size relative to that of search box 512. Some interface elements of search box 522 are obscured by title bar 521. Content area 523 is enlarged and moved upward relative to content area 513. Tab area 5241 is moved upward relative to the position of tab area 5141 on the screen. Tab area 5242 is moved upward relative to the position of tab area 5142 on the screen.

[0121] The user can continue to perform the upward sliding operation in the interface 520. In response to the user's sliding operation, the electronic device displays Figure 5In interface 530 shown in (c), the interface elements displayed in interface 530 are relative to those displayed in interface 520. The area size of search box 532 is reduced to zero, and the interface elements of search box 533 are completely obscured by title bar 531. Control 536 is displayed in interface 530 to replace the completely obscured search box. The area size of content area 533 is enlarged relative to content area 523 and its position is moved upward. Tab area 5341 is moved upward relative to the position of tab area 5241 on the screen, and tab area 5342 is moved upward relative to the position of tab area 5242 on the screen.

[0122] It should be understood that Figure 5 The layout state of the interface elements in the interface 530 shown in (c) can be called the final state of the scene 2. Figure 5 The layout state of the interface elements in the interface 510 shown in (a) can be called the initial state of scene 2. Figure 5 The layout state of the interface elements in the interface 520 shown in (b) can be called the transition state of scene two.

[0123] It should also be understood that in the transition state of scene two, the area size of the search bar is gradually reduced, and the position of the content area on the screen is gradually moved upward and the area size is gradually expanded. For example, the height of the area in the area size of the search bar in the initial state of scene two is 5 cm, and the height of the area in the area size of the search bar in the final state is 0 cm. Then the height of the area in the transition state first shrinks from 5 cm to 4 cm, and then from 4 cm to 3 cm, and gradually shrinks to 0 cm. Figure 5 (b) in the figure is exemplified by a reduced area size of the search bar, an enlarged area size of the content area, and an upward-moved content area.

[0124] In an embodiment of the present application, the electronic device can reduce the impact of the design elements of the gallery itself on the user's attention by reducing the area size of the search bar, so that the user's attention is more focused on the image content provided by the gallery, thereby enhancing the user's immersion in viewing images in the gallery.

[0125] Moreover, the embodiment of the present application can further expand the size of the content area based on scenario one, so that the content area can display more images. Since the content area can display more images, the user can further focus on the image content, further enhancing the user's immersion in viewing images in the gallery.

[0126] Scenario 3:

[0127] Please refer to Figure 6 , Figure 6 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0128] Figure 6 The interface 610 shown in (a) is Figure 5 The interface 530 shown is the same as that shown in FIG. 6 , and the user can continue to perform the upward sliding operation in the interface 610. In response to the user's sliding operation, the electronic device displays Figure 6 In the interface 620 shown in (b), the interface elements displayed in the interface 620 are relative to the interface elements displayed in the interface 610. The transparency of the title text 6211 in the title bar 621 is reduced relative to the title text 6111. The content area 623 is enlarged relative to the content area 613 and moved upward. The content area 623 partially overlaps with the title bar 621. The tab area 6241 is moved upward relative to the tab area 6141 on the screen and overlaps with the title bar 621. The tab area 6242 is moved upward relative to the tab area 6142 on the screen. Since the content area 623 is enlarged, a new tab area 6243 can be displayed in the content area 623.

[0129] The user can continue to perform the upward sliding operation in the interface 620. In response to the user's sliding operation, the electronic device displays Figure 6 In the interface 630 shown in (c), the interface elements displayed in the interface 630 are relative to the interface elements displayed in the interface 620, the transparency of the title text 6311 in the title bar 631 relative to the title text 6211 is reduced to 0 (when the transparency is 0, the user cannot visually see the title text), the area size of the content area 633 relative to the content area 623 is expanded and the position is moved upward, and the top border of the content area 633 overlaps with the top border of the title bar 631, the content area 633 completely overlaps with the area of the title bar 631, the label area 6341 moves upward relative to the position of the label area 6241 on the screen, and in the process of the user sliding the interface thereafter, before the next label area reaches the position of the label area 6341, the position of the label area 6341 on the screen remains stationary, the label area 6341 completely overlaps with the area of the title bar 631, the label area 6342 moves upward relative to the position of the label area 6242 on the screen, and the label area 6343 moves upward relative to the position of the label area 6243 on the screen.

[0130] It should be understood that Figure 6 The layout state of the interface elements in the interface 630 shown in (c) can be called the final state of scene three. Figure 6 The layout state of the interface elements in the interface 610 shown in (a) can be called the initial state of scene three. Figure 6 The layout state of the interface elements in the interface 620 shown in (b) can be called the transition state of scene three.

[0131] It should also be understood that in the transition state of scene three, the transparency of the title text in the title bar gradually decreases, and the position of the content area on the screen gradually moves up and the area size gradually expands. For example, the transparency of the title text in the initial state of scene three is 1, and the transparency of the title text in the final state is 0, then the transparency of the title text in the transition state decreases from 1 to 0.9, from 0.9 to 0.8, until it is reduced to 0. Figure 6 (b) in the figure is exemplified by a transparent title text, an enlarged area size of the content area, and an upward-moved content area.

[0132] In an embodiment of the present application, the electronic device can reduce the transparency of the title text in the title bar, ultimately making it impossible for the user to visually see the title text, thereby reducing the impact of the design elements of the gallery itself on the user's attention, allowing the user to pay more attention to the image content provided by the gallery, and enhancing the user's immersion in viewing images in the gallery.

[0133] Moreover, the embodiment of the present application can further expand the size of the content area based on scenario two, so that the content area can display more images. Since the content area can display more images, the user can further focus on the image content, further enhancing the user's immersion in viewing images in the gallery.

[0134] Scenario 4:

[0135] It should be understood that the content area in the above embodiment includes multiple groups of partitions, each group of partitions includes an image partition and a label partition, the image partition is used to display image content, and the label partition is used to display label content. For example, please refer to Figure 7 , Figure 7 This is an example diagram of a content area provided in an embodiment of the present application. Figure 7 An example is given in which multiple groups of partitions are divided into two groups of partitions. One group of partitions includes a label partition A1 and an image partition B1, and the other group of partitions includes a label partition A2 and an image partition B2.

[0136] It should also be understood that the electronic device can continue to move upward in scene four. Figure 6 The image content in the image partition in the content area of the interface 630 shown can enhance the user's immersion in viewing images in the gallery in the following two ways during the upward movement.

[0137] Method 1:

[0138] Please refer to Figure 8 , Figure 8 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0139] Figure 8 The interface 710 shown in (a) is the same as Figure 6 The interface 630 shown is the same as that shown in FIG. 710 . The user can continue to perform the upward sliding operation in the interface 710 . In response to the user's sliding operation, the electronic device displays Figure 8 In (b) of the figure, the interface 720 shown in the interface 720 has the interface elements displayed relative to the interface elements displayed in the interface 710, the label area 7241 remains stationary relative to the label area 7141 on the screen, the image partition in the content area 723 moves upward relative to the position of the image partition in the content area 713 on the screen, and the image partition in the content area 723 partially overlaps with the label area 7241, the label area 7242 moves upward relative to the position of the label area 7142 on the screen, and the label area 7243 moves upward relative to the position of the label area 7143 on the screen.

[0140] The user can continue to perform the upward sliding operation in the interface 720. In response to the user's sliding operation, the electronic device displays Figure 8 In the interface 730 shown in (c), the interface elements displayed in the interface 730 are relative to the interface elements displayed in the interface 720, the label area 7341 remains stationary relative to the label area 7241 on the screen, the image partition in the content area 733 moves upward relative to the position of the image partition in the content area 723 on the screen, and the image partition in the content area 733 completely overlaps with the label area 7341, the label area 7342 moves upward relative to the position of the label area 7242 on the screen, and the label area 7343 moves upward relative to the position of the label area 7243 on the screen.

[0141] It should be understood that Figure 8 The layout state of the interface elements in the interface 730 shown in (c) can be called the final state of scene four. Figure 8 The layout state of the interface elements in the interface 710 shown in (a) can be called the initial state of scene four. Figure 8 The layout state of the interface elements in the interface 720 shown in (b) can be called the transition state of scene four.

[0142] It should also be understood that in the transition state of scene 4, the label areas (7241 and 7341) remain stationary on the screen, while the image partitions in the content area gradually move upward. Because the image partitions in the content area gradually move upward on the screen, more images in the image partitions can be displayed in the content area.

[0143] In an embodiment of the present application, the electronic device can keep the label area on the screen stationary and move the image partition in the content area on the screen upward, so that more images in the image partition can be displayed in the content area. Since the content area can display more images, the user can further focus on the image content, further enhancing the user's immersion in viewing images in the gallery.

[0144] Method 2:

[0145] Please refer to Figure 9 , Figure 9 This is a schematic diagram of another gallery interface provided in an embodiment of the present application. Figure 9 The operation of color inversion is involved. In order to better display the effect of color inversion, Figure 9 The interface color is gray for illustration purposes only and this interface color should not be used as a limitation to this application.

[0146] Figure 9 The interface 810 shown in (a) is Figure 6 The interface 630 shown is the same as that shown in FIG. 810 . The user can continue to slide upward in the interface 810 . In response to the user's sliding operation, the electronic device displays Figure 9 In the interface 820 shown in (b), the interface elements displayed in the interface 820 are relative to the interface elements displayed in the interface 810, the colors of the controls 8212 and 8213 in the title bar 821 are the inverse colors of the controls 8112 and 8113 in the title bar 811, the text color in the label area 8241 is the inverse color of the text color in the label area 8141, the background color of the label partition 8231 in the content area 823 is the inverse color of the background color of the label partition 8131 in the content area 813, and other areas in the content area 823 move upward relative to other areas of the content area 813, for example, the image partition 8232 moves upward relative to the position of the image partition 8231 on the screen.

[0147] The user can continue to perform the upward sliding operation in the interface 820. In response to the user's sliding operation, the electronic device displays Figure 9 In the interface 830 shown in (c), the interface elements displayed in the interface 830 are relative to the interface elements displayed in the interface 820 , and the image partition 8332 in the content area 833 completely overlaps with the label area 8341 .

[0148] It should be understood that Figure 9 The layout state of the interface elements in the interface 830 shown in (c) can be called the final state of scene four. Figure 9 The layout state of the interface elements in the interface 810 shown in (a) can be called the initial state of scene four. Figure 9The layout state of the interface elements in the interface 820 shown in (b) can be called the transition state of scene four.

[0149] It should also be understood that in the transition state of scene 4, the label areas (8241 and 8341) remain stationary on the screen, while the image partitions in the content area gradually move upward. Because the image partitions in the content area gradually move upward on the screen, more images from the image partitions can be displayed in the content area.

[0150] In an embodiment of the present application, the electronic device can keep the label area on the screen stationary and move the image partition in the content area on the screen upward, so that more images in the image partition can be displayed in the content area. Since the content area can display more images, the user can further focus on the image content, further enhancing the user's immersion in viewing images in the gallery.

[0151] Furthermore, in order to avoid the situation in which the text content in the label area and the controls in the title bar cannot be clearly displayed due to the background color of the content area when the content area moves upward, the embodiment of the present application reverses the background color of the label partition in the content area, the text content in the label area, and the controls in the title bar, so that the text content in the label area and the controls in the title bar can be clearly displayed, thereby improving the user experience.

[0152] Scene 5:

[0153] Scenario 5 refers to the user Figure 8 The interface 730 shown or Figure 9 The scene of continuing to slide in the interface 930 is shown. Figure 10 So the user is Figure 8 The example of continuing to slide in the interface 730 shown is used for explanation. Figure 10 , Figure 10 This is a schematic diagram of another gallery interface provided in an embodiment of the present application.

[0154] Figure 10 The interface 910 shown in (a) is the same as Figure 8 The interface 730 shown is the same as that shown in FIG. 910 . The user can continue to slide upward in the interface 910 . In response to the user's sliding operation, the electronic device displays Figure 10 In the interface 920 shown in (b), the interface elements displayed in the interface 920 are relative to the interface elements displayed in the interface 910. The position of the label area 9241 remains unchanged, the label area 9242 moves to the bottom of the label area 9241, the label area 9243 moves upward, and the image partition and title partition in the content area 923 also move upward accordingly.

[0155] The user can continue to perform the upward sliding operation in the interface 920. In response to the user's sliding operation, the electronic device displays Figure 10 In the interface 930 shown in (b), the interface elements displayed in the interface 930 are relative to the interface elements displayed in the interface 920, and the positions of the label area 9341 and the label area 9342 are moved upward at the same time, and the transparency of the text in the label area 9341 relative to the text in the label area 9241 is reduced. The label area 9343 moves upward, and the image partition and the title partition in the content area 933 also move upward accordingly.

[0156] The user can continue to perform the upward sliding operation in the interface 930. In response to the user's sliding operation, the electronic device displays Figure 10 In (b) of the figure, interface 940 is shown, and the positions of label area 9441 and label area 9442 of the interface elements displayed in interface 940 are moved upward at the same time relative to the interface elements displayed in interface 930, and the transparency of the text in label area 9441 relative to the text in label area 9341 is reduced to 0 (when the transparency is 0, the user cannot visually see label area 9341), and the position of label area 9442 is moved to the position of label area 9141 shown in interface 910, and in the process of the user sliding the interface thereafter, before the next label area reaches the position of label area 9442, the position of label area 9442 on the screen remains stationary, label area 9443 moves upward, and the image partition and title partition in content area 943 also move upward accordingly.

[0157] It should be understood that Figure 10 The layout state of the interface elements in the interface 940 shown in (d) can be called the final state of scene five. Figure 10 The layout state of the interface elements in the interface 910 shown in (a) can be called the initial state of scene five. Figure 10 The interface 920 shown in (b) and Figure 10 The layout state of the interface elements in the interface 930 shown in (c) can be called the transition state of scene five.

[0158] It should also be understood that in the transition state of scene five, the position of the label area on the screen gradually moves upward, and the transparency of the text in the label area gradually decreases.

[0159] As can be seen from the above examples: Figure 7 The content area in the interface includes multiple groups of partitions, each of which includes an image partition and a label partition. Figure 7 The image partitions B1 and B2 are used to display image content, and the label partitions A1 and A2 are used to display label content. The label content is used to classify the images displayed in the image partition, such as Figure 7The middle label partition A1 can display "December 24, 2023", which means that the image content in the image partition B1 was taken on "December 24, 2023". Figure 7 The label partition A2 can display "December 23, 2023", indicating that the image content in the image partition B2 was taken on "December 23, 2023". In other words, the label displayed on a label partition in a group of partitions corresponds one-to-one with the image content displayed in an image partition.

[0160] In the embodiment of the present application, when the user's attention shifts from multiple partitions to an image partition (such as Figure 7 The image content of the image partition B1 shown is switched to the next image partition (eg Figure 7 When viewing the image content of the image partition B2) shown, the electronic device can focus the user's attention more on the image content in the image partition by moving the position of the label area corresponding to the previous image partition and reducing the transparency of the text in the label area, and moving the position of the label area corresponding to the next image partition to the position of the label area corresponding to the previous image partition and keeping it stationary, thereby reducing the impact of the label area on the user's attention and enhancing the user's immersion in viewing images in the gallery.

[0161] It should be noted that the user can perform an upward sliding operation in the interface shown in scene five, and the gallery interface can restore the interface elements in scene four, scene three, scene two and scene one. The specific recovery process is a flashback process of the display process in the above scenes, and the embodiments of the present application will not go into details about this.

[0162] The above embodiments introduce the application scenarios of the interface display method provided by the embodiments of the present application. The following embodiments introduce the overall process of the interface display method provided by the embodiments of the present application.

[0163] Please refer to Figure 11 , Figure 11 Schematic diagram of the overall process of the interface display method provided in the embodiment of the present application. The method can be applied to the electronic device mentioned in the above embodiment, and the method includes S11 to S14.

[0164] S11, the electronic device obtains initial layout parameters and page movement distance of the title bar, search box, content area and label area.

[0165] It should be understood that layout parameters usually include position information, and position information can usually be expressed using coordinates. For example, please refer to Figure 12 , Figure 12 This is an example diagram of the position of an interface element provided in an embodiment of the present application.

[0166] exist Figure 12In the coordinate system, the upper left point of the display area of the electronic device's screen is the coordinate origin (for example, point A1), the length direction is the positive direction of the X axis (for example, the direction from point A1 to point A2), and the height direction is the positive direction of the Y axis (for example, the direction from point A1 to point A3). The display area is Figure 12 The outermost dotted line in the . Position information involved in the layout parameters can be expressed by coordinates on this coordinate system.

[0167] It should be noted that: Figure 12 As shown, the display area of the screen of the electronic device includes a top status bar, a title bar, a search box, a content area, a label area and a bottom navigation bar. Figure 4 (b) shows the battery level, signal icon, etc. The bottom navigation bar includes Figure 4 As for the icons such as "Photos" and "Albums" shown in (b), in the interface display method provided in the embodiment of the present application, the layout parameters of the top status bar and the bottom navigation bar remain unchanged. When the top status bar and the bottom navigation bar are displayed, they are always drawn and displayed with the same layout parameters. Therefore, the relevant description of the layout parameters of the top status bar and the bottom navigation bar is omitted in the following embodiments.

[0168] The initial layout parameters of the title bar include the position of the initial area of the title bar, the background color and transparency of the initial area of the title bar, the position of the initial text in the initial area, the size and transparency of the initial text, and the position, color, and size of other elements in the title bar. Figure 12 The rectangular area enclosed by the four points A1, A2, A3 and A4 shown in the figure, the initial area of the title bar can be Figure 12 The coordinates of the four points A1, A2, A3 and A4 are shown. The background color of the initial area of the title bar can be white with a transparency of 1. The position of the initial text in the title bar within the initial area can be Figure 12 The coordinates of the A5 point are shown, and the size of the initial text can be expressed in pixels. For example, the size of the initial text is 16 pixels. The size of the initial text is a preset value, and the specific value of the preset value is not limited in this embodiment of the application. Other elements in the title bar can refer to Figure 4 In (b) 4212 (control 1) and 4213 (control 2), the position of control 1 in the initial area can be Figure 12 The coordinates of A6 are shown, and the position of control 2 in the initial area can be Figure 12 The coordinates of A7 are shown, and the colors of other elements in the title bar are preset colors, such as black, and the sizes are preset sizes, such as 5 pixels.

[0169] The initial layout parameters of the search box include the location of the initial area of the search box, the size of the text in the search box, etc. The initial area of the search box can be Figure 12 The rectangular area enclosed by the four points B1, B2, B3, and B4 shown in the figure, the initial area of the search box can be Figure 12 The coordinates of the four points B1, B2, B3, and B4 shown, and the text size in the search box are preset values, which are not limited in this embodiment of the present application.

[0170] From the above embodiment, it can be seen that the content area includes multiple groups of partitions, each group of partitions includes an image partition and a label partition, such as Figure 12 An example is given in which multiple groups of partitions are divided into two groups of partitions. One group of partitions includes a label partition A1 and an image partition B1, and the other group of partitions includes a label partition A2 and an image partition B2.

[0171] The initial layout parameters of the content area include the position of the initial area of the content area, etc. The initial area of the content area can be Figure 12 The rectangular area surrounded by the four points C1, C2, C3, and C4 is shown. The initial area of the content area can be Figure 12 The coordinates of the four points C1, C2, C3, and C4 are shown.

[0172] It should be understood that the page includes multiple tab areas, and the number of tab areas is the same as the number of tab partitions in the content area. Figure 12 The following example illustrates two tab areas, tab area 1 and tab area 2. The initial layout parameters of the tab area include the initial area position of the tab area, the text size and color in the tab area, etc. The initial area of tab area 1 can be Figure 12 The rectangular area enclosed by the four points D11, D12, D13 and D14 shown in the figure, the initial area of the label area 1 can be Figure 12 The coordinates of the four points D11, D12, D13 and D14 are shown. The text size and color in the label area 1 are preset, and this embodiment of the application does not limit this. The initial area of the label area 2 can be Figure 12 The rectangular area enclosed by the four points D21, D22, D23 and D24 shown in FIG. 1 , the initial area of the label area 2 may be located at Figure 12 The coordinates of the four points D21, D22, D23 and D24 are shown, and the text size in the label area 2 is a preset size and the color is a preset color, which is not limited in this embodiment of the present application.

[0173] It should also be understood that the units of coordinates and sizes in the above layout parameters can all be pixels, for example Figure 12 The coordinates of A5 shown may be (5, 6), which means there are 5 pixels on the horizontal axis and 6 pixels on the vertical axis. For example, the size of the text may be 16 pixels.

[0174] It can also be understood that the initial layout parameters of the above-mentioned title bar and search box are preset parameters. The electronic device can store the initial layout parameters of the title bar and search box, and then obtain the initial layout parameters of the title bar and search box from the stored data.

[0175] The initial layout parameters of the content area and the label area need to be determined based on the number of images taken by the user and the number of tags such as the shooting time and location. For example, the user took 4 photos through an electronic device on December 22, 2023, and took 8 photos on December 23, 2023. Then the electronic device can, based on the shooting time and photo data, first fill the 4 photos taken on December 22, 2023 into the content area, and then generate a label "December 22, 2023", fill the label into the label area, and then fill the 8 photos taken on December 23, 2023 into the content area, and then generate a label "December 23, 2023", fill the label into the label area. Finally, the initial layout parameters can be generated based on the content area and the content filled in the label area.

[0176] The initial area of the content area and the number of label areas are related to the number of images taken by the user and the number of labels such as the shooting time and location. The more images the user takes and the more labels such as the shooting time and location, the larger the initial area of the content area and the more label areas. For example, please refer to Figure 13 , Figure 13 This is an example diagram of a content area and a label area provided in an embodiment of the present application. Figure 13 The area formed by the outermost dotted lines in (a) and (b) is the initial area of the content area. Figure 13 The number of images captured in (b) is relative to Figure 13 The number of images captured in (a) is large, and Figure 13 The number of labels such as shooting time and location in (b) is relative to Figure 13 In (a), there are many tags such as shooting time and location, so Figure 13 (b) relative to Figure 13 The size of the initial area of the content area in (a) is relatively large, and the number of label areas is relatively large.

[0177] The page movement distance in the embodiment of the present application refers to the sum of the current page movement distance and the historical page movement distance in the process of the gallery application being opened and closed. When the gallery application is closed and opened the next time, the page movement distance needs to be recalculated from zero. The current page movement distance refers to the distance the user currently slides the page, and the historical page movement distance refers to the distance the page moved before the user currently slides the page after the gallery application is opened. The page movement distance includes the sliding distance of the user's finger on the screen of the electronic device and the distance the page slides based on inertia after the user's finger leaves the screen. It should be noted that the page movement distance can be expressed in pixels, such as the page moves 15 pixels.

[0178] S12, the electronic device determines a numerical range to which the page movement distance belongs.

[0179] From the interfaces shown in scenes one to five in the above embodiments, it can be seen that the interface can display different display effects depending on the page movement distance, and different display effects are determined by different layout parameters. Therefore, the layout parameters are also different depending on the page movement distance. For example, assuming that the page movement distance is within the numerical range of 1, the electronic device can calculate the layout parameters in one calculation method and then display the interface shown in scene 1. If the page movement distance is within the numerical range of 2, the electronic device can calculate the layout parameters in another calculation method and then display the interface shown in scene 2, and so on.

[0180] In some embodiments, the number of numerical ranges is related to the number of groups of partitions in the content area. The larger the number of groups of partitions, the greater the number of numerical ranges. For example, assuming the number of groups of partitions in the content area is Figure 13 The 2 groups shown in (a) in the figure, then the value range may be 5 value ranges, assuming that the number of groups in the partition of the content area is Figure 13 For the 3 groups shown in (b), the possible numerical range is 6 numerical ranges.

[0181] The following is the number of groups of partitions in the content area. Figure 13 Taking the three groups shown in (b) as an example, the multiple numerical ranges are 6 numerical ranges, which exemplify the multiple numerical ranges provided in the embodiments of the present application.

[0182] Assume that the initial state in the above scenario 1 ( Figure 4 The interface 420 shown in (b) in the figure switches to the final state in scene 1 ( Figure 4 The gallery page in (d) needs to be moved M1 pixels. Since the initial state in scenario 1 is the first interface state presented after the user clicks the gallery application, the value range 1 can be set to [0, M1]. Assume that the initial state in scenario 2 ( Figure 5The interface 510 shown in (a) in the figure switches to the final state in scene 2 ( Figure 5 The interface 530 shown in (c) in FIG. 5 needs to move M2 pixels in the gallery page, so the value range 2 can be set to (M1, M1+M2). Assuming that the initial state in the above scenario 3 ( Figure 6 The interface 610 shown in (a) in the figure switches to the final state in scene three ( Figure 6 The gallery page needs to be moved M3 pixels, so the value range 3 can be set to (M1+M2, M1+M2+M3). Assuming that the initial state in the above scenario 4 is ( Figure 8 The interface 710 shown in (a) and Figure 9 (a) shows the interface 810) switches to the transition state in scene five (the interface of the transition state refers to Figure 10 The interface 920 shown in (b) of FIG. 1 needs to move M4 pixels, so the value range 4 can be set to (M1+M2+M3, M1+M2+M3+M4). Assuming that the transition state in the above scenario 5 (the interface of the transition state refers to Figure 10 The interface 920 shown in (b) switches to the final state of scene five ( Figure 10 In the interface 940 shown in (d), the gallery page needs to be moved M5 pixels, so the value range 5 can be set to (M1+M2+M3+M4, M1+M2+M3+M4+M5].

[0183] Depend on Figure 10 As can be seen from the interface 940 shown in (d) in FIG, the user can also perform an upward sliding operation in the interface 940 to open the label area 9443 (the label area can be considered as Figure 13 The label area 3 shown in (b) is moved to the label area 9442 (the label area can be considered as Figure 13 At the position of the label area 2) shown in (b), assuming that the gallery page needs to move M6 pixels when the label area 9443 moves to the position of the label area 9442, the numerical range 6 can be set to (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

[0184] In implementation, after obtaining the page movement distance, the electronic device can determine which numerical range the page movement distance belongs to among multiple numerical ranges, and then calculate the layout parameters based on the calculation method corresponding to the numerical range, and then draw and display the page based on the layout parameters.

[0185] S13 , the electronic device determines, within each numerical range, layout parameters of the title bar, search box, content area, and label area after the page is moved based on the page movement distance and the initial layout parameters.

[0186] For the implementation of this step, please refer to the following embodiment and will not be described in detail here.

[0187] S14, the electronic device draws the page based on the layout parameters of the title bar, search box, content area and tab area after the page is moved, and displays the page based on the hierarchical relationship of the title bar, search box, content area and tab area after the page is moved.

[0188] A page in an embodiment of the present application may include multiple layers. In an embodiment of the present application, a layer may also be referred to as a view. The multiple layers have a hierarchical relationship, which refers to the upper and lower layer relationships of the multiple layers when displayed. Generally, a layer in an upper layer will partially or completely obscure a layer in a lower layer when displayed.

[0189] The hierarchical relationship can be referred to Figure 14 , Figure 14 This is an example diagram of a hierarchical relationship provided by an embodiment of the present application. Figure 14 As shown, the multiple layers include four types of layers, namely a title bar layer, a label layer, a content layer and a search layer.

[0190] Generally, the title bar layer is located at the top of multiple layers, and the electronic device can draw the title bar in the title bar layer based on the layout parameters of the title bar.

[0191] The tab layer is located below the title bar, and the electronic device can draw multiple tab areas in the tab layer based on the layout parameters of the tab areas.

[0192] The content layer is located below the tag layer, and the electronic device can draw the content area in the content layer based on the layout parameters of the content area.

[0193] The search layer is located below the content area, and the electronic device can draw a search box in the search layer based on the layout parameters of the search box.

[0194] The above embodiment introduces the overall process of the interface display method provided by the embodiment of the present application. In order to more clearly illustrate the solution provided by the embodiment of the present application, the following embodiment is combined with Figure 3 The software architecture shown introduces the implementation process of the interface display method provided in the embodiment of the present application.

[0195] The following section introduces the implementation process of the interface display method provided in the embodiments of the present application based on scenarios one to five mentioned in the above embodiments.

[0196] The implementation process of the interface display method in scenario 1:

[0197] For example, please refer to Figure 15 , Figure 15 This is a schematic diagram of an interface display method provided in an embodiment of the present application. The method includes S011 to S0119.

[0198] S011 , the gallery application in the application layer receives a click operation from the user and generates input event 1 .

[0199] It should be understood that the user's click operation may refer to, for example, the user clicking Figure 4 The operation of clicking the control 411 in the interface 410 shown in (a) is shown.

[0200] In implementation, for example, after the user clicks control 411, the electronic device can trigger a hardware interrupt and generate an interrupt signal. The interrupt signal carries the click operation, and then the click operation in the interrupt signal is processed into an input event. The input event includes the event type, timestamp, etc. For example, the event type included in input event 1 is a click event.

[0201] S012: The application layer sends an input event 1 to the layout container in the software development tool. The input event 1 carries an event type.

[0202] S013, based on input event 1, the layout container fills the image content obtained by the user's shooting into the content area, generates initial layout parameters 1 of the content area, and calls the label module to add labels to the image content, generating initial layout parameters 1 of multiple label areas.

[0203] From the above embodiment, it can be seen that the initial layout parameters of the content area and the label area need to be determined according to the number of images taken by the user and the number of labels such as the shooting time and location. Figure 16 The number of images captured by the user and the number of tags indicating the time of capture are shown as examples of initial layout parameters of the content area and the tag area.

[0204] Please refer to Figure 16 , Figure 16 This is a schematic diagram of multiple layers provided in an embodiment of the present application. Figure 16 The coordinate system in the figure can be the upper left point of the display area of the electronic device's screen as the coordinate origin, with the length direction as the positive direction of the X axis and the height direction as the positive direction of the Y axis. The specific coordinate system setting can refer to the above embodiment and will not be repeated here. It should be noted that Figure 16 The hierarchical relationship of multiple layers can be referred to Figure 12 For ease of description, the layer relationship is omitted here. The content in multiple layers can only be displayed on the screen when the content in multiple layers is located within the display area of the screen of the electronic device. Figure 16 Only the display range in the Y-axis direction of the display area is shown in the figure. For the display range in the X-axis direction of the display area, please refer to Figure 12 .

[0205] The initial layout parameter 1 of the content area may include the position of the initial area of the content area, such as the initial area of the content area is Figure 16 The rectangular area enclosed by the four points C1a, C2a, C3a and C4a shown in (c) of the figure, the initial area of the content area is Figure 16 The coordinates of the four points C1a, C2a, C3a and C4a shown in (c) are as follows. For example, the coordinates of C1a are (0, Y C1a ), the coordinates of C2a are (X C2a , Y C2a ), the coordinates of C3a are (0, Y C1a ), the coordinates of C4a are (X C4a , Y C4a The layout parameters of the content area may also include other parameters such as the background transparency and background color of the content area. Since the background transparency and background color of the content area and other parameters remain unchanged in the interface display method provided in the embodiment of the present application, the description of the background transparency and background color of the content area is omitted.

[0206] The initial layout parameters 1 of the multiple label areas may include Figure 16 (b) shows the initial layout parameters 1 of the label area 1, label area 2 and label area 3. The initial layout parameters 1 of the label area 1 include the position of the initial area of the label area 1, for example, the initial area of the label area 1 is Figure 16 The rectangular area enclosed by the four points D11a, D12a, D13a and D14a shown in (b) of FIG. 1 , the initial area of the label area 1 is located at Figure 16 The coordinates of the four points D11a, D12a, D13a and D14a shown in (b) are as follows. For example, the coordinates of D11a are (0, Y D11a ), the coordinates of D12a are (X D12a , Y D12a ), the coordinates of D13a are (0, Y D11a ), the coordinates of D14a are (X D14a , Y D14a ).

[0207] The initial layout parameter 1 of the label area 2 includes the position of the initial area of the label area 2. For example, the initial area of the label area 2 is Figure 16 The rectangular area enclosed by the four points D21a, D22a, D23a and D24a shown in (b) of FIG. 1 is the position of the initial area of the label area 2. Figure 16 The coordinates of the four points D21a, D22a, D23a and D24a shown in (b) are as follows. For example, the coordinates of D21a are (0, Y D21a), the coordinates of D22a are (X D22a , Y D22a ), the coordinates of D23a are (0, Y D21a ), the coordinates of D24a are (X D24a , Y D24a ).

[0208] The initial layout parameter 1 of the label area 3 includes the position of the initial area of the label area 3. For example, the initial area of the label area 3 is Figure 16 The rectangular area enclosed by the four points D31a, D32a, D33a and D34a shown in (b) of FIG. 1 is the position of the initial area of the label area 3. Figure 16 The coordinates of the four points D31a, D32a, D33a and D34a shown in (b) are as follows. For example, the coordinates of D31a are (0, Y D31a ), the coordinates of D32a are (X D32a , Y D32a ), the coordinates of D33a are (0, Y D31a ), the coordinates of D34a are (X D34a , Y D34a ).

[0209] It should also be understood that the layout parameters of the label area may also include other parameters such as the background transparency, background color, text size and text position of the label area. Since the other parameters of the label area remain unchanged in the interface display method provided in the embodiment of the present application, the specific description of the other parameters of the label area is omitted.

[0210] S014, the layout container sends the initial layout parameters 1 of the content area and label area generated by S013 to the behavior manager, and the layout container obtains the initial layout parameters 1 of the title bar and search box from the pre-stored data, and sends the initial layout parameters 1 of the title bar and search box to the behavior manager, and the behavior manager sends the initial layout parameters 1 of the label area, title bar, search box and content area to the view frame in the application framework layer.

[0211] It should be understood that the initial layout parameter 1 of the title bar includes the position of the initial area of the title bar. For example, the initial area of the title bar is Figure 16 The rectangular area enclosed by the four points A1a, A2a, A3a, and A4a shown in (a) of the figure, the initial area of the title bar is Figure 16 The coordinates of the four points A1a, A2a, A3a and A4a shown in (a) are as follows. For example, the coordinates of A1a are (0, Y A1a ), the coordinates of A2a are (X A2a , Y A2a ), the coordinates of A3a are (0, Y A3a), the coordinates of A4a are (X A4a , Y A4a ).

[0212] The initial layout parameters 1 of the title bar also include the background color of the initial area of the title bar, such as white, and the background transparency of the initial area, such as a transparency of 1. It should be understood that transparency is generally used to describe the opacity of an object or color. The transparency value is usually between 0 and 1, where 0 represents complete transparency, that is, the object or color is completely invisible, and any content below it can be seen. 1 represents complete opacity, that is, the object or color completely covers all content below it.

[0213] In other embodiments, the transparency value may also be expressed as a percentage, where 0% is equivalent to 0 (completely transparent) and 100% is equivalent to 1 (completely opaque). In other embodiments, the transparency may be expressed as an integer from 0 to 255, where 0 represents complete transparency and 255 represents complete opacity.

[0214] The initial layout parameter 1 of the title bar also includes the position of the initial text in the title bar within the initial area. For example, the position of the initial text can be expressed using the A5a point ( Figure 16 The coordinates of point A5a can be represented by (X A5a , Y A5a ), and the size of the initial text, such as the size of the initial text is 16 pixels.

[0215] The initial layout parameter 1 of the title bar also includes the colors of control 1 and control 2. For example, the line colors of control 1 and control 2 are black.

[0216] The layout parameters of the title bar may also include other parameters such as the position of control 1 and control 2, the color of the initial text, etc. Since the other parameters of the title bar remain unchanged in the interface display method provided in the embodiment of the present application, the specific description of the other parameters of the title bar is omitted.

[0217] It should also be understood that the initial layout parameter 1 of the search box includes the position of the initial area of the search box. For example, the initial area of the search box is Figure 16 The rectangular area enclosed by the four points B1a, B2a, B3a and B4a shown in (d) in the figure, the initial area of the search box is Figure 16 The coordinates of the four points B1a, B2a, B3a and B4a are shown in (d). For example, the coordinates of B1a are (0, Y B1a ), the coordinates of B2a are (X B2a , Y B2a ), the coordinates of B3a are (0, Y B1a ), the coordinates of B4a are (XB4a , Y B4a ).

[0218] The layout parameters of the search box may also include other parameters such as the text size and background transparency within the search box. Since the other parameters of the search box remain unchanged in the interface display method provided in the embodiment of the present application, the specific description of the other parameters of the search box is omitted.

[0219] S015 , the view framework draws page 1 based on the initial layout parameter 1 of the label area, title bar, search box and content area, and displays page 1 based on the hierarchical information.

[0220] It should be understood that the view frame can be Figure 12 The initial layout parameters 1 of the label area are drawn in the label layer, the initial layout parameters 1 of the title bar are drawn in the title layer, the initial layout parameters 1 of the search box are drawn in the search layer, and the initial layout parameters 1 of the content area are drawn in the content layer. Figure 12 The hierarchical relationship shown is displayed, and the displayed page 1 can refer to the initial state of scene 1, such as Figure 4 Interface 420 shown in (b).

[0221] S016 , the gallery application receives the user's sliding operation 1 and generates an input event 2 .

[0222] It should be understood that sliding operation 1 may refer to the user sliding Figure 4 An upward sliding operation is performed in the interface 420 shown in (b).

[0223] It should also be understood that after the gallery application receives the user's sliding operation 1, it will also trigger an interrupt and generate an interrupt signal. The sliding operation in the interrupt signal will then be processed into an input event. The input event includes the event type (for example, the event type included in input event 2 is a sliding event), the current page movement distance and the historical page movement distance, etc. For the explanation of the current page movement distance and the historical page movement distance, please refer to the above embodiment and will not be repeated here.

[0224] S017, the gallery application sends input event 2 to the behavior manager through the layout container. Input event 2 carries information such as event type, current page movement distance, and historical page movement distance.

[0225] S018, the behavior manager determines the numerical range to which the sum of the current page movement distance and the historical page movement distance belongs based on the current page movement distance and the historical page movement distance. When it is determined that the page movement distance belongs to the numerical range 1, the following steps S019 to S0119 are executed.

[0226] It should be understood that after determining the sum of the page movement distance and the historical page movement distance, the behavior manager can determine to which numerical range of multiple numerical ranges the sum belongs. For example, the multiple numerical ranges are illustrated by the six numerical ranges mentioned in the above embodiment, where numerical range 1 is [0, M1], numerical range 2 is (M1, M1+M2], numerical range 3 is (M1+M2, M1+M2+M3], numerical range 4 is (M1+M2+M3, M1+M2+M3+M4], numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and numerical range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

[0227] In implementation, the behavior manager determines that the page movement distance belongs to the value range 1 when determining that the sum of the page movement distance and the historical page movement distance is less than or equal to M1 and greater than or equal to 0.

[0228] It should be understood that, upon determining that the page movement distance falls within the numerical range 1, the behavior manager executes operations S019 to S0111 to modify some of the initial layout parameters 1 of the title bar, thereby obtaining modified layout parameters 2 of the title bar. It should be noted that, relative to the initial layout parameters 1 of the title bar, the modified layout parameters 2 of the title bar only modify the position of the initial area of the title bar and the size and position of the initial text within the title bar; other layout parameters remain unchanged.

[0229] S019: The behavior manager determines the position of the moved region 1 of the title bar based on the page movement distance and the position of the initial region of the title bar.

[0230] For example, assuming that the page movement distance is M1, the position of the initial area of the title bar includes Figure 16 (a) shows that the coordinates of A1a are (0, Y A1a ), the coordinates of A2a are (X A2a , Y A2a ), the coordinates of A3a are (0, Y A3a ), the coordinates of A4b are (X A4a , Y A4a ) Then the position of area 1 after the title bar is moved can be referred to Figure 17 , Figure 17 This is another schematic diagram of multiple layers provided in an embodiment of the present application.

[0231] for example, Figure 17The rectangular area enclosed by A1b, A2b, A3b and A4b shown in (a) is the area 1 after the title bar is moved. The position of the area 1 after the title bar is moved is the coordinates of the above four points. For example, the coordinates of A1b are (0, Y A1a +M1), the coordinates of A2b are (X A2a , Y A2a +M1), the coordinates of A3b are (0, Y A3a +M1), the coordinates of A4b are (X A4a , Y A4a +M1).

[0232] S0110 , the behavior manager determines the size of the reduced text 1 in the title bar based on the page movement distance and the size of the initial text in the title bar.

[0233] In the implementation, the behavior manager can determine the size of the reduced text 1 in the title bar based on the following formula:

[0234]

[0235] The text size before moving refers to the text size in the title bar of the interface displayed before the interface is moved in scene 1. For example, the user Figure 4 Before the sliding operation is performed on the interface 420 shown in (b), the text size in the title bar of the interface 420 is changed. For example, the user Figure 4 The text size in the title bar of interface 430 before the sliding operation is performed in interface 430 shown in (c). The final text size and the initial text size are preset sizes, for example, the final text size is 5 pixels and the initial text size is 16 pixels. The total displacement of the page movement when the text size changes is a preset distance. For example, the text in the title bar will continue to change within the above-mentioned numerical range 1, then the total displacement of the page movement is M1 mentioned above, that is, during the display of the entire interface, the title bar will no longer move after moving M1 pixels in scene one. The page movement distance refers to the sum of the current page movement distance and the historical movement distance.

[0236] It should be understood that the page starts from the initial state of scene 1 ( Figure 4 The interface 410 shown in (a) moves to the final state of scene 1 ( Figure 4 In the process of the interface 430 shown in (c) in FIG, the page movement distance changes from the minimum value in the value range 1 to the maximum value. At this time, the behavior manager can calculate the text size of the title bar corresponding to each value in the value range 1 by the above formula 1, so that Figure 4 The display effect of the title bar text size gradually decreasing is shown.

[0237] For example, assuming that the page movement distance is the maximum value M1 within the value range 1, and the text size before the movement is 16 pixels, then based on the above formula 1, it can be known that:

[0238]

[0239] S0111, the behavior manager determines the position of the moved text 1 in the title bar based on the page movement distance and the position of the initial text in the title bar.

[0240] For example, assuming Figure 16 The initial text position of the title bar in (a) uses A5a point ( Figure 16 The coordinates of point A5a can be represented by (X A5a , Y A5a ), the page movement distance is M1, then the position of the moved text 1 in the title bar is Figure 17 In (a) you can use point A5b ( Figure 17 The coordinates of point A5b can be represented by (X A5a , Y A5a +M1).

[0241] S0112. The behavior manager sends the changed layout parameters 2 of the title bar to the view framework.

[0242] It should also be understood that the behavior manager, by executing operation S0113, modifies some of the search box's initial layout parameters 1, resulting in modified search box layout parameters 2. It should be noted that the modified search box layout parameters 2, relative to the search box's initial layout parameters 1, only modify the position of the search box's initial area; other layout parameters remain unchanged.

[0243] S0113: The behavior manager obtains the position of the moved area 1 of the search box based on the page movement distance and the position of the initial area of the search box.

[0244] For example, assuming that the page movement distance is M1, the position of the initial area of the search box includes Figure 16 The coordinates of B1a shown in (d) are (0, Y B1a ), the coordinates of B2a are (X B2a , Y B2a ), the coordinates of B3a are (0, Y B1a ), the coordinates of B4a are (X B4a , Y B4a ). Then the position of area 1 after the search box moves can be referred to Figure 17 ,for example, Figure 17The rectangular area enclosed by B1b, B2b, B3b and B4b shown in (d) is the area 1 after the search box moves. The position of the area 1 after the search box moves is the coordinates of the above four points. For example, the coordinates of B1b are (0, Y B1a +M1), the coordinates of B2b are (X B2a , Y B2a +M1), the coordinates of B3b are (0, Y B1a +M1), the coordinates of B4b are (X B4a , Y B4a +M1).

[0245] S0114, the behavior manager sends the changed layout parameters 2 of the search box to the view framework.

[0246] It should be understood that by executing the operation S0115, the behavior manager modifies some parameters of the content area's initial layout parameters 1, thereby obtaining the content area's modified layout parameters 2. It should be noted that the modified content area's layout parameters 2, relative to the content area's initial layout parameters 1, only modify the position of the content area's initial area, while other layout parameters remain unchanged.

[0247] S0115 : The behavior manager obtains the position of the moved area 1 of the content area based on the page movement distance and the position of the initial area of the content area.

[0248] For example, assuming that the page movement distance is M1, the position of the initial area of the content area includes Figure 16 The coordinates of C1a shown in (c) are (0, Y C1a ), the coordinates of C2a are (X C2a , Y C2a ), the coordinates of C3a are (0, Y C1a ), the coordinates of C4a are (X C4a , Y C4a ). Then the position of area 1 after the content area is moved can be referred to Figure 17 ,for example, Figure 17 The rectangular area enclosed by C1b, C2b, C3b and C4b shown in (c) is the moved area 1 of the content area. The position of the moved area 1 of the content area is the coordinates of the above four points. For example, the coordinates of C1b are (0, Y C1a +M1), the coordinates of C2b are (X C2a , Y C2a +M1), the coordinates of C3b are (0, Y C1a +M1), the coordinates of C4b are (X C4a , Y C4a +M1).

[0249] S0116 , the behavior manager sends the changed layout parameters 2 of the content area to the view framework.

[0250] It should be understood that, by executing operation S0117, the document manager modifies some parameters of the initial layout parameters 1 of the multiple label areas, thereby obtaining modified layout parameters 2 of the label areas. It should be noted that, relative to the initial layout parameters 1 of the label areas, the modified layout parameters 2 of the label areas only modify the positions of the initial areas of the label areas, while other layout parameters remain unchanged.

[0251] S0117 : The behavior manager obtains the position of the moved region 1 of the multiple tab areas based on the page movement distance and the positions of the initial regions of the multiple tab areas.

[0252] For example, assuming that the page movement distance is M1, the multiple tab areas include Figure 16 (b) shows the label area 1, label area 2 and label area 3. The initial area of the label area 1 includes Figure 16 The coordinates of D11a shown in (b) are (0, Y D11a ), the coordinates of D12a are (X D12a , Y D12a ), the coordinates of D13a are (0, Y D11a ), the coordinates of D14a are (X D14a , Y D14a The initial area of the label area 2 includes the coordinates of D21a (0, Y D21a ), the coordinates of D22a are (X D22a , Y D22a ), the coordinates of D23a are (0, Y D21a ), the coordinates of D24a are (X D24a , Y D24a The initial area of the label area 3 includes the coordinates of D31a (0, Y D31a ), the coordinates of D32a are (X D32a , Y D32a ), the coordinates of D33a are (0, Y D31a ), the coordinates of D34a are (X D34a , Y D34a ).

[0253] Then the position of area 1 after the multiple label areas are moved can be referred to Figure 17 ,for example Figure 17 The area enclosed by the four points D11b, D12b, D13b and D14b shown in (b) is area 1 of the label area 1, and the coordinates of D11b are (0, Y D11a +M1), the coordinates of D12b are (X D12a , Y D12a+M1), the coordinates of D13b are (0, Y D11a +M1), the coordinates of D14b are (X D14a , Y D14a +M1).

[0254] Figure 17 The area enclosed by the four points D21b, D22b, D23b and D24b shown in (b) is the area 1 of the label area 2, and the coordinates of D21b are (0, Y D21a +M1), the coordinates of D22b are (X D22a , Y D22a +M1), the coordinates of D23b are (0, Y D21a +M1), the coordinates of D24b are (X D24a , Y D24a +M1).

[0255] Figure 17 The area enclosed by the four points D31b, D32b, D33b and D34b shown in (b) is the area 1 of the label area 3. The coordinates of D31b are (0, Y D31a +M1), the coordinates of D32b are (X D32a , Y D32a +M1), the coordinates of D33b are (0, Y D31a +M1), the coordinates of D34b are (X D34a , Y D34a +M1).

[0256] S0118, the behavior manager sends the changed layout parameters 2 to the view frame label area.

[0257] S0119, the view framework draws page 2 based on the changed layout parameters 2 of the label area, title bar, search box, and content area, and based on Figure 14 The hierarchical information display page 2 is shown.

[0258] It should be understood that the changed layout parameters 2 of the label area, title bar, search box and content area are based on the initial state of the gallery interface from scene 1 ( Figure 4 The interface 420 shown) moves M1 pixels to the final state in scene 1 ( Figure 4 The interface 440 shown in the figure is used to illustrate the layout parameters in the final state of scene 1. Figure 4 When the distance moved by the interface 420 shown is less than M1 pixels, the gallery interface can move to the transition state of scene 1 ( Figure 4 Interface 430 is shown), and the method for determining the changed layout parameters of the transition state of scene one can refer to the above embodiment and will not be repeated here.

[0259] It should also be understood that when the value range 1 is [0, M1], when the page movement distance is equal to M1, the page 2 drawn and displayed based on the above layout parameter 2 can refer to Figure 4 Interface 440 in.

[0260] When the page movement distance is less than M1, the page 2 drawn and displayed based on the above layout parameter 2 can refer to Figure 4 Interface 430 in.

[0261] The implementation process of the interface display method in scenario 2:

[0262] It should be noted that the implementation methods of the relevant steps in Scenario 2 can refer to Scenario 1 and will not be repeated in Scenario 2.

[0263] For example, please refer to Figure 18 , Figure 18 This is a schematic diagram of an interface display method provided in an embodiment of the present application. The method includes S021 to S0212.

[0264] S021 , the application layer receives a user's sliding operation 2 and generates an input event 3 .

[0265] It should be understood that the sliding operation 2 can be a Figure 5 An upward sliding operation is performed in the illustrated interface 510 .

[0266] S022, the gallery application sends input event 3 to the behavior manager through the layout container. Input event 3 carries information such as event type, current page movement distance, and historical page movement distance.

[0267] S023, the behavior manager determines the numerical range to which the sum of the current page movement distance and the historical page movement distance belongs based on the current page movement distance and the historical page movement distance. When it is determined that the page movement distance belongs to the numerical range 2, the following steps S024 to S0212 are executed.

[0268] Exemplarily, multiple numerical ranges are illustrated by the six numerical ranges mentioned in the above embodiments, where numerical range 1 is [0, M1], numerical range 2 is (M1, M1+M2], numerical range 3 is (M1+M2, M1+M2+M3], numerical range 4 is (M1+M2+M3, M1+M2+M3+M4], numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and numerical range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

[0269] In implementation, when the behavior manager determines that the sum of the page movement distance and the historical page movement distance is less than or equal to M1+M2 and greater than M1, it determines that the page movement distance belongs to the value range 2.

[0270] S024, the behavior manager keeps the layout parameter 2 of the title bar unchanged.

[0271] For example, please refer to Figure 19 , Figure 19 This is another schematic diagram of multiple layers provided in an embodiment of the present application. Figure 19 The layout parameters of the layer contents of the multiple layers shown are the layout parameters when the page movement distance falls within the value range of 2. Figure 19 The layout parameters of the title bar shown in (a) are Figure 17 The layout parameters of the title bar shown in (a) are the same.

[0272] S025, the behavior manager sends the layout parameter 2 of the title bar to the view framework.

[0273] It should be understood that the behavior manager can change some of the layout parameters in the search box's layout parameter 2 by executing the operation S026 to obtain the search box's changed layout parameter 3. It should be noted that in this embodiment of the application, the position of area 1 in layout parameter 2 is changed, and other parameters are not changed.

[0274] S026: The behavior manager obtains the position of the moved area 2 of the search box based on the page movement distance and the position of the area 1 of the search box.

[0275] For example, assuming that the page movement distance is M1+M2, the position of area 1 of the search box includes Figure 17 The coordinates of B1b shown in (d) are (0, Y B1a +M1), the coordinates of B2b are (X B2a , Y B2a +M1), the coordinates of B3b are (0, Y B1a +M1), the coordinates of B4b are (X B4a , Y B4a +M1).

[0276] The position of area 2 after the search box moves includes Figure 19 The coordinates of B1c shown in (d) are (0, Y B1a +M1+M2), the coordinates of B2c are (X B2a , Y B2a +M1+M2), the coordinates of B3c are (0, Y B1a +M1+M2), the coordinates of B4b are (X B4a , Y B4a +M1+M2).

[0277] S027, the behavior manager sends the changed layout parameters 3 of the search box to the view framework.

[0278] It should be understood that the behavior manager changes some parameters in the content area layout parameter 2 by executing the operation S028, thereby obtaining the changed content area layout parameter 3. It should be noted that in this embodiment of the application, the position of area 1 in the layout parameter 2 is changed, and other parameters are not changed.

[0279] S028 : The behavior manager obtains the position of the moved area 2 of the content area based on the page movement distance and the position of the area 1 of the content area.

[0280] For example, assuming that the page movement distance is M1+M2, the position of area 1 of the content area includes Figure 17 The coordinates of C1b shown in (c) are (0, Y C1a +M1), the coordinates of C2b are (X C2a , Y C2a +M1), the coordinates of C3b are (0, Y C1a +M1), the coordinates of C4b are (X C4a , Y C4a +M1).

[0281] The position of area 2 after the content area is moved includes Figure 19 The coordinates of C1c shown in (c) are (0, Y C1a +M1+M2), the coordinates of C2c are (X C2a , Y C2a +M1+M2), the coordinates of C3c are (0, Y C1a +M1+M2), the coordinates of C4c are (X C4a , Y C4a +M1+M2).

[0282] S029, the behavior manager sends the changed layout parameters 3 of the search box to the view framework.

[0283] It should be understood that the behavior manager changes some parameters in the layout parameters 2 of the multiple tab areas by executing the operation S029, thereby obtaining the changed layout parameters 3 of the multiple tab areas. It should be noted that in this embodiment of the application, the position of area 1 in the layout parameters 2 is changed, while other parameters are not changed.

[0284] S0210 : The behavior manager obtains the positions of the moved regions 2 of the plurality of tab areas based on the page movement distance and the position of the region 1 of the tab area.

[0285] For example, assuming that the page movement distance is M1+M2, the position of the region 1 of the multiple label areas can refer to Figure 17 ,for example Figure 17 The position of the region 1 of the label region 1 shown in (b) includes the coordinates of D11b (0, Y D11a +M1), the coordinates of D12b are (X D12a , Y D12a +M1), the coordinates of D13b are (0, Y D11a +M1), the coordinates of D14b are (X D14a , Y D14a + M1). Then the position of the moved area 2 of the label area 1 includes the reference Figure 19 The coordinates of D11c shown in (b) are (0, Y D11a +M1+M2), the coordinates of D12c are (X D12a , Y D12a +M1+M2), the coordinates of D13c are (0, Y D11a +M1+M2), the coordinates of D14c are (X D14a , Y D14a +M1+M2).

[0286] For example Figure 17 The position of the region 1 of the label region 2 shown in (b) includes the coordinates of D21b (0, Y D21a +M1), the coordinates of D22b are (X D22a , Y D22a +M1), the coordinates of D23b are (0, Y D21a +M1), the coordinates of D24b are (X D24a , Y D24a + M1). Then the position of the label area 2 after the movement includes the reference Figure 19 The coordinates of D21c shown in (b) are (0, Y D21a +M1+M2), the coordinates of D22c are (X D22a , Y D22a +M1+M2), the coordinates of D23c are (0, Y D21a +M1+M2), the coordinates of D24c are (X D24a , Y D24a +M1+M2).

[0287] For example Figure 17 The position of the region 1 of the label region 3 shown in (b) includes the coordinates of D31b (0, Y D31a +M1), the coordinates of D32b are (X D32a , Y D32a +M1), the coordinates of D33b are (0, Y D31a +M1), the coordinates of D34b are (X D34a , YD34a + M1). Then the position of the moved area 2 of the label area 3 includes the reference Figure 19 The coordinates of D31c shown in (b) are (0, Y D31a +M1+M2), the coordinates of D32c are (X D32a , Y D32a +M1+M2), the coordinates of D33c are (0, Y D31a +M1+M2), the coordinates of D34c are (X D34a , Y D34a +M1+M2).

[0288] S0211, the behavior manager sends the changed layout parameters 3 of the multiple label areas to the view framework.

[0289] S0212, the behavior manager draws page 3 based on the changed layout parameters 3 of the label area, search box and content area and the layout parameters 2 of the title area, and displays page 3 based on the hierarchical information.

[0290] It should be understood that the changed layout parameters 3 of the signature area, search box and content area and the layout parameter 2 of the title area are based on the initial state of the gallery interface from scene 2 ( Figure 5 The interface 510 shown) moves M2 pixels to the final state in scene 2 ( Figure 5 The interface 530 shown in the figure is used to illustrate the layout parameters in the final state of scene 2. Figure 5 When the distance moved by the interface 510 shown is less than M2 pixels, the gallery interface can move to the transition state of scene 2 ( Figure 5 Interface 520 is shown), and the method for determining the changed layout parameters of the transition state of scene 2 can refer to the above embodiment and will not be repeated here.

[0291] It should also be understood that when the value range 2 is (M1, M1+M2], when the page movement distance is equal to M1+M2, the page 3 drawn and displayed based on the above layout parameter 3 can refer to Figure 5 Interface 530 in. Combined Figure 19 The layers drawn and Figure 14 From the hierarchical relationship of the layers, it can be seen that the search box at the lowest level in the interface 530 has been completely blocked by the title bar at the highest level in the screen display area, and the user can no longer see the search box at all in the interface 530.

[0292] When the page movement distance is greater than M1 and less than M1+M2, the page 3 drawn and displayed based on the above layout parameter 3 can refer to Figure 5 Interface 520 in. Combined with layout parameters 3 and Figure 14As can be seen from the hierarchical relationship of the layers, the search box at the lowest level in interface 520 has been partially blocked by the title bar at the highest level in the screen display area. The user can see part of the search box in interface 530.

[0293] The implementation process of the interface display method in scenario three:

[0294] It should be noted that the implementation methods of the relevant steps in Scenario 3 can refer to Scenario 1 and will not be repeated in Scenario 3.

[0295] For example, please refer to Figure 20 , Figure 20 This is a schematic diagram of an interface display method provided in an embodiment of the present application. The method includes S031 to S0312.

[0296] S031 , the application layer receives a user's sliding operation 3 and generates an input event 4 .

[0297] It should be understood that the sliding operation 3 can be a Figure 6 An upward sliding operation is performed in the illustrated interface 610 .

[0298] S032: The gallery application sends input event 4 to the behavior manager through the layout container. Input event 4 carries information such as event type, current page movement distance, and historical page movement distance.

[0299] S033, the behavior manager determines the numerical range to which the sum of the current page movement distance and the historical page movement distance belongs based on the current page movement distance and the historical page movement distance. If it is determined that the page movement distance belongs to the numerical range 3, the following steps S034 to S0312 are executed.

[0300] Exemplarily, multiple numerical ranges are illustrated by the six numerical ranges mentioned in the above embodiments, where numerical range 1 is [0, M1], numerical range 2 is (M1, M1+M2], numerical range 3 is (M1+M2, M1+M2+M3], numerical range 4 is (M1+M2+M3, M1+M2+M3+M4], numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and numerical range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

[0301] In the implementation, the behavior manager determines that the page movement distance belongs to the value range 3 when it determines that the sum of the page movement distance and the historical page movement distance is less than or equal to M1+M2+M3 and greater than M1+M2.

[0302] It should be understood that the behavior manager changes some of the layout parameters in the title bar's layout parameter 2 by executing the operation S034, thereby obtaining the changed layout parameters 3 of the title bar. It should be noted that in this embodiment of the application, the transparency of the text within the title bar area and the background transparency of the area are changed in the layout parameter 2, and other parameters are not changed.

[0303] S034 , the behavior manager determines the transparency 1 of the text in the title bar and the transparency of the background of area 1 based on the page movement distance.

[0304] It should be understood that the behavior manager can determine the transparency of the text in the title bar based on the following formula 2:

[0305]

[0306] The transparency of the text in the title bar after moving refers to the transparency of the text in the title bar displayed on the interface after the interface is moved in scene three. For example, Figure 6 After the sliding operation is performed on the interface 610 shown in (a), the transparency of the text in the title bar of the interface 620 is changed. For example, the user Figure 6 (b) shows the text transparency of the title bar in the interface 630 after the sliding operation is performed on the interface 620.

[0307] The transparency of the text before moving refers to the transparency of the text in the title bar of the interface before moving the interface in scene 3. For example, the user Figure 6 Before the sliding operation is performed on the interface 610 shown in (a), the text transparency of the title bar in the interface 610 is as follows: Figure 6 (b) shows the text transparency of the title bar in the interface 620 before the sliding operation is performed on the interface 620.

[0308] The final text transparency is a preset value, such as 0, and the initial text transparency is a preset value, such as 1.

[0309] The first total movement distance refers to the movement distance from the page where the text transparency of the title bar just starts to change to the page where the text transparency stops changing. The movement distance is a preset distance. For example, the text transparency in the title bar will continue to change within the above-mentioned numerical range 3. The numerical range 3 is (M1+M2, M1+M2+M3], then the movement distance from the page where the text transparency of the title bar just starts to change to the page where the text transparency stops changing is M3.

[0310] The first movement distance is the distance from the page where the title bar text transparency begins to change to the current page. The first movement distance is greater than or equal to 0 and less than M3. The first movement distance can be based on the page movement distance, for example, the first movement distance is equal to the page movement distance minus the minimum value within the numerical range of 3. For example, if the page movement distance is M1+M2+M3, then the first movement distance can be M3.

[0311] It should be understood that the page is in the initial state of scenario three ( Figure 6 The interface 610 shown in (a) moves to the final state of scene three ( Figure 6 In the process of the interface 630 shown in (c) in FIG, the page movement distance changes from the minimum value in the value range 3 to the maximum value. At this time, the behavior manager can calculate the text transparency of the title bar corresponding to each value in the value range 3 by the above formula 2, so that Figure 6 The display effect of gradually decreasing transparency of the text in the title bar is shown.

[0312] For example, assuming that the page movement distance is the maximum value M1+M2+M3 within the value range of 3, the first movement distance is M3, the text transparency before movement is 1, the final text transparency is 0, the initial text transparency is 1, and the first total movement distance is M3, then:

[0313]

[0314] For example, please refer to Figure 21 , Figure 21 This is another schematic diagram of multiple layers provided in an embodiment of the present application. Figure 21 The layout parameters of the layer contents of the multiple layers shown are layout parameters when the page movement distance belongs to the numerical range 3 and the page movement distance is the maximum value in the numerical range 3. Figure 21 The layout parameters of the title bar shown in (a) are Figure 19 Compared with the layout parameters of the title bar shown in (a), the transparency of the text in the title bar is reduced from 1 to 0.

[0315] It should be understood that when determining the transparency of the background of Region 1 of the title bar, the behavior manager may change the transparency of the background of Region 1 from the initial transparency 1 to 0. The purpose of changing the transparency of Region 1 of the title bar is to display the background of Region 1 in the display area of the screen. Figure 14 The layer contents below the title bar layer among the multiple layers shown. For example, Figure 6 In (b), the content of the label area 6241 in the label layer can be displayed on the title bar 621 of the title bar layer in the interface 620.

[0316] S035, the behavior manager sends the changed layout parameter 3 to the view framework.

[0317] It should be understood that the behavior manager can change some of the layout parameters of the search box layout parameter 3 by executing the operation S036 to obtain the changed layout parameters 4 of the search box. It should be noted that in this embodiment of the application, the position of the search box in the layout parameter 3 is changed, and other parameters are not changed.

[0318] S036: The behavior manager obtains the position of the moved area 3 of the search box based on the page movement distance and the position of the area 2 of the search box.

[0319] The implementation of this step can refer to the above embodiment, and the position of the area 3 after the search box moves can refer to Figure 21 The position shown in (d) is shown.

[0320] In other embodiments, the behavior manager can also change the initial transparency of all interface elements in area 3 of the search box from 1 to 0, so that Figure 6 In (b), the title bar 621 of the title bar layer in the interface 620 displays the content of the label area 6241 in the label layer, while the search box is not displayed.

[0321] S037, the behavior manager sends the changed layout parameters 4 of the search box to the view framework.

[0322] It should be understood that the behavior manager changes some parameters in the content area layout parameter 3 by executing the operation S038, and obtains the changed content area layout parameter 4. It should be noted that in this embodiment of the application, the position of the content area in the layout parameter 3 is changed, and other parameters are not changed.

[0323] S038 : The behavior manager obtains the position of the moved area 3 of the content area based on the page movement distance and the position of the area 2 of the content area.

[0324] The implementation of this step can refer to the above embodiment, and the position of the content area after the movement of area 3 can refer to Figure 21 The position shown in (c).

[0325] S039, the behavior manager sends the changed layout parameters 4 of the content area to the view framework.

[0326] It should be understood that the behavior manager changes some parameters in the layout parameters 3 of the multiple tab areas by executing the operation S0310, thereby obtaining the changed layout parameters 4 of the multiple tab areas. It should be noted that in this embodiment of the application, the positions of the tab areas in the layout parameters 3 are changed, while other parameters remain unchanged.

[0327] S0310 , the behavior manager obtains the positions of the moved regions 3 of the plurality of tab areas based on the page movement distance and the position of the region 2 of the tab area.

[0328] The implementation of this step can refer to the above embodiment, and the position of the area 3 after the multiple label areas are moved can refer to Figure 21 The position shown in (b).

[0329] S0311, the behavior manager sends the changed layout parameters 4 of the multiple label areas to the view framework.

[0330] S0312 , the behavior manager draws the page 4 based on the changed layout parameters 4 of the label area, the search box, and the content area and the layout parameters 3 of the title area, and displays the page 4 based on the hierarchical information.

[0331] It should be understood that the changed layout parameters 4 of the label area, search box and content area and the layout parameter 3 of the title area are based on the initial state of the gallery interface from scene three ( Figure 6 The interface 610 shown) moves M3 pixels to the final state in scene three ( Figure 6 When the distance moved by the gallery interface from the initial state in scene 3 is less than M3 pixels, the gallery interface can move to the transition state of scene 3 ( Figure 6 As shown in the interface 620), the method for determining the changed layout parameters of the transition state of scene three can refer to the above embodiment and will not be repeated here.

[0332] It should also be understood that in the case where the value range 3 is (M1+M2, M1+M2+M3], when the page movement distance is equal to M1+M2+M3, the page 4 drawn and displayed based on the above layout parameter 4 can refer to Figure 6 Interface 630 in. Combined Figure 21 The layers drawn and Figure 14 From the hierarchical relationship of the layers, it can be seen that the text transparency of the title bar in interface 630 is reduced to 0, and the user cannot see the text in the title bar. Moreover, since the background transparency of the title bar area is modified, the user can see the lower layer of the title layer, such as the content of label area 1 in the label layer.

[0333] When the page movement distance is greater than M1+M2 and less than M1+M2+M3, the page 4 drawn and displayed based on the above layout parameter 4 can refer to Figure 6 Interface 620 in.

[0334] The implementation process of the interface display method in scenario 4:

[0335] It should be noted that the implementation methods of the relevant steps in Scenario 4 can refer to Scenario 1 and will not be repeated in Scenario 4.

[0336] For example, please refer to Figure 22 , Figure 22 This is a schematic diagram of an interface display method provided in an embodiment of the present application. The method includes S041 to S0412.

[0337] S041 , the application layer receives a user's sliding operation 4 and generates an input event 5 .

[0338] It should be understood that the sliding operation 4 can be a Figure 8 An upward sliding operation is performed in the illustrated interface 710 .

[0339] S042: The gallery application sends an input event 5 to the behavior manager through the layout container. The input event 5 carries information such as the event type, the current page movement distance, and the historical page movement distance.

[0340] S043, the behavior manager determines the numerical range to which the sum of the current page movement distance and the historical page movement distance belongs based on the current page movement distance and the historical page movement distance. When it is determined that the page movement distance belongs to the numerical range 4, the following steps S044 to S0412 are executed.

[0341] Exemplarily, multiple numerical ranges are illustrated by the six numerical ranges mentioned in the above embodiments, where numerical range 1 is [0, M1], numerical range 2 is (M1, M1+M2], numerical range 3 is (M1+M2, M1+M2+M3], numerical range 4 is (M1+M2+M3, M1+M2+M3+M4], numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and numerical range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

[0342] In the implementation, the behavior manager determines that the page movement distance belongs to the value range 4 when it determines that the sum of the page movement distance and the historical page movement distance is less than or equal to M1+M2+M3+M4 and greater than M1+M2+M3.

[0343] S044, the behavior manager keeps the layout parameter 3 of the title bar unchanged.

[0344] For example, please refer to Figure 23 , Figure 23 This is another schematic diagram of multiple layers provided in an embodiment of the present application. Figure 23 The layout parameters of the layer contents of the multiple layers shown are the layout parameters when the page movement distance falls within the value range of 4. Figure 23 The layout parameters of the title bar shown in (a) are Figure 21 The layout parameters of the title bar shown in (a) are the same.

[0345] S045, the behavior manager sends the changed layout parameter 3 to the view framework.

[0346] It should be understood that the behavior manager can change some of the layout parameters of the search box layout parameters 4 by executing the operation S046 to obtain the changed layout parameters 5 of the search box. It should be noted that in this embodiment of the application, the position of the search box in the layout parameters 4 is changed, and other parameters are not changed.

[0347] S046 , the behavior manager obtains the position of the moved area 4 of the search box based on the page movement distance and the position of the area 3 of the search box.

[0348] The implementation of this step can refer to the above embodiment, and the position of the area 4 after the search box moves can refer to Figure 23 The position shown in (d) is shown.

[0349] S047, the behavior manager sends the changed layout parameters 4 of the search box to the view framework.

[0350] It should be understood that the behavior manager changes some parameters in the content area layout parameter 4 by executing the operation S048 to obtain the changed content area layout parameter 5. It should be noted that in this embodiment of the application, the position of the content area in the layout parameter 4 is changed, and other parameters are not changed.

[0351] S048 : The behavior manager obtains the position of the moved area 4 of the content area based on the page movement distance and the position of the area 3 of the content area.

[0352] The implementation of this step can refer to the above embodiment, and the position of the content area after the movement of area 4 can refer to Figure 23 The position shown in (c).

[0353] S049, the behavior manager sends the changed layout parameters 5 of the content area to the view framework.

[0354] It should be understood that the behavior manager changes some parameters in the layout parameters 4 of the multiple tab areas by executing the operation S0410, thereby obtaining the changed layout parameters 5 of the multiple tab areas. It should be noted that in this embodiment of the application, the positions of the tab areas in the layout parameters 4 are changed, while other parameters remain unchanged.

[0355] S0410: The behavior manager keeps the position of area 3 of the first tab area unchanged, and obtains the position of area 4 of other tab areas after movement based on the page movement distance and the position of area 3 of other tab areas.

[0356] For example, the position of the first label region 3 can be referred to Figure 23 (b) shows the position of region 3 of label region 1.

[0357] Other label areas can refer to Figure 23 The label area 2 and label area 3 shown in (b) and the position of the moved area 4 of the other label areas can be referred to Figure 23 (b) shows the position of region 4 of label region 2 and the position of region 4 of label region 3.

[0358] Regarding the implementation method of obtaining the position of the moved area 4 of the other tab area based on the page movement distance and the position of the area 3 of the other tab area, reference can be made to the above embodiment and will not be repeated here.

[0359] from Figure 23 The positions of the multiple label areas shown in (b) and Figure 21 It can be seen from the positions of multiple label areas shown in (b) that Figure 23 The position of the label area 1 shown in (b) is Figure 21 The position of the label area 1 shown in (b) is the same, which ensures that when the page movement distance is within the value range 4, the label area 1 is suspended in the title bar and remains motionless.

[0360] S0411, the behavior manager sends the changed layout parameters 5 of the multiple label areas to the view framework.

[0361] S0412 , the behavior manager draws page 5 based on the changed layout parameters 5 of the label area, the search box, and the content area and the layout parameters 3 of the title area, and displays page 5 based on the hierarchical information.

[0362] It should be understood that the changed layout parameters 5 of the label area, search box and content area and the layout parameter 3 of the title area are based on the initial state of the gallery interface from scene 4 ( Figure 8 Interface 710 is shown, and Figure 9 The interface 810 shown) moves M4 pixels to the transition state in scene five ( Figure 10 The interface 920 shown) is in the transition state of scene five ( Figure 10 When the distance moved by the gallery interface from the initial state in scene 4 is less than M4 pixels, the gallery interface can move to the transition state of scene 4 ( Figure 8 Interface 720 is shown, and Figure 9 The interface 820 shown), and the gallery interface can move to the final state of scene four and the initial state of scene five ( Figure 10Interface 910 is shown), and the method for determining the transition state of scene four, the final state of scene five, and the layout parameters after the initial state of scene five is changed can refer to the above embodiment and will not be repeated here.

[0363] It should also be understood that in the case where the value range 4 is (M1+M2+M3, M1+M2+M3+M4], when the page movement distance is equal to M1+M2+M3+M4, the page 5 drawn and displayed based on the above layout parameters can be Figure 10 Interface 920 is shown. Figure 23 The layers drawn and Figure 14 From the hierarchical relationship of the layers, we can see that label area 1 is suspended in the title bar and remains stationary.

[0364] When the page movement distance is greater than M1+M2+M3 and less than M1+M2+M3+M4, page 5 drawn and displayed based on the above layout parameters can refer to Figure 8 Interfaces 720 and 730 are shown, and Figure 9 In the illustrated interfaces 820 and 830 , the tab area 1 is suspended in the title bar and remains stationary.

[0365] It should be noted that the above Figure 22 and Figure 23 The following is the implementation of method 1 in scenario 4. In the implementation of method 2 in scenario 4, the behavior manager also needs to change some layout parameters in layout parameter 3 of the title bar. For example, please refer to Figure 21 , change the colors of controls 1 and 2 in area 1 of the title bar so that the colors of controls 1 and 2 are inverted from their initial colors. In the second method of scenario 4, in addition to changing some layout parameters in the layout parameters of the title bar, you also need to change the layout parameters of other layers to achieve the display effect in the second method of scenario 4. For example, in the second method of scenario 4, the behavior manager also needs to change some parameters in the layout parameters of the content area. For example, please refer to Figure 21 Change the background color of the label section A1 in the content area to make the background color of the label section A1 inverted from the initial color. In the second method of scenario 4, the behavior manager also needs to change some parameters in the layout parameters of the label area, such as Figure 21 The text color in label area 1 is changed so that the changed text color is inverted from the initial color, thereby achieving the display effect in method 2 of scenario 4.

[0366] The implementation process of the interface display method in scene 5:

[0367] It should be noted that the implementation methods of the relevant steps in Scenario 5 can refer to Scenario 1 and will not be repeated in Scenario 4.

[0368] For example, please refer to Figure 24 , Figure 24 This is a schematic diagram of an interface display method provided in an embodiment of the present application. The method includes S051 to S0513.

[0369] S051 , the application layer receives the user's sliding operation 5 and generates an input event 6 .

[0370] It should be understood that the sliding operation 5 can be a Figure 10 An upward sliding operation is performed in the illustrated interface 920 .

[0371] S052: The gallery application sends an input event 6 to the behavior manager through the layout container. The input event 6 carries information such as the event type, the current page movement distance, and the historical page movement distance.

[0372] S053, the behavior manager determines the numerical range to which the sum of the current page movement distance and the historical page movement distance belongs based on the current page movement distance and the historical page movement distance. When it is determined that the page movement distance belongs to the numerical range 5, the following steps S054 to S0513 are executed.

[0373] Exemplarily, multiple numerical ranges are illustrated by the six numerical ranges mentioned in the above embodiments, where numerical range 1 is [0, M1], numerical range 2 is (M1, M1+M2], numerical range 3 is (M1+M2, M1+M2+M3], numerical range 4 is (M1+M2+M3, M1+M2+M3+M4], numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and numerical range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

[0374] In the implementation, when the behavior manager determines that the sum of the page movement distance and the historical page movement distance is less than or equal to M1+M2+M3+M4+M5 and greater than M1+M2+M3+M4, it determines that the page movement distance belongs to the value range 4.

[0375] S054, the behavior manager keeps the layout parameter 3 of the title bar unchanged.

[0376] For example, please refer to Figure 25 , Figure 25 This is another schematic diagram of multiple layers provided in an embodiment of the present application. Figure 25 The layout parameters of the layer contents of the multiple layers shown are the layout parameters when the page movement distance falls within the value range of 5. Figure 25 The layout parameters of the title bar shown in (a) are Figure 25 The layout parameters of the title bar shown in (a) are the same.

[0377] S055, the behavior manager sends the changed layout parameter 3 to the view framework.

[0378] It should be understood that the behavior manager can change some of the layout parameters of the search box layout parameters 5 by executing the operation S056 to obtain the changed layout parameters 6 of the search box. It should be noted that in this embodiment of the application, the position of the search box in the layout parameters 5 is changed, and other parameters are not changed.

[0379] S056: The behavior manager obtains the position of the moved area 5 of the search box based on the page movement distance and the position of the area 4 of the search box.

[0380] The implementation of this step can refer to the above embodiment, and the position of the area 5 after the search box moves can refer to Figure 25 The position shown in (d) is shown.

[0381] S057, the behavior manager sends the changed layout parameter 5 of the search box to the view framework.

[0382] It should be understood that the behavior manager changes some parameters in the content area layout parameter 5 by executing the operation S058, and obtains the changed content area layout parameter 6. It should be noted that in this embodiment of the application, the position of the content area in the layout parameter 5 is changed, and other parameters are not changed.

[0383] S058: The behavior manager obtains the position of the moved area 5 of the content area based on the page movement distance and the position of the area 4 of the content area.

[0384] The implementation of this step can refer to the above embodiment, and the position of the content area 5 after the movement can refer to Figure 25 The position shown in (c).

[0385] S059, the behavior manager sends the changed layout parameters 6 of the content area to the view framework.

[0386] It should be understood that the behavior manager, by executing operations S0510 and S0511, modifies some parameters in the layout parameters 5 of the multiple tab areas, thereby obtaining the modified layout parameters 6 of the multiple tab areas. It should be noted that in this embodiment of the application, the positions of the tab areas and the transparency of the text within the tab areas in the layout parameters 5 are modified, while other parameters remain unchanged.

[0387] S0510, the behavior manager determines the position of area 4 of the first tab area after the movement based on the page movement distance and the position of area 3 of the first tab area, and reduces the transparency of the text in area 4 of the first tab area based on the page movement distance.

[0388] For example, the position of the first label area 4 can refer to Figure 25 (b) shows the position of region 4 of label region 1.

[0389] It should be understood that the behavior manager can determine the transparency of the text in the label area based on the following formula 3:

[0390]

[0391] The transparency of the text in the moved label area refers to the transparency of the text in the title bar displayed after the page moves when the page moves a distance within the range of 5. For example, when the user Figure 10 After the sliding operation is performed on the interface 920 shown in (b), the transparency of the text in the label area of the interface 930 is changed. For example, the user Figure 10 (c) shows the transparency of text in the label area of interface 940 after a sliding operation is performed on interface 930.

[0392] The transparency of the text before moving refers to the transparency of the text in the title bar displayed before the page moves when the page moves within the value range of 5. For example, when the user Figure 10 For example, the transparency of the text in the label area of interface 920 before the user performs a sliding operation on interface 920 shown in (b) in FIG. 10 ; for example, the transparency of the text in the label area of interface 930 before the user performs a sliding operation on interface 930 shown in (c) in FIG. 10 .

[0393] The final text transparency is a preset value, such as 0, and the initial text transparency is a preset value, such as 1.

[0394] The second total movement distance refers to the movement distance from the page where the text transparency in the title area just starts to change to the page where the text transparency stops changing. The movement distance is a preset distance. For example, the text transparency in the title bar will continue to change within the above-mentioned numerical range of 5. The numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5]. Then the movement distance from the page where the text transparency in the label area just starts to change to the page where the text transparency stops changing is M5.

[0395] The second movement distance is the distance from the page where the text transparency in the label area begins to change to the current page. The second movement distance is greater than or equal to 0 and less than M5. The second movement distance can be based on the page movement distance. For example, the second movement distance is equal to the page movement distance minus the minimum value within the numerical range of 5. For example, if the page movement distance is M1+M2+M3+M4+M5, then the second movement distance can be M5.

[0396] It should be understood that the page from Figure 10 (b) shown in the interface 920) moves to Figure 10 In the process of the interface 940 shown in (d), the page movement distance changes from the minimum value in the value range 5 to the maximum value. At this time, the behavior manager can calculate the text transparency in the label area corresponding to each value in the value range 5 by the above formula 3, so that Figure 10 The display effect of gradually decreasing transparency of text in the label area is shown.

[0397] For example, assuming that the page movement distance is the maximum value M1+M2+M3+M4+M5 within the value range of 5, the second movement distance is M5, the text transparency before movement is 1, the final text transparency is 0, the initial text transparency is 1, and the second total movement distance is M3, then:

[0398]

[0399] for example, Figure 25 The transparency of the text in the area 4 of the label area 1 shown in (b) is 0.

[0400] S0510 : Based on the page movement distance and the position of the area 4 of the other tab area, obtain the position of the moved area 5 of the other tab area.

[0401] Other label areas can refer to Figure 25 The label area 2 and label area 3 shown in (b) and the position of the moved area 5 of the other label areas can be referred to Figure 23 (b) shows the position of region 5 of label region 2 and the position of region 5 of label region 3.

[0402] Regarding the implementation method of obtaining the position of the moved area 5 of the other tab area based on the page movement distance and the position of the area 4 of the other tab area, reference can be made to the above embodiment and will not be repeated here.

[0403] S0511 , the behavior manager sends the changed layout parameters 6 of the multiple label areas to the view framework.

[0404] S0512 , the behavior manager draws page 6 based on the changed layout parameters 6 of the label area, the search box, and the content area and the layout parameter 3 of the title area, and displays page 6 based on the hierarchical information.

[0405] It should be understood that the changed layout parameters 6 of the label area, search box and content area and the layout parameter 3 of the title area are based on the transition state of the gallery interface from scene 5 ( Figure 10 The interface 920 shown in (b) moves M5 pixels to the final state in scene five ( Figure 10d) is shown in the interface 940 in the figure, and the layout parameters in the final state in scene 5 are used as an example. When the distance moved by the gallery interface from the transition state in scene 5 is less than M5 pixels, the gallery interface can move to another transition state in scene 5 ( Figure 10 Interface 930 shown), about determining Figure 10 The layout parameters of the interface 930 shown can be referred to the above embodiment and will not be described in detail here.

[0406] It should also be understood that in the value range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], when the page movement distance is equal to M1+M2+M3+M4+M5, the page 6 drawn and displayed based on the above layout parameters can be Figure 10 Interface 940 is shown.

[0407] When the page movement distance is greater than M1+M2+M3+M4 and less than M1+M2+M3+M4+M5, page 6 drawn and displayed based on the above layout parameters can refer to Figure 10 Interface 940 is shown.

[0408] It should be noted that Figure 10 As can be seen from the interface 940 shown in (d) in FIG, the user can also perform an upward sliding operation in the interface 940 to move the label area 9443 to the label area 9442 (the label area can be considered as Figure 13 At the position shown in (b), in this scenario, the page movement distance can be considered to be within the numerical range 6 mentioned in the above embodiment. When the page movement distance is within the numerical range 6, the implementation method of the interface display can refer to the implementation method of other embodiments, which will not be repeated here.

[0409] The following section summarizes the above embodiments.

[0410] The embodiment of the present application provides an interface display method. Figure 2 The electronic device shown here may also be executed by a processor or chip in the electronic device, and the present application does not impose any limitation thereto. For ease of description, the method is described in detail by taking the method executed by the electronic device as an example. The method includes:

[0411] The electronic device displays a first interface of a gallery application, the first interface including a title bar area and a first content area, the first content area being located below the title bar area in the first interface, the title bar area displaying a title bar, the title bar including title text, the title text having a first transparency, the first transparency being greater than a minimum value within a preset transparency value range, the first content area displaying at least one tab bar and at least one group of image content, one tab bar corresponding to one group of image content;

[0412] In response to a sliding operation on the first interface, the electronic device displays a second interface, where the second interface includes a title bar area and a second content area, the second content area covers the title bar area, the size of the second content area is larger than the size of the first content area, the transparency of the title text in the title bar area of the second interface is a second transparency, the second transparency is greater than or equal to the minimum value within a preset transparency value range and is less than the first transparency, a first tab bar is displayed in the title bar area of the second interface, and the first tab bar is the tab bar located at the topmost of at least one tab bar.

[0413] It should be understood that the gallery application refers to an application that can store images taken by users. For the explanation of the application that stores images taken by users, please refer to the above embodiment and will not be repeated here. Figure 4 Interface 410 is shown as 411 for illustration purposes only.

[0414] The first interface can refer to Figure 6 In the interface 610 shown in (a), the title bar area can be considered as the area where the title bar is displayed in the display area of the electronic device, such as Figure 6 In the area 611 shown in (a), the first content area can be considered as an area in the display area of the electronic device where the content area is displayed, such as Figure 6 The 613 area shown in (a) is composed of Figure 6 As can be seen from (a) in FIG, the first content area 613 is located below the title bar area 611. The title text can be referred to Figure 6 The text 6111 is shown in (a).

[0415] The preset transparency value range can be, for example, [0, 1], where 0 represents complete transparency, i.e., the object or color is completely invisible, and any content below it can be seen. 1 represents complete opacity, i.e., the object or color completely covers all content below it. In other embodiments, the transparency value can also be expressed as a percentage, and the preset transparency value range can be, for example, [0%, 100%]. In other embodiments, transparency may be represented by an integer from 0 to 255, where 0 represents complete transparency and 255 represents complete opacity, and the preset transparency value range can be, for example, [0, 255]. The first transparency can be a value greater than the minimum value in the above-mentioned preset transparency value range, such as a first transparency of 1, 0.8, etc. The embodiment of the present application is illustrated by an example of a first transparency of 1.

[0416] At least one tab bar can be referenced Figure 6 6141 and 6142 are shown in (a), wherein the tab bar 6141 corresponds to a group of image contents, and the tab bar 6142 corresponds to a group of image contents.

[0417] It should also be understood that the sliding operation on the first interface may refer to the user sliding the Figure 6 An upward sliding operation is performed in the interface 610 shown in (a).

[0418] The second interface can refer to Figure 6 In the interface 630 shown in (c), after the user performs a sliding operation, the position, size, etc. of the title bar area do not change during the process of changing from the first interface to the second interface. For example, the position, size, etc. of the title bar area 631 in the interface 630 are the same as those of the title bar area 611 in the interface 610. However, the transparency of the text in the title bar area will be reduced. For example, the transparency of the title text in the title bar area 631 in the interface 630 is the second transparency, and the transparency of the title text in the title bar area 611 in the interface 610 is the first transparency. The second transparency is less than the first transparency. For example, the second transparency can be 0.1, 0, etc. The embodiment of the present application is illustrated with the second transparency being 0. It should be understood that all transparency values in the embodiments of the present application are selected from the preset transparency value range.

[0419] After the user performs a sliding operation, in the process of changing from the first interface to the second interface, the content area moves upward and the content area expands, and the content area will cover the title bar area. For example, the size of the second content area 633 in the interface 630 is larger than the size of the first content area 613 in the interface 610, and the upper boundary of the second content area 633 moves upward relative to the position of the upper boundary of the first content area 613. The positions of the lower boundary of the second content area 633 and the lower boundary of the first content area 613 remain unchanged, and the upper boundary of the second content area 633 overlaps with the upper boundary of the title bar area 631, so that the second content area 633 covers the title bar area 631.

[0420] It should also be understood that the first tab bar can refer to Figure 6 The tab bar 6141 shown in (a) and Figure 6 In the tab bar 6341 shown in (c), after the user performs a sliding operation, during the process of changing from the first interface to the second interface, at least one tab bar will move upward with the content area, such as Figure 6 In the interface 630 shown in (c), the upper boundary of the content area is moved to overlap with the upper boundary of the title bar area 631 to form a second content area 633, and the first tab bar 6341 is also moved to the title bar area 631, so that the first tab bar 6341 is displayed in the title bar area 631 of the second interface 630.

[0421] In related solutions, gallery applications can help users organize and manage images by creating albums, titles, tags, or using smart classification (such as by date, location, or person). When users view images in the gallery, the titles, tags, and other interface elements used to organize and manage images in the gallery will distract users, preventing them from fully focusing on the image content provided by the gallery, reducing their sense of immersion in viewing images in the gallery, and affecting the user experience.

[0422] In an embodiment of the present application, when the electronic device responds to a sliding operation on the first interface, the second transparency of the title text included in the title bar of the second interface displayed is less than the first transparency of the title text included in the title bar of the first interface. That is to say, the embodiment of the present application can reduce the transparency of the title text, reduce the impact of the title text on the user's attention, enable the user to allocate more attention to the image content provided by the gallery application, enhance the user's immersion in viewing the image, and improve the user experience.

[0423] Moreover, in response to a sliding operation on the first interface, the electronic device can display the second content area in the second interface over the title bar area, and the first tab bar can be displayed in the title bar area of the second interface. This will make the size of the second content area in the second interface larger than the size of the first content area in the first interface. Since the size of the second content area in the second interface is larger than the size of the first content area in the first interface, the second interface can display more image content relative to the first interface, so that the user can focus more on the image content, further enhancing the user's immersion in viewing images in the gallery.

[0424] In some embodiments, after the electronic device displays the second interface in response to a sliding operation on the first interface, the method further includes:

[0425] In response to a sliding operation on the second interface, the electronic device displays a third interface, where the third interface includes a title bar area and a second content area. A first tab bar is displayed in the title bar area of the third interface. The positions of other tab bars and at least one image content displayed in the second content area of the third interface are moved upward relative to the positions of other tab bars and at least one image content displayed in the second content area of the second interface. The other tab bars are tab bars other than the first tab bar in at least one tab bar.

[0426] It should be understood that the third interface can refer to Figure 8 (b) shows the interface 720, and Figure 8As shown in interface 730 in (c), it can be seen from interface 720 and interface 730 that when the electronic device responds to the sliding operation on the second interface and changes from the second interface to the third interface, the position, size, etc. of the title bar area 721 in interface 720 and the title bar area 731 in interface 730 are the same as the position, size, etc. of the title bar area in the second interface in the above embodiment. Therefore, the first tab bar is displayed in the title bar area of the third interface, for example, the first tab bar 7341 is displayed in the title bar area 731 in interface 730, and the first tab bar 7241 is displayed in the title bar area 721 in interface 720. That is to say, in the process of changing from the second interface to the third interface, the first tab bar is displayed in the title bar area, and the position, size, etc. of the first tab bar do not change.

[0427] It should also be understood that at least one tab bar may refer to tab bars 7241, 7242, and 7243 in interface 720, or may refer to tab bars 7341, 7342, and 7343 in interface 730, wherein other tab bars may refer to tab bars 7242 and 7243, and tab bars 7342 and 7343. The second interface may refer to Figure 6 The interface 630 shown in (c) is Figure 8 The interface 710 shown in (a) is the same as the interface 630, so the second interface can also refer to the interface 710. Comparing the interfaces 720 and 710, it can be seen that the tab bars 7241, 7242 and 7243 in the interface 720 are moved up relative to the tab bars 7141, 7142 and 7143 in the interface 710, the tab bars 7341, 7342 and 7343 in the interface 730 are moved up relative to the tab bars 7241, 7242 and 7243 in the interface 720, at least one image content in the interface 720 is moved up relative to at least one image content in the interface 710, and at least one image content in the interface 730 is moved up relative to at least one image content in the interface 720.

[0428] In an embodiment of the present application, the electronic device displays a third interface in response to a sliding operation on the second interface, and a first tab bar is displayed in the title bar area of the third interface. That is, in the process of changing from the second interface to the third interface, the first tab bar can be displayed in a floating manner in the title bar area, and the position of at least one image content displayed in the second content area in the third interface is moved up relative to the position of at least one image content displayed in the second content area in the second interface. Since the first tab bar can be displayed in a floating manner in the title bar area of the third interface and the at least one image content displayed in the second content area in the third interface is moved up, the third interface can display more image content relative to the second interface, so that the user can pay more attention to the image content, further enhancing the user's immersion in viewing images in the gallery.

[0429] In some embodiments, the second tab bar among the other tab bars is adjacent to the first tab bar displayed on the third interface, and the second tab bar is a tab bar located below the first tab bar.

[0430] Exemplary, reference Figure 10 In the illustrated interface 920 , the first tab bar refers to a tab bar 9241 in the interface 920 , and the second tab bar refers to a title bar 9242 in the interface 920 . The tab bar 9241 is adjacent to the title bar 9242 .

[0431] In some embodiments, the transparency of the first tab bar in the third interface is a third transparency, and the third transparency is greater than a minimum value within a preset transparency value range; and after the electronic device displays the third interface in response to a sliding operation on the second interface, the method further includes:

[0432] In response to a sliding operation on the third interface, the fourth interface is displayed, and the fourth interface includes a title bar area. The title bar area of the fourth interface displays a second tab bar and a first tab bar. The transparency of the first tab bar in the fourth interface is a fourth transparency. The fourth transparency is greater than or equal to the minimum value within the preset transparency value range and is less than the third transparency. The transparency of the second tab bar is greater than the fourth transparency.

[0433] It should be understood that the sliding operation on the third interface may refer to the user sliding on the Figure 10 In the interface 920 shown, a sliding operation is performed, and the fourth interface may refer to Figure 10 In the interface 940 shown in (d) of FIG, the third transparency is a value greater than the minimum value in the preset transparency range, such as the first transparency is 1, 0.8, etc. The first transparency is 1 for example. The fourth transparency is a value greater than the minimum value in the preset transparency range and less than the third transparency, such as 0.1, 0, etc. The fourth transparency is 0 for example.

[0434] It should also be understood that in the process of the electronic device changing from the third interface to the fourth interface, the transparency of the first tab bar will gradually decrease until it is reduced to the fourth transparency of the fourth interface, and in the process of the change, the transparency of the second tab bar does not change and is always greater than the fourth transparency, for example, the transparency of the second tab bar is 1 and the fourth transparency is 0.

[0435] In an embodiment of the present application, the electronic device can display a fourth interface in response to a sliding operation on the third interface, wherein the title bar area of the fourth interface displays the second tab bar and the first tab bar, and the transparency of the first tab bar is less than the transparency of the second tab bar. This can weaken the display of the first tab bar and focus on displaying the second tab bar, allowing smooth switching between different tab bars in the title bar area to improve user experience.

[0436] In some embodiments, the title bar includes a first interface element, the first tab bar includes tab text, the color of the first interface element displayed on the second interface is the first color, the color of the tab text displayed on the second interface is the second color, the color of the first interface element displayed on the third interface is the complementary color of the first color, and the color of the tab text displayed on the third interface is the complementary color of the second color.

[0437] For example, please refer to Figure 9 The first interface element may refer to controls 8112 and 8113 in interface 910, the first color of the first interface element displayed on the second interface may refer to the color shown in interface 910, the second color of the label text displayed on the second interface may refer to the color shown in interface 910, the color of the first interface element displayed on the third interface is the complementary color of the first color and may refer to the color shown in interface 930, and the color of the label text displayed on the third interface is the complementary color of the second color and may refer to the color shown in interface 930.

[0438] In an embodiment of the present application, the color of the label text displayed on the third interface can be the complementary color of the color of the label text displayed on the second interface, and the first interface element displayed on the third interface can be the complementary color of the first interface element displayed on the second interface, thereby improving the display effect.

[0439] In some embodiments, after the electronic device responds to the sliding operation on the first interface and before displaying the second interface, the method further includes:

[0440] The electronic device displays the fifth interface, which includes a title bar area and a third content area. The third content area partially overlaps with the title bar area. The size of the third content area is larger than the size of the first content area and smaller than the size of the second content area. The transparency of the title text in the title bar area of the fifth interface is the fifth transparency, which is smaller than the first transparency and greater than the second transparency. Part of the first tab bar is displayed in the title bar area of the fifth interface.

[0441] It should be understood that the fifth interface can refer to Figure 6 In the interface 620 shown in (b), the title bar area is area 621 , the third content area is area 623 , and area 623 partially overlaps with area 621 .

[0442] The fifth interface is a transitional interface between the first interface and the second interface. During the transition from the first interface to the second interface, the fifth interface can be displayed. During the transition from the first interface to the second interface, the transparency of the label text gradually decreases. For example, the fifth transparency of the fifth interface 620 is less than the first transparency of the first interface 610, until the transparency decreases to the second transparency of the second interface, such as the second transparency in interface 630. Furthermore, during the transition from the first interface to the second interface, the size of the content area gradually expands. For example, the size of the first content area 613 of the first interface 610 expands to the size of the third content area 623 of the fifth interface 620, and finally expands to the size of the second content area 633 of the second interface 630.

[0443] It should also be understood that when the first interface changes to the fifth interface, the third content area partially overlaps with the title bar area and does not completely cover the title bar area, until the fifth interface changes to the second interface, the second content area covers the title bar area.

[0444] In an embodiment of the present application, after a sliding operation is performed on the first interface, the electronic device first displays the fifth interface and then displays the second interface, wherein the size of the third content area of the fifth interface is larger than the size of the first content area of the first interface and smaller than the size of the second content area of the second interface, and the transparency of the title text of the fifth interface is smaller than the transparency of the title text of the first interface and larger than the transparency of the title text of the second interface. In this way, the first interface can be smoothly transitioned to the second interface through the fifth interface, thereby improving the display effect.

[0445] In some embodiments, before the electronic device displays the first interface of the gallery application, the method further includes:

[0446] The electronic device displays the sixth interface, which includes a title bar area, a first search box area and a fourth content area. The first search box area is located below the title bar area. A search box is displayed in the first search box area. The fourth content area is located below the first search box area. The size of the fourth content area is smaller than that of the first content area.

[0447] For example, the sixth interface can refer to Figure 5 In the interface 510 shown in (a), the title bar area in the sixth interface can refer to 511 in the interface 510, the first search box area can refer to 512 in the interface 510, and the fourth content area can refer to area 513 in the interface 510. Figure 5 As can be seen from (a) in the figure, area 512 is located below area 511, area 513 is located below area 512, and there is no overlap between area 512, area 511 and area 513. The size of the first content area can be referred to Figure 5The size of the area 533 in the interface 530 shown in (c) is determined by Figure 5 It can be seen that the size of region 513 is smaller than the size of region 533 .

[0448] In some embodiments, before the electronic device displays the sixth interface and displays the first interface, the method further includes:

[0449] The electronic device displays a seventh interface, which includes the title bar area, a second search box area, and a fifth content area, wherein the second search box area partially overlaps with the title bar area, a portion of the search box is displayed in the second search box area, and the fifth content area is located below the second search box area, wherein a size of the fifth content area is larger than a size of the fourth content area and smaller than a size of the first content area; and

[0450] After displaying the seventh interface, the first interface is displayed. The first interface also includes a third search box area. The third search box area completely overlaps with the title bar area. The title bar area displayed in the first interface completely blocks the search box.

[0451] It should be understood that the seventh interface can refer to Figure 5 In the interface 520 shown in (b), the title bar area included in the seventh interface can refer to area 521 in the interface 520, the second search box area can refer to area 522 in the interface 520, and the fifth content area can refer to area 523 in the interface 520.

[0452] It should also be understood that the seventh interface is a transition interface from the sixth interface to the first interface. Figure 5 It can be seen from the interface 520 (seventh interface) shown in (b) that the second search box area 522 partially overlaps with the title bar area 521, a partial search box is displayed in the title bar area 521, and the size of the fifth content area 523 is larger than the size of the fourth content area 513 of the seventh interface, and smaller than the size of the first content area 533.

[0453] The first interface can refer to Figure 5 In the interface 530 shown in (c), it can be seen from the interface 530 that the third search box area completely overlaps with the title bar area 531, and the search box is completely blocked by the title area 531.

[0454] In an embodiment of the present application, during the process of changing from the sixth interface to the first interface, the seventh interface can be displayed, the second search box area in the seventh interface partially overlaps with the title bar area, a partial search box is displayed in the second search box area, the third search box area of the first interface completely overlaps with the title bar area, and the title bar area displayed in the first interface completely blocks the search box, that is, during the process of changing from the sixth interface to the first interface, the search box is gradually blocked by the title bar area until it is completely blocked. After the search box is completely blocked, the size of the first content area of the first interface is larger than the size of the fifth content area of the seventh interface, and the size of the fifth content area is larger than the fourth content area. That is to say, during the process of changing from the sixth interface to the first interface, the size of the content area gradually increases. Since the size of the content area gradually increases, more image content can be displayed in the interface, so that the user can pay more attention to the image content, thereby enhancing the user's immersion in viewing images in the gallery.

[0455] In some embodiments, before the electronic device displays the sixth interface, the method further includes:

[0456] The electronic device displays the eighth interface, which includes an initial title bar area, an initial search box area and an initial content area. The initial search box area is located below the initial title bar area, and the initial content area is located below the initial search box area. The size of the title text in the initial title bar area is the first text size, and the first text size is larger than the text size of the title text in the title bar area. The size of the initial title bar area is larger than the size of the title bar area, and the size of the initial content area is smaller than the size of the fourth content area.

[0457] It should be understood that the eighth interface can refer to Figure 4 In the interface 420 shown in (b), the initial title bar area can refer to 421, the initial search box area can refer to 422, the initial content area can refer to 423, the first text size can refer to the text size in area 421, the first text size is larger than the text size in the title bar area in the sixth interface (such as interface 440), the size of the initial title bar area (such as area 421) is larger than the size of the title bar area (such as area 441 in interface 440), and the size of the initial content area (such as area 421) is smaller than the size of the fourth content area (such as area 443 in interface 440).

[0458] In the embodiment of the present application, since the first text size in the eighth interface is larger than the text size of the title text in the title bar area of the sixth interface, the size of the initial title bar area in the eighth interface is larger than the size of the title bar area in the sixth interface, and the size of the initial content area in the eighth interface is smaller than the size of the fourth content area of the sixth interface, the size of the title text in the sixth interface is reduced, the size of the title bar area is reduced, and the size of the content area is expanded relative to the eighth interface, thereby reducing the impact of the title text and title bar area on the user's attention. At the same time, the user can pay more attention to the image area, thereby improving the user experience.

[0459] In some embodiments, after the electronic device displays the eighth interface and before displaying the seventh interface, the method further includes:

[0460] The electronic device displays a ninth interface, which includes a first title bar area, a fourth search box area and a sixth content area. The fourth search box area is located below the first title bar area, and the sixth content area is located below the fourth search box area. The size of the title text in the first title bar area is the second text size, and the second text size is larger than the text size of the title text in the title bar area and smaller than the first text size. The size of the first title bar area is larger than the size of the title bar area and smaller than the size of the initial title bar area. The size of the sixth content area is smaller than the size of the fourth content area and larger than the size of the initial content area.

[0461] It should be understood that the ninth interface can refer to Figure 4 In the interface 430 shown in (c), the first title bar area can refer to area 431, the fourth search box area can refer to area 432, the sixth content area can refer to 433, and the positional relationship between areas 431, 432 and 433 can refer to interface 430.

[0462] It should also be understood that the ninth interface is a transition interface between the eighth interface and the seventh interface. In the process of changing from the eighth interface to the seventh interface, the size of the title text gradually decreases. For example, the title text can be reduced from the first text size of the eighth interface to the second text size of the ninth interface until it is reduced to the title text in the title bar area of the seventh interface.

[0463] In the process of changing from the eighth interface to the seventh interface, the size of the title bar area gradually decreases. For example, the title bar area can be reduced from the size of the initial title bar area of the eighth interface to the size of the first title bar area of the ninth interface and finally to the size of the title bar area of the seventh interface.

[0464] In the process of changing from the eighth interface to the seventh interface, the area size of the content area gradually expands. For example, the area of the content area can be expanded from the size of the initial content area of the eighth interface to the size of the first title bar area of the ninth interface and finally to the size of the title bar area of the seventh interface.

[0465] In the embodiment of the present application, since the second text size of the ninth interface is larger than the text size of the title text in the title bar area of the seventh interface and smaller than the first text size of the eighth interface, and the size of the first title bar area of the ninth interface is larger than the size of the title bar area of the seventh interface and smaller than the size of the initial title bar area of the eighth interface, and the size of the sixth content area of the ninth interface is smaller than the size of the fourth content area of the seventh interface and larger than the size of the initial content area of the eighth interface, in the process of changing from the eighth interface to the ninth interface and to the seventh interface, the size of the title text gradually decreases, the size of the title bar area gradually decreases, and the size of the content area gradually expands. Since the size of the title text gradually decreases, the size of the title bar area gradually decreases, and the size of the content area gradually expands, the impact of the title text and the title bar area on the user's attention can be reduced, and the user can pay more attention to the image content, thereby improving the user experience.

[0466] It should be noted that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0467] The present application provides a computer program product that, when executed on an electronic device, enables the electronic device to execute the technical solution in the above embodiment. The implementation principle and technical effects are similar to those of the above method-related embodiments and will not be described in detail here.

[0468] The embodiment of the present application provides a readable storage medium, which contains instructions. When the instructions are executed on an electronic device, the electronic device executes the technical solution of the above embodiment. The implementation principle and technical effect are similar and will not be repeated here.

[0469] The present application provides a chip for executing instructions. When the chip is running, the technical solution of the above embodiment is executed. The implementation principle and technical effect are similar and will not be described here.

[0470] In the above embodiments, all or part of the embodiments may be implemented by software, hardware, firmware, or any combination thereof. When implemented using software, all or part of the embodiments may be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present application are generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may 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 may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via a wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) method. The computer-readable storage medium may 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 therein. The available medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a high-density digital video disc (DVD)), or a semiconductor medium (eg, a solid state disk (SSD)).

[0471] It should be understood that the “embodiment” mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, the various embodiments in the entire specification do not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in the various embodiments of the present application, the size of the sequence number of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present application.

[0472] Those skilled in the art will understand that the various numerical numbers such as first and second involved in this application are only for the convenience of description and are not used to limit the scope of the embodiments of this application, and also indicate the order of precedence.

[0473] In this application, elements expressed in the singular are intended to mean "one or more" rather than "one and only one" unless otherwise specified. In this application, unless otherwise specified, "at least one" is intended to mean "one or more" and "a plurality" is intended to mean "two or more."

[0474] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. A can be singular or plural, and B can be singular or plural.

[0475] The term "at least one of..." in this document refers to all or any combination of the listed items. For example, "at least one of A, B and C" can mean: A exists alone, B exists alone, C exists alone, A and B exist at the same time, B and C exist at the same time, and A, B and C exist at the same time. A can be singular or plural, B can be singular or plural, and C can be singular or plural.

[0476] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0477] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0478] The same or similar parts between the various embodiments in this application can refer to each other. In the various embodiments in this application, and the various implementation methods / implementation methods / implementation methods in each embodiment, if there is no special explanation and logical conflict, the terms and / or descriptions between different embodiments and the various implementation methods / implementation methods / implementation methods in each embodiment are consistent and can be referenced to each other. The technical features in different embodiments and the various implementation methods / implementation methods / implementation methods in each embodiment can be combined to form new embodiments, implementation methods, implementation methods, or implementation methods according to their inherent logical relationships. The above-described implementation methods of this application do not constitute a limitation on the scope of protection of this application.

[0479] The above is only a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or replacements within the technical scope disclosed in the present application, which should be included in the scope of protection of the present application. Therefore, the scope of protection of the present application should be based on the scope of protection of the claims. In short, the above is only a preferred embodiment of the technical solution of the present application, and is not used to limit the scope of protection of the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should be included in the scope of protection of the present application.

Claims

1. An interface display method, characterized in that: The method comprises: Displaying a first interface of a gallery application, the first interface including a title bar area and a first content area, the first content area being located below the title bar area in the first interface, the title bar area displaying a title bar, the title bar including title text, the title text having a first transparency, the first transparency being greater than a minimum value within a preset transparency value range, the first content area displaying at least one tab bar and at least one group of image content, one tab bar corresponding to one group of image content; In response to a sliding operation on the first interface, a second interface is displayed, the second interface including the title bar area and a second content area, the second content area covering the title bar area, the size of the second content area being larger than the size of the first content area, the transparency of the title text in the title bar area of the second interface being a second transparency, the second transparency being greater than or equal to the minimum value within a preset transparency value range and less than the first transparency, a first tab bar being displayed in the title bar area of the second interface, the first tab bar being the tab bar located at the topmost of at least one of the tab bars.

2. The method according to claim 1, characterized in that After displaying the second interface in response to the sliding operation on the first interface, the method further includes: In response to a sliding operation on the second interface, a third interface is displayed, wherein the third interface includes the title bar area and the second content area, the first tab bar is displayed in the title bar area of the third interface, and the positions of the other tab bars displayed in the second content area in the third interface and the position of at least one of the image contents are moved upward relative to the positions of the other tab bars and at least one of the image contents displayed in the second content area in the second interface, and the other tab bar is a tab bar other than the first tab bar in at least one of the tab bars.

3. The method according to claim 2, characterized in that The second tab bar among the other tab bars is adjacent to the first tab bar displayed on the third interface, and the second tab bar is located below the first tab bar.

4. The method according to claim 3, characterized in that The transparency of the first tab bar in the third interface is a third transparency, and the third transparency is greater than the minimum value within the preset transparency value range; Furthermore, after displaying the third interface in response to the sliding operation on the second interface, the method further includes: In response to a sliding operation on the third interface, a fourth interface is displayed, the fourth interface including the title bar area, the title bar area of the fourth interface displays the second tab bar and the first tab bar, the transparency of the first tab bar in the fourth interface is a fourth transparency, the fourth transparency is greater than or equal to the minimum value within a preset transparency value range and is less than the third transparency, and the transparency of the second tab bar is greater than the fourth transparency.

5. The method according to any one of claims 2 to 4, characterized in that The title bar includes a first interface element, the first tab bar includes tab text, the color of the first interface element displayed on the second interface is the first color, the color of the tab text displayed on the second interface is the second color, the color of the first interface element displayed on the third interface is the complementary color of the first color, and the color of the tab text displayed on the third interface is the complementary color of the second color.

6. The method according to any one of claims 1 to 5, characterized in that After responding to the sliding operation on the first interface and before displaying the second interface, the method further includes: A fifth interface is displayed, wherein the fifth interface includes the title bar area and the third content area, the third content area partially overlaps with the title bar area, the size of the third content area is larger than the size of the first content area and smaller than the size of the second content area, the transparency of the title text in the title bar area of the fifth interface is a fifth transparency, the fifth transparency is smaller than the first transparency and greater than the second transparency, and part of the first tab bar is displayed in the title bar area of the fifth interface.

7. The method according to any one of claims 1 to 6, characterized in that Before displaying the first interface of the gallery application, the method further includes: The sixth interface is displayed, and the sixth interface includes the title bar area, the first search box area and the fourth content area. The first search box area is located below the title bar area. A search box is displayed in the first search box area. The fourth content area is located below the first search box area. The size of the fourth content area is smaller than that of the first content area.

8. The method according to claim 7, characterized in that Before displaying the sixth interface and displaying the first interface, the method further includes: Displaying a seventh interface, the seventh interface including the title bar area, a second search box area, and a fifth content area, the second search box area partially overlapping the title bar area, a portion of the search box displayed in the second search box area, the fifth content area being located below the second search box area, the size of the fifth content area being larger than the size of the fourth content area and smaller than the size of the first content area; and After displaying the seventh interface, the first interface is displayed, which also includes a third search box area. The third search box area completely overlaps with the title bar area, and the title bar area displayed in the first interface completely blocks the search box.

9. The method according to claim 7 or 8, characterized in that Before displaying the sixth interface, the method further includes: The eighth interface is displayed, and the eighth interface includes an initial title bar area, an initial search box area and an initial content area. The initial search box area is located below the initial title bar area, and the initial content area is located below the initial search box area. The size of the title text in the initial title bar area is a first text size, and the first text size is larger than the text size of the title text in the title bar area. The size of the initial title bar area is larger than the size of the title bar area, and the size of the initial content area is smaller than the size of the fourth content area.

10. The method according to claim 9, characterized in that After displaying the eighth interface and before displaying the seventh interface, the method further includes: The ninth interface is displayed, and the ninth interface includes a first title bar area, a fourth search box area and a sixth content area. The fourth search box area is located below the first title bar area, and the sixth content area is located below the fourth search box area. The size of the title text in the first title bar area is a second text size, and the second text size is larger than the text size of the title text in the title bar area and smaller than the first text size. The size of the first title bar area is larger than the size of the title bar area and smaller than the size of the initial title bar area. The size of the sixth content area is smaller than the size of the fourth content area and larger than the size of the initial content area.

11. An electronic device, characterized in that: include: one or more processors; one or more memories; The one or more memories store one or more computer programs, and the one or more computer programs include instructions, which, when executed by the one or more processors, enable the electronic device to perform the method according to any one of claims 1 to 10.

12. A computer-readable storage medium, characterized in that The method comprises computer instructions, which, when executed on an electronic device, cause the electronic device to execute the method according to any one of claims 1 to 9.

13. A chip, characterized in that: The chip includes: a memory for storing instructions; A processor, configured to call and execute the instructions from the memory, so that an electronic device equipped with the chip executes the method according to any one of claims 1 to 10.

Images