Interface display method, electronic equipment and storage medium

Abstract

The invention discloses an interface display method, electronic equipment and a storage medium, and belongs to the technical field of computers. The method comprises the following steps: receiving a first interface display instruction, wherein the first interface display instruction is used for indicating to display a first interface of a target application program; when the electronic equipment is in a large-screen state and the interface identifier of the first interface is a first preset interface identifier, adjusting visual element layout data in original interface data of the first interface according to a first preset layout rule corresponding to the first interface, the visual element layout of the first interface is matched with the large screen state of the electronic equipment; and displaying the first interface according to the adjusted interface data of the first interface. By adjusting the visual element layout of the first interface of the target application program in the large-screen state, the interface content can be displayed as much as possible while the interface display effect of the first interface is ensured, so that the view advantage of the electronic equipment in the large-screen state can be brought into full play, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to an interface display method, an electronic device and a storage medium. Background Art

[0002] With the continuous development of computer technology, electronic devices such as mobile phones, tablet computers, and foldable screen phones are becoming more and more popular, bringing great convenience to people's daily lives. Users can install various applications in electronic devices to realize corresponding functions. However, most of the application interfaces are currently designed for ordinary mobile phones, and are often poorly adapted to large-screen devices such as tablet computers and foldable screen phones. In other words, the interfaces of these applications are often difficult to achieve good display effects on large-screen devices, which will affect the user experience. Summary of the invention

[0003] The present application provides an interface display method, an electronic device and a storage medium, which can improve the interface display effect and the user experience. The technical solution is as follows:

[0004] In a first aspect, an interface display method is provided. In the method, an electronic device receives a first interface display instruction, and the first interface display instruction is used to instruct to display a first interface of a target application. When the electronic device is in a large-screen state and the interface identifier of the first interface is a first preset interface identifier, the visual element layout data in the original interface data of the first interface is adjusted according to the first preset layout rule corresponding to the first interface, so that the visual element layout of the first interface matches the large-screen state of the electronic device. Afterwards, the first interface is displayed according to the adjusted interface data of the first interface.

[0005] An electronic device has two screen states, one can be called a small-screen state, and the other can be called a large-screen state. The small-screen state refers to a state with a screen ratio (i.e., screen aspect ratio) similar to that of an ordinary mobile phone. The large-screen state refers to a state with a screen ratio that is significantly different from that of an ordinary mobile phone. For example, if the electronic device is a tablet computer, the vertical screen mode of the tablet computer can be called a small-screen state, and the horizontal screen mode of the tablet computer can be called a large-screen state. If the electronic device is a folding screen device, the folded state of the folding screen device can be called a small-screen state, and the unfolded state of the folding screen device can be called a large-screen state.

[0006] The target application may be any application installed in the electronic device, and specifically may be an application with interface adaptation requirements among the applications installed in the electronic device. For example, the target application may be a shopping application, a browser application, or the like. For example, when the target application is a shopping application, the first interface may be the homepage or product details page of the shopping application.

[0007] The first preset interface identifier can be set in advance. The number of first preset interface identifiers can be one or more. The interface identified by the first preset interface identifier is an interface that has an interface adaptation requirement in the large-screen state of the electronic device. In the present application, when the interface identified by the first preset interface identifier is displayed, its visual element layout can be adjusted to match the large-screen state of the electronic device.

[0008] Matching the visual element layout of an interface with the large-screen state of an electronic device means that, under the large-screen state of the electronic device, the visual element layout of the interface can display as much interface content as possible while ensuring the aesthetics of the interface display, so as to improve the interface display effect and user experience and give full play to the visual field advantage of the large-screen state of the electronic device.

[0009] In the present application, for the first interface in the target application, when the electronic device is not in the large-screen state, the electronic device can directly display the first interface according to the original interface data of the first interface. When the electronic device is in the large-screen state, but the interface identifier of the first interface is not the first preset interface identifier, that is, when the first interface is not a specific interface, the first interface is still displayed according to the original interface data of the first interface. Only when the electronic device is in the large-screen state and the first interface is a specific interface, the visual element layout data in the original interface data of the first interface is automatically adjusted according to the first preset layout rule, and the first interface is displayed according to the adjusted interface data of the first interface, so that the visual element layout of the first interface matches the large-screen state of the electronic device. In this way, only for the specific interface with interface adaptation requirements in the target application, the visual element layout is adjusted in the large-screen state, and other interfaces are still displayed in the ordinary way, so that the display of the interface in the target application can be flexibly realized, and the user experience of the target application is improved. In addition, by adjusting the visual element layout of the specific interface in the target application in the large-screen state, the interface display effect of the specific interface can be guaranteed while displaying as much interface content as possible, so that the visual advantage of the large-screen state of the electronic device can be fully utilized to improve the user experience.

[0010] Optionally, a first adjustment control is displayed on an upper layer of the first interface, and the first adjustment control is used to adjust the interface display ratio of the first interface, that is, to adjust the size of the display area where the first interface is located.

[0011] In this case, after displaying the first interface according to the adjusted interface data of the first interface, the electronic device can also determine the interface display ratio of the first interface in response to a triggering operation on the first adjustment control; obtain the second preset layout rule corresponding to the first interface according to the interface display ratio of the first interface; adjust the visual element layout data in the original interface data of the first interface according to the second preset layout rule; and display the first interface according to the adjusted interface data of the first interface.

[0012] In the present application, while displaying the first interface, the electronic device can also display a first adjustment control on the upper layer of the first interface, and the user can adjust the display size of the first interface through the first adjustment control. Specifically, when the electronic device detects the triggering operation of the first adjustment control, it can determine the interface display ratio of the first interface, and then obtain the second preset layout rule corresponding to the first interface according to the interface display ratio. After that, the visual element layout of the first interface can be adjusted according to the second preset layout rule, so that the visual element layout of the first interface matches the display area corresponding to the interface display ratio. In this way, when the first interface is displayed in the display area, the visual element layout of the first interface can display as much interface content as possible while ensuring the aesthetics of the interface display, thereby improving the interface display effect and user experience.

[0013] Optionally, the electronic device can also receive a second interface display instruction in the first interface, and the second interface display instruction is used to instruct the display of the second interface of the target application; when the electronic device is in a large-screen state and the interface identifier of the second interface is a second preset interface identifier, the first interface is displayed in the first display area according to the interface data of the first interface, and the second interface is displayed in the second display area according to the interface data of the second interface.

[0014] In the present application, after the electronic device displays the first interface in the first display area according to the interface data of the first interface, and displays the second interface in the second display area according to the interface data of the second interface, the electronic device simultaneously displays the first interface and the second interface. In this case, the user can browse and operate the two interfaces at the same time. Moreover, compared with the aspect ratio of the electronic device when it is displayed in full screen in a large screen state, the aspect ratio of the first display area and the aspect ratio of the second display area are closer to the screen aspect ratio of an ordinary mobile phone, so the first interface and the second interface are more coordinated and beautiful when displayed at the same time. This can improve the user experience.

[0015] Optionally, a second adjustment control is displayed on the boundary line between the first display area and the second display area, and the second adjustment control is used to adjust the interface display ratio of the first interface and the second interface, that is, to adjust the size of the first display area and the second display area.

[0016] In this case, after the electronic device displays the first interface in the first display area according to the interface data of the first interface and displays the second interface in the second display area according to the interface data of the second interface, it can also determine the interface display ratio of the first interface and the interface display ratio of the second interface in response to the triggering operation of the second adjustment control; obtain the third preset layout rule corresponding to the first interface according to the interface display ratio of the first interface, and obtain the fourth preset layout rule corresponding to the second interface according to the interface display ratio of the second interface; adjust the visual element layout data in the original interface data of the first interface according to the third preset layout rule, and adjust the visual element layout data in the original interface data of the second interface according to the fourth preset layout rule; display the first interface in the first display area according to the adjusted interface data of the first interface, and display the second interface in the second display area according to the adjusted interface data of the second interface.

[0017] In the present application, the electronic device can not only display the first interface and the second interface at the same time, but also allow the user to adjust the display size of the first interface and the second interface. Specifically, when the electronic device detects the triggering operation of the second adjustment control, it can determine the interface display ratio of the first interface and the second interface, and accordingly determine the third preset layout rule corresponding to the first interface and the fourth preset layout rule corresponding to the second interface. After that, the visual element layout of the first interface can be adjusted according to the third preset layout rule so that the visual element layout of the first interface matches the first display area, and the visual element layout of the second interface can be adjusted according to the fourth preset layout rule so that the visual element layout of the second interface matches the second display area. In this way, when the first interface is displayed in the first display area and the second interface is displayed in the second display area, the visual element layout of the first interface and the second interface can display as much interface content as possible while ensuring the aesthetics of the interface display, thereby improving the interface display effect and user experience.

[0018] Optionally, the operation of the electronic device obtaining the third preset layout rule corresponding to the first interface according to the interface display ratio of the first interface, and obtaining the fourth preset layout rule corresponding to the second interface according to the interface display ratio of the second interface may be: if the interface display ratio of the first interface and the interface display ratio of the second interface are both greater than or equal to the interface display ratio threshold, then obtaining the third preset layout rule corresponding to the first interface according to the interface display ratio of the first interface, and obtaining the fourth preset layout rule corresponding to the second interface according to the interface display ratio of the second interface.

[0019] If the interface display ratio of one of the first interface and the second interface is less than the interface display ratio threshold, the interface display ratio of the other interface is re-determined to be 100%, and the preset layout rule corresponding to the other interface is obtained according to the interface display ratio of the other interface; the visual element layout data in the original interface data of the other interface is adjusted according to the preset layout rule corresponding to the other interface; and the other interface is displayed according to the adjusted interface data of the other interface.

[0020] In the present application, the user can use the second adjustment control to simply and quickly switch from dual-interface display to single-interface display, thus providing a quick switching method that can better meet user needs and improve user experience.

[0021] In a second aspect, an interface display method is provided, which is applied to an electronic device, wherein the electronic device is installed with a target application, and the application framework layer of the electronic device includes a layout manager and a view system. In the method, after the target application receives the first interface display instruction, it sends the original interface data of the first interface to the layout manager, and the first interface display instruction is used to indicate the display of the first interface of the target application. After the layout manager receives the original interface data of the first interface, when the electronic device is in a large-screen state and the interface identifier of the first interface is a first preset interface identifier, the visual element layout data in the original interface data of the first interface is adjusted according to the first preset layout rule corresponding to the first interface, so that the visual element layout of the first interface matches the large-screen state, and then the layout manager sends the adjusted interface data of the first interface to the view system. After the view system receives the adjusted interface data of the first interface, it displays the first interface according to the adjusted interface data of the first interface.

[0022] In this application, the layout of visual elements of the first interface can be automatically adjusted at the application framework layer, so that the interface can be automatically adapted without the target application being aware of it. In this case, there is no need to develop an interface specifically adapted to the electronic device for the target application, thereby saving application development costs.

[0023] In a third aspect, an interface display device is provided, wherein the interface display device has the function of implementing the behavior of the interface display method in the first aspect or the second aspect. The interface display device includes at least one module, and the at least one module is used to implement the interface display method provided in the first aspect or the second aspect.

[0024] In a fourth aspect, an electronic device is provided, wherein the structure of the electronic device includes a processor and a memory, wherein the memory is used to store a program that supports the electronic device to execute the interface display method provided in the first aspect or the second aspect, and to store data involved in implementing the interface display method described in the first aspect or the second aspect. The processor is configured to execute the program stored in the memory. The electronic device may also include a communication bus, wherein the communication bus is used to establish a connection between the processor and the memory.

[0025] In a fifth aspect, a computer-readable storage medium is provided, wherein instructions are stored in the computer-readable storage medium, and when the computer-readable storage medium is run on a computer, the computer executes the interface display method described in the first aspect or the second aspect.

[0026] In a sixth aspect, a computer program product comprising instructions is provided, which, when executed on a computer, enables the computer to execute the interface display method described in the first aspect or the second aspect.

[0027] The technical effects obtained by the third, fourth, fifth and sixth aspects are similar to the technical effects obtained by the corresponding technical means in the first and second aspects, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] Figure 1 This is a schematic diagram of an interface provided by an embodiment of the present application;

[0029] Figure 2 is a structural schematic diagram of an electronic device provided in an embodiment of the present application;

[0030] Figure 3 is a block diagram of a software system of an electronic device provided in an embodiment of the present application;

[0031] Figure 4 is a schematic diagram of a screen state of a tablet computer provided in an embodiment of the present application;

[0032] Figure 5 is a schematic diagram of a screen state of a folding screen device provided in an embodiment of the present application;

[0033] Figure 6 It is a schematic diagram of a setting interface of a UI adaptive layout mode provided in an embodiment of the present application;

[0034] Figure 7 is a schematic diagram of a setting interface of a dual-interface display mode provided in an embodiment of the present application;

[0035] Figure 8 is a flow chart of an interface display method provided in an embodiment of the present application;

[0036] Fig. 9 is a schematic diagram of a first interface provided in an embodiment of the present application;

[0037] Fig.10 is a flow chart of another interface display method provided in an embodiment of the present application;

[0038] Fig.11 is a flow chart of another interface display method provided in an embodiment of the present application;

[0039] Fig.12 is a schematic diagram of a first adjustment control provided in an embodiment of the present application;

[0040] Fig.13 is a schematic diagram of another first interface provided in an embodiment of the present application;

[0041] Fig.14 is a flow chart of another interface display method provided in an embodiment of the present application;

[0042] Fig.15 is a schematic diagram of a first interface and a second interface provided in an embodiment of the present application;

[0043] Fig.16 is a flow chart of another interface display method provided in an embodiment of the present application;

[0044] Fig.17 is a schematic diagram of a second adjustment control provided in an embodiment of the present application;

[0045] Fig.18 is a schematic diagram of another first interface and a second interface provided in an embodiment of the present application;

[0046] Fig.19 is a schematic diagram of an interface in a shopping application provided in an embodiment of the present application;

[0047] Fig. 20 It is a schematic diagram of an interface in another shopping application provided in an embodiment of the present application. DETAILED DESCRIPTION

[0048] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below in conjunction with the accompanying drawings.

[0049] It should be understood that the "multiple" mentioned in this application refers to two or more. In the description of this application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in order to facilitate the clear description of the technical solution of this application, the words "first" and "second" are used to distinguish between the same items or similar items with basically the same functions and effects. Those skilled in the art can understand that the words "first" and "second" do not limit the quantity and execution order, and the words "first" and "second" do not limit them to be different.

[0050] The phrases such as "one embodiment" or "some embodiments" described in the present application mean that the specific features, structures or characteristics described in the embodiment are included in one or more embodiments of the present application. Therefore, the phrases such as "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments" that appear in the differences in the present application do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. In addition, the terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0051] The application scenarios involved in the embodiments of the present application are described below.

[0052] With the development of computer technology, electronic devices of various forms and sizes continue to emerge, such as mobile phones, tablet computers, foldable screen mobile phones and other electronic devices, which bring great convenience to people's daily lives.

[0053] Users can install various applications in electronic devices to realize corresponding functions. However, most application interfaces are currently designed for ordinary mobile phones and are often poorly adapted to large-screen devices such as tablets and foldable screen phones. Therefore, it is often difficult for these application interfaces to achieve good display effects on large-screen devices.

[0054] For example, Figure 1 As shown in Figure (a), the interface of the shopping application can be displayed normally on the screen of an ordinary mobile phone. Figure 1 As shown in Figure (b) in the figure, one approach is to scale the interface in equal proportion to adapt the height of the interface to the screen height of the folding screen mobile phone. In this case, the interface is displayed in the middle of the screen of the folding screen mobile phone, but blank spaces are left on the left and right sides of the screen, resulting in poor interface appearance; or Figure 1As shown in Figure (c) in the figure, another approach is to scale the interface in equal proportion to the width of the interface and the screen width of the foldable screen mobile phone. In this case, although the foldable screen mobile phone displays the interface in full screen, the content of the interface is not fully displayed, and the displayed content is too large, which does not bring a good display effect. As a result, users often find it difficult to get a good user experience when using shopping applications on foldable screen mobile phones.

[0055] To this end, the embodiment of the present application provides an interface display method, which can automatically adjust the layout of visual elements of some interfaces when displaying the interface of the application on a large-screen device, so that the layout of visual elements of these interfaces is adapted to the overall screen of the large-screen device, and automatically display these interfaces in the form of dual interfaces for other interfaces. In this way, the interface display can be more flexible during the use of the application, automatically providing users with an interface display effect with better visual perception and better use experience, and at the same time, the field of view advantage of the large-screen device can be fully utilized.

[0056] The electronic device involved in the embodiments of the present application is described below.

[0057] Figure 2 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. 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, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. Among them, the sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0058] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

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

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

[0061] The memory in the processor 110 is used to store instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it can be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

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

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

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

[0065] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The wireless communication module 160 can provide solutions for wireless communications including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (IR), etc., applied to the electronic device 100.

[0066] The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0067] In the embodiment of the present application, the electronic device 100 can display the interface of the application on the display screen 194. For example, the electronic device 100 can adjust the layout of visual elements of the interface of the application so that the layout of visual elements of the interface is overall adapted to the current screen state of the display screen 194, thereby providing a better user experience.

[0068] The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

[0069] The electronic device 100 can implement audio functions, such as music playback, recording, etc., through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone interface 170D and the application processor.

[0070] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to and separated from the electronic device 100 by inserting it into the SIM card interface 195 or pulling it out from the SIM card interface 195. The electronic device 100 can support 1 or N SIM card interfaces, where N is an integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, and the like. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The types of the multiple cards can be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 can also be compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to implement functions such as calls and data communications. In some embodiments, the electronic device 100 uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.

[0071] Next, the software system of the electronic device 100 will be described.

[0072] The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. The embodiment of the present application takes the Android system of the layered architecture as an example to exemplify the software system of the electronic device 100.

[0073] Figure 3 1 is a block diagram of a software system of an electronic device 100 provided in an embodiment of the present application. Figure 3 The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into an application layer, an application framework layer, an Android runtime (AndroidRuntime) and a system layer, and a kernel layer.

[0074] The application layer can include a series of application packages. Figure 3 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, shopping, Bluetooth, music, video, short message, etc.

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

[0076] like Figure 3 As shown, the application framework layer may include a window manager, a content provider, a layout manager, a view system, a phone manager, a resource manager, a notification manager, and the like.

[0077] The window manager is used to manage window programs. The window manager can obtain the size of the display screen, determine whether there is a status bar, lock the screen, capture the screen, etc. The content provider is used to store and obtain data and make these data accessible to applications. These data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc. The layout manager has a user interface (UI) adaptive layout capability, which is used to adjust the view layout of the interface of the application. Optionally, the layout manager also has a dual interface display capability, which is used to realize the simultaneous display of two interfaces. The view system includes visual controls, such as controls for displaying text, controls for displaying pictures, etc. The view system can be used to build the interface of the application, which can be composed of one or more views, such as a view that displays a text notification icon, a view that displays text, and a view that displays pictures. The phone manager is used to provide communication functions of the electronic device 100, such as the management of call status (including connected, hung up, etc.). The resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, etc. The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of an icon or scroll bar text, such as notifications from applications running in the background. The notification manager can also be a notification that appears on the screen in the form of a dialog window, such as a text message in the status bar, a beep, a device vibration, a flashing indicator light, etc.

[0078] Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for scheduling and management of the Android system. The core library consists of two parts: one is the function that the Java language needs to call, and the other is the Android core library. The application layer and the application framework layer run in the virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0079] The system layer can include multiple functional modules, such as: surface manager, media library, 3D graphics processing library (such as: OpenGL ES), 2D graphics engine (such as: SGL), etc. The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing, etc. The 2D graphics engine is a drawing engine for 2D drawing.

[0080] The kernel layer is the layer between hardware and software. The kernel layer can include display drivers, camera drivers, audio drivers, sensor drivers, etc.

[0081] The interface display method provided in the embodiment of the present application is explained in detail below.

[0082] The interface display method provided in the embodiment of the present application can be applied to an electronic device, which may be a large-screen device, and the large-screen device may be a tablet computer, a folding screen device (such as a folding screen mobile phone) and other electronic devices, which is not limited in the embodiment of the present application.

[0083] It should be noted that the large-screen device described in the embodiments of the present application is compared with an ordinary mobile phone. That is, if the screen size of an electronic device is significantly larger than the screen size of an ordinary mobile phone, then the ordinary mobile phone can be called a small-screen device, and the electronic device can be called a large-screen device.

[0084] In addition, the large-screen device described in the embodiment of the present application has two screen states, one can be called a small-screen state, and the other can be called a large-screen state.

[0085] The small screen state refers to a state with a screen ratio (i.e., screen aspect ratio) similar to that of an ordinary mobile phone. Figure 4As shown in (a) of FIG. , the vertical screen mode of the tablet computer can be called the small screen state; or, Figure 5 As shown in Figure (a), the folded state of the folding screen device can also be called the small screen state.

[0086] The large screen state refers to the state where the screen ratio is significantly different from that of ordinary mobile phones. Figure 4 As shown in (b) of FIG. , the horizontal screen mode of the tablet computer can be called the large screen state; or, Figure 5 As shown in Figure (b), the unfolded state of the folding screen device can also be called the large-screen state.

[0087] In the embodiment of the present application, when the large-screen device is in the large-screen state, some interfaces of the application can be displayed according to the UI adaptive layout mode, and other interfaces can be displayed according to the dual-interface display mode. In this way, the display of the application interface can be flexibly adapted, and the user can be automatically provided with an interface display effect with better visual experience and better usage experience, while also giving full play to the field of view advantage of the large-screen device.

[0088] The UI adaptive layout mode is used to automatically adjust the layout of visual elements of an interface of an application to match the large screen state of the large screen device when the interface of the application is displayed on the large screen state of the large screen device.

[0089] In some embodiments, the UI adaptive layout mode can be enabled by default for certain applications. In other embodiments, the UI adaptive layout mode can be enabled selectively by the user for certain applications. Figure 6 As shown, the user can open the setting interface of the UI adaptive layout mode on the large-screen device, and then turn on or off the UI adaptive layout mode for each application in the setting interface of the UI adaptive layout mode.

[0090] The dual-interface display mode is used to display one interface of an application while displaying another interface on the large screen of a large-screen device, that is, to display two interfaces on the screen of the large-screen device at the same time.

[0091] In some embodiments, the dual-interface display mode can be enabled by default for certain applications. In other embodiments, the dual-interface display mode can be enabled selectively by the user for certain applications. Figure 7 As shown, the user can open the setting interface of the dual-interface display mode in the large-screen device, and then turn on or off the dual-interface display mode for each application in the setting interface of the dual-interface display mode.

[0092] Figure 8 is a flow chart of an interface display method provided by an embodiment of the present application. Figure 8 , the method comprises the following steps:

[0093] Step 801: The electronic device receives a first interface display instruction.

[0094] The first interface display instruction is used to instruct to display the first interface of the target application.

[0095] The target application may be any application installed in the electronic device, and specifically may be an application installed in the electronic device that has an interface adaptation requirement, such as an application installed in the electronic device that has a UI adaptive layout mode enabled. For example, the target application may be a shopping application, a browser application, or other application, which is not limited in the embodiments of the present application.

[0096] The first interface may be any interface of the target application. For example, the first interface may be the homepage of the target application, or may be any interface other than the homepage in the target application, which is not limited in the embodiment of the present application.

[0097] The first interface display instruction can be triggered by the user. In one possible implementation, the first interface display instruction can be triggered by a user clicking on the application icon of the target application. In another possible implementation, the first interface display instruction can be triggered by a user clicking on a related control in an interface of the target application. In another possible implementation, the first interface display instruction can be an interface refresh instruction. For example, the first interface display instruction can be triggered by the user changing the direction of the tablet computer (such as changing the tablet computer from a vertical placement to a horizontal placement), or can be triggered by the user changing the state of the foldable screen mobile phone (such as fully unfolding the foldable screen mobile phone from a folded state). Of course, the first interface display instruction can also be triggered by the user through other operations, which is not limited in the embodiments of the present application.

[0098] Step 802: The electronic device determines whether the electronic device is in a large-screen state.

[0099] The large screen status of electronic devices has been explained in the previous article and will not be repeated here.

[0100] If the electronic device is in the large-screen state, execute the following steps 803 to 805 ; if the electronic device is not in the large-screen state, execute the following step 805 .

[0101] Step 803: The electronic device determines whether the interface identifier of the first interface is the first preset interface identifier.

[0102] The first preset interface identifier can be set in advance. The number of first preset interface identifiers can be one or more. The interface identified by the first preset interface identifier is an interface that has an interface adaptation requirement in the large-screen state of the electronic device. In an embodiment of the present application, when the interface identified by the first preset interface identifier is displayed, its visual element layout can be adjusted to match the large-screen state of the electronic device.

[0103] The interface identifier of an interface is used to identify the interface. For example, the interface identifier of the first interface can be the Activity name of the first interface, etc., which is not limited in the embodiment of the present application.

[0104] The visual elements in an interface refer to various elements visible in the interface, such as input boxes, buttons, icons, text, pictures, videos, etc. The visual elements in an interface can also be called views in the interface. The view in the interface of an application is the appearance and interaction of the application, which can be responsible for displaying data and receiving user input. The view in an interface can include a view for displaying text, a view for displaying pictures, a view for displaying videos, etc., which is not limited in the embodiments of the present application.

[0105] The visual element layout data of an interface may include information such as the position, size, content arrangement, etc. of the visual elements in the interface, which is not limited in this embodiment of the present application.

[0106] In some embodiments, the electronic device pre-stores a correspondence between the first preset interface identifier and the preset layout rule. The correspondence may be set according to the interface adaptation requirement. The correspondence includes one or more first preset interface identifiers and the preset layout rule corresponding to each first preset interface identifier.

[0107] In this case, after the electronic device receives the first interface display instruction and determines that the electronic device is in the large screen state, it can also determine whether the corresponding relationship includes the interface identifier of the first interface. If the corresponding relationship includes the interface identifier of the first interface, it can be determined that the interface identifier of the first interface is the first preset interface identifier.

[0108] A preset layout rule corresponding to a first preset interface identifier is a rule for adjusting the layout of visual elements of the interface identified by the first preset interface identifier, such as the preset layout rule may include a rule for adjusting the position, size, content arrangement, etc. of the visual elements in the interface. In the embodiment of the present application, after the layout of visual elements of the interface identified by the first preset interface identifier is adjusted by the preset layout rule corresponding to the first preset interface identifier, the layout of visual elements of the interface identified by the first preset interface identifier matches the large screen state of the electronic device.

[0109] Matching the visual element layout of an interface with the large-screen state of an electronic device means that, under the large-screen state of the electronic device, the visual element layout of the interface can display as much interface content as possible while ensuring the aesthetics of the interface display, so as to improve the interface display effect and user experience and give full play to the visual field advantage of the large-screen state of the electronic device.

[0110] If the interface identifier of the first interface is the first preset interface identifier, the following step 804 is executed; if the interface identifier of the first interface is not the first preset interface identifier, the following step 805 is executed.

[0111] Step 804: The electronic device adjusts the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface, so that the visual element layout of the first interface matches the large-screen state of the electronic device; and displays the first interface according to the adjusted interface data of the first interface.

[0112] The original interface data of the first interface is provided by the target application. For example, the target application can obtain the original interface data of the first interface from the server.

[0113] The original interface data of the first interface may include information such as the position, size, specific content (including but not limited to icons, text, pictures, videos, etc.), content arrangement, etc. of each visual element in the first interface, which is not limited in the embodiment of the present application.

[0114] The first preset layout rule is used to adjust the layout of visual elements of the first interface, that is, to adjust the position, size, content arrangement, etc. of each visual element in the first interface, so that the visual elements of the first interface are of moderate size when displayed and can display relatively more interface content.

[0115] In some embodiments, in response to the first interface display instruction, the electronic device can display the first interface in full screen when the electronic device is in a large-screen state and the interface identifier of the first interface is a first preset interface identifier.

[0116] In this case, as an example, in order to make the visual element layout of the first interface match the large-screen state of the electronic device, the first preset layout rule can be: first proportionally enlarge the first interface until the width of the first interface is the same as the screen width of the electronic device, and then adjust the size, position, content arrangement, etc. of at least some of the visual elements in the first interface according to certain rules.

[0117] It should be noted that when the first interface is enlarged proportionally, each visual element in the first interface will be enlarged proportionally, but the relative positions of each visual element will not change.

[0118] For example, after the first interface is proportionally enlarged to a width of the first interface that is the same as the screen width of the electronic device, the first preset layout rule may include rearranging the text content in a visual element in the first interface so that the visual element can display more text in each line; and / or, the first preset layout rule may include reducing the size of a visual element in the first interface so that it is displayed at a moderate size; and / or, the first preset layout rule may include adjusting the positions of certain visual elements in the first interface so that the overall display is more coordinated. For example, if the multiple visual elements in the first interface were originally arranged in 3 columns, the multiple visual elements may be adjusted to be arranged in 4 or more columns.

[0119] In some embodiments, the electronic device pre-stores a correspondence between the first preset interface identifier, the interface display ratio, and the preset layout rule. The correspondence may be set according to interface adaptation requirements.

[0120] The corresponding relationship may include one or more first preset interface identifiers, each of which may correspond to one or more interface display ratios, and a first preset interface identifier and a corresponding interface display ratio may correspond to a preset layout rule.

[0121] The interface display ratio is the ratio of the size of the display area used to display a certain interface in the screen of the electronic device to the size of the entire screen. For example, in order to ensure a better interface display effect and a better user experience, the width of an interface in an embodiment of the present application is the same as the width of the display area used to display this interface. For example, in an embodiment of the present application, the height of the display area used to display a certain interface is the same as the height of the screen of the electronic device. In this case, the interface display ratio of this interface (that is, the interface display ratio corresponding to the display area used to display this interface) is the ratio of the width of the display area to the screen width of the electronic device.

[0122] A preset layout rule corresponding to a first preset interface identifier and an interface display ratio can adjust the visual element layout of the interface identified by the first preset interface identifier so that the visual element layout of the interface matches the display area corresponding to the interface display ratio when the electronic device is in large-screen state.

[0123] In some embodiments, since the electronic device displays the first interface in full screen, the operation for the electronic device to obtain the first preset layout rule corresponding to the first interface can be: determine that the interface display ratio of the first interface is 100%, and then according to the interface identifier of the first interface and the interface display ratio of the first interface, obtain the corresponding preset layout rule as the first preset layout rule from the correspondence between the first preset interface identifier, the interface display ratio and the preset layout rule.

[0124] For example, the correspondence between the first preset interface identifier, the interface display ratio and the preset layout rule can be shown in Table 1 below. In the correspondence shown in Table 1, the interface display ratio can be divided into three ranges: (90%, 100%], (75%, 90%], and (25%, 75%], and for any range, a unified layout rule can be used to adjust the layout of the visual elements of the interface. It should be noted that the reason why the interface display ratio does not have a range of (0%, 25%] in the correspondence shown in Table 1 is that when the interface display ratio is too low, the display area is too small and it will be difficult to display the interface normally, so this range is removed in Table 1.

[0125] Assuming that the interface identifier of the first interface is interface identifier 1, the first preset layout rule corresponding to the first interface is layout rule 1 corresponding to the corresponding relationship between interface identifier 1 and interface display ratio 100% shown in Table 1.

[0126] Table 1

[0127]

[0128] The embodiment of the present application only uses Table 1 above as an example to exemplify the correspondence between the first preset interface identifier, the interface display ratio and the preset layout rule. Table 1 above does not constitute a limitation on the embodiment of the present application.

[0129] In some embodiments, after the electronic device adjusts the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface, it can draw (Draw) the corresponding graphics according to the adjusted interface data of the first interface, and then render the drawn graphics to display the first interface.

[0130] Step 805: The electronic device displays the first interface according to the original interface data of the first interface.

[0131] For example, the electronic device may draw corresponding graphics according to the original interface data of the first interface, and then render the drawn graphics to display the first interface.

[0132] In the embodiment of the present application, for the first interface in the target application, when the electronic device is not in the large-screen state, the electronic device can directly display the first interface according to the original interface data of the first interface. When the electronic device is in the large-screen state, but the interface identifier of the first interface is not the first preset interface identifier, that is, when the first interface is not a specific interface, the first interface is still displayed according to the original interface data of the first interface. Only when the electronic device is in the large-screen state and the first interface is a specific interface, the visual element layout data in the original interface data of the first interface is automatically adjusted according to the first preset layout rule, and the first interface is displayed according to the adjusted interface data of the first interface, so that the visual element layout of the first interface matches the large-screen state of the electronic device. In this way, only for the specific interface with interface adaptation requirements in the target application, the visual element layout is adjusted in the large-screen state, and other interfaces are still displayed in the ordinary way, so that the display of the interface in the target application can be flexibly realized, and the user experience of the target application is improved. In addition, by adjusting the visual element layout of the specific interface in the target application in the large-screen state, the interface display effect of the specific interface can be guaranteed while displaying as much interface content as possible, so that the visual advantage of the large-screen state of the electronic device can be fully utilized to improve the user experience.

[0133] For example, assuming that the original interface data of the first interface is Fig. 9 Assuming that the electronic device is a folding screen mobile phone, after the folding screen mobile phone adjusts the layout of the visual elements of the first interface according to the first preset layout rule corresponding to the first interface, the displayed first interface may be Fig. 9 The interface shown in Figure (b) is shown in Figure 2. It can be seen that compared with Figure 1 The interface shown in Figure (b) is as follows: Fig. 9 The interface shown in Figure (b) is displayed in full screen, so it is more beautiful; compared to Figure 1 The interface shown in Figure (c) is as follows: Fig. 9 The interface shown in Figure (b) shows more interface content, and the size of the displayed interface content is moderate. Fig. 9 The overall layout of the interface shown in Figure (b) is coordinated, and the interface display effect is better. It can give full play to the field of view advantage of the foldable screen mobile phone and bring users a better user experience.

[0134] In some embodiments, the interface display method described above can be implemented by a related module in the software system of the electronic device. Figure 3 The software system described in the embodiment is used to exemplarily illustrate the interface display method provided in the embodiment of the present application.

[0135] Fig.10is a flow chart of an interface display method provided by an embodiment of the present application. Fig.10 , the method comprises the following steps:

[0136] Step 1001: After receiving a first interface display instruction, the target application sends original interface data of the first interface to a layout manager.

[0137] After receiving the first interface display instruction, the target application determines that the first interface needs to be displayed. The target application can obtain the original interface data of the first interface from the server, and then send the original interface data of the first interface to the layout manager in the application framework layer to instruct the application framework layer to display the first interface.

[0138] The operation of the target application receiving the first interface display instruction in step 1001 is similar to the above Figure 8 The operation of step 801 in the embodiment is similar and will not be described in detail in the embodiment of the present application.

[0139] Step 1002: After receiving the original interface data of the first interface, the layout manager determines whether the electronic device is in a large-screen state.

[0140] If the electronic device is not in the large screen state, the layout manager sends the original interface data of the first interface to the view system. After receiving the original interface data of the first interface, the view system can display the first interface according to the original interface data of the first interface. Specifically, the view system can draw corresponding graphics according to the original interface data of the first interface, and then submit the drawn graphics to the rendering service for rendering, so as to display the first interface on the screen.

[0141] If the electronic device is in the large screen state, the following step 1003 is executed.

[0142] The operation of the layout manager in step 1002 to determine whether the electronic device is in the large screen state is similar to the above Figure 8 The operation of step 802 in the embodiment is similar and will not be described in detail in the embodiment of the present application.

[0143] Step 1003: If the electronic device is in a large-screen state, the layout manager determines whether the interface identifier of the first interface is a first preset interface identifier.

[0144] In step 1003, the layout manager determines whether the interface identifier of the first interface is the first preset interface identifier. Figure 8 The operation of step 803 in the embodiment is similar and will not be described in detail in the embodiment of the present application.

[0145] Step 1004: If the interface identifier of the first interface is the first preset interface identifier, the layout manager adjusts the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface, so that the visual element layout of the first interface matches the large-screen state of the electronic device.

[0146] If the interface identifier of the first interface is not the first preset interface identifier, the layout manager sends the original interface data of the first interface to the view system. After receiving the original interface data of the first interface, the view system can display the first interface according to the original interface data of the first interface. Specifically, the view system can draw corresponding graphics according to the original interface data of the first interface, and then submit the drawn graphics to the rendering service for rendering, so as to display the first interface on the screen.

[0147] If the interface identifier of the first interface is the first preset interface identifier, the following step 1005 is executed.

[0148] The operation of the layout manager adjusting the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface in step 1004 is similar to the above Figure 8 The operation of the electronic device adjusting the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface in step 804 of the embodiment is similar, and will not be repeated in the embodiment of the present application.

[0149] Step 1005: The layout manager sends the adjusted interface data of the first interface to the view system.

[0150] Step 1006: After receiving the adjusted interface data of the first interface, the view system displays the first interface according to the adjusted interface data of the first interface.

[0151] The view system may draw corresponding graphics according to the adjusted interface data of the first interface, and then submit the drawn graphics to the rendering service for rendering, so as to display the first interface on the screen.

[0152] It should be noted that the embodiment of the present application can automatically adjust the layout of the visual elements of the first interface at the application framework layer, so that the interface can be automatically adapted without the target application being aware of it. In this case, there is no need to develop an interface specifically adapted to the electronic device for the target application, thereby saving application development costs.

[0153] In some embodiments, the interface display method described above can also be implemented by a target application installed in an electronic device. Specifically, after the target application receives the first interface display instruction, it can obtain the original interface data of the first interface from the server. Afterwards, the target application can send the original interface data of the first interface to the view system when the electronic device is not in a large-screen state and / or the interface identifier of the first interface is not the first preset interface identifier; after the view system receives the original interface data of the first interface, it can display the first interface according to the original interface data of the first interface. Alternatively, the target application can adjust the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface when the electronic device is in a large-screen state and the interface identifier of the first interface is the first preset interface identifier, so that the visual element layout of the first interface matches the large-screen state of the electronic device, and then send the adjusted interface data of the first interface to the view system; after the view system receives the adjusted interface data of the first interface, it can display the first interface according to the adjusted interface data of the first interface.

[0154] In some embodiments, when the electronic device displays the first interface according to the adjusted interface data of the first interface, it can also display a first adjustment control on the upper layer of the first interface, and the first adjustment control is used to adjust the interface display ratio of the first interface, that is, to adjust the size of the display area where the first interface is located. In this case, after the electronic device displays the first interface according to the adjusted interface data of the first interface, it can also perform the following Fig.11 The operations described in the embodiment.

[0155] Fig.11 is a flow chart of an interface display method provided by an embodiment of the present application. Fig.11 , the method comprises the following steps:

[0156] Step 1101: the electronic device determines an interface display ratio of a first interface in response to a triggering operation on a first adjustment control.

[0157] For example, Fig.12 As shown, the first adjustment control can be a control in the form of a slider, and the slider has a slider, and the position of the slider in the slider can indicate the corresponding interface display ratio. By sliding the slider in the slider, the interface display ratio of the interface can be adjusted within the preset interface display ratio range. Of course, the first adjustment control can also be a control in other forms, as long as it can adjust the interface display ratio of the interface within the preset interface display ratio range.

[0158] The preset interface display ratio range can be pre-set. For example, the preset interface display ratio range can be (25%, 100%], (30%, 100%], (35%, 100%], etc., which is not limited in the embodiment of the present application.

[0159] The triggering operation of the first adjustment control can be performed by the user. That is, if the user wants to adjust the display size of the first interface, it can be achieved by operating the first adjustment control. For example, the user can drag Fig.12 The slider in the slider bar shown is used to adjust the position of the slider in the slider bar to adjust the interface display ratio of the first interface.

[0160] Step 1102: The electronic device obtains a second preset layout rule corresponding to the first interface according to the interface display ratio of the first interface.

[0161] It should be noted that the first preset layout rule above is the preset layout rule corresponding to the interface display ratio of the first interface being 100%. The second preset layout rule here is the preset layout rule corresponding to the interface display ratio of the first interface determined according to the first adjustment control after the trigger operation of the first adjustment control is detected.

[0162] In some embodiments, the operation of step 1102 may be: the electronic device obtains the corresponding preset layout rule as the second preset layout rule from the correspondence between the first preset interface identifier, the interface display ratio and the preset layout rule according to the interface identifier of the first interface and the interface display ratio of the first interface.

[0163] The correspondence between the first preset interface logo, interface display ratio and preset layout rules has been described above. Figure 8 This is explained in the embodiments and will not be described in detail here.

[0164] Assuming that the interface identifier of the first interface is interface identifier 1 and the interface display ratio of the first interface is 80%, the second preset layout rule corresponding to the first interface is layout rule 2 corresponding to the corresponding relationship between interface identifier 1 and interface display ratio 80% shown in Table 1.

[0165] Step 1103: The electronic device adjusts the visual element layout data in the original interface data of the first interface according to the second preset layout rule.

[0166] The operation of step 1103 is the same as above. Figure 8 The operation of the electronic device adjusting the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface in step 804 of the embodiment is similar, and will not be repeated in the embodiment of the present application.

[0167] After the electronic device adjusts the visual element layout data in the original interface data of the first interface according to the second preset layout rule, the visual element layout of the first interface matches the display area corresponding to the interface display ratio of the first interface. The visual element layout of the first interface matches the display area means that when the first interface is displayed in the display area, the visual element layout of this interface can display as much interface content as possible while ensuring the aesthetics of the interface display, so as to improve the interface display effect and user experience.

[0168] Step 1104: The electronic device displays the first interface according to the adjusted interface data of the first interface.

[0169] The operation of step 1104 is the same as above. Figure 8 The operation of the electronic device displaying the first interface according to the adjusted interface data of the first interface in step 804 of the embodiment is similar, and will not be described in detail in the embodiment of the present application.

[0170] In an embodiment of the present application, while displaying the first interface, the electronic device can also display a first adjustment control on the upper layer of the first interface, and the user can adjust the display size of the first interface through the first adjustment control. Specifically, when the electronic device detects a trigger operation on the first adjustment control, it can determine the interface display ratio of the first interface, and then obtain the second preset layout rule corresponding to the first interface according to the interface display ratio. After that, the visual element layout of the first interface can be adjusted according to the second preset layout rule, so that the visual element layout of the first interface matches the display area corresponding to the interface display ratio. In this way, when the first interface is displayed in the display area, the visual element layout of the first interface can display as much interface content as possible while ensuring the aesthetics of the interface display, thereby improving the interface display effect and user experience.

[0171] For example, it is assumed that the electronic device is a foldable screen mobile phone. After the foldable screen mobile phone receives the first interface display instruction, when the foldable screen mobile phone is in the unfolded state and the interface identifier of the first interface is the first preset interface identifier, after adjusting the layout of the visual elements of the first interface according to the first preset layout rule corresponding to the first interface, the displayed first interface can be Fig.13In the interface 1301 shown in Figure (a), the upper layer of the first interface 1301 also displays a first adjustment control 1302, and the slider in the first adjustment control 1302 indicates that the current interface display ratio is 100%. Afterwards, the user drags the slider in the first adjustment control 1302 downward to reduce the interface display ratio of the first interface 1301. Assuming that the user drags the slider in the first adjustment control 1302 downward to indicate that the interface display ratio is 80%, the folding screen mobile phone can obtain the second preset layout rule corresponding to the first interface 1301 according to the interface display ratio of 80%, and then adjust the visual element layout of the first interface 1301 according to the second preset layout rule corresponding to the first interface 1301. The displayed first interface 1301 can be Fig.13 Afterwards, the user drags the slider in the first adjustment control 1302 upward to increase the interface display ratio of the first interface 1301. Assuming that the user drags the slider in the first adjustment control 1302 upward to indicate that the interface display ratio is 91%, the folding screen mobile phone can obtain the second preset layout rule corresponding to the first interface 1301 according to the interface display ratio of 91%, and then adjust the layout of the visual elements of the first interface 1301 according to the second preset layout rule corresponding to the first interface 1301. The displayed first interface 1301 can be Fig.13 Interface 1301 as shown in FIG.

[0172] The above describes the UI adaptive layout mode provided in the embodiment of the present application. Next, the dual-interface display mode provided in the embodiment of the present application is described.

[0173] Fig.14 is a flow chart of an interface display method provided by an embodiment of the present application. Fig.14 , the method comprises the following steps:

[0174] Step 1401: The electronic device receives a second interface display instruction in the first interface.

[0175] It should be noted that the first interface can be displayed by the electronic device in the above embodiment according to the adjusted interface data of the first interface, or the first interface can be displayed by the electronic device in the above embodiment according to the original interface data of the first interface, and the embodiments of the present application are not limited to this.

[0176] After displaying the first interface, the electronic device may receive a second interface display instruction in the first interface. The second interface display instruction is used to instruct the second interface of the target application to be displayed. The second interface may be an interface that can be jumped to from the first interface. In an embodiment of the present application, the target application may be an application installed in the electronic device that has a dual-interface display mode enabled.

[0177] The second interface display instruction may be triggered by the user. In one possible implementation, the second interface display instruction may be triggered by the user clicking on the relevant control in the first interface. Of course, the second interface display instruction may also be triggered by the user through other operations, which is not limited in the present embodiment of the application.

[0178] Step 1402: The electronic device determines whether the electronic device is in a large-screen state.

[0179] The operation of step 1402 is the same as above. Figure 8 The operation of step 802 in the embodiment is similar and will not be described in detail in the embodiment of the present application.

[0180] If the electronic device is in the large screen state, the following step 1403 is executed. If the electronic device is not in the large screen state, the following step 1406 is executed.

[0181] Step 1403: The electronic device determines whether the interface identifier of the second interface is the second preset interface identifier.

[0182] The second preset interface identifier can be set in advance. The number of second preset interface identifiers can be one or more. The interface identified by the second preset interface identifier is an interface with interface adaptation requirements in the large screen state of the electronic device. In an embodiment of the present application, the interface identified by the second preset interface identifier can be displayed simultaneously with the previous interface when displayed.

[0183] If the interface identifier of the second interface is not the second preset interface identifier, the following steps 1404 to 1406 may be executed; if the interface identifier of the second interface is the second preset interface identifier, the following step 1407 may be executed.

[0184] Step 1404: The electronic device determines whether the interface identifier of the second interface is the first preset interface identifier.

[0185] The operation of step 1404 is the same as above. Figure 8 The operation of step 803 in the embodiment is similar and will not be described in detail in the embodiment of the present application.

[0186] If the interface identifier of the second interface is the first preset interface identifier, the following step 1405 is executed. If the interface identifier of the second interface is not the first preset interface identifier, the following step 1406 is executed.

[0187] Step 1405: The electronic device adjusts the visual element layout data in the original interface data of the second interface according to the first preset layout rule corresponding to the second interface, so that the visual element layout of the second interface matches the large-screen state of the electronic device; and displays the second interface according to the adjusted interface data of the second interface.

[0188] The operation of step 1405 is the same as above. Figure 8 The operation of step 804 in the embodiment is similar and will not be described in detail in the embodiment of the present application.

[0189] Step 1406: The electronic device displays the second interface according to the original interface data of the second interface.

[0190] The operation of step 1406 is the same as above. Figure 8 The operation of step 805 in the embodiment is similar and will not be described in detail in the embodiment of the present application.

[0191] Step 1407: The electronic device displays the first interface in the first display area according to the interface data of the first interface, and displays the second interface in the second display area according to the interface data of the second interface.

[0192] The first display area and the second display area are two different display areas in the screen of the electronic device. For example, the height of the first display area and the height of the second display area may be the same as the height of the screen of the electronic device, and the sum of the width of the first display area and the width of the second display area may be the same as the width of the screen of the electronic device. For example, the first display area may be the display area on the left side of the screen, and the second display area may be the display area on the right side of the screen.

[0193] After the electronic device receives the second interface display instruction, the sizes of the first display area and the second display area divided on the screen of the electronic device can be the same, that is, half of the display area on the screen of the electronic device can be the first display area, and the other half of the display area can be the second display area. In this case, the interface display ratio corresponding to the first display area is 50%, and the interface display ratio corresponding to the second display area is also 50%.

[0194] Alternatively, after receiving the second interface display instruction, the electronic device may divide a portion of the display area on the screen of the electronic device into the first display area and another portion of the display area into the second display area according to a preset division strategy. For example, the electronic device may divide two-fifths of the display area on the screen of the electronic device into the first display area and the remaining three-fifths of the display area into the second display area. In this case, the interface display ratio corresponding to the first display area is 40%, and the interface display ratio corresponding to the second display area is 60%.

[0195] After the electronic device displays the first interface in the first display area according to the interface data of the first interface, and displays the second interface in the second display area according to the interface data of the second interface, the electronic device displays the first interface and the second interface at the same time. In this case, the user can browse and operate these two interfaces at the same time. In addition, compared with the aspect ratio of the electronic device when it is displayed in full screen in a large screen state, the aspect ratio of the first display area and the aspect ratio of the second display area are closer to the screen aspect ratio of ordinary mobile phones, so the first interface and the second interface are more coordinated and beautiful when displayed at the same time. This can improve the user experience.

[0196] In some embodiments, when the electronic device displays the first interface in the first display area according to the interface data of the first interface, it can display the first interface in the first display area according to the original interface data of the first interface; or, based on the interface identifier of the first interface and the interface display ratio corresponding to the first display area, it can obtain the corresponding preset layout rule as the third preset layout rule corresponding to the first interface from the correspondence between the interface identifier, the interface display ratio and the preset layout rule, adjust the visual element layout data in the original interface data of the first interface according to the third preset layout rule, and display the first interface according to the adjusted interface data of the first interface.

[0197] The electronic device may pre-store a correspondence between preset interface identifiers, interface display ratios, and preset layout rules. The correspondence may include one or more preset interface identifiers, each preset interface identifier may correspond to one or more interface display ratios, and a preset interface identifier and its corresponding interface display ratio may correspond to a preset layout rule.

[0198] A preset layout rule corresponding to a preset interface identifier and an interface display ratio can adjust the visual element layout of the interface identified by the preset interface identifier so that the visual element layout of the interface matches the display area corresponding to the interface display ratio when the electronic device is in large-screen state.

[0199] After the electronic device obtains the third preset layout rule from the corresponding relationship, it can adjust the layout of the visual elements of the first interface according to the third preset layout rule, so that the layout of the visual elements of the first interface can match the first display area. In this way, when the first interface is displayed in the first display area, as much interface content as possible can be displayed while ensuring the interface display effect of the first interface, so as to give full play to the visual advantage of the large screen state of the electronic device and improve the user experience.

[0200] In some embodiments, when the electronic device displays the second interface in the second display area according to the interface data of the second interface, it can display the second interface in the second display area according to the original interface data of the second interface; or, based on the interface identifier of the second interface and the interface display ratio corresponding to the second display area, the corresponding preset layout rule can be obtained from the correspondence between the interface identifier, the interface display ratio and the preset layout rule as the fourth preset layout rule corresponding to the second interface, the visual element layout data in the original interface data of the second interface can be adjusted according to the fourth preset layout rule, and the second interface can be displayed according to the adjusted interface data of the second interface.

[0201] After the electronic device obtains the fourth preset layout rule from the corresponding relationship, after adjusting the layout of the visual elements of the second interface according to the fourth preset layout rule, the layout of the visual elements of the second interface can be matched with the second display area. In this way, after the second interface is displayed in the second display area, as much interface content as possible can be displayed while ensuring the interface display effect of the second interface, so as to give full play to the visual advantage of the large screen state of the electronic device and improve the user experience.

[0202] For example, it is assumed that the electronic device is a foldable screen mobile phone. The first interface displayed by the foldable screen mobile phone is Fig.15 If the user clicks on a product image 1502 in the first interface 1501, a second interface display instruction is triggered. In response to the second interface display instruction, when the foldable screen mobile phone is in the unfolded state and the interface identifier of the second interface is the second preset interface identifier, Fig.15 As shown in FIG. 15( b ), the first interface 1501 and the second interface 1503 may be displayed simultaneously, and the second interface 1503 may display a product image, a product name, etc. of the product. In this case, the user may browse and operate the first interface 1501 and the second interface 1503 simultaneously, thereby improving the user experience.

[0203] In some embodiments, when the electronic device displays the first interface in the first display area and the second interface in the second display area, it can also display a second adjustment control on the boundary line between the first display area and the second display area, and the second adjustment control is used to adjust the interface display ratio of the first interface and the second interface, that is, adjust the size of the first display area and the second display area. In this case, after the electronic device displays the first interface in the first display area and the second interface in the second display area, it can also perform the following Fig.16 The operations described in the embodiment.

[0204] Fig.16 is a flow chart of an interface display method provided by an embodiment of the present application. Fig.16 , the method comprises the following steps:

[0205] Step 1601: the electronic device determines an interface display ratio of a first interface and an interface display ratio of a second interface in response to a triggering operation on a second adjustment control.

[0206] The second adjustment control is used to adjust the interface display ratio of the first interface and the second interface within the preset interface display ratio range. The sum of the interface display ratio of the first interface and the interface display ratio of the second interface is 100%. That is, through the second adjustment control, the interface display ratio of one of the first interface and the second interface can be increased, and the interface display ratio of the other interface can be reduced accordingly.

[0207] For example, Fig.17 As shown, the second adjustment control may be a slider 1701 located in the middle of the boundary line between the first display area and the second display area. The user may drag the slider 1701 to the left or right to drag the boundary line to adjust the size of the first display area and the second display area, that is, to adjust the interface display ratio of the first interface and the interface display ratio of the second interface. Fig.17 In the example, if the user drags the slider 1701 to the left, the interface display ratio of the interface on the left side will be reduced, and the interface display ratio of the interface on the right side will be increased.

[0208] Of course, the second adjustment control may also be a control in other forms, as long as it can adjust the interface display ratio of the first interface and the second interface within a preset interface display ratio range.

[0209] Step 1602: The electronic device obtains a third preset layout rule corresponding to the first interface according to the interface display ratio of the first interface, and obtains a fourth preset layout rule corresponding to the second interface according to the interface display ratio of the second interface.

[0210] In some embodiments, the electronic device may obtain the corresponding preset layout rule as the third preset layout rule corresponding to the first interface based on the interface identifier of the first interface and the interface display ratio of the first interface, from the correspondence between the interface identifier, the interface display ratio and the preset layout rule; and obtain the corresponding preset layout rule as the fourth preset layout rule corresponding to the second interface based on the interface identifier of the second interface and the interface display ratio of the second interface, from the correspondence between the interface identifier, the interface display ratio and the preset layout rule.

[0211] Step 1603: The electronic device adjusts the visual element layout data in the original interface data of the first interface according to the third preset layout rule, and adjusts the visual element layout data in the original interface data of the second interface according to the fourth preset layout rule.

[0212] The operation of step 1603 is the same as above. Figure 8 The operation of the electronic device adjusting the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface in step 804 of the embodiment is similar, and will not be repeated in the embodiment of the present application.

[0213] Step 1604: The electronic device displays the first interface in the first display area according to the adjusted interface data of the first interface, and displays the second interface in the second display area according to the adjusted interface data of the second interface.

[0214] The operation of step 1604 is the same as above. Figure 8 The operation of the electronic device displaying the first interface according to the adjusted interface data of the first interface in step 804 of the embodiment is similar, and will not be described in detail in the embodiment of the present application.

[0215] In an embodiment of the present application, the electronic device can not only display the first interface and the second interface at the same time, but also allow the user to adjust the display size of the first interface and the second interface. Specifically, when the electronic device detects the triggering operation of the second adjustment control, it can determine the interface display ratio of the first interface and the second interface, and accordingly determine the third preset layout rule corresponding to the first interface and the fourth preset layout rule corresponding to the second interface. After that, the visual element layout of the first interface can be adjusted according to the third preset layout rule so that the visual element layout of the first interface matches the first display area, and the visual element layout of the second interface can be adjusted according to the fourth preset layout rule so that the visual element layout of the second interface matches the second display area. In this way, when the first interface is displayed in the first display area and the second interface is displayed in the second display area, the visual element layout of the first interface and the second interface can display as much interface content as possible while ensuring the aesthetics of the interface display, thereby improving the interface display effect and user experience.

[0216] For example, it is assumed that the electronic device is a foldable screen mobile phone. Fig.18As shown in Figure (a), the foldable screen mobile phone displays the first interface 1501 and the second interface 1503 at the same time. Afterwards, the user drags the slider 1701 to the right to increase the interface display ratio of the first interface 1501 and reduce the interface display ratio of the second interface 1503. The foldable screen mobile phone can determine the third preset layout rule corresponding to the first interface 1501 according to the interface display ratio of the first interface 1501, and determine the fourth preset layout rule corresponding to the second interface 1503 according to the interface display ratio of the second interface 1503, and then adjust the visual element layout of the first interface 1501 according to the third preset layout rule corresponding to the first interface 1501, and adjust the visual element layout of the second interface 1503 according to the fourth preset layout rule corresponding to the second interface 1503. The displayed first interface 1501 and second interface 1503 can be as shown. Fig.18 As shown in Figure (b).

[0217] In some embodiments, when the electronic device displays the first interface and the second interface, the user can also adjust it to display only one of the first interface and the second interface through the second adjustment control. In this case, in the above step 1601, the electronic device can also determine whether the interface display ratios of the first interface and the second interface are both greater than or equal to the interface display ratio threshold. The interface display ratio threshold is the minimum value in the preset interface display ratio range.

[0218] If the interface display ratios of the first interface and the second interface are both greater than or equal to the interface display ratio threshold, the electronic device may execute steps 1602 to 1604.

[0219] If the interface display ratio of one of the first interface and the second interface is less than the interface display ratio threshold, it means that the interface display ratio of this interface is too small, then it can be determined that the user no longer wants to browse this interface, but only wants to focus on the other interface. In this case, the electronic device can re-determine the interface display ratio of the other interface to be 100%, and then obtain the preset layout rule corresponding to the other interface (i.e., the third preset layout rule or the fourth preset layout rule above) according to the interface display ratio of the other interface, and adjust the visual element layout data in the original interface data of the other interface according to the preset layout rule corresponding to the other interface, and then display the other interface according to the adjusted interface data of the other interface. In this way, the electronic device no longer displays two interfaces at the same time, but only displays one interface.

[0220] In an embodiment of the present application, the user can use the second adjustment control to simply and quickly switch from dual-interface display to single-interface display, thereby providing a quick switching method that can better meet user needs and improve user experience.

[0221] Next, we take the target application as a shopping application as an example. Fig.19 and Fig. 20 To illustrate a possible implementation method of the embodiment of the present application.

[0222] like Fig.19 As shown in Figure (a), the electronic device is in a large-screen state. After the user clicks the application icon of the shopping application on the main interface of the electronic device, an interface display instruction for the homepage of the shopping application is triggered.

[0223] In response to the interface display instruction, such as Fig.19 As shown in FIG. 1( b ), the electronic device displays the homepage of the shopping application. Specifically, the electronic device may Figure 8 The interface display method described in the embodiment displays the home page, that is, the visual element layout of the home page can be adjusted before displaying, so that the visual element layout of the home page displayed matches the large screen state. Afterwards, the user clicks on a picture of a product on the home page, triggering an interface display instruction for the product introduction page of the product.

[0224] In response to the interface display instruction, such as Fig.19 As shown in FIG. (c) of FIG. 1 , the electronic device can simultaneously display the home page and the product introduction page. Specifically, the electronic device can display the product introduction page according to the above Fig.16 The interface display method described in the embodiment displays the home page and the product introduction page. Afterwards, the user clicks the details button in the product introduction page to trigger an interface display instruction for the product details page of the product.

[0225] In response to the interface display instruction, such as Fig. 20 As shown in Figure (a) of FIG. 1 , the electronic device displays the product details page. Specifically, the electronic device can Figure 8 The interface display method described in the embodiment is to display the product details page, that is, the visual element layout of the product details page can be adjusted before displaying it, so that the visual element layout of the displayed product details page matches the large screen state. Afterwards, the user clicks the footprint button in the product details page, and in response to the click operation, Fig. 20 As shown in FIG. 1( b) of FIG. 1 , the electronic device may overlay and display the footprint window on the upper layer of the product details page. Afterwards, the user clicks on a product image in the footprint window to trigger an interface display instruction for the product details page of the product.

[0226] In response to the interface display instruction, such as Fig. 20 As shown in FIG. 1(c) of FIG. 1 , the electronic device can simultaneously display the product detail pages of the two products. Specifically, the electronic device can perform the above Fig.16 The interface display method described in the embodiment is used to display the product detail pages of these two products.

[0227] In this way, through the interface display method provided in the embodiment of the present application, various interfaces in the shopping application can be flexibly displayed, and the adaptation of various interfaces in the shopping application to the large-screen state of the electronic device can be achieved, thereby improving the interface display effect and improving the user's shopping experience.

[0228] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network or other programmable device. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, computer, server or data center by wired (such as: coaxial cable, optical fiber, data subscriber line (Digital Subscriber Line, DSL)) or wireless (such as: infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium may be any available medium that a computer can access, or a data storage device such as a server or data center that includes one or more available media integrations. The available medium may be a magnetic medium (such as a floppy disk, a hard disk, a magnetic tape), an optical medium (such as a digital versatile disc (DVD)), or a semiconductor medium (such as a solid state disk (SSD)).

[0229] The above are optional embodiments provided for the present application and are not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the technical scope disclosed in the present application shall be included in the protection scope of the present application.

Claims

1. An interface display method, characterized in that: Applied to electronic equipment, the method comprises: Receiving a first interface display instruction, where the first interface display instruction is used to instruct to display a first interface of a target application; When the electronic device is in a large-screen state and the interface identifier of the first interface is a first preset interface identifier, adjusting the visual element layout data in the original interface data of the first interface according to a first preset layout rule corresponding to the first interface, so that the visual element layout of the first interface matches the large-screen state; The first interface is displayed according to the adjusted interface data of the first interface.

2. The method according to claim 1, characterized in that The first interface has a first adjustment control displayed on an upper layer, and the first adjustment control is used to adjust the interface display ratio of the first interface. After the first interface is displayed according to the adjusted interface data of the first interface, the method further includes: In response to a triggering operation on the first adjustment control, determining an interface display ratio of the first interface; Acquire a second preset layout rule corresponding to the first interface according to the interface display ratio of the first interface; Adjusting the visual element layout data in the original interface data of the first interface according to the second preset layout rule; The first interface is displayed according to the adjusted interface data of the first interface.

3. The method according to claim 1 or 2, characterized in that The method further comprises: Receiving a second interface display instruction in the first interface, where the second interface display instruction is used to instruct to display a second interface of the target application; When the electronic device is in the large-screen state and the interface identifier of the second interface is the second preset interface identifier, the first interface is displayed in the first display area according to the interface data of the first interface, and the second interface is displayed in the second display area according to the interface data of the second interface.

4. The method according to claim 3, characterized in that A second adjustment control is displayed on the boundary line between the first display area and the second display area, and the second adjustment control is used to adjust the interface display ratio of the first interface and the second interface. After displaying the first interface in the first display area according to the interface data of the first interface and displaying the second interface in the second display area according to the interface data of the second interface, the method further includes: In response to a triggering operation on the second adjustment control, determining an interface display ratio of the first interface and an interface display ratio of the second interface; Acquire a third preset layout rule corresponding to the first interface according to the interface display ratio of the first interface, and acquire a fourth preset layout rule corresponding to the second interface according to the interface display ratio of the second interface; Adjusting the visual element layout data in the original interface data of the first interface according to the third preset layout rule, and adjusting the visual element layout data in the original interface data of the second interface according to the fourth preset layout rule; The first interface is displayed in the first display area according to the adjusted interface data of the first interface, and the second interface is displayed in the second display area according to the adjusted interface data of the second interface.

5. The method according to claim 4, characterized in that The acquiring a third preset layout rule corresponding to the first interface according to the interface display ratio of the first interface, and acquiring a fourth preset layout rule corresponding to the second interface according to the interface display ratio of the second interface, includes: If the interface display ratio of the first interface and the interface display ratio of the second interface are both greater than or equal to the interface display ratio threshold, then obtaining a third preset layout rule corresponding to the first interface according to the interface display ratio of the first interface, and obtaining a fourth preset layout rule corresponding to the second interface according to the interface display ratio of the second interface; The method further comprises: If the interface display ratio of one of the first interface and the second interface is less than the interface display ratio threshold, re-determine the interface display ratio of the other interface as 100%, and obtain the preset layout rule corresponding to the other interface according to the interface display ratio of the other interface; Adjusting the visual element layout data in the original interface data of the other interface according to the preset layout rule corresponding to the other interface; The another interface is displayed according to the adjusted interface data of the another interface.

6. The method according to any one of claims 1 to 5, characterized in that: The electronic device is a tablet computer, and the large-screen state of the electronic device is the horizontal screen mode of the tablet computer; or, the electronic device is a folding-screen device, and the large-screen state of the electronic device is the unfolded state of the folding-screen device.

7. The method according to any one of claims 1 to 6, characterized in that: The target application is a shopping application, and the first interface is a home page or a product details page of the shopping application.

8. An interface display method, characterized in that: Applied to an electronic device, the electronic device is installed with a target application, the application framework layer of the electronic device includes a layout manager and a view system, and the method includes: After receiving the first interface display instruction, the target application sends the original interface data of the first interface to the layout manager, where the first interface display instruction is used to instruct to display the first interface of the target application; After receiving the original interface data of the first interface, the layout manager adjusts the visual element layout data in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface, so that the visual element layout of the first interface matches the large screen state, when the electronic device is in the large screen state and the interface identifier of the first interface is the first preset interface identifier; and sends the adjusted interface data of the first interface to the view system; After receiving the adjusted interface data of the first interface, the viewing system displays the first interface according to the adjusted interface data of the first interface.

9. An electronic device, characterized in that: The electronic device comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program implements the method according to any one of claims 1 to 8 when executed by the processor.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the method according to any one of claims 1 to 8.

Images