Display method of interface, electronic device, storage medium and computer program product

Abstract

The application discloses a display method of an interface, an electronic device, a storage medium and a computer program product, and belongs to the technical field of terminals. The method is applied to an electronic device and includes the following steps: receiving a display operation on a target frame interface in a first application interface, the first application interface being any one application interface in the electronic device, and the target frame interface being one frame interface to be displayed in at least one frame interface included in the first application interface; in response to the display operation, displaying the target frame interface; and in the process of displaying the target frame interface, displaying a bottom menu bar at the bottom of the target frame interface according to a first color value, the similarity between the first color value and a color value related to the target frame interface being greater than or equal to a similarity threshold. In the application, the background color of the bottom menu bar is similar to or the same as the application interface color, thereby avoiding the sense of fragmentation caused by too large color difference between the bottom menu bar and the application interface content, ensuring the harmony of the interface color, and improving the beauty of the interface display.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a method for displaying an interface, an electronic device, a storage medium, and a computer program product. Background Technology

[0002] With the development of terminal technology, electronic devices are becoming more and more functional. To make it more convenient for users to use electronic devices, a bottom menu bar can be displayed at the bottom of some application interfaces. Users can directly operate the bottom bar to realize some functions of the electronic device.

[0003] Currently, the bottom bar can be displayed in a solid-color view at the bottom of the application interface, and it does not obscure the content of the application interface. However, sometimes the color of the application interface and the color of the area where the bottom bar is located are too different, resulting in an inconsistent and disjointed display, which reduces the aesthetic appeal of the interface. Summary of the Invention

[0004] This application provides a method for displaying an interface, an electronic device, a storage medium, and a computer program product, which can be used to ensure the color harmony of the interface and improve the aesthetics of the interface display. The technical solution is as follows:

[0005] Firstly, a method for displaying an interface is provided, applicable to electronic devices, the method comprising:

[0006] The system receives a display operation on a target frame interface in a first application interface, wherein the first application interface is any application interface in the electronic device, and the target frame interface is a frame interface to be displayed among at least one frame interface included in the first application interface; in response to the display operation, the system displays the target frame interface; during the display of the target frame interface, a bottom menu bar is displayed at the bottom of the target frame interface according to a first color value, wherein the first color value is used to indicate the background color of the bottom menu bar, and the similarity between the first color value and the color value involved in the target frame interface is greater than or equal to a similarity threshold.

[0007] It should be noted that the first application interface can be any application interface in the electronic device. For example, the first application interface can be the application interface of any application, or it can be the desktop. The target frame interface is the frame interface to be displayed among at least one frame interface included in the first application interface.

[0008] In this way, when a bottom bar is displayed at the bottom of the application interface, the similarity between the background color of the bottom bar and the colors involved in the application interface can be greater than or equal to the similarity threshold. In this case, the bottom bar and the application interface are similar or the same color, thereby avoiding the problem of excessive color difference between the bottom bar and the content of the application interface, ensuring the harmony of interface colors, reducing the sense of disjointedness in the interface display, and improving the aesthetics of the interface display.

[0009] As an example of this application, during the process of displaying the target frame interface, before the bottom menu bar is displayed at the bottom of the target frame interface according to the first color value, the electronic device can also determine the attribute information of the bottom menu bar in the first application interface. The attribute information includes whether the menu bar background color is dynamically displayed or statically displayed.

[0010] Dynamic display of menu bar background color means that the color of the area where the bottom menu bar is located changes with the color of the target area, while static display of menu bar background color means that the color of the area where the bottom menu bar is located is fixed and does not change with the color of the target area.

[0011] In this way, by setting different display methods for the bottom bar, the interface display methods are enriched, and the aesthetics of the interface are ensured.

[0012] As an example of this application, the operation of displaying a bottom menu bar at the bottom of the target frame interface according to a first color value during the display of the target frame interface by the electronic device includes:

[0013] During the process of displaying the target frame interface, if the attribute information, including the background color of the menu bar, is statically displayed, the background color of the background area in the target frame interface is obtained to get the first color value.

[0014] Display the bottom menu bar in the target frame interface, and set the background color of the bottom menu bar to the first color value.

[0015] In some embodiments, the electronic device can directly obtain the background color value from the attribute information of the first application interface and determine the obtained background color value as the first color value.

[0016] In some embodiments, the electronic device can directly obtain the corresponding color value from the attribute information of the bottom bar and determine the obtained color value as the first color value.

[0017] In some embodiments, the electronic device may also perform color sampling on the background color of the first application interface to obtain a first color value.

[0018] In this way, by setting the background color of the bottom bar to the same color as the background color of the interface, the color harmony of the interface is ensured, the sense of interface disjointedness is reduced, and the aesthetics of the interface are improved.

[0019] As an example of this application, the operation of displaying a bottom menu bar at the bottom of the target frame interface according to a first color value during the display of the target frame interface by the electronic device includes:

[0020] During the display of the target frame interface, when the attribute information includes the dynamic display of the menu bar background color, the first color value is obtained based on the color of the target area, which is the area in the target frame interface adjacent to the bottom menu bar.

[0021] Fill the area containing the bottom menu bar with the first color value.

[0022] In this way, by setting the background color of the bottom bar to be the same as or similar to the color of the adjacent area, the problem of excessive color difference between the bottom bar and the application interface content is avoided, ensuring the color coordination of the interface. Moreover, the background color of the bottom bar changes with the color of the target area, thereby improving the richness and aesthetics of the interface display.

[0023] As an example of this application, during the process of displaying the target frame interface, the electronic device sequentially draws multiple views in the current interface according to the view drawing order. These multiple views include the views involved in the target frame interface, the view corresponding to the bottom menu bar, and the background view corresponding to the bottom menu bar. The background view is used to display the background color corresponding to the bottom menu bar.

[0024] When the background view is drawn in the order of view drawing and the attribute information includes the dynamic display of the menu bar background color, the first color value can be obtained based on the color of the target area.

[0025] In this way, since each view has different attribute information, the drawing method for the corresponding view is determined based on the attribute information, thereby improving the accuracy of view drawing.

[0026] As an example of this application, when an electronic device is drawn to a background view in the order of view drawing, and the attribute information includes dynamically displayed background color of the menu bar, the operation of obtaining a first color value based on the color of the target area includes:

[0027] When the background view is drawn and the attribute information includes the dynamic display of the menu bar background color, a screenshot operation is performed on the target area to obtain the first image;

[0028] The first image is processed to extract its color, resulting in the first color value.

[0029] In this way, by taking a screenshot of the target area, it is easier to determine the color range and improve the accuracy of determining the first color value.

[0030] As an example of this application, the operation of an electronic device performing color sampling processing on a first image to obtain a first color value includes:

[0031] Count the number of pixels corresponding to each color value in the first image;

[0032] The color value that occupies the most pixels is determined as the first color value.

[0033] In other words, the electronic device can determine the first color value from the first image by taking the mode.

[0034] In some embodiments, after counting the number of pixels corresponding to each color value in the first image, the electronic device determines the color value with the most pixels and obtains a reference color value; it then determines whether the number of pixels occupied by the reference color value is greater than or equal to a first quantity threshold; if the number of pixels occupied by the reference color value is greater than or equal to the first quantity threshold, the reference color value is determined as the first color value.

[0035] As an example, if the reference color value occupies the largest number of pixels and the number of pixels occupied by the reference color value is less than the first quantity threshold, the electronic device may also choose other methods to redetermine the first color value.

[0036] For example, a second quantity threshold may also be set in the electronic device, and the electronic device can determine the color value that occupies a number of pixels greater than or equal to the second quantity threshold from the first image to obtain at least one color value; the average of the at least one color value is determined to be the first color value.

[0037] In this way, by taking the mode to determine the first color value, the background color of the bottom bar is made as similar as possible to the colors of the adjacent areas, thus reducing the sense of interface disjointness.

[0038] As an example of this application, the operation of an electronic device performing color sampling processing on a first image to obtain a first color value includes:

[0039] Color values ​​are sampled from the first image to obtain multiple color values;

[0040] The average of multiple color values ​​is used as the first color value.

[0041] In some embodiments, the electronic device may also determine the first color value in other ways. For example, the electronic device may skip the screenshot operation and directly perform a color sampling operation on the target area. Alternatively, the electronic device may determine the average color value of all pixels in the target area to obtain a second color value, determine the color value of each of a plurality of candidate colors to obtain a plurality of third color values, and determine any one of the plurality of third color values ​​as the first color value. The similarity between each of the plurality of candidate colors and the color indicated by the second color value is greater than or equal to a similarity threshold.

[0042] In this way, color sampling operations on the target area are performed in different ways, thereby increasing the richness of operations.

[0043] Secondly, a display device for an interface is provided, the display device having the function of implementing the interface display method behavior described in the first aspect above. The interface display device includes at least one module, the at least one module being used to implement the interface display method provided in the first aspect above. The interface display device includes:

[0044] The receiving module is used to receive the display operation of the target frame interface in the first application interface, wherein the first application interface is any application interface in the electronic device, and the target frame interface is a frame interface to be displayed among at least one frame interface included in the first application interface.

[0045] The first display module is used to display the target frame interface in response to a display operation;

[0046] The second display module is used to display a bottom menu bar at the bottom of the target frame interface according to a first color value during the display of the target frame interface. The first color value is used to indicate the background color of the bottom menu bar, and the similarity between the first color value and the color value involved in the target frame interface is greater than or equal to a similarity threshold.

[0047] As an example of this application, the device also includes;

[0048] The determination module is used to determine the attribute information of the bottom menu bar in the first application interface, including whether the menu bar background color is dynamically displayed or statically displayed.

[0049] Dynamic display of menu bar background color means that the color of the area where the bottom menu bar is located changes with the color of the target area, while static display of menu bar background color means that the color of the area where the bottom menu bar is located is fixed and does not change with the color of the target area.

[0050] As an example of this application, the second display module is used for:

[0051] During the process of displaying the target frame interface, if the attribute information, including the background color of the menu bar, is statically displayed, the background color of the background area in the target frame interface is obtained to get the first color value.

[0052] Display the bottom menu bar in the target frame interface, and set the background color of the bottom menu bar to the first color value.

[0053] As an example of this application, the second display module is used for:

[0054] During the display of the target frame interface, when the attribute information includes the dynamic display of the menu bar background color, the first color value is obtained based on the color of the target area, which is the area in the target frame interface adjacent to the bottom menu bar.

[0055] Fill the area containing the bottom menu bar with the first color value.

[0056] As an example of this application, the second display module is used for:

[0057] During the process of displaying the target frame interface, multiple views in the current interface are drawn sequentially according to the view drawing order. These multiple views include the views involved in the target frame interface, the view corresponding to the bottom menu bar, and the background view corresponding to the bottom menu bar. The background view is used to display the background color corresponding to the bottom menu bar.

[0058] When the background view is drawn in the order of view drawing and the attribute information includes the dynamic display of the menu bar background color, the first color value can be obtained based on the color of the target area.

[0059] As an example of this application, the second display module is used for:

[0060] When the background view is drawn and the attribute information includes the dynamic display of the menu bar background color, a screenshot operation is performed on the target area to obtain the first image;

[0061] The first image is processed to extract its color, resulting in the first color value.

[0062] As an example of this application, the second display module is used for:

[0063] Count the number of pixels corresponding to each color value in the first image;

[0064] The color value that occupies the most pixels is determined as the first color value.

[0065] As an example of this application, the second display module is used for:

[0066] Color values ​​are sampled from the first image to obtain multiple color values;

[0067] The average of the plurality of color values ​​is determined as the first color value.

[0068] Thirdly, an electronic device is provided, comprising a processor and a memory. The memory stores a program that supports the electronic device in executing the display method of the interface provided in the first aspect, and stores data related to implementing the display method of the interface described in the first aspect. The processor is configured to execute the program stored in the memory. The electronic device may further include a communication bus for establishing a connection between the processor and the memory.

[0069] Fourthly, a computer-readable storage medium is provided, wherein instructions are stored therein, which, when executed on a computer, cause the computer to perform the interface display method described in the first aspect.

[0070] Fifthly, a computer program product containing instructions is provided, which, when run on a computer, causes the computer to execute the interface display method described in the first aspect above.

[0071] The technical effects achieved by the second, third, fourth, and fifth aspects mentioned above are similar to those achieved by the corresponding technical means in the first aspect mentioned above, and will not be repeated here. Attached Figure Description

[0072] Figure 1 This is a schematic diagram illustrating an application scenario provided in an embodiment of this application;

[0073] Figure 2 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0074] Figure 3 This is a block diagram of a software system for an electronic device provided in an embodiment of this application;

[0075] Figure 4 This is a schematic diagram illustrating another application scenario provided by an embodiment of this application;

[0076] Figure 5 This is a schematic diagram illustrating another application scenario provided by an embodiment of this application;

[0077] Figure 6 This is a schematic diagram illustrating another application scenario provided by an embodiment of this application;

[0078] Figure 7 This is a flowchart of a method for displaying an interface provided in an embodiment of this application;

[0079] Figure 8 This is a schematic diagram of interface composition provided in an embodiment of this application;

[0080] Figure 9 This is a flowchart of a method for displaying an interface provided in an embodiment of this application;

[0081] Figure 10 This is a flowchart of a method for displaying an interface provided in an embodiment of this application;

[0082] Figure 11 This is a flowchart of a method for displaying an interface provided in an embodiment of this application;

[0083] Figure 12 This is a schematic diagram of the structure of an interface display device provided in an embodiment of this application. Detailed Implementation

[0084] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0085] It should be understood that "multiple" as mentioned in this application refers to two or more. In the description of this application, unless otherwise stated, " / " indicates "or," for example, A / B can mean A or B; "and / or" in this document is merely a description of the relationship between related objects, indicating that three relationships can exist, for example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Furthermore, to facilitate a clear description of the technical solutions of this application, the terms "first," "second," etc., are used to distinguish identical or similar items with essentially the same function and effect. Those skilled in the art will understand that the terms "first," "second," etc., do not limit the quantity or execution order, and that "first," "second," etc., do not necessarily imply differences.

[0086] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0087] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0088] With the development of terminal technology, the functions of electronic devices are becoming increasingly diverse. For example, see... Figure 1 In Figure (a) or (b), to facilitate user access to certain functions of the electronic device while displaying any application interface, such as to facilitate the use of an AI assistant (also known as a smart assistant), the electronic device can display a bottom menu bar at the bottom of the application interface, i.e., a bottom bar, and this bottom bar will not obstruct other areas of the application interface. Figure 1 As shown in Figure (a), the background color of the bottom bar is usually fixed as a solid color, or, as in... Figure 1 As shown in Figure (b), the bottom bar has no background color.

[0089] Since the background color of the bottom bar is fixed to a solid color, the background color of the bottom bar may differ too much from the colors of the application interface, as shown in [reference needed]. Figure 1 In Figure (a), the background color of the bottom bar is white, while the color of the application interface is black, resulting in a clear sense of interface disjointness and reducing the aesthetic appeal of the interface display.

[0090] To reduce the sense of disjointedness in the interface and improve its aesthetics, this application provides a method for displaying an interface. In this method, during the display of any application interface in an electronic device, a bottom bar can be displayed at the bottom of the application interface. The background color of the bottom bar has a similarity to the colors used in the application interface that is greater than or equal to a similarity threshold. Since the bottom bar and the application interface are similar in color or the same when the similarity is greater than or equal to the similarity threshold, the problem of excessive color difference between the bottom bar and the application interface content is avoided. This ensures harmonious interface colors, reduces the sense of disjointedness in the interface display, and improves the aesthetics of the interface.

[0091] Before providing a detailed explanation of the interface display method provided in the embodiments of this application, the electronic device involved in the embodiments of this application will be described first.

[0092] As an example, this method can be applied to electronic devices that can display a bottom bar at the bottom of any application interface. As an example and not a limitation, the electronic device can be, but is not limited to, tablet computers, desktop computers, laptop computers, handheld computers, laptops, in-vehicle devices, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), mobile phones, smartwatches, etc., and this application embodiment does not limit this.

[0093] Figure 2 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. See also... Figure 2 The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0094] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0095] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

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

[0097] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from this memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0098] In some embodiments, the processor 110 may include one or more interfaces, such as an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0099] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0100] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0101] Electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0102] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Mini LED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 194, where N is an integer greater than 1.

[0103] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0104] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions, such as saving music, video, and other files on the external memory card.

[0105] Internal memory 121 can be used to store computer-executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of electronic device 100 by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created by electronic device 100 during use (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0106] Electronic device 100 can realize audio functions, such as music playback and recording, through audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D and application processor.

[0107] Pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. In some embodiments, pressure sensor 180A can be disposed on display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two parallel plates with conductive material. When force is applied to pressure sensor 180A, the capacitance between the electrodes changes. Electronic device 100 determines the pressure intensity based on the change in capacitance. When a touch operation is applied to display screen 194, electronic device 100 detects the touch operation intensity based on pressure sensor 180A. Electronic device 100 can also calculate the touch position based on the detection signal from pressure sensor 180A. In some embodiments, touch operations applied to the same touch position but with different touch operation intensities can correspond to different operation commands. For example, when a touch operation with an intensity less than the pressure threshold is applied to the SMS application icon, a command to view an SMS message is executed. When a touch operation with an intensity greater than or equal to the pressure threshold is applied to the SMS application icon, a command to create a new SMS message is executed.

[0108] The gyroscope sensor 180B can be used to determine the motion attitude of the electronic device 100. In some embodiments, the gyroscope sensor 180B can determine the angular velocity of the electronic device 100 about three axes (i.e., the x, y, and z axes). The gyroscope sensor 180B can be used for image stabilization. For example, when the shutter is pressed, the gyroscope sensor 180B detects the angle of the shake of the electronic device 100, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to counteract the shake of the electronic device 100 by moving in the opposite direction, thus achieving image stabilization. The gyroscope sensor 180B can also be used in navigation and motion-sensing game scenarios.

[0109] The barometric pressure sensor 180C is used to measure air pressure. In some embodiments, the electronic device 100 calculates altitude using the air pressure value measured by the barometric pressure sensor 180C to assist in positioning and navigation.

[0110] The magnetic sensor 180D includes a Hall sensor. The electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip cover. In some embodiments, when the electronic device 100 is a flip phone, the electronic device 100 can detect the opening and closing of the flip cover based on the magnetic sensor 180D. Based on the detected opening and closing state of the cover or the flip cover, the electronic device 100 can set features such as automatic flip unlocking.

[0111] The accelerometer 180E can detect the magnitude of acceleration of electronic device 100 in various directions (generally three axes). When electronic device 100 is stationary, it can detect the magnitude and direction of gravity. The accelerometer 180E can also be used to identify the attitude of electronic device 100, and can be applied to applications such as screen orientation switching and pedometers.

[0112] A distance sensor 180F is used to measure distance. Electronic device 100 can measure distance via infrared or laser. In some embodiments, during a shooting scenario, electronic device 100 can utilize the distance sensor 180F for distance measurement to achieve fast focusing.

[0113] The proximity sensor 180G may include a light-emitting diode (LED) and a light detector, such as a photodiode. The LED may be an infrared LED. The electronic device 100 emits infrared light outward through the LED. The electronic device 100 uses the photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, the electronic device 100 can determine that an object is nearby. When insufficient reflected light is detected, it can determine that no object is nearby. The electronic device 100 can use the proximity sensor 180G to detect when a user holds the electronic device 100 close to their ear for a phone call, so as to automatically turn off the screen to save power. The proximity sensor 180G can also be used in holster mode and pocket mode for automatic unlocking and locking of the screen.

[0114] The ambient light sensor 180L is used to sense the brightness of ambient light. The electronic device 100 can adaptively adjust the brightness of the display screen 194 based on the sensed ambient light brightness. The ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures. The ambient light sensor 180L can also work with the proximity sensor 180G to detect whether the electronic device 100 is in a pocket to prevent accidental touches.

[0115] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can utilize the characteristics of the collected fingerprints to achieve fingerprint unlocking, accessing application locks, taking photos with fingerprints, answering calls with fingerprints, etc.

[0116] Temperature sensor 180J is used to detect temperature. In some embodiments, electronic device 100 uses the temperature detected by temperature sensor 180J to execute a temperature handling strategy. For example, when the temperature reported by temperature sensor 180J exceeds a threshold, electronic device 100 reduces the performance of a processor located near temperature sensor 180J to reduce power consumption and implement thermal protection. In other embodiments, when the temperature is below another threshold, electronic device 100 heats battery 142 to prevent abnormal shutdown of electronic device 100 due to low temperature. In still other embodiments, when the temperature is below yet another threshold, electronic device 100 boosts the output voltage of battery 142 to prevent abnormal shutdown due to low temperature.

[0117] Touch sensor 180K, also known as a "touch panel," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touch display." Touch sensor 180K detects touch operations applied to or near it. Touch sensor 180K can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be located on the surface of electronic device 100, in a different position than display screen 194.

[0118] The bone conduction sensor 180M can acquire vibration signals. In some embodiments, the bone conduction sensor 180M can acquire vibration signals from the vibrating bone segments of the human vocal cords. The bone conduction sensor 180M can also contact the human pulse to receive blood pressure signals. In some embodiments, the bone conduction sensor 180M can also be incorporated into headphones to form bone conduction headphones. The audio module 170 can parse the voice signals from the vibrating bone segments of the vocal cords acquired by the bone conduction sensor 180M to realize voice functionality. The application processor can parse heart rate information from the blood pressure signals acquired by the bone conduction sensor 180M to realize heart rate detection functionality.

[0119] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch buttons. Electronic device 100 can receive button input and generate key signal inputs related to user settings and function control of electronic device 100.

[0120] The software system of electronic device 100 will be described next.

[0121] The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application embodiment uses a layered Android system as an example to illustrate the software system of electronic device 100.

[0122] Figure 3 This is a block diagram of a software system for an electronic device 100 provided in an embodiment of this application. See also... Figure 3 A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the native layer, and the kernel layer.

[0123] The application layer can include a series of application packages. For example... Figure 3 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS.

[0124] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions. For example... Figure 3As shown, the application framework layer can include a window manager, content providers, a view system, a phone manager, a resource manager, and a notification manager. The window manager manages window programs. It can obtain the screen size, determine if a status bar is present, lock the screen, and capture the screen. The content provider stores and retrieves data, making this data accessible to the application. This data can include videos, images, audio, made and received phone calls, browsing history and bookmarks, and phone books. The view system includes visual controls, such as controls for displaying text and controls for displaying images. The view system can be used to build the application's display interface, which can consist of one or more views, such as a view displaying SMS notification icons, a view displaying text, and a view displaying images. The phone manager provides communication functions for the electronic device 100, such as managing call status (including connection and disconnection). The resource manager provides the application with various resources, such as localized strings, icons, images, layout files, and video files. The notification manager allows the application to display notification information in the status bar, which can be used to convey informational messages and can disappear automatically after a short pause without user interaction. For example, the notification manager is used to notify users of download completions and message alerts. The notification manager can also display notifications as icons or scrolling text in the system's top status bar, such as notifications from background applications. Furthermore, the notification manager can appear as dialog boxes on the screen, such as displaying text messages in the status bar, emitting sounds, causing electronic devices to vibrate, or flashing indicator lights.

[0125] As an example, the application framework layer may also include a view management module (ViewRootImpl), a view module (DecorView), and a thread rendering module (ThreadRender). The view module obtains scene information of the application interface currently displayed on the electronic device, adds a background view for the bottom bar in the application interface layout based on the scene information, and determines the background view's attribute information; this background view is used to display the background color of the bottom bar. The thread rendering module triggers the rendering thread in the local layer to perform its work. The view management module can be used to manage the entire interface.

[0126] In some embodiments, the view module can add not only a background view, but also all views currently displayed on the interface. That is, the view module can add multiple views, including the background view, and each view has its own attribute information.

[0127] In some embodiments, the application framework layer can use the JNI interface to pass the attribute information of each view in the current interface to the corresponding rendering node in the current layer. That is, each view in the application framework layer has a corresponding rendering node in the local layer.

[0128] The local layer may include a rendering thread, which is used to draw each drawing interface according to the order of the drawing nodes and the attribute information corresponding to each drawing interface. Of course, the local layer may also include other modules, such as Skia, SkiaPipeline, etc., which will not be described in detail in this embodiment.

[0129] The kernel layer is the layer between hardware and software. The kernel layer includes at least display drivers, camera drivers, audio drivers, and sensor drivers.

[0130] Next, in order to facilitate understanding of the embodiments of this application, the application scenarios provided by the embodiments of this application will be introduced, and the application scenarios of the embodiments of this application will be introduced using a mobile phone as an example of an electronic device.

[0131] Please refer to Figure 4 , Figure 4 This is a schematic diagram of an application scenario provided by an embodiment of this application. In one application scenario, see... Figure 4 In Figure (a), the electronic device displays a desktop 400, with a bottom bar P1 at the bottom. This bottom bar P1 has no background color. If the user clicks the application icon P2 of the SMS application displayed on the desktop 400, then see... Figure 4 In Figure (b), in response to a click on the SMS application icon P2, the electronic device can display the SMS application interface 401. The bottom of the SMS application interface 401 displays a bottom bar P1, and the bottom bar P1 has a background view P11. The color of the background view P11, i.e., the background color of the bottom bar P1, is the same as the background color of the SMS application interface 401; that is, the background color of the SMS application interface 401 is white, and the background color of the bottom bar P11 is also white. If the user clicks the application icon P3 of the settings application, then see... Figure 4 In Figure (c), the electronic device can display the settings application interface 402 in response to a click operation on the application icon P3 of the settings application. The settings application interface 402 has a bottom bar P1 at the bottom and a background view P11 at the bottom bar P1. The background view P11 is the same color as the background color of the settings interface 402, that is, the background color of the settings application interface 402 is black, and the background color of the bottom bar P11 is also black.

[0132] In another application scenario, see Figure 5 In Figure (a), the electronic device displays a desktop 400, with a bottom bar P1 at the bottom. This bottom bar P1 has no background color. If the user clicks the application icon P4 of the news application displayed on the desktop 400, then see... Figure 5 In Figure (b), the electronic device can display a news application interface 403 in response to a click on the application icon P4 of the news application. The bottom of the news application interface 403 has a bottom bar P1, and the bottom bar P1 has no background view.

[0133] In another application scenario, see Figure 6 In Figure (a), the electronic device displays a desktop 400, with a bottom bar P1 at the bottom. This bottom bar P1 has no background view. If the user clicks the application icon P5 of the short video application displayed on the desktop 400, then see... Figure 6 In Figure (b), the electronic device, in response to a click on the application icon P5 of the short video application, can display a short video playback interface 404. This short video playback interface 404 includes an operation bar 4041, with a bottom bar P1 at its bottom and a background view P11. The operation bar 4041 is located within a target area 4046 (the area adjacent to the bottom bar). Thus, the color of the background view P11 is the same as the background color of the operation bar 4041; for example, if the background color of the operation bar 4041 is gray, then the color of the background view P11 is gray. If the user continues to click on the first user option 4042 in the operation bar 4041, then see... Figure 6 In Figure (c), the electronic device displays a first user interface 4043 in response to a first user option 4042. This first user interface 4043 includes an operation bar 4041 located within a target area 4046. The background color of the operation bar 4041 changes from gray to white. A bottom bar P1 is displayed at the bottom of the operation bar 4041, and a background view P11 exists on the bottom bar P1. The color of the background view P11 is the same as the color of the operation bar 4041 displayed at the bottom of the short video playback interface 404, i.e., the color of the background view P11 changes to white. (The last sentence appears to be incomplete and possibly refers to a different display.) Figure 6 In the case of the short video playback interface shown in Figure (b), if the user clicks the second user option 4044 in the short video playback interface 404, then see Figure 6In Figure (d), the electronic device displays a second user interface 4045. This second user interface 4045 has a bottom bar (P1) with a background view (P11). The color of the background view (P11) is similar to the background color of the target area 4046 of the second user interface 4045. For example, if the target area 4046 is predominantly red and orange, then the color of the background view (P11) of the bottom bar would be a color between red and orange.

[0134] It should be noted that the embodiments in this application are based only on the above. Figures 4-6 The examples provided in this application illustrate the application scenarios involved in the embodiments, and do not constitute a limitation on the implementation of this application.

[0135] Based on the execution entity and application scenarios provided in the above embodiments, the interface display method provided in this application will be described next. Please refer to... Figure 7 , Figure 7 This is a schematic diagram illustrating a method for displaying an interface, provided as an example and not as a limitation. The method is illustrated using the interaction of multiple modules in an electronic device as an example, and may include some or all of the following:

[0136] Step 701: The first application receives the startup operation.

[0137] It should be noted that the first application can be any application on the electronic device, such as the desktop, settings application, SMS application, short video application, etc.

[0138] Step 702: In response to the startup operation, the first application sends a display message to the view module.

[0139] When the first application receives a launch operation, after the first application launches, the electronic device needs to display the interface corresponding to the first application, as well as other views besides the first application interface. The view module can manage all displayed views to ensure that the electronic device can accurately display the corresponding interface. Therefore, in order to accurately display the interface displayed after the first application launches, the first application can send a display message to the view module.

[0140] It should be noted that the display message carries the application identifier of the first application, which is used to uniquely identify the first application, and the application identifier can be composed of at least one of numbers, letters, symbols, patterns, etc.

[0141] Step 703: The view module responds to the display message and obtains the attribute information of the bottom bar corresponding to the first application.

[0142] Because the interface displayed by an electronic device may include multiple views in different application scenarios, and these views correspond to different display methods and parameters, such as the way the electronic device displays the bottom bar, for example, the electronic device may display a bottom bar at the bottom of the interface of some applications, without displaying a background view (i.e., without a background color); or, in the case of displaying the interface of some applications, the electronic device may display a bottom bar at the bottom of the interface of some applications, and the bottom bar may have a background view, and the color of the background view is fixed and does not change with the changes of the interface of the first application; or, in the case of displaying the interface of some applications, the electronic device may display a bottom bar at the bottom of the interface of some applications, and the bottom bar may have a background view, and the color of the background view changes with the changes of the current application interface. Therefore, in order to accurately lay out the views and to accurately display the bottom bar subsequently, the view module can obtain the attribute information of the bottom bar corresponding to the first application in response to the display message.

[0143] In some embodiments, the application layer of the electronic device may store an attribute file containing attribute information for the bottom bar corresponding to each application. Therefore, the view module can read the attribute file and, based on the application identifier of the first application, retrieve the attribute information of the bottom bar corresponding to that first application from the attribute file.

[0144] It should be noted that the attribute information for the bottom bar corresponding to each application can include whether the bottom bar is displayed when the application interface is shown, the display strategy of the corresponding background view when the bottom bar is displayed, texture, shadow, and other information. Among them, the display strategy includes dynamically displaying the menu bar background color, statically displaying the menu bar background color, or having no background for the menu bar.

[0145] For example, the attribute information of the bottom bar corresponding to the first application may include information such as displaying the bottom bar, displaying the background view corresponding to the bottom bar, and having a fixed background view color. The attribute information of the bottom bar corresponding to the second application may include information such as displaying the bottom bar, displaying the background view corresponding to the bottom bar, and having a dynamically changing background view color. The attribute information of the bottom bar corresponding to the third application may include information such as not displaying the bottom bar.

[0146] In some embodiments, in response to a display message, the view module can obtain not only the attribute information of the bottom bar corresponding to the first application, but also the attribute information of all views in the first application interface of the first application.

[0147] It should be noted that the view module can also obtain the attribute information of all views in the first application interface of the first application from the attribute file, which will not be described in detail in this embodiment.

[0148] In some embodiments, the operation of determining whether to display the bottom bar in the application interface corresponding to the first application can be performed by the view module or by the electronic device's system. Specifically, if the electronic device's system determines that the bottom bar does not need to be displayed, the view module can directly lay out the view of the first application's application interface according to relevant technical methods, without needing to read the bottom bar's attribute information. If the electronic device's system determines that the bottom bar needs to be displayed, the view module can read the attribute information of the bottom bar corresponding to the first application from the attribute file, and this attribute information no longer includes information on whether the bottom bar should be displayed.

[0149] Step 704: When the display strategy is to display the menu bar background color statically, the view module creates multiple views, including the background view corresponding to the bottom bar.

[0150] It should be noted that the multiple views include the background view of the bottom bar, the view corresponding to the bottom bar, and all views included in the target frame interface of the first application.

[0151] After the first application is launched, its first application interface may be either dynamically displayed or statically displayed. If the first application interface is dynamically displayed, it can include multiple frame interfaces; if it is statically displayed, it typically includes one frame interface. That is, the first application interface includes at least one frame interface. Therefore, when the first application interface includes at least one frame interface, the interface is displayed frame by frame in sequence. Thus, the view module can create a view encompassing the currently displayed frame interface; in other words, the view module needs to create a view encompassing the target frame interface.

[0152] It should be noted that when the first application is launched, the target frame interface can be the first frame interface in the first application interface.

[0153] Step 705: The view module sends the attribute information of each view in the multiple views to the drawing node corresponding to each view.

[0154] As described above, the view module resides in the application framework layer, and the multiple views created by the view module also reside in the application framework layer. Furthermore, the structure of these multiple views is typically a hierarchical tree structure. Since the rendering thread for filling and drawing the views resides in the local layer, the view module can send the attribute information of each view to the corresponding drawing node in order to achieve the filling and drawing of the views.

[0155] It's important to note that during the view creation process, corresponding drawing nodes are also generated in the local layer along with the view creation. That is, the number of views created by the view module corresponds to the number of drawing nodes created in this layer, with a one-to-one correspondence between the multiple views and the multiple drawing nodes. The structure of these multiple drawing nodes is also a tree structure, identical to the tree structure of the corresponding multiple views. The drawing nodes are organized through parent-child relationships, forming a tree structure, which helps manage the layout and style inheritance of UI elements. Each drawing node represents a UI element, such as a button, text box, or layout container.

[0156] As an example, the view module can pass the attribute information of each view to the corresponding drawing node through the JNI interface. This application embodiment does not impose specific restrictions on the method of passing attribute information.

[0157] Step 706: The view module triggers the rendering thread to perform its work through the thread rendering module.

[0158] As an example, after the view module synchronizes the attribute information of each view across multiple views to the corresponding drawing node for each view, the view module can trigger the rendering thread to perform its work through the threaded rendering module. That is, the threaded rendering module can instruct the rendering thread to fill and draw each drawing node.

[0159] Step 707: After being triggered, the rendering thread obtains the currently drawn node according to the view drawing order.

[0160] As can be seen from the above, multiple drawing nodes exist in the form of a tree structure. Therefore, the view drawing order can be the top-to-bottom order of the tree structure. Moreover, for drawing nodes at the same level in the tree structure, the drawing order of these drawing nodes is the same, that is, the rendering thread can draw at least one drawing node at the same time.

[0161] As an example, when there are multiple drawing nodes, the rendering thread can obtain the currently drawing node, that is, obtain the drawing node in the current drawing order according to the view drawing order.

[0162] Step 708: When the node to be drawn is the drawing node corresponding to the background view of the bottom bar, and the attribute information of the node to be drawn indicates that the display strategy of the node to be drawn is the static display of the menu bar background color, the rendering thread obtains the background color corresponding to the first application interface and obtains the first color value.

[0163] Since different drawing nodes correspond to different attribute information, the rendering thread can determine the drawing method for the current node based on its attribute information. For example, if the attribute information of the current node indicates that its display strategy is to display the menu bar background color statically, the rendering thread can obtain the background color corresponding to the first application interface and get the first color value.

[0164] Normally, the background color of the first application interface is a solid color and is fixed. Therefore, the rendering thread can directly obtain the background color value from the attribute information of the first application interface and determine the obtained background color value as the first color value.

[0165] Alternatively, since the background color of the bottom bar is fixed when the display strategy is to display the menu bar background color statically, and the color value is already carried in the attribute information of the node to be drawn, the rendering thread can directly obtain the corresponding color value from the attribute information of the node to be drawn and determine the obtained color value as the first color value.

[0166] Of course, sometimes during holidays, to enhance the festive atmosphere, the primary application interface may change, and the background color of the primary application interface may change from a first color to a second color, meaning the color value of the primary application interface changes. Therefore, to ensure consistency between the background view of the bottom bar and the primary application interface, the rendering thread can also perform color sampling on the background color of the primary application interface to obtain the first color value.

[0167] Step 709: The rendering thread fills the nodes to be drawn according to the first color value.

[0168] As an example, the node to be drawn is filled with the first color value.

[0169] It should be noted that the rendering thread can draw and fill multiple drawing nodes on the canvas, meaning that multiple views can be displayed on the canvas.

[0170] It should also be noted that after the rendering thread fills the canvas with content, the interface is not yet fully displayed, meaning the user cannot observe the interface at this time.

[0171] In some embodiments, the rendering thread can repeatedly execute the operation of step 707 above. When the node to be drawn is the drawing node corresponding to the view in the first application interface, the rendering thread can normally (according to relevant technologies) draw the content of the node to be drawn and continue to execute the operation of step 707 above until the rendering thread completes the drawing of all drawing nodes.

[0172] Step 710: After all drawing nodes are completed, the rendering thread sends drawing and rendering instructions to the GPU.

[0173] It should be noted that the rendering thread can convert the drawing and filling operations for each drawing node into corresponding rendering instructions, and package all rendering instructions into drawing and rendering instructions and send them to the GPU.

[0174] Step 711: The GPU renders and composites the target frame of the first application interface to display the target frame interface.

[0175] In some embodiments, see Figure 8 After receiving the rendering instructions, the GPU can perform rendering operations according to the rendering instructions corresponding to each rendering node. Then, the rendered view is sent to the interface management module (SurFaceFlinger). The interface management module can composite the multiple rendered views to obtain a composite interface. The interface management module can then send the composite interface to the hardware compositor (HWC). The hardware compositor can perform some processing on the composite interface and then send the processed composite interface to the display screen through the display driver to complete the display of the target frame interface.

[0176] It should be noted that since at least one frame interface in the first application interface is displayed sequentially according to the display order, the background color of the first application interface usually does not change even if the currently displayed frame interface changes. Therefore, after the rendering thread completes the display of the bottom bar and background view in the target frame interface, it can continue to display the bottom bar and background view while displaying other frames of the first application interface, without needing to process the background view of the bottom bar again.

[0177] In this embodiment of the application, when the display strategy of the bottom bar is to display the menu bar background color statically, the background color of the application interface can be used to fill the background color of the bottom bar, that is, the background color of the bottom bar is the same as the background color of the application interface. In this case, the background view of the bottom bar is integrated with the background of the application interface, thereby avoiding the problem of excessive color difference between the bottom bar and the content of the application interface, ensuring the harmony of the interface colors, reducing the sense of interface display fragmentation, and improving the aesthetics of the interface display.

[0178] It should be noted that the above explanation uses a static display strategy for the menu bar background color. The following explanation will use a dynamic display strategy for the menu bar background color. Please refer to [link / reference]. Figure 9 This method is illustrated using the interaction of multiple modules in an electronic device as an example. The method may include some or all of the following:

[0179] Step 901: The first application receives the startup operation.

[0180] Step 902: In response to the startup operation, the first application sends a display message to the view module.

[0181] Step 903: The view module responds to the display message and obtains the attribute information of the bottom bar corresponding to the first application.

[0182] Step 904: When the display strategy is to dynamically display the menu bar background color, the view module creates multiple views, including the background view corresponding to the bottom bar.

[0183] Step 905: The view module sends the attribute information of each view in the multiple views to the drawing node corresponding to each view.

[0184] Step 906: The view module triggers the rendering thread to perform its work through the thread rendering module.

[0185] Step 907: After being triggered, the rendering thread obtains the currently drawn node according to the view drawing order.

[0186] It should be noted that the operations of steps 901-907 can refer to the operations of steps 701-707 above, and will not be described in detail in this embodiment.

[0187] Step 908: When the node to be drawn is the drawing node corresponding to the background view of the bottom bar, and the attribute information of the node to be drawn indicates that the display strategy of the node to be drawn is dynamic display of the menu bar background color, the rendering thread performs a screenshot operation on the target area in the first application interface to obtain the first image.

[0188] Since the display strategy for the node to be drawn is to dynamically display the menu bar background color, the color of the background view of the bottom bar can change according to the color of the target area in the first application interface. Therefore, the rendering thread needs to obtain the color of the target area in the target frame interface of the first application interface. In order to obtain the color of the target area in the target frame interface, the rendering thread can perform a screenshot operation on the target area to obtain the first image.

[0189] It should be noted that the target area can refer to the region in the target frame interface whose display position is adjacent to the display position of the bottom bar. For example, this target area could be... Figure 6 The target area 4046 is shown in Figure (b), (c), or (d).

[0190] As an example, the size, shape, and position of the target area can be preset, and this application embodiment does not impose specific limitations on this.

[0191] It should be noted that the rendering thread can perform screenshot operations on the target area through the shader program, and of course, it can also perform screenshot operations in other ways. This application embodiment does not impose specific limitations on this.

[0192] Step 909: The rendering thread performs color sampling on the first image to obtain the first color value.

[0193] In one possible implementation, the rendering thread performs color sampling on the first image to obtain the first color value. This operation includes: counting the number of pixels corresponding to each color value in the first image; and determining the color value that occupies the most pixels as the first color value.

[0194] In other words, the rendering thread can determine the first color value from the first image by taking the mode.

[0195] In some embodiments, since the number of pixels of different colors is relatively even in the first image, after obtaining the first color value by taking the mode, if this first color value is used as the background color of the bottom bar, there will still be a significant color difference between the bottom bar and the target area. Therefore, in order to reduce the color difference between the bottom bar and the target area, the electronic device can also set a first quantity threshold, which is used to filter out suitable color values.

[0196] For example, after counting the number of pixels corresponding to each color value in the first image, the rendering thread determines the color value with the most pixels and obtains a reference color value; it then determines whether the number of pixels occupied by the reference color value is greater than or equal to a first quantity threshold; if the number of pixels occupied by the reference color value is greater than or equal to the first quantity threshold, the reference color value is determined as the first color value.

[0197] As an example, if the reference color value occupies the most pixels and the number of pixels occupied by the reference color value is less than the first threshold, the rendering thread can also choose other methods to redetermine the first color value.

[0198] For example, a second quantity threshold can also be set in the electronic device, and the rendering thread can determine the color value that occupies a number of pixels greater than or equal to the second quantity threshold from the first image to obtain at least one color value; the average of the at least one color value is determined to be the first color value.

[0199] It should be noted that both the first and second quantity thresholds can be preset according to requirements, and the first quantity threshold can be greater than or equal to the second quantity threshold.

[0200] In another possible implementation, the rendering thread can also sample the color values ​​of the first image to obtain multiple color values; the average of these multiple color values ​​is then used as the first color value. Alternatively, the rendering thread can also obtain the color values ​​of all pixels in the first image and determine the average of all pixel color values ​​to obtain the first color value.

[0201] It should be noted that the rendering thread can also determine the first color value in other ways. For example, the rendering thread can skip the screenshot operation and directly perform a color sampling operation on the target area. This application embodiment does not impose specific restrictions on this.

[0202] Step 910: The rendering thread fills the nodes to be drawn according to the first color value.

[0203] Step 911: After completing the drawing of all drawing nodes, the rendering thread sends drawing and rendering instructions to the GPU.

[0204] Step 912: The GPU renders and composites the target frame of the first application interface to display the target frame interface.

[0205] It should be noted that the operations of steps 910-912 can refer to the operations of steps 709-711 above, and will not be described in detail in this embodiment.

[0206] As described above, since at least one frame interface in the first application interface is displayed sequentially according to the display order, that is, if the currently displayed frame interface changes, the displayed content of the target area may change, and the color of the target area will also change accordingly. In order to ensure the color coordination between the background color of the bottom bar and the target area when the color changes within the target area, after the rendering thread completes the display of the bottom bar and background view in the target frame interface, it can continue to execute the operations of steps 908-912 during the subsequent display of other frame interfaces in the first application interface.

[0207] In this embodiment of the application, when the display strategy of the bottom bar is to dynamically display the background color of the menu bar, the background color of the bottom bar can be determined by the color of the area adjacent to the bottom bar. That is, the background color of the bottom bar is the same as or similar to the background color of the adjacent area. In this case, the background view of the bottom bar is visually integrated with the adjacent area in the application interface as much as possible, thereby avoiding the problem of excessive color difference between the bottom bar and the content of the application interface, ensuring the harmony of interface colors, reducing the sense of interface display fragmentation, and improving the aesthetics of the interface display.

[0208] It should be noted that the above Figure 7 or Figure 9 This paper uses the interaction of multiple modules in an electronic device as an example to illustrate the interface display method. Next, to further understand the embodiments of this application, the method will be described using an electronic device with a bottom bar display function as an example. Please refer to [link / reference]. Figure 10 , Figure 10 This is a schematic diagram illustrating a method for displaying an interface according to another exemplary embodiment. As an example and not a limitation, the method may include some or all of the following:

[0209] Step 1001: In response to the display operation of the target frame interface in the first application interface, determine whether to display the bottom bar in the display interface where the target frame interface is located. If yes, then perform the operation of step 1002 below; otherwise, end.

[0210] It should be noted that the target frame is a frame of the interface to be displayed in the first application interface. For example, the target frame could be the first frame of the interface displayed when the first application starts.

[0211] To enrich the functionality of electronic devices, they can be configured to display a bottom bar at the bottom of the application interface when displaying certain applications, or to not display a bottom bar when displaying other application interfaces. Therefore, for accurate interface display, the electronic device can determine whether to display the bottom bar in the display interface of the target frame interface in response to the display operation of the target frame interface in the first application interface.

[0212] In some embodiments, the electronic device may determine whether to display the bottom bar in the display interface where the target frame interface is located based on the application identifier of the application in which the first application interface is located.

[0213] For example, the electronic device can store a correspondence between application identifiers and bottom bar display states. Thus, the electronic device can determine the corresponding bottom bar display state based on the application identifier of the application to which the first application interface is located, from the correspondence between application identifiers and bottom bar display states. If the bottom bar display state is "not displayed," it is determined that the bottom bar will not be displayed in the display interface of the target frame interface; if the bottom bar display state is "displayed," it is determined that the bottom bar will be displayed in the display interface of the target frame interface.

[0214] Of course, electronic devices can also be set to display the bottom bar regardless of the application interface. In this case, the electronic device can directly execute the following step 1002 in response to the display operation of the target frame interface in the first application interface.

[0215] Step 1002: Obtain the attribute information of all views in the target frame interface, as well as the attribute information of the bottom bar.

[0216] In some embodiments, the application layer of the electronic device may store an attribute file containing attribute information of the bottom bar corresponding to each application and attribute information of the application interface of each application. Therefore, the electronic device can read the attribute file and, based on the application identifier of the first application, obtain the attribute information of the bottom bar corresponding to the first application, as well as the attribute information of each view in the target frame interface of the first application.

[0217] It should be noted that the bottom bar's attribute information includes its display strategy, display position, and size. The display strategy includes dynamically displaying the menu bar background color, statically displaying the menu bar background color, or having no background.

[0218] In some embodiments, if the electronic device determines, based on the attribute information of the bottom bar, that the display strategy of the bottom bar is dynamic display of the menu bar background color or static display of the menu bar background color, the electronic device can also create a background view, which is displayed as the background of the bottom bar. That is, when the display strategy of the bottom bar is dynamic display of the menu bar background color or static display of the menu bar background color, the electronic device can create multiple views, including the background view, the view corresponding to the bottom bar, and all views in the target frame interface.

[0219] It should be noted that when the display strategy of the bottom bar is to dynamically display the menu bar background color or statically display the menu bar background color, the attribute information of the bottom bar can also include the attribute information of the background view.

[0220] In some embodiments, the electronic device determines the display strategy of the bottom bar based on its attribute information. If the menu bar does not have a background, the electronic device does not need to create a background view. That is, the background view is not included among the multiple views created by the electronic device.

[0221] Step 1003: Synchronize the attribute information of each view in the multiple views to the drawing node corresponding to each view.

[0222] As can be seen from the above, after creating multiple views, the electronic device will also create drawing nodes corresponding to each view. That is, multiple views correspond to multiple drawing nodes, and multiple views correspond one-to-one with multiple drawing nodes.

[0223] To facilitate interface rendering, electronic devices can synchronize the attribute information of each view in multiple views to the corresponding drawing node of each view.

[0224] It should be noted that the operation of step 1003 can refer to the operation of step 705 above, and this application embodiment will not describe it in detail.

[0225] Step 1004: Obtain the first drawing node from multiple drawing nodes.

[0226] It should be noted that the first drawing node is the node to be drawn among multiple drawing nodes, obtained according to the view drawing order.

[0227] Step 1005: Based on the attribute information of the first drawing node, determine whether the first drawing node needs to perform dynamic color picking. If yes, proceed to step 1006 below. If no, proceed to step 1011 below.

[0228] As described above, different views have different attribute information. Therefore, the electronic device can determine whether the first drawing node needs to be dynamically color-picked based on its attribute information. If the first drawing node needs to be dynamically color-picked, it is usually the drawing node corresponding to the background view of the bottom bar. Therefore, the electronic device can continue to perform the following step 1006.

[0229] If dynamic color picking is not required for the first drawing node, the first drawing node may be the drawing node corresponding to the background view of the bottom bar, or it may be the drawing node corresponding to the view in the target frame interface. If the first drawing node is the drawing node corresponding to the background view of the bottom bar, and dynamic color picking is not required, it means that the background view color is fixed, and the electronic device can draw the first drawing node according to relevant technologies. If the first drawing node is the drawing node corresponding to the view in the target frame interface, the electronic device can also draw the first drawing node according to relevant technologies, that is, the electronic device can perform the operation of step 1011 below.

[0230] Step 1006: Based on the location of the first drawing node, perform a screenshot operation on the target area to obtain the first image.

[0231] As can be seen from the above, the attribute information of the drawing node includes the position of the drawing node. Therefore, the electronic device can determine the position of the target area based on the position of the first drawing node, and perform a screenshot operation on the target area to obtain the first image.

[0232] Step 1007: Perform a color sampling operation on the first image to obtain the first color value.

[0233] It should be noted that the operations of steps 1006-1007 can refer to the operations of steps 908-909 above, and will not be described in detail in this embodiment.

[0234] Step 1008: Use the first color value as the background content of the first drawing node and fill the first drawing node.

[0235] That is, set the background color of the first drawing node to the first color value.

[0236] Step 1009: Draw the content in the first drawing node except for the background content, and perform the operation in step 1011 below.

[0237] Since there may be other content in the first drawing node, the electronic device can draw content other than the background content after drawing the background content of the first drawing node.

[0238] Step 1010: Draw the content of the first drawing node and perform the operation of step 1011 below.

[0239] Step 1011: Determine whether the target frame interface has been drawn. If yes, proceed to step 1012 below. If not, return to step 1004 above.

[0240] It should be noted that "the target frame interface is not fully drawn" means that there are still undrawn drawing nodes among the multiple drawing nodes. Therefore, the electronic device can continue to return to the operation of step 1004 until the target frame interface is fully drawn.

[0241] Step 1012: Render and composite the target frame interface using the GPU to display the target frame interface.

[0242] It should be noted that the operation of step 1012 can refer to the operation of step 711 above, and this application embodiment will not describe it in detail.

[0243] In this embodiment of the application, when a bottom bar is displayed at the bottom of the application interface, the similarity between the background color of the bottom bar and the colors involved in the application interface can be greater than or equal to a similarity threshold. In this case, the bottom bar and the application interface are similar or the same color, thereby avoiding the problem of excessive color difference between the bottom bar and the content of the application interface, ensuring the harmony of the interface colors, reducing the sense of disjointedness in the interface display, and improving the aesthetics of the interface display.

[0244] Please refer to Figure 11 , Figure 11 This is a schematic flowchart illustrating a method for displaying an interface according to another exemplary embodiment. By way of example and not limitation, this method is used in electronic devices, and the method may include some or all of the following:

[0245] Step 1101: Receive the display operation of the target frame interface in the first application interface.

[0246] It should be noted that the first application interface can be any application interface in the electronic device. For example, the first application interface can be the application interface of any application, or it can be the desktop. The target frame interface is the frame interface to be displayed among at least one frame interface included in the first application interface.

[0247] In some embodiments, the display operation of the target frame interface may include the launch operation of the first application. In this case, the target frame interface may be the first frame interface of the first application, that is, the first frame interface in the first application interface.

[0248] In some embodiments, the display operation of the target frame interface can also be an operation such as a swipe operation or a click operation of the first application interface. When the electronic device displays the previous frame of the target frame interface, the electronic device can receive a display operation for the target frame interface. The previous frame of the target frame interface is also a frame interface in the first application interface. For example, the previous frame of the first application interface can be one of the aforementioned... Figure 6 The short video playback interface 404 shown in Figure (b) can be the target frame interface described above. Figure 6 The first user interface 4043 shown in (c) above, or the target frame interface can be the one described above. Figure 6 The second user interface 4045 is shown in Figure (d).

[0249] Step 1102: In response to the display operation, display the target frame interface.

[0250] As an example, in response to a display operation, an electronic device can create all views in the target frame interface through the view module and obtain the attribute information of all views in the target frame interface; the attribute information of all views in the target frame interface is then synchronized to the drawing node corresponding to each view. When triggered, the rendering thread can draw the drawing nodes in the target frame interface according to the view drawing order (node ​​drawing order) to obtain the target frame interface.

[0251] Step 1103: During the display of the target frame interface, display the bottom menu bar at the bottom of the target frame interface according to the first color value.

[0252] It should be noted that the first color value is used to indicate the background color of the bottom menu bar (bottom bar), and the similarity between the first color value and the color values ​​involved in the target frame interface is greater than or equal to the similarity threshold.

[0253] As an example, the similarity threshold can be preset according to requirements, such as 99%, 98%, 95%, 90%, etc.

[0254] In some embodiments, before displaying the target frame interface, the electronic device can determine whether to display a bottom menu bar at the bottom of the target frame interface, i.e., whether to display a bottom bar in the interface where the target frame interface is located. If it is determined that the bottom bar will be displayed in the interface where the target frame interface is located, the electronic device, in addition to creating all views in the target frame interface and the view corresponding to the bottom bar, can also create a background view corresponding to the bottom bar and determine the attribute information of the bottom menu bar in the first application interface. The attribute information of the bottom menu bar in the first application interface includes at least one of the following: dynamically displayed menu bar background color, statically displayed menu bar background color, no background for the menu bar, display shape of the bottom bar, display position, or display size of the bottom bar. The three pieces of information—dynamically displayed menu bar background color, statically displayed menu bar background color, and no background for the menu bar—will not appear simultaneously in the attribute information.

[0255] It should be noted that dynamic display of menu bar background color means that the color of the area where the bottom menu bar is located (the background view of the bottom bar) changes with the color of the target area, while static display of menu bar background color means that the color of the area where the bottom menu bar is located is fixed and does not change with the color of the target area.

[0256] As an example, when an electronic device determines that a bottom bar will be displayed in the interface where the target frame interface is located, the electronic device can create the background view of the bottom bar during the process of creating all views in the target frame interface. Alternatively, the background view of the bottom bar can be created after the creation of all views in the target frame interface is completed; or, the background view of the bottom bar can be created before the creation of all views in the target frame interface is completed. That is, the background view of the bottom bar is created before the rendering thread renders the drawing nodes, and the embodiments of this application do not specifically limit the timing of creating the view corresponding to the bottom bar.

[0257] As an example, the background view of the bottom bar can also be created by the view module in the electronic device, and after the view module creates the background view of the bottom bar, it can synchronize the attribute information of the bottom bar in the first application interface to the corresponding drawing node.

[0258] It is worth noting that by setting different display methods for the bottom bar, the interface display methods are enriched, ensuring the interface's aesthetic appeal.

[0259] In some embodiments, the operation of displaying a bottom menu bar at the bottom of the target frame interface according to a first color value during the display of the target frame interface by the electronic device includes: when the attribute information includes a static display of the menu bar background color, obtaining the background color corresponding to the first application interface (or the target frame interface) and obtaining the first color value; displaying the bottom menu bar in the target frame interface and setting the background color of the bottom menu bar to the first color value.

[0260] Normally, the background color of the first application interface is a solid color and is fixed, that is, the background color of the target frame interface is fixed. Therefore, the electronic device can directly obtain the background color value from the attribute information of the first application interface and determine the obtained background color value as the first color value.

[0261] Alternatively, since the background color of the bottom bar is statically displayed when the attribute information includes the background color of the menu bar, the color of the background view of the bottom bar is fixed and the attribute information of the bottom bar already carries the color value. Thus, the electronic device can directly obtain the corresponding color value from the attribute information of the bottom bar and determine the obtained color value as the first color value.

[0262] Of course, sometimes during holidays, to enhance the festive atmosphere, the first application interface may change, and the background color of the first application interface may change from a first color to a second color, that is, the color value of the first application interface changes. Therefore, to ensure the consistency between the background view of the bottom bar and the first application interface, the electronic device can also perform color sampling on the background color of the first application interface to obtain the first color value.

[0263] It is worth noting that by setting the background color of the bottom bar to the same color as the background color of the interface, the color coordination of the interface is ensured, the sense of interface disjointness is reduced, and the aesthetics of the interface are improved.

[0264] As can be seen from the above, the attribute information of the bottom bar may also include the dynamic display of the menu bar background color. In this case, during the display of the target frame interface, the operation of the electronic device to display the bottom menu bar at the bottom of the target frame interface according to the first color value includes: obtaining the first color value according to the color of the target area; and filling the area where the bottom menu bar is located according to the first color value.

[0265] It is worth noting that by setting the background color of the bottom bar to be the same as or similar to the color of the adjacent area, the problem of excessive color difference between the bottom bar and the application interface content is avoided, ensuring the color coordination of the interface. Furthermore, the background color of the bottom bar changes with the color of the target area, thereby enhancing the richness and aesthetics of the interface display.

[0266] In some embodiments, before the electronic device obtains the first color value based on the color of the target area, it may also draw multiple views in the current interface in the order of view drawing during the process of displaying the target frame interface. The multiple views include the views involved in the target frame interface, the view corresponding to the bottom bar, and the background view corresponding to the bottom menu bar. The background view is used to display the background color corresponding to the bottom menu bar.

[0267] As described above, this background view is created when the attribute information of the bottom bar includes whether the menu bar background color is dynamically or statically displayed. Thus, after creating multiple views, the electronic device can obtain the view drawing order. Therefore, during the process of drawing multiple views according to the view drawing order, when the background view is drawn, and its attribute information includes the dynamically displayed menu bar background color, the electronic device can obtain the first color value based on the color of the target area.

[0268] It is worth noting that since each view has different attribute information, the drawing method for the corresponding view is determined based on the attribute information, thereby improving the accuracy of view drawing.

[0269] In some embodiments, when the electronic device draws to the background view in the order of view drawing and the attribute information includes the dynamic display of the menu bar background color, it can perform a screenshot operation on the target area to obtain a first image; and perform color sampling processing on the first image to obtain a first color value.

[0270] It is worth noting that by taking a screenshot of the target area, it is easier to determine the color sampling range, thus improving the accuracy of determining the first color value.

[0271] As an example, the operation of an electronic device to perform color sampling on a first image to obtain a first color value includes: counting the number of pixels corresponding to each color value in the first image; and determining the color value that occupies the most pixels as the first color value.

[0272] In other words, the electronic device can determine the first color value from the first image by taking the mode.

[0273] In some embodiments, since the number of pixels of different colors is relatively even in the first image, after obtaining the first color value by taking the mode, if this first color value is used as the background color of the bottom bar, there will still be a significant color difference between the bottom bar and the target area. Therefore, in order to reduce the color difference between the bottom bar and the target area, the electronic device can also set a first quantity threshold, which is used to filter out suitable color values.

[0274] For example, after counting the number of pixels corresponding to each color value in the first image, the electronic device determines the color value with the most pixels and obtains a reference color value; it then determines whether the number of pixels occupied by the reference color value is greater than or equal to a first quantity threshold; if the number of pixels occupied by the reference color value is greater than or equal to the first quantity threshold, the reference color value is determined as the first color value.

[0275] As an example, if the reference color value occupies the largest number of pixels and the number of pixels occupied by the reference color value is less than the first quantity threshold, the electronic device may also choose other methods to redetermine the first color value.

[0276] For example, a second quantity threshold may also be set in the electronic device, and the electronic device can determine the color value that occupies a number of pixels greater than or equal to the second quantity threshold from the first image to obtain at least one color value; the average of the at least one color value is determined to be the first color value.

[0277] It should be noted that both the first and second quantity thresholds can be preset according to requirements, and the first quantity threshold can be greater than or equal to the second quantity threshold.

[0278] As an example, an electronic device may also simply set a second quantity threshold and determine the first color value based on the second quantity threshold; this application embodiment does not impose specific limitations on this.

[0279] It is worth noting that the first color value is determined by taking the mode, thereby ensuring that the background color of the bottom bar is as similar as possible to the colors of the adjacent areas, reducing the sense of interface disjointness.

[0280] In another possible implementation, the electronic device may sample the color values ​​of the first image to obtain multiple color values; the average of the multiple color values ​​is then determined as the first color value. Alternatively, the electronic device may acquire the color values ​​of all pixels in the first image and determine the average of the color values ​​of all pixels to obtain the first color value.

[0281] In some embodiments, the electronic device may also determine the first color value in other ways. For example, the electronic device may not perform a screenshot operation but directly perform a color sampling operation on the target area. Alternatively, the electronic device may determine the average color value of all pixels in the target area to obtain a second color value, determine the color value of each of a plurality of candidate colors to obtain a plurality of third color values, and determine any one of the plurality of third color values ​​as the first color value. The similarity between each of the plurality of candidate colors and the color indicated by the second color value is greater than or equal to a similarity threshold. This application embodiment does not impose specific limitations in this regard.

[0282] It is worth noting that different methods are used to perform color sampling operations on the target area, thereby increasing the richness of operations.

[0283] In this embodiment of the application, when a bottom bar is displayed at the bottom of the application interface, the similarity between the background color of the bottom bar and the colors involved in the application interface can be greater than or equal to a similarity threshold. In this case, the bottom bar and the application interface are similar or the same color, thereby avoiding the problem of excessive color difference between the bottom bar and the content of the application interface, ensuring the harmony of the interface colors, reducing the sense of disjointedness in the interface display, and improving the aesthetics of the interface display.

[0284] Figure 12 This is a schematic diagram of the structure of an interface display device provided in an embodiment of this application. This device can be implemented as part or all of an electronic device by software, hardware, or a combination of both. This electronic device can be... Figure 2 The electronic device shown. See also Figure 12 The device includes: a receiving module 1201, a first display module 1202, and a second display module 1203.

[0285] The receiving module 1201 is used to receive a display operation on a target frame interface in a first application interface. The first application interface is any application interface in the electronic device, and the target frame interface is a frame interface to be displayed among at least one frame interface included in the first application interface.

[0286] The first display module 1202 is used to display the target frame interface in response to a display operation;

[0287] The second display module 1203 is used to display a bottom menu bar at the bottom of the target frame interface according to a first color value during the display of the target frame interface. The first color value is used to indicate the background color of the bottom menu bar, and the similarity between the first color value and the color value involved in the target frame interface is greater than or equal to a similarity threshold.

[0288] In this embodiment of the application, when a bottom bar is displayed at the bottom of the application interface, the similarity between the background color of the bottom bar and the colors involved in the application interface can be greater than or equal to a similarity threshold. In this case, the bottom bar and the application interface are similar or the same color, thereby avoiding the problem of excessive color difference between the bottom bar and the content of the application interface, ensuring the harmony of the interface colors, reducing the sense of disjointedness in the interface display, and improving the aesthetics of the interface display.

[0289] It should be noted that the display device of the interface provided in the above embodiments is only illustrated by the division of the above functional modules. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0290] The functional units and modules in the above embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of the embodiments of this application.

[0291] The interface display device and interface display method embodiments provided in the above embodiments belong to the same concept. The specific working process and technical effects of the units and modules in the above embodiments can be found in the method embodiment section, and will not be repeated here.

[0292] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another via wired (e.g., coaxial cable, fiber optic, Digital Subscriber Line, DSL) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer, or a data storage device such as a server or data center that integrates one or more available media. The available media can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., Digital Versatile Discs (DVDs)), or semiconductor media (e.g., Solid State Disks (SSDs)).

[0293] The above-described embodiments are optional embodiments provided by this application and are not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the technical scope disclosed in this application should be included within the protection scope of this application.

Claims

1. A method for displaying an interface, characterized in that, When applied to electronic devices, the method includes: Receive a display operation on a target frame interface in a first application interface, wherein the first application interface is any application interface in the electronic device, and the target frame interface is a frame interface to be displayed among at least one frame interface included in the first application interface. In response to the display operation, the target frame interface is displayed; During the display of the target frame interface, a bottom menu bar is displayed at the bottom of the target frame interface according to a first color value. The first color value is used to indicate the background color of the bottom menu bar, and the similarity between the first color value and the color value involved in the target frame interface is greater than or equal to a similarity threshold.

2. The method as described in claim 1, characterized in that, The process of displaying the target frame interface, before displaying the bottom menu bar at the bottom of the target frame interface according to the first color value, further includes: Determine the attribute information of the bottom menu bar in the first application interface, the attribute information including whether the menu bar background color is dynamically displayed or statically displayed; The dynamic display of the menu bar background color means that the color of the area where the bottom menu bar is located changes with the color of the target area, while the static display of the menu bar background color means that the color of the area where the bottom menu bar is located is fixed and does not change with the color of the target area.

3. The method as described in claim 2, characterized in that, During the process of displaying the target frame interface, displaying a bottom menu bar at the bottom of the target frame interface according to a first color value includes: During the process of displaying the target frame interface, when the attribute information includes the static display of the menu bar background color, the background color of the background area in the target frame interface is obtained to obtain the first color value; The bottom menu bar is displayed in the target frame interface, and the background color of the bottom menu bar is set to the first color value.

4. The method as described in claim 2, characterized in that, During the process of displaying the target frame interface, displaying a bottom menu bar at the bottom of the target frame interface according to a first color value includes: During the display of the target frame interface, when the attribute information includes the dynamic display of the menu bar background color, the first color value is obtained according to the color of the target area, wherein the target area is the area in the target frame interface adjacent to the bottom menu bar; Fill the area where the bottom menu bar is located with the first color value.

5. The method as described in claim 4, characterized in that, During the process of displaying the target frame interface, when the attribute information includes the dynamic display of the menu bar background color, obtaining the first color value based on the color of the target area includes: During the process of displaying the target frame interface, multiple views in the current interface are drawn sequentially according to the view drawing order. The multiple views include the views involved in the target frame interface, the view corresponding to the bottom menu bar, and the background view corresponding to the bottom menu bar. The background view is used to display the background color corresponding to the bottom menu bar. When the background view is drawn according to the view drawing order and the attribute information includes the dynamic display of the menu bar background color, the first color value is obtained based on the color of the target area.

6. The method as described in claim 5, characterized in that, When the background view is drawn according to the view drawing order, and the attribute information includes the dynamic display of the menu bar background color, obtaining the first color value based on the color of the target area includes: When the background view is drawn and the attribute information includes the dynamic display of the menu bar background color, a screenshot operation is performed on the target area to obtain a first image; The first image is subjected to color sampling processing to obtain the first color value.

7. The method as described in claim 6, characterized in that, The step of performing color sampling processing on the first image to obtain the first color value includes: Count the number of pixels corresponding to each color value in the first image; The color value that occupies the most pixels is determined as the first color value.

8. The method as described in claim 6, characterized in that, The step of performing color sampling processing on the first image to obtain the first color value includes: Color values ​​are sampled from the first image to obtain multiple color values; The average of the plurality of color values ​​is determined as the first color value.

9. An electronic device, characterized in that, The device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, characterized in that, when the processor executes the computer program, the electronic device performs the method as described in any one of claims 1-8.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions that, when executed on a computer, cause the computer to perform the method as described in any one of claims 1-8.

11. A computer program product, characterized in that, Includes a computer program, which, when run, causes the method as described in any one of claims 1-8 to be performed.

Images