Interface display method, electronic device and storage medium

Abstract

The application discloses an interface display method, an electronic device 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 instructing to display a first interface of a target application program; in the case that the electronic device 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, so that the visual element layout of the first interface is matched with the large-screen state of the electronic device; and displaying the first interface according to the adjusted interface data of the first interface. According to the application, the visual element layout of the first interface of the target application program in the large-screen state is adjusted, the interface display effect of the first interface can be ensured, and as many interface contents as possible can be displayed, so that the field of view advantage of the large-screen state of the electronic device can be fully exerted, and the user experience is improved.

Description

Technical Field

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

[0002] With the continuous development of computer technology, electronic devices such as mobile phones, tablets, and foldable phones are becoming increasingly popular, bringing great convenience to people's daily lives. Users can install various applications on these devices to achieve corresponding functions. However, most applications are currently designed for regular mobile phones, and are often poorly adapted to large-screen devices such as tablets and foldable phones. In other words, the interfaces of these applications often fail to achieve good display effects on large-screen devices, which affects the user experience. Summary of the Invention

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

[0004] Firstly, a method for displaying an interface is provided. In this method, an electronic device receives a first interface display instruction, which instructs the display of 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 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 of the electronic device. Then, the adjusted interface data of the first interface is displayed.

[0005] Electronic devices have two screen states: a small screen state and a large screen state. A small screen state refers to a screen with a similar aspect ratio to a regular mobile phone. A large screen state refers to a screen with a significantly different aspect ratio. For example, if the electronic device is a tablet, its portrait mode can be considered a small screen state, and its landscape mode a large screen state. If the electronic device is a foldable device, its folded state can be considered a small screen state, and its unfolded state a large screen state.

[0006] The target application can be any application installed on the electronic device, specifically an application that requires interface adaptation. For example, the target application could be a shopping application, a browser application, or similar applications. For instance, when the target application is a shopping application, the first interface could be the shopping application's homepage or product details page.

[0007] The first preset interface identifier can be preset. There can be one or more first preset interface identifiers. The interface identified by the first preset interface identifier is the interface that requires interface adaptation in the large-screen state of the electronic device. In this 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 to the large screen state of an electronic device means that, when the electronic device is on a large screen, the visual element layout of the interface can display as much content as possible while ensuring the aesthetics of the interface, thereby improving the display effect and user experience, and making full use of the visual advantages of the large screen state of the electronic device.

[0009] In this application, for the first interface of the target application, when the electronic device is not in large-screen mode, the electronic device can directly display the first interface data based on the original interface data. When the electronic device is in large-screen mode, but the interface identifier of the first interface is not the first preset interface identifier, i.e., the first interface is not a specific interface, the first interface data is still displayed based on the original interface data. Only when the electronic device is in large-screen mode 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 rules, and the first interface is displayed based on the adjusted interface data, so that the visual element layout of the first interface matches the large-screen mode of the electronic device. In this way, only the visual element layout of specific interfaces in the target application that have interface adaptation requirements is adjusted in large-screen mode, while other interfaces are still displayed in the normal way, thereby flexibly realizing the display of interfaces in the target application and improving the user experience of the target application. Furthermore, by adjusting the visual element layout of specific interfaces in the target application in large-screen mode, as much interface content as possible can be displayed while ensuring the display effect of specific interfaces, thereby giving full play to the visual advantage of the large-screen mode of the electronic device and improving the user experience.

[0010] Optionally, a first adjustment control is displayed on the upper layer of the first interface. The first adjustment control is used to adjust the 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 the electronic device displays the first interface based on the adjusted interface data of the first interface, it can also respond to the triggering operation of the first adjustment control to determine the display ratio of the first interface; obtain the second preset layout rule corresponding to the first interface based on the 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 based on the adjusted interface data of the first interface.

[0012] In this application, while displaying a first interface, the electronic device can also display a first adjustment control on top of the first interface, allowing the user to adjust the display size of the first interface using the first adjustment control. Specifically, when the electronic device detects a trigger operation on the first adjustment control, it can determine the display ratio of the first interface, then obtain a second preset layout rule corresponding to the first interface based on the display ratio. Subsequently, it can adjust the layout of the visual elements of the first interface according to the second preset layout rule so that the layout of the visual elements of the first interface matches the display area corresponding to the display ratio. In this way, when the first interface is displayed in the display area, the layout of the visual elements 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 may also receive a second interface display instruction in the first interface, the second interface display instruction being 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 this application, the electronic device displays a first interface in a first display area based on interface data of a first interface, and displays a second interface in a second display area based on interface data of a second interface. The electronic device then simultaneously displays both the first and second interfaces. In this scenario, the user can browse and operate both interfaces simultaneously. Furthermore, compared to the aspect ratio of the electronic device when displayed in full-screen mode on a large screen, the aspect ratios of the first and second display areas are closer to those of a typical mobile phone screen, resulting in a more harmonious and aesthetically pleasing display when both interfaces are simultaneously shown. This enhances 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. The second adjustment control is used to adjust the 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 scenario, the electronic device displays the first interface in the first display area based on the interface data of the first interface, and displays the second interface in the second display area based on the interface data of the second interface. Then, in response to a trigger operation of the second adjustment control, it can determine the display ratio of the first interface and the second interface; obtain a third preset layout rule corresponding to the first interface based on the display ratio of the first interface, and obtain a fourth preset layout rule corresponding to the second interface based on the 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 based on the adjusted interface data of the first interface, and display the second interface in the second display area based on the adjusted interface data of the second interface.

[0017] In this application, the electronic device can not only simultaneously display a first interface and a second interface, but also allow the user to adjust the display size of the first and second interfaces. Specifically, when the electronic device detects a trigger operation on the second adjustment control, it can determine the display ratio of the first and second interfaces. Based on this, it can determine a third preset layout rule corresponding to the first interface and a fourth preset layout rule corresponding to the second interface. Then, it can adjust the visual element layout of the first interface according to the third preset layout rule to match the visual element layout of the first interface with the first display area. Similarly, it can adjust the visual element layout of the second interface according to the fourth preset layout rule to match the visual element layout of the second interface with the second display area. Thus, when displaying the first interface in the first display area and the second interface in the second display area, the visual element layout of the first and second interfaces 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 obtaining the third preset layout rule corresponding to the first interface based on the interface display ratio of the first interface and obtaining the fourth preset layout rule corresponding to the second interface based on the interface display ratio of the second interface can be as follows: 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 the third preset layout rule corresponding to the first interface is obtained based on the interface display ratio of the first interface, and the fourth preset layout rule corresponding to the second interface is obtained based on the interface display ratio of the second interface.

[0019] If the display ratio of one of the first and second interfaces is less than the display ratio threshold, the display ratio of the other interface is redefined to 100%, and the preset layout rules corresponding to the other interface are obtained according to the 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 rules corresponding to the other interface; and the other interface is displayed according to the adjusted interface data.

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

[0021] Secondly, a method for displaying an interface is provided, applied to an electronic device. The electronic device has a target application installed, and the application framework layer of the electronic device includes a layout manager and a view system. In this method, after receiving a first interface display instruction, the target application sends the original interface data of the first interface to the layout manager. The first interface display instruction is used to instruct the display of the first interface of the target application. After receiving the original interface data of the first interface, and assuming the electronic device is in a large-screen state and the interface identifier of the first interface is a 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. Then, the layout manager sends the adjusted interface data of the first interface to the view system. After receiving the adjusted interface data of the first interface, the view system displays the first interface according to the adjusted interface data.

[0022] In this application, the layout of visual elements in the first interface can be automatically adjusted at the application framework layer, thus achieving automatic interface adaptation without the target application being aware of it. In this case, there is no need to develop a separate interface for the target application to adapt to electronic devices, thereby saving application development costs.

[0023] Thirdly, a user interface display device is provided, which has the function of implementing the interface display method behavior described in the first or second aspect above. The user interface display device includes at least one module, which is used to implement the interface display method provided in the first or second aspect above.

[0024] Fourthly, an electronic device is provided, comprising a processor and a memory. The memory stores programs that support the electronic device in executing the interface display method provided in the first or second aspect, and stores data related to implementing the interface display method described in the first or second aspect. The processor is configured to execute the programs stored in the memory. The electronic device may further include a communication bus for establishing a connection between the processor and the memory.

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

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

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

[0028] Figure 1 This is a schematic diagram of an interface provided in an embodiment of this application;

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

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

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

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

[0033] Figure 6 This is a schematic diagram of a UI adaptive layout mode settings interface provided in an embodiment of this application;

[0034] Figure 7 This is a schematic diagram of a settings interface for a dual-interface display mode provided in an embodiment of this application;

[0035] Figure 8 This is a flowchart of an interface display method provided in an embodiment of this application;

[0036] Figure 9 This is a schematic diagram of a first interface provided in an embodiment of this application;

[0037] Figure 10 This is a flowchart of another interface display method provided in the embodiments of this application;

[0038] Figure 11 This is a flowchart of another interface display method provided in the embodiments of this application;

[0039] Figure 12 This is a schematic diagram of a first adjustment control provided in an embodiment of this application;

[0040] Figure 13 This is a schematic diagram of another first interface provided in an embodiment of this application;

[0041] Figure 14 This is a flowchart of another interface display method provided in the embodiments of this application;

[0042] Figure 15 This is a schematic diagram of a first interface and a second interface provided in an embodiment of this application;

[0043] Figure 16 This is a flowchart of another interface display method provided in the embodiments of this application;

[0044] Figure 17 This is a schematic diagram of a second adjustment control provided in an embodiment of this application;

[0045] Figure 18 This is a schematic diagram of another first interface and second interface provided in the embodiments of this application;

[0046] Figure 19 This is a schematic diagram of an interface in a shopping application provided in an embodiment of this application;

[0047] Figure 20 This is a schematic diagram of an interface in another shopping application provided in this application embodiment. Detailed Implementation

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

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

[0050] The terms "one embodiment" or "some embodiments" used in this application mean that one or more embodiments of this application include the specific features, structures, or characteristics described in that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this application do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. Furthermore, the terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

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

[0052] With the development of computer technology, electronic devices of various forms and sizes are constantly emerging, such as mobile phones, tablets, and foldable screen phones, which bring great convenience to people's daily lives.

[0053] Users can install various applications on electronic devices to achieve corresponding functions. However, most applications are currently designed for regular mobile phones and are often poorly adapted to large-screen devices such as tablets and foldable phones. As a result, these applications often fail to achieve good display effects on large-screen devices.

[0054] For example, such as Figure 1 As shown in Figure (a), the shopping app interface displays correctly on a regular phone screen. However, for foldable phones, currently, as... Figure 1 As shown in Figure (b), one approach is to scale the interface proportionally to match the height of the foldable phone's screen. In this case, the interface is displayed in the center of the foldable phone's screen, but blank spaces remain on the left and right sides, resulting in poor interface aesthetics; or, as shown in Figure (b),... Figure 1As shown in Figure (c), another approach is to scale the interface proportionally to match the width of the foldable phone's screen. In this case, although the foldable phone displays the interface in full screen, the content is not fully displayed, and the displayed content is too large, resulting in a poor display effect. Consequently, users often struggle to have a good user experience when using shopping applications on foldable phones.

[0055] To address this, this application provides an interface display method that automatically adjusts the visual element layout of some interfaces when displaying an application interface on a large-screen device, ensuring the layout adapts to the overall screen size. For other interfaces, it automatically displays them as dual interfaces. This allows for more flexible interface display during application use, automatically providing users with a better visual experience and enhanced user experience, while also fully leveraging the field of view advantage of large-screen devices.

[0056] The electronic devices involved in the embodiments of this application will be described below.

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

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

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

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

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

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

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

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

[0065] Mobile communication module 150 can provide wireless communication solutions, including 2G / 3G / 4G / 5G, for use on electronic device 100. Wireless communication module 160 can provide wireless communication solutions, 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), and infrared (IR) technologies, for use on electronic device 100.

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

[0067] In this embodiment, the electronic device 100 can display the interface of an application on the display screen 194. For example, the electronic device 100 can adjust the layout of the visual elements of the application interface to adapt the layout of the visual elements of the interface to the current screen state of the display screen 194, thereby providing a better user experience.

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

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

[0070] The SIM card interface 195 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to make contact with and separate from the electronic device 100. The electronic device 100 can support one 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, etc. Multiple cards can be inserted into the same SIM card interface 195 simultaneously. The multiple cards can be of the same or different types. The SIM card interface 195 is also compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to realize functions such as calls and data communication. 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] The software system of electronic device 100 will be described next.

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

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

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

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

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

[0077] The window manager manages window applications. It can obtain screen size, determine the presence of a status bar, lock the screen, and capture screenshots. The content provider stores and retrieves data, making it accessible to applications. This data can include videos, images, audio, call logs, browsing history and bookmarks, and phone books. The layout manager has adaptive user interface (UI) layout capabilities, adjusting the application's view layout. Optionally, it also supports dual-interface display, allowing two interfaces to be displayed simultaneously. The view system includes visual controls, such as controls for displaying text and images. The view system can be used to build the application's interface, which can consist of one or more views, such as views displaying SMS notification icons, views displaying text, and views displaying images. The phone manager provides communication functions for the electronic device 100, such as managing call status (including connection and disconnection). The resource manager provides various resources for the application, such as localized strings, icons, images, layout files, and video files. The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify of download completion or message alerts. The notification manager can also display notifications as icons or scrolling text in the system's top status bar, such as notifications from background applications. Furthermore, the notification manager can appear as dialog boxes on the screen, such as displaying text messages in the status bar, emitting sounds, vibrating the device, or flashing indicator lights.

[0078] The Android Runtime comprises the core libraries and the virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system. The core libraries consist of two parts: one part contains the functionalities that Java calls, and the other part is the core Android library itself. The application layer and application framework layer run in the virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0079] The system layer can include multiple functional modules, such as a surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), and 2D graphics engines (e.g., SGL). The surface manager manages the display subsystem and provides fusion of 2D and 3D layers for multiple applications. The media libraries support playback and recording of various common audio and video formats, as well as still image files. They support multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG. The 3D graphics processing libraries implement 3D graphics drawing, image rendering, compositing, and layer processing. The 2D graphics engine is the drawing engine for 2D graphics.

[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 embodiments of this application will be explained in detail below.

[0082] The interface display method provided in this application embodiment can be applied to electronic devices, which can be large-screen devices, such as tablet computers, foldable screen devices (e.g., foldable screen phones), etc. This application embodiment does not limit this.

[0083] It should be noted that the large-screen devices described in this application embodiment are relative to ordinary mobile phones. That is, if the screen size of an electronic device is significantly larger than that of an ordinary mobile phone, then the ordinary mobile phone can be called a small-screen device, and this electronic device can be called a large-screen device.

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

[0085] Small screen mode refers to a screen size similar to that of a regular mobile phone (i.e., screen aspect ratio). For example, ... Figure 4As shown in Figure (a), the portrait mode of a tablet computer can be referred to as small screen mode; or, as... Figure 5 As shown in Figure (a), the folded state of a foldable screen device can also be called the small screen state.

[0086] Large screen mode refers to a screen size that differs significantly from that of a regular mobile phone. For example, such as... Figure 4 As shown in Figure (b), the landscape mode of a tablet computer can be referred to as the large-screen mode; or, as... Figure 5 As shown in Figure (b), the unfolded state of a foldable screen device can also be referred to as the large screen state.

[0087] In this embodiment of the application, when the large-screen device is in large-screen mode, some interfaces of the application can be displayed according to the UI adaptive layout mode, while other interfaces can be displayed according to the dual-interface display mode. This can flexibly adapt to the display of the application interface and automatically provide users with a better visual experience and a better user experience. At the same time, it can also give 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 the visual elements of an application interface to match the large screen state of the large screen device when the interface is displayed.

[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 selectively enabled by the user for certain applications. For example, ... Figure 6 As shown, users can open the UI adaptive layout mode settings interface on large-screen devices, and then turn the UI adaptive layout mode on or off for each application in the UI adaptive layout mode settings interface.

[0090] The dual-interface display mode is used to display one interface of the application while simultaneously displaying another interface on the large screen of a large-screen device. In other words, two interfaces are displayed 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 selectively enabled by the user for certain applications. For example, ... Figure 7 As shown, users can open the dual-interface display mode settings on large-screen devices, and then enable or disable the dual-interface display mode for each application in the dual-interface display mode settings.

[0092] Figure 8 This is a flowchart illustrating an interface display method provided in an embodiment of this application. See also... Figure 8 The method includes the following steps:

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

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

[0095] The target application can be any application installed on the electronic device, specifically an application that requires interface adaptation, such as an application with UI adaptive layout enabled. For example, the target application could be a shopping application, a browser application, etc., but this application embodiment does not limit this.

[0096] The first interface can be any interface of the target application. For example, the first interface can be the homepage of the target application, or it can be any interface of the target application other than the homepage. This application embodiment does not limit this.

[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 the user clicking the application icon of the target application. In another possible implementation, the first interface display instruction can be triggered by the user clicking a relevant control within an interface of the target application. Yet 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 orientation of the tablet (e.g., changing the tablet from portrait to landscape orientation), or by the user changing the state of a foldable phone (e.g., fully unfolding the foldable phone from a folded state). Of course, the first interface display instruction can also be triggered by the user through other operations, which are not limited in this embodiment.

[0098] Step 802: The electronic device determines whether it is in large screen mode.

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

[0100] If the electronic device is in large screen mode, proceed to steps 803 to 805; if the electronic device is not in large screen mode, proceed to 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 preset. There can be one or more first preset interface identifiers. The interface identified by the first preset interface identifier is the interface that requires interface adaptation in the large-screen state of the electronic device. In this embodiment, 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] An interface identifier 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., but this application embodiment does not limit this.

[0104] Visual elements in an interface refer to all visible elements within that interface, such as input boxes, buttons, icons, text, images, and videos. Visual elements in an interface can also be referred to as views within that interface. Views in an application's interface represent the application's appearance and interactivity, responsible for displaying data and receiving user input. Views in an interface may include views displaying text, views displaying images, views displaying videos, etc., but this application's embodiments do not limit this specific to any particular view.

[0105] The visual element layout data of an interface may include information such as the position, size, and content arrangement of the visual elements in the interface, but this application embodiment does not limit this.

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

[0107] In this scenario, after receiving the first interface display instruction, and confirming that the electronic device is in large-screen mode, 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, then the interface identifier of the first interface can be determined to be the first preset interface identifier.

[0108] A preset layout rule corresponding to a first preset interface identifier is a rule used to adjust the layout of visual elements of the interface identified by the first preset interface identifier. For example, the preset layout rule may include rules for adjusting the position, size, and content arrangement of visual elements in the interface. In this embodiment, after adjusting the layout of visual elements of the interface identified by the first preset interface identifier using 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 to the large screen state of an electronic device means that, when the electronic device is on a large screen, the visual element layout of the interface can display as much content as possible while ensuring the aesthetics of the interface, thereby improving the display effect and user experience, and making full use of the visual advantages of the large screen state of the electronic device.

[0110] If the interface identifier of the first interface is the first preset interface identifier, then proceed to step 804; if the interface identifier of the first interface is not the first preset interface identifier, then proceed to step 805.

[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 raw interface data for the first screen is provided by the target application. For example, the target application can obtain the raw interface data for the first screen from the server.

[0113] The original interface data of the first interface may include the position, size, and specific content (including but not limited to icons, text, images, videos, etc.) and content layout of each visual element in the first interface. This application embodiment does not limit this.

[0114] The first preset layout rule is used to adjust the layout of visual elements in the first interface. That is, it is used to adjust the position, size, and content arrangement of each visual element in the first interface so that the size of the visual elements in the first interface is appropriate when it is displayed, and a relatively large amount of interface content can be displayed.

[0115] In some embodiments, in response to a 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 layout of the visual elements of the first interface match the large screen of the electronic device, the first preset layout rule can be: first, enlarge the first interface proportionally 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, all visual elements in the first interface will be enlarged proportionally, but the relative positions of the visual elements will not change.

[0118] For example, after scaling up the first interface proportionally to the width of the first interface being the same as the screen width of the electronic device, the first preset layout rule may include rearranging the text content of a visual element in the first interface so that the visual element can display more text per 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 appropriately sized when displayed; and / or, the first preset layout rule may include adjusting the position of some visual elements in the first interface so that its overall display is more harmonious. For example, if multiple visual elements in the first interface were originally arranged in 3 columns, then the multiple visual elements can be adjusted to be arranged in 4 or more columns.

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

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

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

[0122] A first preset interface identifier and a preset layout rule corresponding to the 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 mode.

[0123] In some embodiments, since the electronic device displays the first interface in full screen, the operation of the electronic device to obtain the first preset layout rule corresponding to the first interface can be as follows: determine that the interface display ratio of the first interface is 100%, and then, based on 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 rules 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%). 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 include the range of (0%, 25%) in the correspondence shown in Table 1 is because when the interface display ratio is too low, the display area is too small, making it difficult to display the interface normally. Therefore, this range has been removed from Table 1.

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

[0126] Table 1

[0127]

[0128] This application embodiment is only used as an example to illustrate the correspondence between the first preset interface identifier, the interface display ratio and the preset layout rules. Table 1 above does not constitute a limitation on this application embodiment.

[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 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 based on the original interface data of the first interface.

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

[0132] In this embodiment, for the first interface of the target application, when the electronic device is not in large-screen mode, the electronic device can directly display the first interface data based on the original interface data. When the electronic device is in large-screen mode, but the interface identifier of the first interface is not the first preset interface identifier, i.e., the first interface is not a specific interface, the first interface data is still displayed based on the original interface data. Only when the electronic device is in large-screen mode 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 rules, and the first interface is displayed based on the adjusted interface data, so that the visual element layout of the first interface matches the large-screen mode of the electronic device. In this way, only the visual element layout of specific interfaces in the target application that have interface adaptation requirements is adjusted in large-screen mode, while other interfaces are still displayed in the normal way, thereby flexibly realizing the display of interfaces in the target application and improving the user experience of the target application. Furthermore, by adjusting the visual element layout of specific interfaces in the target application in large-screen mode, as much interface content as possible can be displayed while ensuring the display effect of specific interfaces, thereby giving full play to the visual advantage of the large-screen mode of the electronic device and improving the user experience.

[0133] For example, suppose the original interface data of the first interface is: Figure 9 The interface data shown in Figure (a) is as follows. Assuming the electronic device is a foldable phone, after the foldable phone adjusts the visual element layout of the first interface according to the first preset layout rule corresponding to the first interface, the displayed first interface can be... Figure 9 The interface shown in Figure (b) is shown in the diagram. It can be seen that, compared to... Figure 1 The interface shown in Figure (b) is as follows. Figure 9 The interface shown in Figure (b) is a full-screen display, thus offering a more aesthetically pleasing look; compared to... Figure 1 The interface shown in Figure (c) is as follows. Figure 9 The interface shown in Figure (b) displays more interface content, and the size of the displayed interface content is appropriate. Figure 9 The interface layout shown in Figure (b) is harmonious and the display effect is better. It can take advantage of the field of view of foldable screen phones and bring users a better user experience.

[0134] In some embodiments, the interface display method described above can be implemented by relevant modules in the software system of the electronic device. The following is a description of the method in conjunction with the above. Figure 3 The software system described in the embodiments is used to illustrate the interface display method provided in the embodiments of this application.

[0135] Figure 10This is a flowchart illustrating an interface display method provided in an embodiment of this application. See also... Figure 10 The method includes the following steps:

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

[0137] After receiving the instruction to display the first interface, the target application determines that it needs to display the first interface. 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 the same as described above. Figure 8 The operation of step 801 in the embodiment is similar, and will not be described again in this embodiment.

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

[0140] If the electronic device is not in large-screen mode, 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 based on the original interface data. Specifically, the view system can draw corresponding graphics based on the original interface data of the first interface, and then submit the drawn graphics to the rendering service for rendering to display the first interface on the screen.

[0141] If the electronic device is in large screen mode, proceed with step 1003 below.

[0142] The operation in step 1002 where the layout manager determines whether the electronic device is in large-screen mode is the same as described above. Figure 8 The operation of step 802 in the embodiment is similar, and will not be described again in this embodiment.

[0143] Step 1003: If the electronic device is in large screen mode, the layout manager determines whether the interface identifier of the first interface is the 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, which is the same operation as described above. Figure 8 The operation of step 803 in the embodiment is similar, and will not be described again in this embodiment.

[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 status 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 based on the original interface data. Specifically, the view system can draw corresponding graphics based on the original interface data of the first interface, and then submit the drawn graphics to the rendering service for rendering to display the first interface on the screen.

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

[0148] In step 1004, the layout manager adjusts the layout data of visual elements in the original interface data of the first interface according to the first preset layout rule corresponding to the first interface. This operation is the same as described above. Figure 8 The operation of 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 described again in this embodiment.

[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 based on the adjusted interface data of the first interface.

[0151] The view system can draw corresponding graphics based on 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 embodiments of this application can automatically adjust the layout of visual elements of the first interface at the application framework layer, thus achieving automatic interface adaptation without the target application being aware of it. In this case, there is no need to develop a special interface adapted to electronic devices 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 the electronic device. Specifically, after receiving the first interface display instruction, the target application can obtain the original interface data of the first interface from the server. Then, 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 a first preset interface identifier; 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. Alternatively, 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 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, 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 receiving the adjusted interface data of the first interface, the view system 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 based on the adjusted interface data of the first interface, it may also display a first adjustment control on top of the first interface. The first adjustment control is used to adjust the 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 based on the adjusted interface data of the first interface, it may also execute the following... Figure 11 The operation described in the examples.

[0155] Figure 11 This is a flowchart illustrating an interface display method provided in an embodiment of this application. See also... Figure 11 The method includes the following steps:

[0156] Step 1101: The electronic device responds to the trigger operation of the first adjustment control and determines the display ratio of the first interface.

[0157] For example, such as Figure 12 As shown, the first adjustment control can be a slider-type control with a slider within it. The position of the slider within the slider indicates the corresponding interface display ratio. By sliding the slider, the interface display ratio can be adjusted within a preset interface display ratio range. Of course, the first adjustment control can also be other types of controls, as long as they can adjust the interface display ratio within the preset interface display ratio range.

[0158] The preset display ratio range can be set in advance. For example, the preset display ratio range can be (25%, 100%), (30%, 100%), (35%, 100%), etc., but this application embodiment does not limit it.

[0159] The user can trigger the operation of the first adjustment control. That is, if the user wants to adjust the display size of the first interface, they can do so by manipulating the first adjustment control. For example, the user can drag it. Figure 12 The slider in the slider bar shown is used to adjust the position of the slider in the slider bar, thereby adjusting the display ratio of the first interface.

[0160] Step 1102: The electronic device obtains the 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 mentioned 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 based on the first adjustment control after detecting the trigger operation of the first adjustment control.

[0162] In some embodiments, step 1102 may be performed as follows: 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, based on the interface identifier of the first interface and the interface display ratio of the first interface.

[0163] The correspondence between the first preset interface identifier, the interface display ratio, and the preset layout rules has been explained above. Figure 8 The examples are explained in detail here, and will not be repeated here.

[0164] Assuming the interface identifier of the first interface is interface identifier 1 and the display ratio of the first interface is 80%, then the second preset layout rule corresponding to the first interface is layout rule 2, which corresponds to interface identifier 1 and the display ratio of 80% 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 rules.

[0166] Step 1103 is the same as above. Figure 8 The operation of 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 described again in this embodiment.

[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. Matching the visual element layout of the first interface with 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 based on the adjusted interface data of the first interface.

[0169] Step 1104 is the same as above. Figure 8 The operation of the electronic device in step 804 of the embodiment, which displays the adjusted interface data of the first interface, is similar to that of the first interface, and will not be described again in this embodiment.

[0170] In this embodiment, while displaying a first interface, the electronic device can also display a first adjustment control on top of the first interface, allowing the user to adjust the display size of the first interface using the first adjustment control. Specifically, when the electronic device detects a trigger operation on the first adjustment control, it can determine the display ratio of the first interface, then obtain a second preset layout rule corresponding to the first interface based on the display ratio. Afterward, it can adjust the layout of the visual elements of the first interface according to the second preset layout rule to match the display area corresponding to the display ratio. Thus, when the first interface is displayed in this display area, the layout of the visual elements of the first interface can display as much interface content as possible while ensuring the aesthetics of the interface, thereby improving the display effect and user experience.

[0171] For example, assume the electronic device is a foldable phone. After receiving the first interface display instruction, with the foldable phone in its unfolded state and the interface identifier of the first interface being a first preset interface identifier, the visual element layout of the first interface is adjusted according to the first preset layout rule corresponding to the first interface. The displayed first interface can then be... Figure 13As shown in Figure (a), interface 1301 has a first adjustment control 1302 displayed on top of it. The slider in the first adjustment control 1302 indicates that the current display ratio of the interface is 100%. The user then drags the slider in the first adjustment control 1302 downwards to reduce the display ratio of the first interface 1301. Assuming the user drags the slider in the first adjustment control 1302 downwards to the indicated display ratio of 80%, the foldable phone can obtain the second preset layout rule corresponding to the first interface 1301 based on the 80% display ratio. After adjusting the visual element layout of the first interface 1301 according to the second preset layout rule, the displayed first interface 1301 can be... Figure 13 The interface 1301 is shown in Figure (b). Then, the user drags the slider in the first adjustment control 1302 upwards to increase the display ratio of the first interface 1301. Assuming the user drags the slider in the first adjustment control 1302 upwards to the indicated display ratio of 91%, the foldable phone can obtain the second preset layout rule corresponding to the first interface 1301 based on the 91% display ratio. Then, after adjusting the visual element layout of the first interface 1301 according to the second preset layout rule, the displayed first interface 1301 can be... Figure 13 Interface 1301 is shown in Figure (c).

[0172] The UI adaptive layout mode provided in the embodiments of this application has been described above. Next, the dual-interface display mode provided in the embodiments of this application will be described.

[0173] Figure 14 This is a flowchart illustrating an interface display method provided in an embodiment of this application. See also... Figure 14 The method includes the following steps:

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

[0175] It should be noted that the first interface may be the interface data displayed by the electronic device in the above embodiment after adjustment based on the first interface, or the first interface may be the interface data displayed by the electronic device in the above embodiment based on the original interface data of the first interface. This application embodiment does not limit this.

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

[0177] The second interface display command can be triggered by the user. In one possible implementation, the second interface display command can be triggered by the user clicking on relevant controls in the first interface. Of course, the second interface display command can also be triggered by the user through other operations, and this application embodiment does not limit this.

[0178] Step 1402: The electronic device determines whether it is in large screen mode.

[0179] Step 1402 is the same as above. Figure 8 The operation of step 802 in the embodiment is similar, and will not be described again in this embodiment.

[0180] If the electronic device is in large-screen mode, proceed to step 1403. If the electronic device is not in large-screen mode, proceed to step 1406.

[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 preset. There can be one or more second preset interface identifiers. The interface identified by the second preset interface identifier is the interface that requires interface adaptation in the large-screen state of the electronic device. In this embodiment, the interface identified by the second preset interface identifier can be displayed simultaneously with its previous interface.

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

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

[0185] Step 1404 is the same as the above. Figure 8 The operation of step 803 in the embodiment is similar, and will not be described again in this embodiment.

[0186] If the interface identifier of the second interface is the first preset interface identifier, then proceed to step 1405. If the interface identifier of the second interface is not the first preset interface identifier, then proceed to step 1406.

[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] Step 1405 is the same as the above. Figure 8 The operation of step 804 in the embodiment is similar, and will not be described again in this embodiment.

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

[0190] Step 1406 is the same as the above. Figure 8 The operation of step 805 in the embodiment is similar, and will not be described again in this embodiment.

[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 distinct display areas on the screen of an electronic device. For example, the height of the first display area and the height of the second display area can be the same as the height of the electronic device's screen, and the sum of the widths of the first display area and the second display area can be the same as the width of the electronic device's screen. For instance, the first display area could be located on the left side of the screen, and the second display area could be located on the right side of the screen.

[0193] After receiving the second interface display instruction, the first display area and the second display area on the screen of the electronic device can be the same size. That is, half of the display area on the screen can be the first display area, and the other half 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 a second interface display instruction, the electronic device can divide its screen into a first display area and a second display area according to a preset partitioning strategy. For example, the electronic device can divide two-fifths of its screen into the first display area and the remaining three-fifths 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] The electronic device displays a first interface in the first display area based on the interface data of the first interface, and then displays a second interface in the second display area based on the interface data of the second interface. In this scenario, the electronic device simultaneously displays both the first and second interfaces. Users can browse and operate both interfaces at the same time. Furthermore, compared to the aspect ratio of the electronic device when displayed in full-screen mode on a large screen, the aspect ratios of the first and second display areas are closer to those of a typical mobile phone screen, resulting in a more harmonious and aesthetically pleasing display when both interfaces are displayed simultaneously. This enhances the user experience.

[0196] In some embodiments, when an electronic device displays the first interface in the first display area based on the interface data of the first interface, it can display the first interface in the first display area based on 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 based on the adjusted interface data of the first interface.

[0197] Electronic devices can pre-store the correspondence between preset interface identifiers, interface display ratios, and preset layout rules. This correspondence can include one or more preset interface identifiers, each preset interface identifier can correspond to one or more interface display ratios, and one preset interface identifier and its corresponding interface display ratio can correspond to one preset layout rule.

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

[0199] After obtaining the third preset layout rule from the correspondence, the electronic device adjusts 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 matches 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 display effect of the first interface, thereby giving full play to the visual advantage of the large screen of the electronic device and improving 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, it can obtain the corresponding preset layout rule as the fourth preset layout rule corresponding to the second interface from the correspondence between the interface identifier of the second interface, the interface display ratio corresponding to the second display area, and the interface identifier as the interface display ratio of the second display area. The visual element layout data in the original interface data of the second interface is adjusted according to the fourth preset layout rule, and the second interface is displayed according to the adjusted interface data of the second interface.

[0201] After obtaining the fourth preset layout rule from the correspondence, the electronic device adjusts the visual element layout of the second interface 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, after displaying the second interface in the second display area, as much interface content as possible can be displayed while ensuring the interface display effect of the second interface, thereby giving full play to the visual advantage of the large screen of the electronic device and improving the user experience.

[0202] For example, suppose the electronic device is a foldable phone. The first interface displayed on the foldable phone is... Figure 15 The interface 1501 is shown in Figure (a). If the user clicks on an image 1502 of a product in the first interface 1501, a second interface display command will be triggered. In response to the second interface display command, if the foldable phone is in the unfolded state and the interface identifier of the second interface is the second preset interface identifier, such as... Figure 15 As shown in Figure (b), a first interface 1501 and a second interface 1503 can be displayed simultaneously. The second interface 1503 displays the product image, product name, etc. In this case, the user can browse and operate the first interface 1501 and the second interface 1503 at the same time, thereby improving the user experience.

[0203] In some embodiments, when the electronic device displays a first interface in a first display area and a second interface in a second display area, a second adjustment control may also be displayed on the boundary line between the first and second display areas. The second adjustment control is used to adjust the display ratio of the first and second interfaces, i.e., to adjust the size of the first and second display areas. 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, the following can also be executed. Figure 16 The operation described in the examples.

[0204] Figure 16 This is a flowchart illustrating an interface display method provided in an embodiment of this application. See also... Figure 16 The method includes the following steps:

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

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

[0207] For example, such as Figure 17 As shown, the second adjustment control can be a slider 1701 located at the midpoint of the boundary line between the first and second display areas. The user can drag the slider 1701 left or right to adjust the size of the first and second display areas, thus adjusting the display ratio of the first and second interfaces. For example, in... Figure 17 In the middle, if the user drags slider 1701 to the left, the display ratio of the interface on the left will decrease, and the display ratio of the interface on the right will increase.

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

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

[0210] In some embodiments, the electronic device can obtain a corresponding preset layout rule as a third preset layout rule for the first interface based on the interface identifier and the display ratio of the first interface, from the correspondence between the interface identifier, the display ratio and the preset layout rule; and obtain a corresponding preset layout rule as a fourth preset layout rule for the second interface based on the interface identifier and the display ratio of the second interface, from the correspondence between the interface identifier, the 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] Step 1603 is the same as the above. Figure 8 The operation of 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 described again in this embodiment.

[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] Step 1604 is the same as the above. Figure 8 The operation of the electronic device in step 804 of the embodiment, which displays the adjusted interface data of the first interface, is similar to that of the first interface, and will not be described again in this embodiment.

[0215] In this embodiment, the electronic device can not only simultaneously display a first interface and a second interface, but also allow the user to adjust the display size of the first and second interfaces. Specifically, when the electronic device detects a trigger operation on the second adjustment control, it can determine the display ratio of the first and second interfaces. Based on this, it can determine a third preset layout rule corresponding to the first interface and a fourth preset layout rule corresponding to the second interface. Then, it can adjust the visual element layout of the first interface according to the third preset layout rule to match the visual element layout of the first interface with the first display area. Furthermore, it can adjust the visual element layout of the second interface according to the fourth preset layout rule to match the visual element layout of the second interface with the second display area. Thus, 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 and second interfaces 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, suppose the electronic device is a foldable screen phone. Figure 18As shown in Figure (a), the foldable phone simultaneously displays a first interface 1501 and a second interface 1503. Then, the user drags slider 1701 to the right to increase the display ratio of the first interface 1501 and decrease the display ratio of the second interface 1503. The foldable phone can determine the third preset layout rule corresponding to the first interface 1501 based on its display ratio, and determine the fourth preset layout rule corresponding to the second interface 1503 based on its display ratio. Then, it adjusts the visual element layout of the first interface 1501 according to the third preset layout rule and the visual element layout of the second interface 1503 according to the fourth preset layout rule. After this adjustment, the displayed first interface 1501 and second interface 1503 can be displayed as follows: Figure 18 As shown in Figure (b) of the document.

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

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

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

[0220] In this embodiment, users can easily and quickly switch from dual-interface display to single-interface display using the second adjustment control, thus providing a quick switching method that can better meet user needs and improve user experience.

[0221] Next, taking a shopping app as the target application as an example, combined with... Figure 19 and Figure 20 This will illustrate one possible implementation of the embodiments of this application.

[0222] like Figure 19 As shown in Figure (a), the electronic device is in large-screen mode. After the user clicks the application icon of the shopping application on the main interface of the electronic device, the interface display command of the home page of the shopping application is triggered.

[0223] In response to the interface display command, such as Figure 19 As shown in Figure (b), the electronic device displays the homepage of the shopping application. Specifically, the electronic device can follow the steps outlined above. Figure 8 The interface display method described in this embodiment displays the homepage by adjusting the layout of its visual elements before displaying it, thus ensuring that the displayed layout matches the state of the large screen. Then, when the user clicks on an image of a product on the homepage, it triggers an interface display command for the product's description page.

[0224] In response to the interface display command, such as Figure 19 As shown in Figure (c), the electronic device can simultaneously display the homepage and the product introduction page. Specifically, the electronic device can display the product introduction page as described above. Figure 16 The interface display method described in this embodiment displays the homepage and the product introduction page. Then, the user clicks the details button on the product introduction page, triggering an interface display command for the product details page.

[0225] In response to the interface display command, such as Figure 20 As shown in Figure (a), the electronic device displays the product details page. Specifically, the electronic device can follow the steps outlined above. Figure 8 The interface display method described in this embodiment displays the product details page. Specifically, the visual element layout of the product details page can be adjusted before display, so that the displayed visual element layout matches the large screen's state. Then, when the user clicks the footprint button on the product details page, in response to this click operation, as follows... Figure 20 As shown in Figure (b), the electronic device can overlay a footprint window on top of the product details page. Then, when the user clicks on an image of a product in the footprint window, it triggers an interface display command for that product's details page.

[0226] In response to the interface display command, such as Figure 20 As shown in Figure (c), the electronic device can simultaneously display the product detail pages for both products. Specifically, the electronic device can do so as described above. Figure 16 The interface display method described in this embodiment displays the product details pages for these two products.

[0227] Thus, the interface display method provided in this application embodiment can flexibly display various interfaces in a shopping application, adapting each interface in the shopping application to the large screen status of the electronic device, improving the interface display effect and enhancing the user's shopping experience.

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

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

Claims

1. An interface display method characterized by, The method is applied to an electronic device, and the method comprises: receiving a first interface display instruction, the first interface display instruction being used for instructing to display a first interface of a target application program; in a case where the electronic device is in a large-screen state and an 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, so as to make a visual element layout of the first interface match the large-screen state, the original interface data of the first interface being obtained from a server; displaying the first interface according to adjusted interface data of the first interface, and displaying a first adjustment control in an upper layer of the first interface, the first adjustment control being a control in the form of a slider; in response to a triggering operation on the first adjustment control, determining an interface display ratio of the first interface according to a position of a slider in the first adjustment control; obtaining 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; displaying the first interface according to the adjusted interface data of the first interface.

2. The method of claim 1, wherein, The method further comprises: receiving a second interface display instruction in the first interface, the second interface display instruction being used for instructing to display a second interface of the target application program; in a case where the electronic device is in the large-screen state and an interface identifier of the second interface is a second preset interface identifier, displaying the first interface according to interface data of the first interface in a first display area, and displaying the second interface according to interface data of the second interface in a second display area.

3. The method of claim 2, wherein, A second adjustment control is displayed on a boundary line between the first display area and the second display area, the second adjustment control being used for adjusting interface display ratios of the first interface and the second interface, and after the first interface is displayed according to the interface data of the first interface in the first display area and the second interface is displayed according to the interface data of the second interface in the second display area, the method further comprises: in response to a triggering operation on the second adjustment control, determining the interface display ratio of the first interface and the interface display ratio of the second interface; 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; 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; displaying the first interface according to the adjusted interface data of the first interface in the first display area, and displaying the second interface according to the adjusted interface data of the second interface in the second display area.

4. The method of claim 3, wherein, The third preset layout rule corresponding to the first interface is obtained according to the interface display ratio of the first interface, and the fourth preset layout rule corresponding to the second interface is obtained according to the interface display ratio of the second interface, including: 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 an interface display ratio threshold, the third preset layout rule corresponding to the first interface is obtained according to the interface display ratio of the first interface, and the fourth preset layout rule corresponding to the second interface is obtained according to the interface display ratio of the second interface; The method further includes: 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 determined as 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; The other interface is displayed according to the adjusted interface data of the other interface.

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

6. The method of any one of claims 1 to 4, wherein, The target application program is a shopping application program, and the first interface is a home page or a product detail page of the shopping application program.

7. An interface display method characterized by comprising: The method is applied to an electronic device, the electronic device is installed with a target application program, an application program framework layer of the electronic device includes a layout manager and a view system, and the method includes: After the target application program receives a first interface display instruction, the target application program sends original interface data of the first interface to the layout manager, the first interface display instruction is used to instruct to display the first interface of the target application program, and the original interface data of the first interface is obtained from a server; After the layout manager receives the original interface data of the first interface, in a case where the electronic device is in a large-screen state and an interface identifier of the first interface is a first preset interface identifier, the layout manager adjusts 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; and the layout manager sends adjusted interface data of the first interface to the view system; After the view system receives 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, and displays a first adjustment control in an upper layer of the first interface, the first adjustment control is a control in the form of a slider. The electronic device determines a display proportion of the first interface according to a position of a slider in the first adjustment control in response to a triggering operation on the first adjustment control; obtains a second preset layout rule corresponding to the first interface according to the display proportion of the first interface; adjusts visual element layout data in original interface data of the first interface according to the second preset layout rule; and displays the first interface according to the adjusted interface data of the first interface.

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

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

Images