An interface display method, electronic equipment, storage medium and chip

Abstract

The application provides an interface display method, an electronic device, a storage medium and a chip. The method can display a second interface in response to a sliding operation on a first interface, the second content area in the second interface covers the title bar area, and the first tab bar is displayed in the title bar area of the second interface. In this way, the size of the second content area in the second interface is greater 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 greater 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 pay more attention to the image content, improve the immersion of the user in the gallery when viewing the image, and the method can reduce the transparency of the title text, reduce the influence of the title text on the user's attention, and make the user allocate more attention to the image content provided by the gallery application.

Description

TECHNICAL FIELD

[0001] The present application relates to the terminal field, and in particular to an interface display method, an electronic device, a storage medium and a chip. BACKGROUND

[0002] Generally, a gallery can help a user organize and manage images by creating albums, titles, tags or using smart classification (such as by date, location or person), etc. When the user views images in the gallery, the interface elements in the gallery, such as titles, tags, etc., used to organize and manage images will distract the user's attention, so that the user's attention cannot be fully focused on the image content provided by the gallery, reducing the user's immersion in viewing images in the gallery and affecting the user experience. SUMMARY

[0003] The present application provides an interface display method, an electronic device, a storage medium and a chip, which can improve 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 being below the title bar area in the first interface, the title bar area displaying a title bar, the title bar including title text, the transparency of the title text being a first transparency, the first transparency being greater than a minimum value in a preset transparency value range, the first content area displaying at least one tag bar and at least one group of image content, one tag bar corresponding to one group of image content;

[0005] The electronic device displays a second interface in response to a sliding operation on the first interface, the second interface including a 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 greater 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 in the preset transparency value range and less than the first transparency, the title bar area of the second interface displaying a first tag bar, the first tag bar being the uppermost tag bar in the at least one tag bar.

[0006] In the present application, the second interface displayed by the electronic device in response to the sliding operation on the first interface has a title bar including title text with a second transparency that is less than the first transparency of the title text included in the title bar of the first interface. That is, the present application can reduce the transparency of the title text, reduce the impact of the title text on the user's attention, allow the user to allocate more attention to the image content provided by the gallery application, improve the user's immersion in viewing images, and improve the user experience.

[0007] Further, the second content area in the second interface displayed by the electronic device in response to the sliding operation on the first interface can cover the title bar area, and the 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 greater 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 greater 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 pay more attention to the image content, and the immersion of the user in viewing the images in the gallery is further improved.

[0008] With reference to the first aspect, in some implementations of the first aspect, after the electronic device displays the second interface in response to the sliding operation on the first interface, the method further includes:

[0009] The electronic device displays a third interface in response to the sliding operation on the second interface, the third interface including a title bar area and a second content area, the first tab bar being displayed in the title bar area of the third interface, and the positions of the other tab bars and the at least one image content displayed in the second content area of the third interface being shifted upward relative to the positions of the other tab bars and the at least one image content displayed in the second content area of the second interface, the other tab bars being tab bars other than the first tab bar in the at least one tab bar.

[0010] In the embodiments of the present application, the electronic device displays the third interface in response to the sliding operation on the second interface, the first tab bar being displayed in the title bar area of the third interface, that is, the first tab bar can be displayed in the title bar area of the third interface and the position of the at least one image content displayed in the second content area of the third interface being shifted upward relative to the position of the at least one image content displayed in the second content area of the second interface. Since the first tab bar can be displayed in the title bar area of the third interface and the position of the at least one image content displayed in the second content area of the third interface is shifted upward, 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, and the immersion of the user in viewing the images in the gallery is further improved.

[0011] With reference to the first aspect, in some implementations of the first aspect, the second tab bar in the other tab bars is adjacent to the first tab bar displayed in the third interface, and the second tab bar is a tab bar located below the first tab bar.

[0012] With reference to the first aspect, in some implementations of the first aspect, the first tab bar in the third interface has a third transparency, and the third transparency is greater than the minimum value in the preset range of transparency values; and after the electronic device displays the third interface in response to the sliding operation on the second interface, the method further includes:

[0013] In response to the sliding operation on the third interface, the fourth interface is displayed, 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 a minimum value in a preset transparency value range and less than the third transparency, and the transparency of the second tab bar is greater than the fourth transparency.

[0014] According to the embodiments of the present application, the electronic device can display the fourth interface in response to the sliding operation on the third interface, 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, so that the display of the first tab bar can be weakened, the second tab bar is highlighted, and different tab bars are smoothly switched in the title bar area, thereby improving the user experience.

[0015] With reference to the first aspect, in a possible implementation of the first aspect, the title bar includes a first interface element, the first tab bar includes tab text, the first interface element displayed by the second interface has a first color, the tab text displayed by the second interface has a second color, the first interface element displayed by the third interface has a complementary color of the first color, and the tab text displayed by the third interface has a complementary color of the second color.

[0016] According to the embodiments of the present application, the color of the tab text displayed by the third interface can be a complementary color of the color of the tab text displayed by the second interface, and the first interface element displayed by the third interface can be a complementary color of the first interface element displayed by the second interface, thereby improving the display effect.

[0017] With reference to the first aspect, in a possible implementation of the first aspect, after the electronic device displays the second interface in response to the sliding operation on the first interface, the method further includes:

[0018] The electronic device displays the fifth interface, the fifth interface includes a title bar area and a third content area, the third content area partially overlaps the title bar area, the size of the third content area is greater than the size of the first content area and less 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 less 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.

[0019] In the embodiments of the present application, the electronic device displays the fifth interface first and then displays the second interface after the sliding operation on the first interface, wherein the size of the third content region of the fifth interface is greater than the size of the first content region of the first interface and less than the size of the second content region of the second interface, and the transparency of the title text of the fifth interface is less than the transparency of the title text of the first interface and greater 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, and the display effect is improved.

[0020] With reference to the first aspect, in some implementations 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, the sixth interface including a title bar region, a first search box region and a fourth content region, the first search box region being located below the title bar region, the first search box region displaying a search box therein, and the fourth content region being located below the first search box region, the fourth content region having a size less than that of the first content region.

[0022] With reference to the first aspect, in some implementations of the first aspect, before the electronic device displays the sixth interface, the method further includes:

[0023] The electronic device displays the seventh interface, the seventh interface including the title bar region, a second search box region and a fifth content region, the second search box region partially overlapping the title bar region, the second search box region displaying a partial search box therein, and the fifth content region being located below the second search box region, the fifth content region having a size greater than that of the fourth content region and less than that of the first content region; and

[0024] After displaying the seventh interface, the first interface is displayed, the first interface further including a third search box region, the third search box region completely overlapping the title bar region, and the title bar region displayed in the first interface completely shielding the search box.

[0025] In the embodiment of the present application, during the process of changing the sixth interface to the first interface, the seventh interface can be displayed, the second search box area in the seventh interface partially overlaps the title bar area, and part of the search box is displayed in the second search box area. The third search box area of the first interface completely overlaps 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 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 greater than the size of the fifth content area of the seventh interface, and the size of the fifth content area is greater than the size of the fourth content area, that is, during the process of changing 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 improving the immersion of the user in the gallery when viewing images.

[0026] With reference to the first aspect, in some implementations of the first aspect, before the electronic device displays the sixth interface, the method further includes:

[0027] The electronic device displays an eighth interface, the eighth interface including 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, which is greater than the text size of the title text in the title bar area. The size of the initial title bar area is greater than the size of the title bar area, and the size of the initial content area is less 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 greater 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 greater 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 less than the size of the fourth content area in the sixth interface, the size of the title text is reduced, the size of the title bar area is reduced, and the size of the content area is increased in the sixth interface relative to the eighth interface. Therefore, the influence 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 area, thereby improving the user experience.

[0029] With reference to the first aspect, in some possible implementations of the first aspect, after the electronic device displays the eighth interface and before the electronic device displays the seventh interface, the method further includes:

[0030] The electronic device displays a ninth interface, 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, the sixth content area is located below the fourth search box area, the size of the title text of the first title bar area is a second text size, 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 of the eighth interface, and 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, when changing from the eighth interface to the ninth 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 increases. 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 increases, the influence of the title text and the title bar area on the attention of the user 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, which is configured to execute the method provided in the first aspect. Specifically, the electronic device can include a processing unit configured to execute any possible implementation of the method in the first aspect.

[0033] In a third aspect, an electronic device is provided, which includes one or more processors, and one or more memories storing one or more computer programs including instructions which, when executed by the one or more processors, cause the electronic device to perform the method in any possible implementation of the first aspect.

[0034] In a fourth aspect, a computer readable storage medium is provided, which includes computer instructions which, when executed on an electronic device, cause the electronic device to perform the method in the first aspect.

[0035] In a fifth aspect, a chip is provided, which includes a memory configured to store instructions, and a processor configured to call and execute the instructions from the memory, so that an electronic device installed with the chip performs the method in the first aspect. BRIEF DESCRIPTION OF DRAWINGS

[0036] Figure 1 is a schematic diagram of a gallery of a related solution provided by the disclosure.

[0037] Figure 2 is a structural schematic diagram of an electronic device 200 provided by an embodiment of the disclosure.

[0038] Figure 3 is a software structural block diagram of an electronic device 200 provided by an embodiment of the disclosure.

[0039] Figure 4 is a schematic diagram of a gallery interface provided by an embodiment of the disclosure.

[0040] Figure 5 is a schematic diagram of another gallery interface provided by an embodiment of the disclosure.

[0041] Figure 6 is a schematic diagram of another gallery interface provided by an embodiment of the disclosure.

[0042] Figure 7 is an example diagram of a content area provided by an embodiment of the disclosure.

[0043] Figure 8 is a schematic diagram of another gallery interface provided by an embodiment of the disclosure.

[0044] Figure 9 is a schematic diagram of another gallery interface provided by an embodiment of the disclosure.

[0045] Figure 10 is a schematic diagram of another gallery interface provided by an embodiment of the disclosure.

[0046] Figure 11 is a schematic diagram of the overall flow of an interface display method provided by an embodiment of the disclosure.

[0047] Figure 12 is an example diagram of the position of an interface element provided by an embodiment of the disclosure.

[0048] Figure 13 is an example diagram of a content area and a label area provided by an embodiment of the disclosure.

[0049] Figure 14 is an example diagram of a hierarchical relationship provided by an embodiment of the disclosure.

[0050] Figure 15 is a schematic diagram of an interface display manner provided by an embodiment of the disclosure.

[0051] Figure 16 is a schematic diagram of a plurality of layers provided by an embodiment of the disclosure.

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

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

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

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

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

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

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

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

[0060] Figure 25 is another schematic diagram of multiple layers provided by 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 drawings.

[0062] At present, a user can take photos and record videos through an electronic device, and the user can view the taken images, including photos and videos, in a gallery.

[0063] Generally, the gallery can help the user organize and manage the images by creating albums, titles, tags or using smart classification (such as by date, location or person), etc. When the user views the images in the gallery, the interface elements in the gallery, such as the titles and tags, for organizing and managing the images will distract the user's attention, so that the user's attention cannot be fully paid to the image content provided by the gallery, which reduces the user's immersion in viewing the images in the gallery and affects the user experience.

[0064] For example, refer to Figure 1 , Figure 1 is a schematic diagram of a gallery of a related solution provided by the present application.

[0065] Figure 1The interface 110 shown is the interface for the user to view images in the gallery. The images to be viewed are displayed in the area 111 and the area 112 in the interface 110, and interface elements for organizing and managing images, such as the title 113, the search box 114, the positioning control 117, the more control 118, the dates 115 and 116, and the bottom navigation bar 119, are displayed in other areas in the interface 110. It should be understood that “immersion” generally refers to the user being able to fully immerse in the content or experience provided by the electronic device when using the electronic device, without being distracted by external interference or design elements of the electronic device itself. When the user views the images in the area 111 and the area 112 in the interface 110, the interface elements 113 to 119 will distract the user's attention, so that the user's attention cannot be fully immersed in the image content provided by the gallery, and the immersion of the user in viewing images in the gallery is reduced. Figure 1

[0066] To solve the above problems, the interface display method provided in the embodiments of the present application can reduce or change the display of interface elements for organizing and managing images in the gallery, so that the user's attention is more focused on the image content provided by the gallery, the immersion of the user in viewing images in the gallery is improved, and the user experience is improved.

[0067] The interface display method provided in the embodiments of the present application is applied to an electronic device. The electronic device can also be referred to as a terminal, a user equipment (UE), a mobile station (MS), a mobile terminal (MT), etc. The electronic device can be a mobile phone, a tablet computer (Pad), a notebook 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, a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in smart grid, a wireless terminal in transportation safety, a wireless terminal in smart city, a wireless terminal in smart home, etc. The embodiments of the present application do not limit the specific technology and specific device form of the electronic device.

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

[0069] Exemplary, Figure 2 A structural schematic diagram of the electronic device 200 is shown. The electronic device 200 can include a processor 210, an external memory interface 220, an internal memory 230, an antenna 1, an antenna 2, a mobile communication module 240, a wireless communication module 250, an audio module 260, a speaker 260A, a receiver 260B, a microphone 260C, a headset interface 260D, a sensor module 270, a camera 280, a display screen 290, and the like. The sensor module 270 can include a pressure sensor 270A, a touch sensor 270B, and the like.

[0070] It can be understood that the structure shown in the embodiments of the present application does not constitute a specific limitation on the electronic device 200. In other embodiments of the present application, the electronic device 200 can include more or fewer components than the diagram, or combine certain components, or split certain components, or different component arrangements. The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0071] The processor 210 can include one or more processing units, for example: the processor 210 can include 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), etc. Different processing units can be independent devices, or can be integrated into one or more processors.

[0072] The controller can be the nerve center and command center of the electronic device 200. The controller can generate operation control signals according to instruction operation codes and timing signals to complete the control of fetching instructions and executing instructions.

[0073] The GPU can be configured with a hardware decoder. Creating a hardware decoder will occupy the hardware macro block resources of the GPU.

[0074] The decoding program of the soft decoder can be run on the CPU. Creating a soft decoder will not occupy the hardware macro block resources of the GPU.

[0075] The processor 210 can also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 210 is a cache memory. The memory can hold instructions or data that the processor 210 has just used or is using repeatedly. If the processor 210 needs to use the instructions or data again, it can be called directly from the memory. This avoids repeated access and reduces the waiting time of the processor 210, thus improving the efficiency of the system.

[0076] In embodiments of the present application, the processor 210 can set the layout parameters of the title bar, search box, etc.

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

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

[0079] The display function of the electronic device 200 can be realized by the GPU, the display screen 290, and the application processor, etc.

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

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

[0082] The ISP is used to process the 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 realize the expansion of 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 various functional applications and data processing of the electronic device 200 by running the instructions stored in the internal memory 230. The internal memory 230 can include a program storage area and a data storage area.

[0085] The electronic device 200 can realize the audio function through the audio module 260, the speaker 260A, the receiver 260B, the microphone 260C, the earphone interface 260D, and the application processor, etc. For example, music playing, recording, etc.

[0086] The pressure sensor 270A is configured to sense a pressure signal and convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 270A can be disposed on the display screen 290. When a touch operation is performed on the display screen 290, the electronic device 200 detects the intensity of the touch operation based on the pressure sensor 270A.

[0087] The touch sensor 270B, also referred to as a "touch panel". The touch sensor 270B can be disposed on the display screen 290, and the touch sensor 270B and the display screen 290 form a touch screen, also referred to as a "touch panel". The touch sensor 270B is configured to detect a touch operation performed on or near the touch sensor 270B.

[0088] The hardware structure of the electronic device 200 has been described above. It can be understood that, Figure 3 The components included in the hardware structure shown above do not constitute a specific limitation on the electronic device 200. The electronic device 200 can have more or fewer components than those shown in the figure, can combine two or more components, or can have a different component configuration. Figure 3 The various components shown in the figure can 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] In addition, an operating system runs on the above components. For example, an iOS operating system, an Android open source operating system, a Windows operating system, a Hongmeng operating system, etc. Application programs can be installed and run on the operating system.

[0090] The operating system of the electronic device 200 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiments of the present application take the Android operating system with a layered architecture as an example to illustrate the operating system of the electronic device 200.

[0091] Figure 3 is a software structure block diagram of the electronic device 200 of the embodiments of the present application. The layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into an application layer, a software development kit (uikit), and an application framework layer from top to bottom.

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

[0093] The application framework layer provides an application programming interface (API) and a programming framework for the applications of the application layer. The application framework layer includes some pre-defined functions.

[0094] As shown in FIG. 1, between the application layer and the application framework layer, there is also a software development kit (uikit), which is a core framework for building and managing application user interfaces. The uikit provides a series of rich interface elements, view controllers, controls, and related function classes, enabling developers to efficiently create beautiful, smooth, and interactive user interfaces. Figure 3

[0095] Among them, the uikit includes a layout container (coordinatorlayout).

[0096] CoordinatorLayout can allow dependencies between child views, with one view depending on the behavior of another. Through CoordinatorLayout, the electronic device can easily implement interaction effects between scroll views and other views, such as hiding, displaying, and sliding when scrolling. CoordinatorLayout can support custom animation effects and define animations for dependent views when interacting with scrolling, dragging, and other interactions. CoordinatorLayout coordinates the behavior of child views, reducing the amount of code that needs to be manually written, making the layout more concise, and reducing resource consumption.

[0097] CoordinatorLayout can also handle touch event delivery, making interactions between child views 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 scrolling events for multiple scroll views, providing a smoother scrolling experience.

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

[0099] Header View generally refers to a view that is fixed at the top in a list view, such as Figure 1 the view contained within 114 shown. Content View generally refers to the main content view, such as Figure 1 the view contained within 111 and 112 shown.

[0100] The software development kit UIKit also includes a BehaviorManager, through which CoordinatorLayout can coordinate the behaviors of its child views. Each child view can be assigned a Behavior through the BehaviorManager, which is responsible for defining how the view responds to layout changes, scrolling, and other events.

[0101] In the embodiments of the present application, the BehaviorManager can calculate the layout parameters of the "header" child view, the "search box" child view, and the "content area" child view in response to a user's sliding operation, as well as the layout parameters of the label child view on the "content area", and then pass these layout parameters to the view framework, which draws and displays the corresponding views based on these layout parameters.

[0102] As shown in Figure 3 , the application framework layer can include a view framework and an animation framework.

[0103] 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 an application. The view framework is also responsible for managing the layout of child views, which defines the position and size of child views. The view framework also supports user interaction, which 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 will be responsible for marking the area that needs to be redrawn and performing the redraw 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 views: measurement (measure), layout (layout), and drawing (draw), etc.

[0104] The animation framework is used to add smooth and attractive animation effects to the user interface, which can significantly improve the user's interactive experience. These animations can make the application look more lively and modern, and also help users better understand the functions and operation results of the application. The animation framework also allows developers to create complex animations and transition effects, which can enhance the visual appeal of the application.

[0105] It should be understood that Figure 3 The software architecture diagram shown is only a schematic illustration and should not constitute a limitation on the embodiments of the present application. In other embodiments, more or fewer layers can be included, such as a kernel layer, a hardware layer, and the like. Figure 3

[0106] The above embodiments introduce the hardware structure and software architecture of the electronic device 200. The application scenarios of the interface display method provided by the embodiments of the present application are introduced below.

[0107] It should be understood that the interface display method provided by the embodiments of the present application can be applied to an application program in which the electronic device stores images taken by the user, and the application program includes a gallery application, a social media application, such as and the like, a cloud storage service, a file manager, a note application, office software, and the like. The embodiments of the present application are exemplarily illustrated by a gallery application.

[0108] It should also be understood that the interface display method provided by the embodiments of the present application can display different interface elements according to different distances of interface sliding. The different interface elements displayed are introduced below through multiple scenarios.

[0109] Scenario one:

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

[0111] As shown in (a) in Figure 4 , the interface 410 includes a gallery application 411, and the user can click the gallery application 411. The electronic device displays the interface 420 shown in (b) in Figure 4 in response to the operation of the user clicking the gallery application 411. 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 title text “Photos” 4211, a control 4212, and a control 4213, etc. The image content is displayed in the content area 423, 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 “2023-12-24” and “2023-12-23”. The bottom navigation bar 425 includes controls such as “Photos”, “Albums”, “Time Machine”, and “Creation”.

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

[0113] The user can continue to perform the upward swiping operation in the interface 430. The electronic device displays, in response to the upward swiping operation of the user, Figure 4 interface 440, the interface elements displayed in the interface 440 are relative to the interface elements displayed in the interface 430, the area size of the title bar 441 is reduced to a preset size relative to the area size of the title bar 431, and the title text 4411 is reduced to a preset size relative to the text size of the title text 4311. The specific numerical value of the preset size of the title bar area is not limited in the embodiments of the present application. The search box 442 is moved upward on the screen relative to the search box 432, the content area 443 is enlarged in area size and moved upward relative to the content area 443, the label area 4441 is moved upward on the screen relative to the label area 4341, and the label area 4442 is moved upward on the screen relative to the label area 4342.

[0114] It should be understood that Figure 4 the layout state of the interface elements in the interface 440 shown in (d) of FIG. 4 can be referred to as the final state of scenario one, Figure 4 the layout state of the interface elements in the interface 420 shown in (b) of FIG. 4 can be referred to as the initial state of scenario one, Figure 4 the layout state of the interface elements in the interface 430 shown in (c) of FIG. 4 can be referred to as the transition state of scenario one.

[0115] It should also be understood that in the transition state of Scenario 1, the area size of the title bar and the text size of the title text gradually decrease, while the position of the content area on the screen gradually moves upward and the area size gradually increases. For example, if 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 first decreases from font size 1 to font size 2, then from font size 2 to font size 3, and gradually decreases to font size 5. Figure 4 (b) in the example illustrates a reduced title bar area size and text size, and an expanded content area area size, as well as an upward-shifted content area.

[0116] In this embodiment, electronic devices can reduce the impact of the gallery's design elements on user attention by shrinking the size of the title bar area and the text size, allowing users to focus more on the image content provided by the gallery and enhancing the user's immersive experience when viewing images in the gallery.

[0117] Furthermore, the embodiments of this application can also expand the size of the content area, allowing the content area to display more images. Since the content area can display more images, users can further focus their attention on the image content, further enhancing the user's immersive experience when viewing images in the gallery.

[0118] Scene 2:

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

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

[0121] The user can continue to swipe upwards on interface 520. In response to the user's swipe, the electronic device displays... Figure 5The layout state of the interface elements in the interface 530 shown in (c) in FIG. 5 can be referred to as the final state of scenario two, in which the area size of the search box 532 is reduced to 0, the interface element of the search box 533 is completely blocked by the title bar 531, and the control 536 is displayed in the interface 530 to replace the completely blocked search box. The content area 533 is enlarged in area size and moved upward in position relative to the content area 523, the label area 5341 is moved upward in position on the screen relative to the label area 5241, and the label area 5342 is moved upward in position on the screen relative to the label area 5242.

[0122] It should be understood that Figure 5 The layout state of the interface elements in the interface 530 shown in (c) in FIG. 5 can be referred to as the final state of scenario two, Figure 5 The layout state of the interface elements in the interface 510 shown in (a) in FIG. 5 can be referred to as the initial state of scenario two, Figure 5 The layout state of the interface elements in the interface 520 shown in (b) in FIG. 5 can be referred to as the transition state of scenario two.

[0123] It should also be understood that in the transition state of scenario 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 gradually enlarged in area size. For example, the height of the area in the area size of the search bar in the initial state of scenario 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. In the transition state, the height of the area is first reduced from 5 cm to 4 cm, then from 4 cm to 3 cm, and gradually reduced to 0 cm. Figure 5 (b) in FIG. 5 illustrates a reduced area size of the search bar, and an enlarged area size of the content area and a moved-up content area.

[0124] In the embodiments of the present application, the electronic device can reduce the influence 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, and the immersion of the user in viewing images in the gallery is improved.

[0125] In addition, the embodiments of the present application can further enlarge the size of the content area on the basis of 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, and the immersion of the user in viewing images in the gallery is further improved.

[0126] Scenario three:

[0127] Please refer to Figure 6 , Figure 6 is another schematic diagram of a gallery interface provided by the embodiments of the present application.

[0128] Figure 6 Interface 610 shown in (a) is... Figure 5 The interface shown is the same as 530, and the user can continue to perform an upward swipe operation on interface 610. In response to the user's swipe operation, the electronic device displays... Figure 6 In the interface 620 shown in (b), compared to the interface elements displayed in 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 and moved upward relative to the content area 613, and 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 the tab area 6241 partially overlaps with the title bar 621. The tab area 6242 is moved upward relative to the tab area 6142 on the screen. Because 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 swipe upwards on interface 620. In response to the user's swipe, the electronic device displays... Figure 6 In the interface 630 shown in (c), the interface elements displayed in interface 630 are relative to those displayed in 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 title text cannot be seen by the user). The area size of the content area 633 is enlarged and its position is moved upward relative to the area size of the content area 623. The top edge of the content area 633 overlaps with the top edge of the title bar 631. The areas of the content area 633 and the title bar 631 completely overlap. The position of the tab area 6341 on the screen is moved upward relative to the tab area 6241. During subsequent user swiping of the interface, the position of the tab area 6341 on the screen remains unchanged until the next tab area reaches the position of the tab area 6341. The areas of the tab area 6341 completely overlap with the area of ​​the title bar 631. The position of the tab area 6342 on the screen is moved upward relative to the position of the tab area 6242. The position of the tab area 6343 on the screen is moved upward relative to the position of the tab area 6243.

[0130] It should be understood that Figure 6 The layout state of the interface elements in interface 630 shown in (c) can be called the final state of scene three. Figure 6 The layout state of the interface elements in interface 610 shown in (a) can be referred to as the initial state of scene three. Figure 6 The layout state of the interface elements in 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 scenario three, the transparency of the title text in the title bar is gradually reduced, and the position of the content area on the screen is gradually moved up and the area size is gradually expanded, for example, the transparency of the title text in the initial state of scenario 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 is reduced from 1 to 0.9, from 0.9 to 0.8, and so on until 0. Figure 6 (b) in the title text with a transparency, and an enlarged area size of the content area and an upwardly moved content area.

[0132] In the embodiments of the present application, the electronic device can reduce the influence of the design elements of the gallery itself on the user's attention by reducing the transparency of the title text in the title bar, eventually making the user visually unable to see the title text, so that the user's attention is more focused on the image content provided by the gallery, and the user's immersion in viewing images in the gallery is improved.

[0133] In addition, the embodiments of the present application can further expand the size of the content area on the basis of 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, and the user's immersion in viewing images in the gallery is further improved.

[0134] Scenario four:

[0135] It should be understood that the content area in the above embodiments includes multiple groups of partitions, and 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 is an example of a content area provided by the embodiments of the present application. Figure 7 is an example of a content area provided by the embodiments of the present application.

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

[0137] Method one:

[0138] Please refer to Figure 8 , Figure 8 is another example of a gallery interface provided by the embodiments of the present application.

[0139] Figure 8 the interface 710 shown in (a) of FIG. 7A is the same as the interface 630 shown in (a) of FIG. 6A, the user can continue to perform the upward swipe operation in the interface 710. In response to the user's swipe operation, the electronic device displays an interface 720 shown in (b) of FIG. 7A. Figure 6 Figure 8 The interface elements displayed in the interface 720 shown in (b) of FIG. 7A are the same as the interface elements displayed in the interface 710 shown in (a) of FIG. 7A, the label area 7241 remains stationary in position on the screen relative to the label area 7141, the image partitions in the content area 723 are moved upward in position on the screen relative to the image partitions in the content area 713, and the image partitions in the content area 723 partially overlap the label area 7241, the label area 7242 is moved upward in position on the screen relative to the label area 7142, and the label area 7243 is moved upward in position on the screen relative to the label area 7143.

[0140] The user can continue to perform the upward swipe operation in the interface 720. In response to the user's swipe operation, the electronic device displays an interface 730 shown in (c) of FIG. 7A. Figure 8 The interface elements displayed in the interface 730 shown in (c) of FIG. 7A are the same as the interface elements displayed in the interface 720 shown in (b) of FIG. 7A, the label area 7341 remains stationary in position on the screen relative to the label area 7241, the image partitions in the content area 733 are moved upward in position on the screen relative to the image partitions in the content area 723, and the image partitions in the content area 733 completely overlap the label area 7341, the label area 7342 is moved upward in position on the screen relative to the label area 7242, and the label area 7343 is moved upward in position on the screen relative to the label area 7243.

[0141] Figure 8 It is to be understood that the layout state of the interface elements in the interface 730 shown in (c) of FIG. 7A can be referred to as a final state of Scene Four, Figure 8 the layout state of the interface elements in the interface 710 shown in (a) of FIG. 7A can be referred to as an initial state of Scene Four, Figure 8 the layout state of the interface elements in the interface 720 shown in (b) of FIG. 7A can be referred to as a transition state of Scene Four.

[0142] It is also to be understood that in the transition state of Scene Four, the label areas (7241 and 7341) remain stationary in position on the screen, and the image partitions in the content area are gradually moved upward in position on the screen. Since the image partitions in the content area are gradually moved upward in position on the screen, more images in the image partitions can be displayed in the content area.

[0143] ​​In this embodiment, the electronic device can keep the label area on the screen fixed and move the image section in the content area upwards on the screen, so that more images in the image section can be displayed in the content area. Since the content area can display more images, the user can further focus on the image content and further enhance the user's immersive experience when 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 this application. Figure 9 This involves color inversion operations. To better display the effect of color inversion... Figure 9 The example uses a gray interface color, which should not be taken as a limitation of this application.

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

[0147] The user can continue to swipe upwards on interface 820. In response to the user's swipe, the electronic device displays... Figure 9 The interface 830 shown in (c) has interface elements displayed relative to the interface elements displayed in 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 interface 830 shown in (c) can be called the final state of scene four. Figure 9 The layout state of the interface elements in interface 810 shown in (a) can be referred to as the initial state of scene four. Figure 9The layout state of the interface elements in interface 820 shown in (b) can be referred to as the transition state of scene four.

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

[0150] In this embodiment, the electronic device can keep the label area on the screen fixed and move the image section in the content area upwards on the screen, so that more images in the image section can be displayed in the content area. Since the content area can display more images, the user can further focus on the image content and further enhance the user's immersive experience when viewing images in the gallery.

[0151] Furthermore, in order to avoid the text content in the label area and the controls in the title bar not being clearly displayed due to the background color of the content area during the upward movement of the content area, this embodiment of the application reverses the background color of the label area 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 in Figure 8 The interface shown is 730 or Figure 9 The scene shown in interface 930 continues to slide. Figure 10 Therefore, users are Figure 8 The following explanation uses the example of continuing to slide in interface 730 as an example. Please refer to... Figure 10 , Figure 10 This is a schematic diagram of another gallery interface provided in an embodiment of this application.

[0154] Figure 10 Interface 910 shown in (a) is... Figure 8 The interface shown is the same as 730, and the user can continue to perform an upward swipe operation on interface 910. In response to the user's swipe 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 section and title section in the content area 923 also move upward accordingly.

[0155] The user can continue to perform the upward swiping operation in interface 920. In response to the user's swiping operation, the electronic device displays interface 930 shown in (b) of FIG. 9B, in which the interface elements displayed in interface 930 are moved upward relative to the interface elements displayed in interface 920, the positions of label area 9341 and label area 9342 are moved upward simultaneously, and the transparency of the text in label area 9341 relative to the text in label area 9241 is reduced. Figure 10

[0156] The user can continue to perform the upward swiping operation in interface 930. In response to the user's swiping operation, the electronic device displays interface 940 shown in (b) of FIG. 9C, in which the interface elements displayed in interface 940 are moved upward relative to the interface elements displayed in interface 930, the positions of label area 9441 and label area 9442 are moved upward simultaneously, 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), the position of label area 9442 is moved to the position of label area 9141 shown in interface 910, and the position of label area 9442 on the screen remains unchanged during the process of the interface swiped by the user thereafter until the next label area reaches the position of label area 9442, label area 9443 is moved upward, and the image partition and the title partition in content area 943 are also moved upward accordingly. Figure 10

[0157] It should be understood that the layout state of the interface elements in interface 940 shown in (d) of FIG. 9D can be referred to as a final state of scenario five, Figure 10 Figure 10 the layout state of the interface elements in interface 910 shown in (a) of FIG. 9A can be referred to as an initial state of scenario five, Figure 10 the layout state of the interface elements in interface 920 shown in (b) of FIG. 9B, and Figure 10 the layout state of the interface elements in interface 930 shown in (c) of FIG. 9C can be referred to as a transition state of scenario five.

[0158] It should also be understood that in the transition state of scenario five, the positions of the label areas on the screen are gradually moved upward, and the transparency of the text in the label areas is gradually reduced.

[0159] It can be known from the above embodiments that please refer to Figure 7 the content area in the interface includes a plurality of partitions, each of which includes an image partition and a label partition, Figure 7 the image partitions B1 and B2 in (a) of FIG. 9A 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 partitions, such as Figure 7 ​​​The middle label partition A1 can display "December 24, 2023", which represents that the image content in the image partition B1 is the image content shot on "December 24, 2023", Figure 7 The middle label partition A2 can display "December 23, 2023", which represents that the image content in the image partition B2 is the image content shot on "December 23, 2023". That is, the label displayed on a label partition in a group of partitions is one-to-one corresponding to the image content displayed in an image partition.

[0160] In the embodiment of the present application, when the user's attention is switched from the image content of the previous image partition (such as the image partition B1 shown in the figure) to the image content of the next image partition (such as the image partition B2 shown in the figure) in the plurality of partitions, the electronic device can make the user's attention more focused 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 still, reducing the influence of the label area on the user's attention, and improving the user's immersion in viewing images in the gallery. Figure 7 Figure 7 It should be noted that the user can perform an upward sliding operation in the interface shown in scenario five, and the gallery interface can restore the interface elements in scenarios four, three, two and one. The specific restoration process is the reverse process of the display process in the above scenarios, and the embodiment of the present application will not be repeated here.

[0161] It should be noted that the user can perform an upward sliding operation in the interface shown in scenario five, and the gallery interface can restore the interface elements in scenarios four, three, two and one. The specific restoration process is the reverse process of the display process in the above scenarios, and the embodiment of the present application will not be repeated here.

[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 is a schematic diagram of the overall process of the interface display method provided by the embodiments of the present application. The method can be applied to the electronic device mentioned in the above embodiments, and the method includes S11 to S14.

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

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

[0166] In Figure 12 ​In some embodiments, the coordinate system takes a point at the top left of the display area of the screen of the electronic device as the coordinate origin (e.g., point A1), takes the length direction as the positive direction of the X-axis (e.g., the direction from point A1 to point A2), takes the height direction as the positive direction of the Y-axis (e.g., the direction from point A1 to point A3), and takes the display area as Figure 12 the outermost dashed line in some embodiments. The position information involved in the layout parameters can be represented by the coordinates on the coordinate system.

[0167] It should be noted that, as shown in Figure 12 , 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, etc. The top status bar includes Figure 4 the power level, signal icon, etc. shown in (b) of FIG. 1A, and the bottom navigation bar includes Figure 4 the icons of “Photos” and “Albums” shown in (b) of FIG. 1A. Since the layout parameters of the top status bar and the bottom navigation bar are always unchanged in the interface display method provided in the embodiments of the present application, the top status bar and the bottom navigation bar are always drawn and displayed with the same layout parameters when the top status bar and the bottom navigation bar are displayed, and thus the related descriptions of the layout parameters of the top status bar and the bottom navigation bar are 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 of the title bar, the size and transparency of the initial text, and the position, color, and size of other elements in the initial area of the title bar, etc. The initial area of the title bar can be the rectangular area enclosed by the four points A1, A2, A3, and A4 shown in Figure 12 , the position of the initial area of the title bar can be the coordinates of the four points A1, A2, A3, and A4 shown in Figure 12 , the background color of the initial area of the title bar can be white, and the transparency can be 1, the position of the initial text in the initial area of the title bar can be the coordinates of point A5 shown in Figure 12 , the size of the initial text can be represented by pixels, e.g., the size of the initial text is 16 pixels, etc. The size of the initial text is a preset value, and the specific value of the preset value is not limited in the embodiments of the present application. The other elements in the title bar can be the control 1 (4212) and the control 2 (4213) shown in (b) of FIG. 1A, the position of the control 1 in the initial area can be the coordinates of point A6 shown in Figure 4 , and the position of the control 2 in the initial area can be the coordinates of point A7 shown in Figure 12 , the color of the other elements in the title bar is a preset color, e.g., black, and the size is a preset size, e.g., 5 pixels. Figure 12

[0169] ​The initial layout parameter of the search box includes the position of the initial region of the search box, the size of the text in the search box, and the like. The initial region of the search box can be a rectangular region surrounded by four points B1, B2, B3, and B4 as shown in FIG. 4. Figure 12 The position of the initial region of the search box can be a rectangular region surrounded by four points B1, B2, B3, and B4 as shown in FIG. 4. Figure 12 The size of the text in the search box is a preset value, which is not limited in the embodiments of the present application.

[0170] As known from the above embodiments, the content area includes multiple groups of sub-areas, each group of sub-areas includes an image sub-area and a label sub-area, for example, Figure 12 is exemplarily described by taking two groups of sub-areas, one group of sub-areas including a label sub-area A1 and an image sub-area B1, and one group of sub-areas including a label sub-area A2 and an image sub-area B2.

[0171] The initial layout parameter of the content area includes the position of the initial region of the content area, and the like. The initial region of the content area can be a rectangular region surrounded by four points C1, C2, C3, and C4 as shown in FIG. 5. Figure 12 The position of the initial region of the content area can be a rectangular region surrounded by four points C1, C2, C3, and C4 as shown in FIG. 5. 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 label areas, the number of the label areas is the same as the number of the label sub-areas of the content area, Figure 12 is exemplarily described by taking two label areas, a label area 1 and a label area 2. The initial layout parameter of the label area includes the position of the initial region of the label area, the size of the text in the label area, the color, and the like. The initial region of the label area 1 can be a rectangular region surrounded by four points D11, D12, D13, and D14 as shown in FIG. 6. Figure 12 The position of the initial region of the label area 1 can be a rectangular region surrounded by four points D11, D12, D13, and D14 as shown in FIG. 6. Figure 12 The coordinates of the four points D11, D12, D13, and D14 are shown. The size of the text in the label area 1 is a preset size, and the color is a preset color, which are not limited in the embodiments of the present application. The initial region of the label area 2 can be a rectangular region surrounded by four points D21, D22, D23, and D24 as shown in FIG. 7. Figure 12 The position of the initial region of the label area 2 can be a rectangular region surrounded by four points D21, D22, D23, and D24 as shown in FIG. 7. Figure 12 The coordinates of the four points D21, D22, D23, and D24 are shown. The size of the text in the label area 2 is a preset size, and the color is a preset color, which are not limited in the embodiments of the present application.

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

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

[0175] 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 shooting time, place, etc. For example, the user took 4 photos on December 22, 2023 through the electronic device, and took 8 photos on December 23, 2023. The electronic device can first fill the 4 photos taken on December 22, 2023 into the content area, then generate a label "December 22, 2023", fill the label into the label area, then fill the 8 photos taken on December 23, 2023 into the content area, then generate a label "December 23, 2023", fill the label into the label area, and finally generate the initial layout parameters based on the content filled in the content area and 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 shooting time, place, etc. The more the number of images taken by the user and the more the number of labels such as shooting time, place, etc., the larger the initial area of the content area and the more the number of label areas. For example, please refer to Figure 13 , Figure 13 is an example of a content area and a label area provided by an embodiment of the present application. Figure 13 The area formed by the outermost dashed line in (a) and (b) in Figure 13 The number of images taken in (b) in Figure 13 The number of images taken in (a) in Figure 13 The number of labels such as shooting time, place, etc. in (b) in Figure 13 The number of labels such as shooting time, place, etc. in (a) in Figure 13 The number of labels such as shooting time, place, etc. in (b) in Figure 13 The initial area of the content area in (a) is relatively large in size, and the number of label areas is relatively large.

[0177] In this embodiment, the page movement distance refers to the sum of the current page movement distance and the historical page movement distance during the process of the gallery application being opened and closed. When the gallery application is closed, the page movement distance needs to be recalculated from zero the next time it is opened. The current page movement distance refers to the distance the page moves when the user is currently swiping the page, while the historical page movement distance refers to the distance the page moves after the gallery application was opened and before the user is currently swiping the page. The page movement distance includes the distance the user's finger slides on the screen of the electronic device and the distance the page slides due to inertia after the user's finger leaves the screen. It should be noted that the page movement distance can be represented in pixels, such as the page moving 15 pixels.

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

[0179] As can be seen from the interfaces shown in scenarios one through five of the above embodiments, different page movement distances result in different display effects. These different display effects are determined by different layout parameters, and therefore, different page movement distances lead to different layout parameters. For example, assuming the page movement distance is within the numerical range of 1, the electronic device can calculate the layout parameters using one method and then display the interface shown in scenario 1. Assuming the page movement distance is within the numerical range of 2, the electronic device can calculate the layout parameters using another method and then display the interface shown in scenario 2, and so on.

[0180] In some embodiments, the number of value ranges is related to the number of partitions in the content area; the larger the number of partitions, the more value ranges there are. For example, suppose the number of partitions in the content area is... Figure 13 As shown in (a) above, there are two groups, so the numerical range could be five. Assuming the number of groups in the content area is... Figure 13 If we consider the three groups shown in (b) above, then the possible range of values ​​is six.

[0181] The following is based on the number of groups in the content area. Figure 13 The three groups shown in (b) are used as an example to illustrate the multiple numerical ranges provided in the embodiments of this application, with a total of six numerical ranges.

[0182] Assuming the initial state in scenario one above ( Figure 4 Interface 420 shown in (b) switches to the final state in Scene 1. Figure 4 In the example (d), the gallery page (440) needs to be moved by M1 pixels. Since the initial state in scenario one is the first interface state presented after the user clicks the gallery application, the value range 1 can be set to [0, M1]. Assuming the initial state in scenario two above ( Figure 5Interface 510 shown in (a) switches to the final state in Scene 2. Figure 5 In the interface shown in (c), the gallery page needs to be moved by M2 pixels, so the value range 2 can be set to (M1, M1+M2). Assuming the initial state in the above scenario three ( Figure 6 Interface 610 shown in (a) switches to the final state in Scene 3. Figure 6 In the interface shown in (c) 630), the gallery page needs to be moved by M3 pixels, so the value range 3 can be set to (M1+M2, M1+M2+M3). Assuming the initial state in scenario four above ( Figure 8 Interface 710 is shown in (a) above, and Figure 9 (a) shows the interface 810) switching to the transition state in Scene 5 (the interface of this transition state refers to...). Figure 10 In the interface shown in (b) 920), the gallery page needs to be moved by M4 pixels, so the value range 4 can be set to (M1+M2+M3, M1+M2+M3+M4). Assuming the transition state in scenario five above (the interface in this transition state refers to...) Figure 10 Interface 920 shown in (b) switches to the final state of Scene 5. Figure 10 If the gallery page (940) shown in (d) needs to be moved by M5 pixels, then the value range 5 can be set to (M1+M2+M3+M4, M1+M2+M3+M4+M5).

[0183] Depend on Figure 10 As shown in (d) of the interface 940, the user can also perform an upward swipe operation on the interface 940 to bring up the tab area 9443 (which can be considered as...). Figure 13 (b) shows the label area 3) moved to label area 9442 (this label area can be considered as) Figure 13 In (b) shown in the figure, at the position of label area 2), if the gallery page needs to move M6 pixels when label area 9443 moves to the position of label area 9442, then the value 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 of the multiple numerical ranges the page movement distance belongs to, and then calculate the layout parameters based on the calculation method corresponding to that numerical range. Finally, the page is drawn and displayed based on the layout parameters.

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

[0186] The implementation of this step can refer to the following embodiments, which will not be repeated here.

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

[0188] The page in the embodiments of the present application can include a plurality of layers. The layers in the embodiments of the present application can also be referred to as views. The plurality of layers have a hierarchical relationship, which refers to the upper and lower layer relationship of the plurality of layers when displayed. Generally, the layer in the upper layer will partially or completely block the layer in the lower layer when displayed.

[0189] The hierarchical relationship can refer to Figure 14 , Figure 14 is an example diagram of a hierarchical relationship provided by the embodiments of the present application. As Figure 14 shown, the plurality of 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 uppermost layer of the plurality of 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 label layer is located below the title bar, and the electronic device can draw a plurality of label areas in the label layer based on the layout parameters of the label area.

[0192] The content layer is located below the label 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 the search box in the search layer based on the layout parameters of the search box.

[0194] The above embodiments introduce the overall process of the interface display method provided by the embodiments of the present application. In order to more clearly illustrate the scheme provided by the embodiments of the present application, the following embodiments introduce the implementation process of the interface display method provided by the embodiments of the present application in combination with Figure 3 the software architecture shown.

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

[0196] Implementation process of the interface display method in scenario one:

[0197] For example, please refer to Figure 15 , Figure 15 is a schematic diagram of an interface display method provided by 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 of the user, and generates an input event 1.

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

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

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

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

[0203] As known from the above embodiment, the initial layout parameters of the content area and the label area need to be determined according to the number of images shot by the user and the number of labels such as shooting time and location. Figure 16 The initial layout parameters of the content area and the label area are exemplarily described by the number of images shot by the user and the number of labels such as shooting time shown in (a).

[0204] Please refer to Figure 16 , Figure 16 is a schematic diagram of a plurality of layers provided by an embodiment of the present application. Figure 16 The coordinate system in (a) can take the point at the top left of the display area of the screen of the electronic device as the coordinate origin, take the length direction as the positive direction of the X axis, and take 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 described here again. It should be noted that Figure 16 The hierarchical relationship of the plurality of layers in (a) can refer to Figure 12 . The layer relationship is omitted here for ease of description. When the content in the plurality of layers is located in the display area of the screen of the electronic device, the content in the plurality of images can be displayed on the screen. Figure 16 Only the display range in the Y axis direction in the display area is shown in (a). The display range in the X axis direction of the display area can refer to Figure 12 .​

[0205] The initial layout parameter 1 of the content area can include the position of the initial region of the content area, such as the initial region of the content area being a rectangular region surrounded by four points C1a, C2a, C3a and C4a shown in (c) of FIG. 7B. Figure 16 Figure 16 The coordinates of the four points C1a, C2a, C3a and C4a shown in (c) of FIG. 7B, such as the coordinates of C1a being (0, Y C1a ), the coordinates of C2a being (X C2a , Y C2a ), the coordinates of C3a being (0, Y C1a ), and the coordinates of C4a being (X C4a , Y C4a ).The layout parameters of the content area can further include the background transparency, the background color and other parameters of the content area. Since the background transparency, the background color and other parameters of the content area are always unchanged in the interface display manner provided in the embodiments of the present application, the description of the background transparency and the background color of the content area is omitted.

[0206] The initial layout parameter 1 of the plurality of label areas can include Figure 16 the initial layout parameter 1 of the label area 1, the label area 2 and the label area 3 shown in (b) of FIG. 7B. The initial layout parameter 1 of the label area 1 includes the position of the initial region of the label area 1, such as the initial region of the label area 1 being a rectangular region surrounded by four points D11a, D12a, D13a and D14a shown in (b) of FIG. 7B. Figure 16 Figure 16 The coordinates of the four points D11a, D12a, D13a and D14a shown in (b) of FIG. 7B, such as the coordinates of D11a being (0, Y D11a ), the coordinates of D12a being (X D12a , Y D12a ), the coordinates of D13a being (0, Y D11a ), and the coordinates of D14a being (X D14a , Y D14a ).

[0207] The initial layout parameter 1 of the label area 2 includes the position of the initial region of the label area 2, such as the initial region of the label area 2 being a rectangular region surrounded by four points D21a, D22a, D23a and D24a shown in (b) of FIG. 7B. Figure 16 Figure 16 The coordinates of the four points D21a, D22a, D23a and D24a shown in (b) of FIG. 7B, such as the coordinates of D21a being (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] Among them, the initial layout parameter 1 of label area 3 includes the position of the initial area of ​​label area 3, for example, the initial area of ​​label area 3 is... Figure 16 In (b) shown in the diagram, the rectangular area enclosed by the four points D31a, D32a, D33a, and D34a, the initial position of the label area 3 is... Figure 16 (b) shows the coordinates of four points D31a, D32a, D33a, and D34a. 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 of the label area, the background color, the text size and text position in the label area. Since the other parameters of the label area remain unchanged in the interface display method provided in this application embodiment, 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 tab area generated in 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. The behavior manager sends the initial layout parameters 1 of the tab 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 for 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 In diagram (a), the rectangular area enclosed by points A1a, A2a, A3a, and A4a is shown. The initial position of the title bar area is... Figure 16 (a) shows the coordinates of four points A1a, A2a, A3a, and A4a. 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). A3aThe coordinates of A4a are (X... A4a Y A4a ).

[0212] The initial layout parameter 1 for the title bar also includes the background color of the initial area of ​​the title bar, such as white, and the background transparency of the initial area, such as transparency 1. It should be understood that transparency is generally used to describe the opacity of an object or color. Transparency values ​​are typically between 0 and 1, where 0 represents complete transparency, meaning the object or color is completely invisible, and anything below it can be seen. 1 represents complete opacity, meaning the object or color completely covers everything 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, transparency may be represented by an integer from 0 to 255, where 0 represents complete transparency and 255 represents complete opacity.

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

[0215] The initial layout parameter 1 of the title bar also includes the colors of control 1 and control 2, such as the line color of control 1 and control 2 being black.

[0216] The layout parameters of the title bar may also include the positions of control 1 and control 2, the color of the initial text, and other parameters. Since the other parameters of the title bar remain unchanged in the interface display method provided in this application embodiment, 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 (d) shows the rectangular area enclosed by points B1a, B2a, B3a, and B4a. The initial position of the search box is... Figure 16 (d) shows the coordinates of four points B1a, B2a, B3a, and B4a. 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 (X...B4a , Y B4a ).

[0218] The layout parameters of the search box can further include text size, background transparency and other parameters in the search box. Since the other parameters of the search box are always unchanged in the interface display manner provided in the embodiments 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 parameters 1 of the label area, the title bar, the search box and the content area, and displays page 1 based on the hierarchical information.

[0220] It should be understood that the view framework can draw the initial layout parameters 1 of the label area in the label layer, draw the initial layout parameters 1 of the title bar in the title layer, draw the initial layout parameters 1 of the search box in the search layer, and draw the initial layout parameters 1 of the content area in the content layer. 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 is displayed, and the displayed page 1 can refer to the initial state of scenario one, such as the interface 420 shown in (b) of FIG. 4. Figure 4

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

[0222] It should be understood that the sliding operation 1 can refer to the upward sliding operation performed by the user in the interface 420 shown in (b) of FIG. 4. Figure 4

[0223] It should be further understood that after the gallery application receives the sliding operation 1 of the user, an interrupt is triggered, an interrupt signal is generated, and the sliding operation in the interrupt signal is processed into an input event. The input event includes an event type (such as a sliding event included in the input event 2), a current page moving distance and a historical page moving distance, and the explanation of the current page moving distance and the historical page moving distance can refer to the above embodiments, which will not be described here.

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

[0225] S018, the behavior manager determines the value range to which the sum of the current page moving distance and the historical page moving distance belongs based on the current page moving distance and the historical page moving distance. In the case where the page moving distance belongs to the value range 1, the steps of S019 to S0119 are executed.

[0226] ​​It should be understood that after determining the page moving distance and the sum of the historical page moving distances, the behavior manager can determine which numerical range the sum belongs to, such as the six numerical ranges mentioned in the foregoing embodiments, wherein the numerical range 1 is [0, M1], the numerical range 2 is (M1, M1+M2], the numerical range 3 is (M1+M2, M1+M2+M3], the numerical range 4 is (M1+M2+M3, M1+M2+M3+M4], the numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and the numerical range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

[0227] In an implementation, the behavior manager determines that the page moving distance belongs to the numerical range 1 when it is determined that the sum of the page moving distance and the historical page moving distances is less than or equal to M1 and greater than or equal to 0.

[0228] It should be understood that when the behavior manager determines that the page moving distance belongs to the numerical range 1, the behavior manager changes the part of the initial layout parameters 1 of the title bar to obtain the changed layout parameters 2 of the title bar by performing the operations in S019 to S0111. It should be noted that the changed layout parameters 2 of the title bar change only the position of the initial area of the title bar, the size and position of the initial text in the title bar, and other layout parameters are not changed relative to the initial layout parameters 1 of the title bar.

[0229] In S019, the behavior manager determines the position of the moved area 1 of the title bar based on the page moving distance and the position of the initial area of the title bar.

[0230] For example, it is assumed that the page moving distance is M1, and 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 ), and the coordinates of A4b are (X A4a , Y A4a ), then the position of the moved area 1 of the title bar can refer to Figure 17 , Figure 17 is another schematic diagram of a plurality of layers provided by an embodiment of the present application.

[0231] For example, Figure 17In diagram (a), the rectangular area enclosed by A1b, A2b, A3b, and A4b is the moved area 1 of the title bar. The position of the moved area 1 of the title bar 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 scaled-down text 1 in the title bar based on the page movement distance and the initial text size in the title bar.

[0233] In implementation, the behavior manager can determine the size of the scaled-down text 1 within the title bar based on the following formula:

[0234]

[0235] Here, the text size before moving refers to the text size displayed in the title bar of the interface before the user moves the interface in Scenario 1. For example, when the user moves the text... Figure 4 (b) shows the text size in the title bar of interface 420 before the swipe operation is performed. For example, the user's... Figure 4 (c) shows the text size in the title bar of interface 430 before the sliding operation. 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 page movement displacement when the text size changes is a preset distance. For example, if the text in the title bar continuously changes within the above value range 1, then the total page movement displacement is M1 mentioned above. That is to say, during the entire interface display process, the title bar moves M1 pixels within scene one and then stops moving. 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 Interface 410 shown in (a) moves to the final state of Scene 1. Figure 4 During the process shown in (c) of the interface 430), the page movement distance changes from the minimum value to the maximum value within the numerical range 1. At this time, the behavior manager can calculate the text size of the title bar corresponding to each value in the numerical range 1 using the formula above. This allows for the implementation of... Figure 4 The title bar text size is shown in the display effect.

[0237] For example, assuming the page moves a distance of M1, which is the maximum value within the range of 1, and the text size before the move is 16 pixels, then based on Formula 1 above, we can know 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 initial position of the text in the title bar.

[0240] For example, suppose Figure 16 In (a) of the text, the initial text position of the title bar uses point A5a. Figure 16 The coordinates of point A5a can be represented by coordinates (not shown in the image), where the coordinates are (X, Y, φ). A5a Y A5a If the page moves a distance of M1, then the position of the moved text 1 in the title bar will be... Figure 17 In (a), point A5b can be used. Figure 17 The coordinates of point A5b can be represented by coordinates (not shown in the image), where A5b is a coordinate system. A5a Y A5a +M1).

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

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

[0243] S0113, the behavior manager obtains the position of area 1 of the search box after it has been moved, based on the page movement distance and the initial position of the search box.

[0244] For example, assuming the page movement distance is M1, the initial location 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 The position of area 1 after the search box is moved can be referenced. Figure 17 ,for example, Figure 17the rectangle surrounded by B1b, B2b, B3b and B4b shown in (d) of FIG. 11 is the moved area 1 of the search box, and the position of the moved area 1 of the search box is the coordinates of the above four points, for example, the coordinates of B1b is (0, Y B1a +M1), the coordinates of B2b is (X B2a , Y B2a +M1), the coordinates of B3b is (0, Y B1a +M1), and the coordinates of B4b is (X B4a , Y B4a +M1).

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

[0246] It should be understood that the behavior manager changes part of the initial layout parameter 1 of the content area by performing the operation of S0115 to obtain the changed layout parameter 2 of the content area. It should be noted that the changed layout parameter 2 of the content area only changes the position of the initial area of the content area relative to the initial layout parameter 1 of the content area, and other layout parameters are not changed.

[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, it is assumed that the page movement distance is M1, and the position of the initial area of the content area includes Figure 16 the coordinates of C1a shown in (c) of FIG. 11 is (0, Y C1a ), the coordinates of C2a is (X C2a , Y C2a ), the coordinates of C3a is (0, Y C1a ), and the coordinates of C4a is (X C4a , Y C4a ). Then the position of the moved area 1 of the content area can refer to Figure 17 , for example, Figure 17 the rectangle surrounded by C1b, C2b, C3b and C4b shown in (c) of FIG. 11 is the moved area 1 of the content area, and 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 is (0, Y C1a +M1), the coordinates of C2b is (X C2a , Y C2a +M1), the coordinates of C3b is (0, Y C1a +M1), and the coordinates of C4b is (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 the behavior manager changes part of the initial layout parameters 1 of the plurality of label areas by performing the operation of S0117 to obtain the changed layout parameters 2 of the label areas. It should be noted that the changed layout parameters 2 of the label areas only change the positions of the initial regions of the label areas relative to the initial layout parameters 1 of the label areas, and other layout parameters are not changed.

[0251] S0117, the behavior manager obtains the positions of the moved regions 1 of the plurality of label areas based on the page movement distance and the positions of the initial regions of the plurality of label areas.

[0252] For example, it is assumed that the page movement distance is M1, and the plurality of label areas include the label area 1, the label area 2 and the label area 3 shown in (b) of FIG. 11. The position of the initial region of the label area 1 includes the coordinates of D11a in (b) of FIG. 11 as (0, Y Figure 16 Figure 16 D11a D12a D12a D11a D14a D14a D21a D22a D22a D21a D24a D24a D31a D32a D32a D31a D34a D34a

[0253] Then, the positions of the moved regions 1 of the plurality of label areas can refer to the regions surrounded by the four points of D11b, D12b, D13b and D14b shown in (b) of FIG. 11, for example. Figure 17 Figure 17 For example, the region surrounded by the four points of D11b, D12b, D13b and D14b shown in (b) of FIG. 11 is the region 1 of the label area 1, the coordinates of D11b are (0, Y D11a +M1), the coordinates of D12b are (X D12a , Y D12a ​​​​​​​​​​​​​​​​​​​​​+M1), the coordinates of D14b are (X D11a +M1), the coordinates of D14b are (X D14a +M1), the coordinates of D14b are (X D14a +M1).

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

[0255] Figure 17 The area surrounded by 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 +M1), the coordinates of D32b are (X D32a +M1), the coordinates of D33b are (0, Y D31a +M1), the coordinates of D34b are (X D34a +M1), the coordinates of D34b are (X D34a +M1).

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

[0257] S0119, the view framework draws the page 2 based on the changed layout parameters 2 of the label area, the title bar, the search box and the content area, and displays the page 2 based on the hierarchical information shown in (b). Figure 14

[0258] It should be understood that the changed layout parameters 2 of the label area, the title bar, the search box and the content area described above are exemplified in the case that the gallery interface moves M1 pixels from the initial state (the interface 420 shown in (a)) in the scene one to the final state (the interface 440 shown in (b)) in the scene one. When the gallery interface moves less than M1 pixels from the initial state (the interface 420 shown in (a)) in the scene one, the gallery interface can move to a transition state (the interface 430 shown in (c)) in the scene one, and the way of determining the changed layout parameters of the transition state of the scene one can refer to the above embodiments, which will not be described herein. Figure 4 Figure 4 Figure 4 Figure 4 ​​​​​

[0259] It should also be understood that, in the case of the numerical range 1 being [0, M1], when the page moving distance is equal to M1, the page 2 drawn and displayed based on the layout parameter 2 can refer to the interface 440 in Figure 4 .

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

[0261] Implementation process of the interface display method in scenario two:

[0262] It should be noted that the implementation manner of the related steps in scenario two can refer to scenario one, and scenario two will not be repeated.

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

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

[0265] It should be understood that the sliding operation 2 can be a user's upward sliding operation in the interface 510 shown in Figure 5 .

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

[0267] S023, the behavior manager determines the numerical range to which the sum of the current page moving distance and the historical page moving distance belongs based on the current page moving distance and the historical page moving distance, and in the case of determining that the page moving distance belongs to the numerical range 2, the steps of S024 to S0212 are executed.

[0268] For example, the plurality of numerical ranges are exemplarily illustrated by the six numerical ranges mentioned in the above embodiments, wherein the numerical range 1 is [0, M1], the numerical range 2 is (M1, M1+M2], the numerical range 3 is (M1+M2, M1+M2+M3], the numerical range 4 is (M1+M2+M3, M1+M2+M3+M4], the numerical range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and the numerical range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

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

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

[0271] For example, refer to Figure 19 , Figure 19 is another schematic diagram of multiple layers provided by an embodiment of the present application. Figure 19 The layout parameters of the layer content of the multiple layers shown in the diagram are layout parameters in the case where the page moving distance belongs to the value range 2, Figure 19 The layout parameter of the title bar shown in (a) in the diagram is the same as the layout parameter of the title bar shown in (a) in Figure 17

[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 part of the layout parameter 2 of the search box by performing the operation of S026 to obtain a changed layout parameter 3 of the search box. It should be noted that the embodiment of the present application changes the position of the region 1 in the layout parameter 2, and other parameters are not changed.

[0274] S026, the behavior manager obtains the position of the moved region 2 of the search box based on the page moving distance and the position of the region 1 of the search box.

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

[0276] The position of the moved region 2 of the search box includes Figure 19 The coordinates of B1c shown in (d) in the diagram 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), and the coordinates of B4b are (X B4a , Y B4a +M1+M2).​

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

[0278] It should be understood that the behavior manager changes part of the layout parameter 2 of the content area by performing the operation of S028 to obtain the changed layout parameter 3 of the content area. It should be noted that the embodiment of the present application changes the position of the region 1 in the layout parameter 2, and other parameters are not changed.

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

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

[0281] The position of the moved region 2 of the content area includes Figure 19 The coordinates of C1c shown in (c) in the above 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), and the coordinates of C4c are (X C4a , Y C4a +M1+M2).

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

[0283] It should be understood that the behavior manager changes part of the layout parameter 2 of the plurality of tab areas by performing the operation of S029 to obtain the changed layout parameter 3 of the plurality of tab areas. It should be noted that the embodiment of the present application changes the position of the region 1 in the layout parameter 2, and other parameters are not changed.

[0284] S0210, the behavior manager obtains the position of the moved region 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 plurality of tab areas can refer to Figure 17 ,for example Figure 17 The location of region 1 of label area 1 shown in (b) includes the coordinates of D11b as (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 area 2 after the movement of label area 1 includes the reference... Figure 19 (b) shows that the coordinates of D11c are (0, Y). D11a +M1+M2), the coordinates of D12c are (X +M1+M2), D12a Y D12a +M1+M2), the coordinates of D13c are (0, Y) D11a +M1+M2), the coordinates of D14c are (X +M1+M2), D14a Y D14a +M1+M2).

[0286] For example Figure 17 The location of region 1 of label area 2 shown in (b) includes the coordinates of D21b as (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). Therefore, the position of region 2 after the movement of label area 2 includes the reference... Figure 19 The coordinates of D21c shown in (b) are (0, Y). D21a +M1+M2), the coordinates of D22c are (X +M1+M2), D22a Y D22a +M1+M2), the coordinates of D23c are (0, Y) D21a +M1+M2), the coordinates of D24c are (X +M1+M2), D24a Y D24a +M1+M2).

[0287] For example Figure 17 The location of region 1 of label area 3 shown in (b) includes the coordinates of D31b as (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). Therefore, the position of region 2 after the movement of label area 3 includes the reference... Figure 19 (b) shows that the coordinates of D31c are (0, Y). D31a +M1+M2), the coordinates of D32c are (X +M1+M2), D32a Y D32a +M1+M2), the coordinates of D33c are (0, Y) D31a +M1+M2), the coordinates of D34c are (X +M1+M2), D34a Y D34a +M1+M2).

[0288] S0211, the behavior manager sends the changed layout parameters 3 for multiple tab areas to the view frame.

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

[0290] It should be understood that the revised layout parameters 3 for the signature area, search box, and content area, as well as layout parameter 2 for the title area, are based on the gallery interface from its initial state in Scene 2. Figure 5 The interface shown (510) moves M2 pixels to the final state in scene two. Figure 5 The layout parameters in the final state of Scene 2 (shown in interface 530) are illustrated as an example. When the gallery interface changes from the initial state of Scene 2 ( Figure 5 When the distance moved by the interface shown (510) is less than M2 pixels, the gallery interface can move to the transition state of scene two. Figure 5 The interface shown (520) provides an example of how to determine the changed layout parameters for the transition state of scenario two. The method described in the previous embodiment will not be repeated here.

[0291] It should also be understood that, when the numerical 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 parameters 3 can be referenced. Figure 5 Interface 530. Combined with... Figure 19 The various layers drawn and Figure 14 As can be seen from the layer hierarchy, the search box at the lowest level in interface 530 is completely obscured by the title bar at the highest level in the screen display area, and the user can no longer see the search box in 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 parameters 3 can be referenced. Figure 5 Interface 520 in the middle. Combined with layout parameter 3 and Figure 14The hierarchical relationship of the layers of the interface 520 can be known, and the search box in the lowest layer of the interface 520 is blocked by the title bar part in the highest layer in the screen display area. The user can see part of the search box in the interface 530.

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

[0294] It should be noted that the implementation manner of the related steps in scenario three can refer to scenario one, and scenario three will not be described herein.

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

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

[0297] It should be understood that the sliding operation 3 can be an upward sliding operation performed by the user in the interface 610 shown. Figure 6

[0298] S032, the gallery application sends the input event 4 to the behavior manager through the layout container, and the 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 value 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, and in the case where the page movement distance belongs to the value range 3, the steps of S034 to S0312 are executed.

[0300] For example, the plurality of value ranges are exemplarily illustrated by the six value ranges mentioned in the above embodiment, wherein the value range 1 is [0, M1], the value range 2 is (M1, M1+M2], the value range 3 is (M1+M2, M1+M2+M3], the value range 4 is (M1+M2+M3, M1+M2+M3+M4], the value range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and the value 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 is judged 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 the partial layout parameter in the layout parameter 2 of the title bar to obtain the changed layout parameter 3 of the title bar by performing the operation of S034. It should be noted that the transparency of the text in the region of the title bar in the layout parameter 2 is changed, and the background transparency of the region is changed, and other parameters are not changed in the embodiments of the present application.

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

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

[0305]

[0306] Wherein, the text transparency of the moved title bar refers to the text transparency in the title bar displayed in the interface after the interface is moved in scenario three, for example, the text transparency of the title bar in the interface 620 after the user performs the sliding operation on the interface 610 shown in (a) in scenario three, and for example, the text transparency of the title bar in the interface 630 after the user performs the sliding operation on the interface 620 shown in (b) in scenario three. Figure 6 Figure 6

[0307] The text transparency before moving refers to the text transparency in the title bar displayed in the interface before the interface is moved in scenario three, for example, the text transparency of the title bar in the interface 610 before the user performs the sliding operation on the interface 610 shown in (a) in scenario three, and for example, the text transparency of the title bar in the interface 620 before the user performs the sliding operation on the interface 620 shown in (b) in scenario three. Figure 6 Figure 6

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

[0309] The first total moving distance refers to the moving distance between the page where the text transparency of the title bar just starts to change and the page where the text transparency stops changing, and the moving distance is a preset distance, for example, the text transparency in the title bar will continue to change in the above numerical range 3, and the numerical range 3 is (M1+M2, M1+M2+M3], so the moving distance between the page where the text transparency of the title bar just starts to change and the page where the text transparency stops changing is M3.

[0310] ​​​​The first movement distance refers to the distance traveled from the page where the title bar text transparency just began 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 derived from the total page movement distance; for example, it can be equal to the total page movement distance minus the minimum value within the range of 3. For instance, if the total page movement distance is M1 + M2 + M3, then the first movement distance could be M3.

[0311] It should be understood that the page starts from the initial state of Scenario 3 ( Figure 6 Interface 610 shown in (a) moves to the final state of Scene 3. Figure 6 During the process shown in interface 630 (c), the page movement distance changes from the minimum to the maximum value within the numerical range 3. At this time, the behavior manager can calculate the text transparency of the title bar corresponding to each value in the numerical range 3 using the formula above. This allows for the implementation of... Figure 6 The effect shown is that the text transparency in the title bar gradually decreases.

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

[0313]

[0314] For example, please refer to Figure 21 , Figure 21 This is a schematic diagram of another type of multiple layers provided in an embodiment of this application. Figure 21 The layout parameters for the layer content shown are those assuming the page movement distance is within the range of 3, and that the page movement distance is the maximum value within the range of 3. Figure 21 The layout parameters of the title bar shown in (a) are similar to those in (a). Figure 19 Compared to the layout parameters of the title bar shown in (a), the text transparency in the title bar is reduced from 1 to 0.

[0315] It should be understood that when determining the transparency of the background of Area 1 in the title bar, the Behavior Manager can change the transparency of the background of Area 1 from the initial transparency of 1 to 0. The purpose of changing the transparency of Area 1 in the title bar is to ensure that it is visible within the display area of ​​the screen. Figure 14 The content of the layer below the title bar layer in the multiple layers shown. For example, in Figure 6 The title bar 621 of the title bar layer in interface 620 (b) can display the content of the label area 6241 in the label layer.

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

[0317] It should be understood that the behavior manager can change part of the layout parameter 3 of the search box by performing the operation of S036 to obtain the changed layout parameter 4 of the search box. It should be noted that the position of the search box in the layout parameter 3 is changed in the embodiments of the present application, 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 moving distance and the position of the area 2 of the search box.

[0319] The implementation of this step can refer to the above embodiments, and the position of the moved area 3 of the search box can refer to the position shown in (d) of Figure 21

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

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

[0322] It should be understood that the behavior manager changes part of the layout parameter 3 of the content area by performing the operation of S038 to obtain the changed layout parameter 4 of the content area. It should be noted that the position of the content area in the layout parameter 3 is changed in the embodiments of the present application, 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 moving distance and the position of the area 2 of the content area.

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

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

[0326] It should be understood that the behavior manager changes part of the layout parameter 3 of the plurality of tab areas by performing the operation of S0310 to obtain the changed layout parameter 4 of the plurality of tab areas. It should be noted that the position of the tab area in the layout parameter 3 is changed in the embodiments of the present application, and other parameters are not changed.

[0327] ​​​S0310, the behavior manager obtains the position of area 3 after the movement of multiple tab areas based on the page movement distance and the position of area 2 of the tab area.

[0328] For details on how to implement this step, please refer to the above embodiment. The position of region 3 after the movement of multiple label areas can be found in the following example. Figure 21 The position shown in (b) is as follows.

[0329] S0311, The behavior manager sends the changed layout parameters 4 for multiple tab areas to the view frame.

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

[0331] It should be understood that the revised layout parameters 4 for the label area, search box, and content area, as well as layout parameter 3 for the title area, are based on the gallery interface from its initial state in Scene 3. Figure 6 The interface shown (610) moves M3 pixels to the final state in scene three. Figure 6 The layout parameters in the final state of Scene 3 (shown in interface 630) are illustrated as an example. When the gallery interface moves less than M3 pixels from the initial state in Scene 3, the gallery interface can move to the transition state of Scene 3 (…). Figure 6 The interface shown (620) provides an example of how to determine the changed layout parameters for the transition state of scenario three. The method described in the previous embodiment will not be repeated here.

[0332] It should also be understood that, when the numerical range 3 is (M1+M2, M1+M2+M3], and the page movement distance is equal to M1+M2+M3, the page 4 drawn and displayed based on the above layout parameters 4 can be referenced. Figure 6 Interface 630. Combined with... Figure 21 The various layers drawn and Figure 14 As can be seen from the layer hierarchy, the text transparency of the title bar in interface 630 is reduced to 0, so the user cannot see the text in the title bar. However, because the background transparency of the title bar area has been modified, the user can see the lower layers 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 parameters 4 can be referenced. Figure 6 The interface is 620.

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

[0335] It should be noted that the implementation of the related steps in scenario four can refer to scenario one, and scenario four will not be repeated.

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

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

[0338] It should be understood that the sliding operation 4 can be a user's upward sliding operation in the interface 710 shown. Figure 8

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

[0340] S043, the behavior manager determines the value 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, and executes the steps of S044 to S0412 in the case that the page movement distance belongs to the value range 4.

[0341] For example, the plurality of value ranges are exemplarily illustrated by the six value ranges mentioned in the above embodiment, wherein the value range 1 is [0, M1], the value range 2 is (M1, M1+M2], the value range 3 is (M1+M2, M1+M2+M3], the value range 4 is (M1+M2+M3, M1+M2+M3+M4], the value range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and the value 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 in the case 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, refer to Figure 23 , Figure 23 is another schematic diagram of a plurality of layers provided by an embodiment of the present application. Figure 23 The layout parameters of the layer contents of the plurality of layers shown are the layout parameters in the case that the page movement distance belongs to the value range 4,​ Figure 23 the layout parameters of the title bar shown in (a) in Figure 21 the layout parameters of the title bar shown in (a) in

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

[0346] It should be understood that the behavior manager can change part of the layout parameters in the layout parameters 4 of the search box by performing the operation of S046, to obtain changed layout parameters 5 of the search box. It should be noted that the present application embodiment changes the position of the search box in the layout parameters 4, 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 moving distance and the position of the area 3 of the search box.

[0348] For the implementation of this step, reference can be made to the above embodiments, and the position of the moved area 4 of the search box can refer to the position shown in (d) in Figure 23 .

[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 part of the layout parameters in the layout parameters 4 of the content area by performing the operation of S048, to obtain changed layout parameters 5 of the content area. It should be noted that the present application embodiment changes the position of the content area in the layout parameters 4, 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 moving distance and the position of the area 3 of the content area.

[0352] For the implementation of this step, reference can be made to the above embodiments, and the position of the moved area 4 of the content area can refer to the position shown in (c) in Figure 23 .

[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 part of the layout parameters in the layout parameters 4 of the plurality of tab areas by performing the operation of S0410, to obtain changed layout parameters 5 of the plurality of tab areas. It should be noted that the present application embodiment changes the position of the tab area in the layout parameters 4, and other parameters are not changed.

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

[0356] For example, the position of region 3 in the first label area can be referenced Figure 23 (b) shows the location of region 3 of label area 1.

[0357] Other tab areas can refer to Figure 23 The label areas 2 and 3 are shown in (b) in the image. The position of area 4 after the other label areas have been moved can be referenced. Figure 23 (b) shows the location of region 4 in label area 2 and region 4 in label area 3.

[0358] The implementation method for obtaining the position of the moved area 4 of other tabs based on the page movement distance and the position of area 3 of other tabs can be found in the above embodiment, and will not be repeated here.

[0359] from Figure 23 The locations of the multiple label areas shown in (b) are as follows: Figure 21 As can be seen from the positions of the multiple label areas shown in (b) above, Figure 23 The position of label area 1 shown in (b) is similar to... 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 numerical range of 4, the label area 1 remains suspended in the title bar.

[0360] S0411, the behavior manager sends the changed layout parameters 5 for multiple tab areas to the view frame.

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

[0362] It should be understood that the revised layout parameters 5 for the label area, search box, and content area, as well as layout parameter 3 for the title area, are based on the gallery interface from its initial state in scene four. Figure 8 The interface 710 shown, and Figure 9 The interface shown (810) moves M4 pixels to the transition state in scene five. Figure 10 The interface shown (920) is in the transition state of Scene 5 ( Figure 10 The layout parameters in the shown interface (920) are illustrated as an example. When the gallery interface moves a distance of less than M4 pixels from the initial state in scene four, the gallery interface can move to the transition state of scene four (…). Figure 8 The interface 720 shown, and Figure 9 The interface shown (820) and the gallery interface can be moved to the final state of scene four and the initial state of scene five. Figure 10The way of determining the transition state of scene four, the final state of scene five and the layout parameters of the changed layout of scene five can refer to the above embodiments, which will not be repeated here.

[0363] It should also be understood that in the case of the numerical range 4 being (M1+M2+M3, M1+M2+M3+M4], when the page moving distance is equal to M1+M2+M3+M4, the page 5 drawn and displayed based on the above layout parameters can be Figure 10 The interface 920 is shown. In combination with Figure 23 The drawing of each layer and Figure 14 It can be known from the hierarchical relationship of the layers of the above-mentioned layers that the label area 1 is suspended in the title bar and remains unchanged.

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

[0365] It should be noted that the above Figure 22 And Figure 23 What is shown is the implementation of way one in scene four, and in the implementation of way two in scene four, the behavior manager also needs to change part of the layout parameters in the layout parameters 3 of the title bar, such as please refer to Figure 21 The colors of the controls 1 and 2 in the area 1 of the title bar are changed, so that the colors of the controls 1 and 2 are reverse colors of the initial colors of the controls 1 and 2. In addition to changing part of the layout parameters in the layout parameters of the title bar in the way two in scene four, the behavior manager also needs to change the layout parameters in other layers to achieve the display effect in the way two in scene four. For example, in the way two in scene four, the behavior manager also needs to change part of the parameters in the layout parameters of the content area, such as please refer to Figure 21 The background color of the label sub-area A1 of the content area is changed, so that the background color of the label sub-area A1 is a reverse color of the initial color. In the way two in scene four, the behavior manager also needs to change part of the parameters in the layout parameters of the label area, such as please refer to Figure 21 The color of the text in the label area 1 is changed, so that the changed color of the text is a reverse color of the initial color, so that the display effect in the way two in scene four can be achieved.

[0366] The implementation process of the interface display method in scene five is as follows:

[0367] It should be noted that the implementation of the related steps in scene five can refer to scene one and scene four, which will not be repeated here.

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

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

[0370] It should be understood that the sliding operation 5 can be a sliding operation performed by the user in the interface 920 shown in the figure. Figure 10 The user performs an upward sliding operation in the interface 920 shown in the figure.

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

[0372] S053, the behavior manager determines the value range to which the sum of the current page moving distance and the historical page moving distance belongs based on the current page moving distance and the historical page moving distance, and performs the steps of S054 to S0513 in the case where it is determined that the page moving distance belongs to the value range 5.

[0373] For example, the plurality of value ranges are exemplarily illustrated by the six value ranges mentioned in the above embodiment, wherein the value range 1 is [0, M1], the value range 2 is (M1, M1+M2], the value range 3 is (M1+M2, M1+M2+M3], the value range 4 is (M1+M2+M3, M1+M2+M3+M4], the value range 5 is (M1+M2+M3+M4, M1+M2+M3+M4+M5], and the value range 6 is (M1+M2+M3+M4+M5, M1+M2+M3+M4+M5+M6].

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

[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 is another schematic diagram of a plurality of layers provided by an embodiment of the present application. Figure 25 The layout parameter of the layer content of the plurality of layers shown in the figure is the layout parameter in the case where the page moving distance belongs to the value range 5, Figure 25 The layout parameter of the title bar shown in (a) in the figure is the same as the layout parameter of the title bar shown in (a) in the figure. Figure 25 ​

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

[0378] It should be understood that the behavior manager can change part of the layout parameter 5 of the search box by performing the operation of S056, to obtain the changed layout parameter 6 of the search box. It should be noted that the embodiment of the present application changes the position of the search box in the layout parameter 5, 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 moving distance and the position of the area 4 of the search box.

[0380] The implementation of this step can refer to the above embodiments, and the position of the moved area 5 of the search box can refer to the position shown in (d) of Figure 25

[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 part of the layout parameter 5 of the content area by performing the operation of S058, to obtain the changed layout parameter 6 of the content area. It should be noted that the embodiment of the present application changes the position of the content area in the layout parameter 5, 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 moving distance and the position of the area 4 of the content area.

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

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

[0386] It should be understood that the behavior manager changes part of the layout parameter 5 of the plurality of label areas by performing the operations of S0510 and 0511, to obtain the changed layout parameter 6 of the plurality of label areas. It should be noted that the embodiment of the present application changes the position of the label area and the transparency of the text in the label area in the layout parameter 5, and other parameters are not changed.

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

[0388] For example, the position of the area 4 of the first label area can refer to​​ Figure 25 the position of region 4 of tab area 1 shown in (b) in FIG. 9B.

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

[0390]

[0391] wherein the text transparency in the tab area after the page moves is the text transparency in the title bar displayed after the page moves a distance in the range of values 5, such as when the user performs the sliding operation on the interface 920 shown in (b) in FIG. 9B, and the text transparency in the tab area after the page moves is the text transparency in the title bar displayed after the page moves a distance in the range of values 5, such as when the user performs the sliding operation on the interface 930 shown in (c) in FIG. 9B. Figure 10 Figure 10

[0392] the text transparency in the tab area before the page moves is the text transparency in the title bar displayed before the page moves a distance in the range of values 5, such as when the user performs the sliding operation on the interface 920 shown in (b) in FIG. 9B, and the text transparency in the tab area before the page moves is the text transparency in the title bar displayed before the page moves a distance in the range of values 5, such as when the user performs the sliding operation on the interface 930 shown in (c) in FIG. 9B. Figure 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 moving distance is the moving distance between the page where the text transparency in the tab area starts to change and the page where the text transparency in the tab area stops changing, and the moving distance is a preset distance, such as when the text transparency in the title bar changes continuously in the range of values 5, which is [M1+M2+M3+M4, M1+M2+M3+M4+M5], then the moving distance between the page where the text transparency in the tab area starts to change and the page where the text transparency in the tab area stops changing is M5.

[0395] the second moving distance is the distance between the page where the text transparency in the tab area starts to change and the current page. The second moving distance is greater than or equal to 0 and less than M5. The second moving distance can be determined based on the page moving distance, such as the second moving distance is equal to the page moving distance minus the minimum value in the range of values 5. For example, when the page moving distance is M1+M2+M3+M4+M5, then the second moving distance can be M5.

[0396] It should be understood that the page moves from the interface 920 shown in (b) in FIG. 9B to the interface 930 shown in (c) in FIG. 9B. Figure 10 It should be understood that the page moves from the interface 920 shown in (b) in FIG. 9B to the interface 930 shown in (c) in FIG. 9B.​​​ Figure 10 During the process shown in (d) of interface 940, the page movement distance changes from the minimum to the maximum value within the numerical range of 5. At this time, the behavior manager can calculate the text transparency within the label area corresponding to each value in the numerical range of 5 using the formula above. This allows for the implementation of... Figure 10 The text transparency in the label area shown gradually decreases.

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

[0398]

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

[0400] S0510, based on the page movement distance and the position of region 4 of other tab areas, obtain the position of region 5 after the movement of other tab areas.

[0401] Other tab areas can refer to Figure 25 The label areas 2 and 3 are shown in (b) in the image. The position of area 5 after the movement of other label areas can be referenced. Figure 23 (b) shows the location of region 5 in label area 2 and region 5 in label area 3.

[0402] The implementation method for obtaining the position of the moved area 5 of other tabs based on the page movement distance and the position of area 4 of other tabs can be referred to the above embodiment, and will not be repeated here.

[0403] S0511, the behavior manager sends the changed layout parameters 6 for multiple tab areas to the view frame.

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

[0405] It should be understood that the revised layout parameters 6 for the label area, search box, and content area, as well as layout parameter 3 for the title area, are based on the transition state of the gallery interface from Scene 5. Figure 10 (b) shows the interface 920) moving M5 pixels to the final state in scene five. Figure 10Interface 940 (shown in (d)) is illustrated using layout parameters from the final state in Scene 5. When the gallery interface moves less than M5 pixels from the transition state in Scene 5, the gallery interface can move to another transition state in Scene 5 (…). Figure 10 The interface shown (930) is about confirming. Figure 10 The layout parameters of the interface 930 shown can be referred to in the above embodiment, and will not be repeated here.

[0406] It should also be understood that, within the numerical range 5 of (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... Figure 10 The interface shown is 940.

[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 be referenced. Figure 10 The interface shown is 940.

[0408] It should be noted that, by Figure 10 As shown in (d) of the interface 940, the user can also perform an upward swipe operation on the interface 940 to move the tab area 9443 to the tab area 9442 (this tab area can be considered as...). Figure 13 At the location shown in (b) above, 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 of the interface display can refer to the implementation of other embodiments, which will not be repeated here.

[0409] The following section provides a summary description of the above embodiments.

[0410] This application provides an interface display method, which can be generated by... Figure 2 The illustrated electronic device can also execute the method, but this application does not limit its execution to a processor or chip within the electronic device. For ease of description, the method is described in detail using the example of it being executed by an electronic device. The method includes:

[0411] The electronic device displays the first interface of the gallery application. The first interface includes 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, which includes title text. The transparency of the title text is a first transparency, which is greater than the minimum value within a preset transparency range. The first content area displays at least one tab bar and at least one set of image content. One tab bar corresponds to one set of image content.

[0412] The electronic device responds to a swiping operation on a first interface and displays a second interface. 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 range and less than the first transparency. A first tab bar is displayed in the title bar area of ​​the second interface. The first tab bar is the topmost tab bar among at least one tab bar.

[0413] It should be understood that a gallery application refers to an application that can store images taken by the user. For an explanation of applications that store user-taken images, please refer to the above embodiments, which will not be repeated here. This application embodiment uses a gallery application as an example. Figure 4 The example shown is 411 in interface 410.

[0414] The first interface can be used as a reference. Figure 6 The interface 610 shown in (a) can be considered as the area within the display area of ​​the electronic device where the title bar is displayed, for example... Figure 6 In (a) shown in the diagram, area 611, the first content area can be considered as the area within the display area of ​​the electronic device where the content is displayed, for example... Figure 6 The region 613 shown in (a) is composed of Figure 6 As can be seen from (a) in the image, the first content area 613 is located below the title bar area 611. The title text can be referenced. Figure 6 The text shown in (a) is 6111.

[0415] The preset transparency value range can be, for example, [0, 1], where 0 represents complete transparency, meaning the object or color is completely invisible and anything underneath it can be seen. 1 represents complete opacity, meaning the object or color completely covers everything underneath it. In other embodiments, the transparency value can also be expressed as a percentage, in which case the preset transparency value range can be, for example, [0%, 100%]. In other embodiments, transparency may be represented by integers from 0 to 255, where 0 represents complete transparency and 255 represents complete opacity, in which case 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 preset transparency value range, such as a first transparency of 1, 0.8, etc. This application embodiment uses a first transparency of 1 as an example for illustration.

[0416] At least one tab bar can be referenced Figure 6 In (a), 6141 and 6142 are shown, where label bar 6141 corresponds to a set of image content and label bar 6142 corresponds to a set of image content.

[0417] It should also be understood that the swiping operation on the first interface can refer to the user's... Figure 6 The upward swipe operation is performed in interface 610 shown in (a).

[0418] The second interface can be referenced. Figure 6 In the interface 630 shown in (c), after the user performs a swipe operation, the position and size of the title bar area do not change during the transition from the first interface to the second interface. For example, the title bar area 631 in interface 630 has the same position and size as the title bar area 611 in interface 610. However, the transparency of the text within the title bar area will be reduced. For example, the transparency of the title text in the title bar area 631 in interface 630 is the second transparency, while the transparency of the title text in the title bar area 611 in 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. This embodiment uses a second transparency of 0 as an example. It should be understood that all transparency values ​​in this embodiment are selected from a preset transparency value range.

[0419] After the user performs a swipe operation, during the transition from the first interface to the second interface, the content area moves upward and expands, and the content area covers the title bar area. For example, the size of the second content area 633 in interface 630 is larger than the size of the first content area 613 in interface 610. The upper boundary of the second content area 633 moves upward relative to the upper boundary of the first content area 613, while the lower boundary of the second content area 633 and the lower boundary of the first content area 613 remain unchanged. Furthermore, the upper boundary of the second content area 633 overlaps with the upper boundary of the title bar area 631, causing the second content area 633 to cover the title bar area 631.

[0420] It should also be understood that the first tab bar can be used as a reference. Figure 6 The label bar 6141 shown in (a) and Figure 6 The tab bar 6341 shown in (c) moves upwards along with the content area during the transition from the first to the second interface after the user performs a swipe operation. For example, in... 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. The first tab bar 6341 is also moved to the title bar area 631, so the first tab bar 6341 is displayed in the title bar area 631 of the second interface 630.

[0421] In related solutions, the gallery application can help users organize and manage images by creating albums, titles, tags, or using smart categorization (such as by date, location, or people). However, when users view images in the gallery, the interface elements such as titles and tags used to organize and manage images can distract them, preventing them from fully immersing themselves in the image content provided by the gallery, reducing the immersive experience of viewing images in the gallery, and affecting the user experience.

[0422] In this embodiment, in response to a sliding operation on the first interface, the electronic device displays a second interface where the title bar, including the title text, has a second transparency that is less than the first transparency of the title text in the first interface. In other words, this embodiment can reduce the transparency of the title text, thereby reducing its impact on the user's attention and allowing the user to focus more on the image content provided by the gallery application, enhancing the user's immersion in viewing images and improving the user experience.

[0423] Furthermore, in response to the swiping operation on the first interface, the second content area of ​​the displayed second interface can cover the title bar area, and the first tab bar is displayed in the title bar area of ​​the second interface. This makes 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 than the first interface, so that users can focus more attention on the image content and further enhance the immersive experience of users viewing images in the gallery.

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

[0425] The electronic device responds to a swiping operation on the second interface and displays a third interface. 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 shifted 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 at least one tab bar other than the first tab bar.

[0426] It should be understood that the third interface can be used as a reference. Figure 8 Interface 720 is shown in (b) above, and Figure 8The interface 730 shown in (c) of FIG. 7B, as can be seen from the interface 720 and the interface 730, in response to the sliding operation on the second interface, the electronic device changes from the second interface to the third interface, the position, size, etc. of the title bar region 721 in the interface 720 and the position, size, etc. of the title bar region 731 in the interface 730 are the same as the position, size, etc. of the title bar region in the second interface in the above embodiment, thus the first tab bar is displayed in the title bar region of the third interface, for example, the first tab bar 7341 is displayed in the title bar region 731 in the interface 730, the first tab bar 7241 is displayed in the title bar region 721 in the interface 720, that is, the first tab bar is displayed in the title bar region in the process of changing from the second interface to the third interface, and the position, size, etc. of the first tab bar do not change.

[0427] It should also be understood that the at least one tab bar can refer to the tab bars 7241, 7242 and 7243 in the interface 720, and can also refer to the tab bars 7341, 7342 and 7343 in the interface 730, wherein the other tab bars can refer to the tab bars 7242 and 7243, and the tab bars 7342 and 7343, and the second interface can refer to the interface 710. Figure 6 The interface 630 shown in (c) of FIG. 6B, because Figure 8 The interface 710 shown in (a) of FIG. 7B is the same as the interface 630, thus the second interface can also refer to the interface 710, as can be seen from the interface 720 and the interface 710, the tab bars 7241, 7242 and 7243 in the interface 720 are moved upward 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 upward relative to the tab bars 7241, 7242 and 7243 in the interface 720, and at least one image content in the interface 720 is moved upward relative to at least one image content in the interface 710, and at least one image content in the interface 730 is moved upward relative to at least one image content in the interface 720.

[0428] In the embodiment of the present application, in response to the sliding operation on the second interface, the electronic device displays the third interface, the first tab bar is displayed in the title bar region of the third interface, that is, the first tab bar can be displayed in the title bar region in the process of changing from the second interface to the third interface, and the position of at least one image content displayed in the second content region in the third interface is moved upward relative to the position of at least one image content displayed in the second content region in the second interface, because the first tab bar can be displayed in the title bar region of the third interface and at least one image content displayed in the second content region in the third interface is moved upward, thus the third interface can display more image contents relative to the second interface, so that the user can pay more attention to the image contents, and further improve the immersion of the user in the gallery when viewing the images.

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

[0430] For example, referring to Figure 10 the interface 920 shown, the first tab bar refers to the tab bar 9241 in the interface 920, the second tab bar refers to the title bar 9242 in the interface 920, and the tab bar 9241 is immediately adjacent to the title bar 9242.

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

[0432] In response to the sliding operation on the third interface, the fourth interface is displayed, the fourth interface includes a title bar area, the title bar area of the fourth interface displays the second tab bar and the first tab bar, the first tab bar in the fourth interface has a fourth transparency, the fourth transparency is greater than or equal to the minimum value in the preset transparency value range and less than the third transparency, and 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 can refer to the user performing an upward sliding operation on the third interface. Figure 10 In the interface 920 shown, the fourth interface can refer to Figure 10 In the interface 940 shown in (d) of FIG. 9, the third transparency is a value greater than the minimum value in the preset transparency value range, such as the first transparency being 1, 0.8, etc. The embodiments of the present application are exemplarily described with the first transparency being 1. The fourth transparency is a value greater than the minimum value and less than the third transparency in the preset transparency value range, such as 0.1, 0, etc. The embodiments of the present application are exemplarily described with 0.

[0434] It should also be understood that during the process in which the electronic device changes from the third interface to the fourth interface, the transparency of the first tab bar gradually decreases until it decreases to the fourth transparency of the fourth interface, and during the process, the transparency of the second tab bar does not change and is always greater than the fourth transparency, such as the transparency of the second tab bar being 1 and the fourth transparency being 0.

[0435] In the embodiments of the present application, the electronic device can display the fourth interface in response to the 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, so that the display of the first tab bar can be weakened, the second tab bar can be highlighted, and different tab bars can be smoothly switched in the title bar area, thereby improving the user experience.

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

[0437] For example, the first interface element can be the control 8112 and the control 8113 in the interface 910, the first color of the first interface element displayed in the second interface can refer to the color shown in the interface 910, the second color of the tab text displayed in the second interface can refer to the color shown in the interface 910, the color of the first interface element displayed in the third interface which is a complementary color of the first color can refer to the color shown in the interface 930, and the color of the tab text displayed in the third interface which is a complementary color of the second color can refer to the color shown in the interface 930. Figure 9 In the embodiments of the present application, the color of the tab text displayed in the third interface can be a complementary color of the color of the tab text displayed in the second interface, and the first interface element displayed in the third interface can be a complementary color of the first interface element displayed in the second interface, thereby improving the display effect.

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

[0439] The electronic device displays a fifth interface, the fifth interface includes a title bar region and a third content region, the third content region partially overlaps the title bar region, the size of the third content region is greater than the size of the first content region and less than the size of the second content region, the transparency of the title text in the title bar region of the fifth interface is a fifth transparency, the fifth transparency is less than the first transparency and greater than the second transparency, and part of the first tab bar is displayed in the title bar region of the fifth interface.

[0440] It should be understood that the fifth interface can refer to the interface 620 shown in (b) of FIG. 6, the title bar region is the region 621, and the third content region is the region 623, and the region 623 partially overlaps the region 621.

[0441] Figure 6

[0442] ​​The fifth interface serves as a transition interface between the first and second interfaces. During this transition, the fifth interface can be displayed. The transparency of the label text gradually decreases; for example, the transparency of the fifth interface (620) is less than the first transparency of the first interface (610), until it reaches the second transparency of the second interface (e.g., the second transparency in interface (630)). Furthermore, the size of the content area gradually expands during the transition; 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), until it 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, at which point the second content area covers the title bar area.

[0444] In this embodiment, after the electronic device performs a swipe operation on the first interface, it first displays the fifth interface and then displays the second interface. 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. 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, thus 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 a 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 and displays a search box. The fourth content area is located below the first search box area and is smaller than the size of the first content area.

[0447] For example, the sixth interface can be referenced. Figure 5 The interface 510 shown in (a) can be referenced from 511 in interface 510 for the title bar area, 512 for the first search box area, and 513 for the fourth content area. Figure 5 As can be seen in (a), region 512 is located below region 511, and region 513 is located below region 512, with no overlap between any of regions 512, 511, and 513. The dimensions of the first content region can be referenced. Figure 5The size of the region 533 in the interface 530 shown in (c) in FIG. 5B is greater than the size of the region 513 in the interface 510 shown in (b) in FIG. 5B. Figure 5 It can be seen that the size of the region 513 is less than the size of the region 533.

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

[0449] The electronic device displays a seventh interface, the seventh interface includes a title bar region, a second search box region, and a fifth content region, the second search box region partially overlaps the title bar region, and a partial search box is displayed in the second search box region, and the fifth content region is located below the second search box region, and the size of the fifth content region is greater than the size of the fourth content region and less than the size of the first content region; and,

[0450] After the seventh interface is displayed, the first interface is displayed, and the first interface further includes a third search box region, the third search box region completely overlaps the title bar region, and the title bar region displayed in the first interface completely blocks the search box.

[0451] It should be understood that the seventh interface can refer to the interface 520 shown in (b) in FIG. 5B, the title bar region included in the seventh interface can refer to the region 521 in the interface 520, the second search box region can refer to the region 522 in the interface 520, and the fifth content region can refer to the region 523 in the interface 520. Figure 5 It should also be understood that the seventh interface is a transition interface from the sixth interface to the first interface, and the interface 520 shown in (b) in FIG. 5B (the seventh interface) can be seen.

[0452] Figure 5 The second search box region 522 partially overlaps the title bar region 521, a partial search box is displayed in the title bar region 521, the size of the fifth content region 523 is greater than the size of the fourth content region 513 of the seventh interface, and less than the size of the first content region 533.

[0453] The first interface can refer to the interface 530 shown in (c) in FIG. 5B, and the interface 530 can be seen. Figure 5 The third search box region completely overlaps the title bar region 531, and the search box is completely blocked by the title region 531.

[0454] ​In this embodiment, during the transition from the sixth interface to the first interface, a seventh interface can be displayed. The second search box area in the seventh interface partially overlaps with the title bar area, and a portion of the search box is displayed within the second search box area. The third search box area in the first interface completely overlaps with the title bar area, and the title bar area displayed in the first interface completely obscures the search box. In other words, during the transition from the sixth interface to the first interface, the search box is gradually obscured by the title bar area until it is completely obscured. After the search box is completely obscured, 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 size of the fourth content area. That is to say, the size of the content area gradually increases during the transition from the sixth interface to the first interface. Because the size of the content area gradually increases, more image content can be displayed in the interface, allowing users to focus more on the image content and enhancing the immersive experience of 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 an 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, which 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 be referenced. Figure 4 In the interface 420 shown in (b), the initial title bar area can be referenced to 421, the initial search box area can be referenced to 422, the initial content area can be referenced to 423, the first text size can be referenced to the text size in area 421, the first text size is larger than the text size in the title bar area of ​​the sixth interface (e.g., interface 440), the size of the initial title bar area (e.g., area 421) is larger than the size of the title bar area (e.g., area 441 in interface 440), and the size of the initial content area (e.g., area 421) is smaller than the size of the fourth content area (e.g., area 443 in interface 440).

[0458] In this embodiment, since the size of the first text in the eighth interface is larger than the 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 in the sixth interface, the size of the title text and the title bar area in the sixth interface are smaller than the size of the content area in the eighth interface. This reduces the impact of the title text and title bar area on the user's attention, allowing the user to focus more on the image area and improve the user experience.

[0459] In some embodiments, after the electronic device displays the eighth interface and before it displays 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, which is larger than the text size of the title text in the title bar area but smaller than the first text size. The size of the first title bar area is larger than the size of the title bar area but 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 but larger than the size of the initial content area.

[0461] It should be understood that the ninth interface can be used as a reference. Figure 4 The interface 430 shown in (c) can be referenced from the first title bar area 431, the fourth search box area 432, and the sixth content area 433. The positional relationship of areas 431, 432, and 433 can be referenced from the interface 430.

[0462] It should also be understood that the ninth interface is a transitional interface between the eighth and seventh interfaces. During the transition 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, and eventually to the title text within the title bar area of ​​the seventh interface.

[0463] As the interface changes from the eighth screen to the seventh screen, the size of the title bar area gradually decreases. For example, the title bar area can shrink from the initial size of the title bar area of ​​the eighth screen to the size of the first title bar area of ​​the ninth screen, and finally to the size of the title bar area of ​​the seventh screen.

[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 size of the content area can expand from the initial content area size of the eighth interface to the first title bar area size of the ninth interface until to the title bar area size of the seventh interface.

[0465] In the process of changing from the eighth interface to the ninth 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 influence of the title text and the title bar area on the user's attention can be reduced, and at the same time, 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 number of each step in the above embodiments does not mean the order of execution, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0467] The embodiments of the present application provide a computer program product, when the computer program product is run on an electronic device, the electronic device executes the technical solutions in the above embodiments. The implementation principle and technical effects are similar to the above method related embodiments, and will not be repeated here.

[0468] The embodiments of the present application provide a readable storage medium, the readable storage medium contains instructions, when the instructions are run on an electronic device, the electronic device executes the technical solutions in the above embodiments. The implementation principle and technical effects are similar, and will not be repeated here.

[0469] The embodiments of the present application provide a chip, the chip is used to execute instructions, when the chip is run, the technical solutions in the above embodiments are executed. The implementation principle and technical effects are similar, and will not be repeated here.

[0470] In the embodiments described above, all or some of the steps can be implemented by hardware, software, firmware or any combination thereof. When implemented in software, all or some of the steps can be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed by a computer, all or some of the steps generate the processes or functions described in the embodiments of the present application. The computer can be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions can be stored in a computer readable storage medium or transmitted from one computer readable storage medium to another computer readable storage medium, for example, the computer instructions can be transmitted from one website, computer, server or data center to another website, computer, server or data center through wired (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (such as infrared, wireless, microwave, etc.) manner. The computer readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. integrated with one or more available media. The available media can be magnetic media (such as floppy disk, hard disk, magnetic tape), optical media (such as high-density digital video disc (digital video disc, DVD)), or semiconductor media (such as solid state disk (solid state disk, SSD)) and the like.

[0471] It should be understood that the "embodiments" mentioned throughout the specification mean that the specific features, structures or characteristics related to the embodiments are included in at least one embodiment of the present application. Therefore, the various embodiments throughout the 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 the size of the sequence number of each process described above does not mean the order of execution, and the execution order of each process should be determined by its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0472] It can be understood by those skilled in the art that the various numbers such as first, second, etc. involved in the present application are only for the convenience of description and do not limit the scope of the embodiments of the present application, nor represent the order of sequence.

[0473] In the present application, the element expressed by a singular number is intended to represent "one or more", not "one and only one", unless otherwise specified. In the present application, "at least one" is intended to represent "one or more" and "a plurality" is intended to represent "two or more" unless otherwise specified.

[0474] The term "and / or" used in the present text is used to connect two or more elements with the meaning that each of the elements can be present alone or in any combination with the other elements. For example, the phrase "A and / or B" means that only A can be present, only B can be present, or both A and B can be present.

[0475] The term "at least one of" used in the present text means a combination of all or any of the listed items. For example, the phrase "at least one of A, B and C" means that A can be present alone, B can be present alone, C can be present alone, A and B can be present together, B and C can be present together, A and C can be present together, or A, B and C can be present together.

[0476] Those skilled in the art can realize that the units and algorithm steps of the examples described in combination with the embodiments disclosed in the present text can be realized in electronic hardware or a combination of computer software and electronic hardware. Whether the functions are realized in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to realize the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.

[0477] If the functions are realized in the form of software function units and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application or the parts of the technical solutions that essentially contribute to the prior art can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for causing 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 methods described in the embodiments of the present application. The aforementioned storage medium includes a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes.

[0478] The same or similar parts among various embodiments in the present application can be mutually referred. In the present application, the terms and / or descriptions among different embodiments, and among various implementation manners / implementation methods / realization methods in each embodiment have consistency and can be mutually referred if there is no special description and no logical conflict. The technical features among different embodiments, and among various implementation manners / implementation methods / realization methods in each embodiment can be combined to form new embodiments, implementation manners, implementation methods or realization methods according to their inherent logical relationship. The above-mentioned implementation manners of the present application do not constitute limitation to the protection scope of the present application.

[0479] The above-mentioned is merely specific implementation manners of the present application, but the protection scope of the present application is not limited to this. Any modification or replacement within the technical range disclosed by the present application can be easily thought by any person skilled in the art, and should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims. In summary, the above-mentioned is merely the preferred implementation manners of the technical solutions of the present application, and is not used to limit the protection scope of the present application. Any modification, equivalent replacement, improvement, etc. within the spirit and principle of the present application should be included in the protection scope of the present application.

Claims

1. A method for displaying an interface, characterized in that, The method includes: The first interface of the gallery application is displayed. The first interface includes 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, which includes title text. The transparency of the title text is a first transparency, which is greater than the minimum value within a preset transparency range. The first content area displays at least one tab bar and at least one set of image content. One tab bar corresponds to one set of image content. In response to a swipe operation on the first interface, a second interface is displayed. The second interface includes the 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 range and less than the first transparency. A first tab bar is displayed in the title bar area of ​​the second interface. The first tab bar is the topmost tab bar among at least one tab bar.

2. The method according to claim 1, characterized in that, After displaying the second interface in response to a swipe operation on the first interface, the method further includes: In response to a swipe operation on the second interface, a third interface is displayed. 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. The positions of other tab bars and at least one image content displayed in the second content area of ​​the third interface are shifted 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 at least one tab bar other than the first tab bar.

3. The method according to claim 2, characterized in that, The second tab bar in the other tab bars is adjacent to the first tab bar displayed on the third interface, and the second tab bar is the tab bar 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 the third transparency, which is greater than the minimum value within the preset transparency range. And, after displaying the third interface in response to a swipe operation on the second interface, the method further includes: In response to a swipe operation on the third interface, a fourth interface is displayed. The fourth interface includes the title bar area, and 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, which is greater than or equal to the minimum value within a preset transparency range and less than the third transparency. 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 a first color, the color of the tab text displayed on the second interface is a 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 claim 1, characterized in that, Before displaying the second interface after responding to a swipe operation on the first interface, the method further includes: The fifth interface is displayed, which 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, which is smaller than the first transparency and larger than the second transparency. A portion of the first tab bar is displayed in the title bar area of ​​the fifth interface.

7. The method according to claim 1, characterized in that, Before displaying the first interface of the gallery application, the method further includes: The sixth interface is displayed, which 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 and displays a search box. The fourth content area is located below the first search box area and is smaller than the size of the first content area.

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

9. The method according to claim 8, characterized in that, Before displaying the sixth interface, the method further includes: The eighth interface is displayed, 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 a first text size, which 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, 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 a second text size, which is larger than the text size of the title text in the title bar area but smaller than the first text size. The size of the first title bar area is larger than the size of the title bar area but 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 but larger than the size of the initial content area.

11. An electronic device, characterized in that, include: One or more processors; One or more memory units; The one or more memories store one or more computer programs, the one or more computer programs including instructions that, when executed by the one or more processors, cause the electronic device to perform the method as described in any one of claims 1 to 10.

12. A computer-readable storage medium, characterized in that, Includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 9.

13. A chip, characterized in that, The chip includes: Memory, used to store instructions; A processor for retrieving and executing the instructions from the memory, causing an electronic device on which the chip is mounted to perform the method as described in any one of claims 1 to 10.

Images