User interface display method, layout method, development method and electronic equipment

Abstract

The invention discloses a user interface display method, a layout method, a development method and electronic equipment, and relates to the technical field of electronics. The user interface display method is applied to the electronic equipment with a display screen and comprises the steps that in an available screen area of a first specification, a first target interface is displayed in a first interface layout, and the first interface layout is determined according to the first specification and a preset constraint expression set. In response to the fact that the available screen area is changed from the first specification to the second specification, the first target interface is displayed in the available screen area of the second specification through a second interface layout, and the second interface layout is determined according to the second specification and the preset constraint expression set. Wherein the preset constraint expression group comprises a plurality of constraint expressions, and the constraint expressions represent layout conditions of interface elements in the user interface under various available screen area specifications. The interface layout design is simpler, the workload of developers is reduced, and the interface layout can adapt to different screen specifications more flexibly.

Description

Technical Field

[0001] This application relates to the field of electronic technology, and in particular to a user interface display method, layout method, development method, and electronic device. Background Technology

[0002] With the rapid development of electronic technology, there are more and more types of terminals, and the differences in display areas of different terminals are becoming more and more prominent. Therefore, the user interface (UI) of computer software such as application software (APP) needs to adapt to screen areas of different specifications.

[0003] In order to enable computer software to adapt to different screen sizes, it is usually necessary to develop multiple versions of the user interface. This not only increases the workload of computer software development, but also makes it difficult for multiple versions of the user interface to flexibly adapt to different screen sizes. Summary of the Invention

[0004] The purpose of this application is to provide a user interface display method, layout method, development method, and electronic device, which simplifies interface layout design, reduces the workload of developers, and allows the interface layout to adapt more flexibly to different screen specifications.

[0005] To achieve the above objectives, the embodiments of this application provide the following solutions:

[0006] In a first aspect, this application provides a user interface display method applied to an electronic device having a display screen. The method includes: displaying a first target interface in a first-specification available screen area with a first interface layout, the first interface layout being determined according to a first specification and a preset constraint expression set. In response to a change in the available screen area from the first specification to a second specification, displaying the first target interface in a second-specification available screen area with a second interface layout, the second interface layout being determined according to a second specification and a preset constraint expression set. The preset constraint expression set includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0007] This application primarily addresses scenarios where the available screen area changes from a first specification to a second specification. By designing a set of preset constraint expressions that represent the layout conditions of interface elements under various available screen area specifications, it essentially defines the layout requirements for the interface, eliminating the need for developers to define the layout of each control. This makes the layout simpler and more flexible, reduces developer workload, and improves development efficiency. Furthermore, when the available screen area changes from the first specification to the second specification, the constraint expression set allows for dynamic adjustment of the interface layout, enabling the interface to transition from the first layout to the second layout. This achieves adaptive display of the user interface under different screen specifications, improving the flexibility, rationality, and adaptability of the user interface layout.

[0008] In one possible implementation, displaying the first target interface in a first interface layout within the available screen area of ​​the first specification includes: determining the first layout parameters corresponding to the first target interface under the first specification based on a preset set of constraint expressions. Then, displaying the first target interface within the available screen area of ​​the first specification according to the first layout parameters. Thus, since the constraint expressions represent the layout conditions of interface elements in the user interface under various available screen area specifications, they are equivalent to describing the layout requirements of the user interface. Therefore, when the user interface is running on the available screen area of ​​the first specification, displaying the first target interface according to the first layout parameters determined by the preset set of constraint expressions ensures that the first target interface corresponding to the first specification displays the best visual effect, improving the user's visual experience.

[0009] In one possible implementation, determining the first layout parameters corresponding to the first target interface under the first specification, based on a set of preset constraint expressions, includes: identifying the first preset specification most similar to the first specification from a variety of preset specifications. The layout parameters corresponding to the first target interface under each preset specification are predetermined. Using the layout parameters corresponding to the first target interface under the first preset specification as the first initial parameters of the set of preset constraint expressions, the set of preset constraint expressions is solved according to the first specification to obtain the first layout parameters. Thus, since the variety of preset specifications and the layout parameters corresponding to the first target interface under each preset specification are predetermined, finding the first preset specification most similar to the first specification and using the layout parameters corresponding to the first target interface under the first preset specification as the first initial parameters of the set of preset constraint expressions improves the efficiency of solving the set of preset constraint expressions.

[0010] In one possible implementation, the constraint expressions in the preset constraint expression group use the specification parameters of the available screen area as constants and the layout parameters of the user interface as variables. Using the layout parameters corresponding to the first target interface under the first preset specification as the first initial parameters of the preset constraint expression group, the preset constraint expression group is solved according to the first specification to obtain the first layout parameters. This involves using the specification parameters corresponding to the first specification as constants in the preset constraint expression group and the first initial parameters as initial values ​​for the variables, then solving the preset constraint expression group to obtain the first layout parameters. In this way, by solving the preset constraint expression group with constants and initial values ​​(first initial parameters) for the variables, the convergence to the first layout parameters can be achieved more quickly. Especially when using incremental calculation, the closer the initial values ​​of the variables are to the optimal solution, the smaller the computational load, thereby improving the calculation speed and quickly determining the first layout parameters suitable for the current screen specification.

[0011] In one possible implementation, the first layout parameter is the optimal or approximate solution of a predefined set of constraint expressions. In this way, since the relevant attributes affecting the layout of elements (such as controls) are the variables to be solved in the constraint expressions, the optimal or approximate solution of the predefined set of constraint expressions can constrain the relevant attributes of the element (such as controls) layout, enabling the relevant elements (such as controls) to have a good interface representation.

[0012] In one possible implementation, the method further includes: in response to an operation to switch a first target interface to a second target interface within an available screen area of ​​a first specification, displaying the second target interface in a third interface layout within the available screen area of ​​the first specification. The third interface layout is determined based on the first specification, first layout parameters, and a set of preset constraint expressions. This method is primarily applicable to scenarios where the first target interface switches to the second target interface within an available screen area of ​​the same specification, such as when the user scrolls the current target interface. The interface layout can be dynamically adjusted using only the preset constraint expression set, the first specification, and the first layout parameters, transitioning from the first interface layout to the third interface layout to refresh the layout of the second target interface, providing the user with a smooth layout transition experience. Thus, in scenarios where the target interface changes, there is no need to design an additional interface layout that conforms to the change in the target interface; the user interface can still adaptively display under different target interfaces, reducing the workload for developers and achieving a more flexible and reasonable display of the target interface.

[0013] In one possible implementation, the constraint expressions in the preset constraint expression group use the specification parameters of the available screen area as constants and the layout parameters of the user interface as variables. Displaying the second target interface in the available screen area of ​​the first specification with the third interface layout involves: using the specification parameters corresponding to the first specification as constants in the preset constraint expression group, and using the first layout parameters as initial values ​​for the variables, solving the preset constraint expression group to obtain the third layout parameters. Then, displaying the second target interface in the available screen area of ​​the first specification according to the third layout parameters. Since the variables in the preset constraint expression group affect the relevant properties of the layout of interface elements (such as controls), changes in the target interface (i.e., changes in the variables in the preset constraint expression group) will cause changes in the preset constraint expression group. Therefore, it is necessary to re-solve the preset constraint expression group corresponding to the second target interface, and use the obtained third layout parameters as the third interface layout to update the layout effect of the second target interface. This approach, due to its simple and flexible layout design, eliminates the need for developers to create multiple user interface versions, allowing the user interface to adapt to various target interfaces within the same available screen area and to reasonably layout the UI (such as the GUI) on various target interfaces without compromising the user's visual experience or GUI interaction experience.

[0014] In one possible implementation, the first target interface can be any interface of the target application, and the pre-defined constraint expression set is stored in the application file of the target application. For example, if the target application is application software, the application file can be the application installation package of the application software. In this way, the interface layout can be efficiently and flexibly determined through the pre-defined constraint expression set during the installation or runtime of the target application.

[0015] In one possible implementation, in response to a change in available screen area from a first specification to a second specification, displaying the first target interface in a second interface layout within the available screen area of ​​the second specification includes: determining the second layout parameters corresponding to the first target interface under the second specification based on a preset set of constraint expressions. Then, displaying the first target interface in the available screen area of ​​the second specification according to the second layout parameters. Thus, in response to the application scenario where the available screen area changes from the first specification to the second specification, displaying the first target interface according to the second layout parameters determined by the preset set of constraint expressions ensures that the first target interface corresponding to the second specification displays the best visual effect, improving the user's visual experience.

[0016] In one possible implementation, determining the second layout parameters corresponding to the first target interface under the second specification, based on a set of preset constraint expressions, includes: determining a second preset specification that is most similar to the second specification from a variety of preset specifications. The layout parameters corresponding to the first target interface under each preset specification are predetermined. Using the layout parameters corresponding to the first target interface under the second preset specification as the second initial parameters of the set of preset constraint expressions, the set of preset constraint expressions is solved according to the second specification to obtain the second layout parameters. This improves the efficiency of solving the set of preset constraint expressions.

[0017] Secondly, this application provides a user interface layout method applied to an electronic device with a display screen. The method includes: obtaining the specifications of a target screen area, the target screen area being used to display a first target interface; determining layout parameters corresponding to the first target interface based on the specifications of the target screen area and a preset constraint expression set; the preset constraint expression set including multiple constraint expressions, each constraint expression representing the layout conditions of interface elements in the user interface under various available screen area specifications; the multiple constraint expressions including one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints; and displaying the first target interface in the target screen area according to the layout parameters corresponding to the first target interface.

[0018] In this application, the layout parameters corresponding to the first target interface, determined by the specifications of the target screen area and a set of preset constraint expressions, can adapt well to various target interfaces, achieving adaptive layout of the user interface under different screen specifications. This results in a simple and flexible layout design, eliminating the need for developers to create multiple user interface versions, reducing workload, improving development efficiency, and enhancing the flexibility and rationality of the interface layout, thereby improving the user's visual experience and GUI interaction experience.

[0019] Thirdly, this application provides a user interface development method applied to an electronic device with a display screen, wherein the electronic device is equipped with an integrated development environment (IDE). The method includes: obtaining interface layout rules based on a domain-specific language (DSL); compiling the interface layout rules into a set of constraint expressions; and packaging the set of constraint expressions into the installation file of the target application. The set of constraint expressions includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface of the target application under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0020] In this application, the layout design is simpler and more flexible, reducing the workload of developers and improving development efficiency. It solves the technical problems of complex development process and inflexible layout design in related technologies. It can automatically generate UI layouts that conform to the designer's original intentions, flexibly adapt to different screen sizes, and make an app optimal under different screen sizes, thereby improving the user's visual experience and GUI interaction experience.

[0021] In one possible implementation, the method further includes: obtaining multiple preset specifications, where each specification represents the specifications of the available screen area of ​​the user interface; determining the layout parameters corresponding to the target interface under each preset specification based on a set of constraint expressions; the target interface including any interface of the target application; and packaging the layout parameters corresponding to the target interface under each preset specification into the installation file of the target application. Thus, by determining the layout parameters corresponding to the target interface under each preset specification and packaging them into the installation file of the target application, the initial values ​​of subsequent variables can be determined based on the layout parameters corresponding to the target interface under each preset specification when the target application is running, thereby improving the solution efficiency. Especially when using incremental solution calculations, the closer the initial values ​​of the variables are to the optimal solution, the smaller the computational load, thus improving the computational speed and quickly determining the target layout parameters suitable for the target screen specifications.

[0022] In one possible implementation, the Integrated Development Environment (IDE) includes a visual editor. Obtaining interface description information based on a domain-specific language (DSL) involves: acquiring user editing operations through the visual editor to obtain interface layout rules based on the DSL output by the editor. Editing operations are used to edit the layout of interface elements. The interface layout rules include preset layout rules and default layout rules. The preset layout rules are determined based on the editing operations, while the default layout rules are determined based on the fundamental aesthetic principles of interface design. The preset layout rules have a higher priority than the default layout rules. In this way, the visual editor allows for WYSIWYG UI (such as GUI) drawing, reducing the difficulty of interface compilation and enabling developers to quickly build compliant user interfaces without needing to focus too much on underlying code details. This allows developers to achieve a balance between development efficiency and flexibility, automatically generating reasonable GUI layouts that conform to the aesthetics of most people.

[0023] Fourthly, this application provides a user interface display device applied to an electronic device having a display screen. The device includes: a first display module for displaying a first target interface in a first-specification available screen area with a first interface layout, the first interface layout being determined according to the first specification and a preset constraint expression set; and a second display module for displaying the first target interface in a second-specification available screen area in response to a change in the available screen area from the first specification to the second specification, the second interface layout being determined according to the second specification and the preset constraint expression set. The preset constraint expression set includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0024] Fifthly, this application provides a user interface layout apparatus applied to an electronic device with a display screen. The apparatus includes: a first acquisition module for acquiring the specifications of a target screen area, the target screen area being used to display a first target interface; a determination module for determining layout parameters corresponding to the first target interface based on the specifications of the target screen area and a preset constraint expression set; the preset constraint expression set including multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications; the multiple constraint expressions including one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints; and a third display module for displaying the first target interface in the target screen area according to the layout parameters corresponding to the first target interface.

[0025] Sixthly, this application provides a user interface development apparatus for use in electronic devices with displays. The electronic device is equipped with an integrated development environment (IDE). The apparatus includes: a second acquisition module for acquiring interface layout rules based on a domain-specific language (DSL); a compilation module for compiling the interface layout rules into a set of constraint expressions; and a packaging module for packaging the set of constraint expressions into the installation file of a target application. The set of constraint expressions includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface of the target application under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0026] In a seventh aspect, this application provides an electronic device, including: a processor and a memory for storing processor-executable instructions. When the processor is configured to execute instructions, the electronic device causes the method described above to be implemented.

[0027] Eighthly, this application provides a storage medium storing computer program instructions thereon, which, when executed by an electronic device, cause the electronic device to perform the method described above.

[0028] Ninthly, this application provides a computer program product including a computer-readable storage medium storing a computer program, which, when at least one processor executes the computer program, causes at least one processor to perform the above-described method.

[0029] Understandably, the beneficial effects achieved by the user interface display device of the fourth aspect, the user interface layout device of the fifth aspect, the user interface development device of the sixth aspect, the electronic device of the seventh aspect, the storage medium of the eighth aspect, and the computer program product of the ninth aspect can be referred to the beneficial effects in the first aspect, the second aspect, or the third aspect and any possible implementation thereof, which will not be repeated here. Attached Figure Description

[0030] Figure 1 This is a structural diagram illustrating an application scenario provided in an embodiment of this application.

[0031] Figure 2 This is a structural schematic diagram of another application scenario provided by an embodiment of this application;

[0032] Figure 3 This is a structural schematic diagram of another application scenario provided by an embodiment of this application;

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

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

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

[0036] Figure 7 A schematic diagram of the structure of a runtime constraint layout tool provided in an embodiment of this application;

[0037] Figure 8 This application provides a schematic diagram of the structure of an IDE.

[0038] Figure 9 A flowchart illustrating a user interface development method provided in an embodiment of this application;

[0039] Figure 10 A flowchart illustrating a user interface display method provided in an embodiment of this application;

[0040] Figure 11 A schematic diagram of a plurality of first target interfaces provided for an embodiment of this application;

[0041] Figure 12 A flowchart illustrating a user interface layout method provided in an embodiment of this application;

[0042] Figure 13 This is a schematic diagram of the structure of a user interface display device provided in an embodiment of this application;

[0043] Figure 14 This is a schematic diagram of the structure of a user interface layout device provided in an embodiment of this application;

[0044] Figure 15 This is a schematic diagram of the structure of a user interface development apparatus provided in an embodiment of this application;

[0045] Figure 16 This is a schematic diagram of the structure of another electronic device provided in an embodiment of this application. Detailed Implementation

[0046] In the description of the embodiments of this application, unless otherwise stated, " / " means "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 there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone.

[0047] In the following description of the embodiments of this application, unless otherwise stated, "a plurality of" means two or more.

[0048] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0049] The following provides an exemplary description of the application scenarios of the embodiments of this application.

[0050] Computer software (such as apps or system software, hereinafter referred to as apps) communicates with users through a UI, one type of which is the graphical user interface (GUI). A GUI represents the display of information and touch operations around the screen, and is a primary mode of human-computer interaction. With the ability to run GUI-enabled apps on various electronic devices with different screen sizes, and with mobile phones evolving from simple candybar phones to foldable phones, the operating environments for computer software have become increasingly diverse. Therefore, UIs need to be more flexible in adapting to different screen sizes to improve the user's GUI interaction experience. The aforementioned electronic devices have displays, such as personal computers (PCs), mobile phones (e.g., candybar phones, foldable phones), tablets, televisions (TVs), smart speakers with screens, in-vehicle infotainment systems, and smart home devices (e.g., control panels).

[0051] Furthermore, the application scenarios of this application embodiment also include: such as Figure 1 As shown, an app from one electronic device (such as a mobile phone) is projected onto the screen of another electronic device (such as a television). Figure 2 As shown, an app from one electronic device (such as a mobile phone) is transferred to the screen of another electronic device (such as a tablet) for display. Distributed systems, such as system software, even directly support cross-device workflows for apps. For example... Figure 3 As shown, the available screen area of ​​an app on an electronic device (such as a mobile phone) may change due to screen orientation switching, split-screen mode, or the unfolding / folding of a foldable device. Apps on electronic devices (such as large-screen devices like PCs) run in window mode, and these windows can be resized arbitrarily. For example... Figure 4 As shown, the available screen area of ​​electronic devices displays application cards of different sizes (such as weather application cards), and so on. These scenarios all result in variations in the screen size, aspect ratio, resolution, and shape of the available display area of ​​the UI. This fragmentation of screen sizes means that app developers, when providing applications with the same functionality, need to consider how to support the app's UI to adapt and run on various screen sizes, thereby improving the user's GUI interaction experience on different screen sizes.

[0052] To address the aforementioned application scenarios, relevant technologies typically employ the following solutions to resolve the technical challenges: developing different app versions for different screen sizes, using grid systems, employing responsive layouts, or using layout managers (autolayout) to calculate the layout of UI controls for specific screen sizes. Details are as follows:

[0053] Taking the development of different app versions for different screen sizes as an example, the same app may require multiple versions depending on the device type. For instance, some video playback apps have both mobile and tablet versions, while some shopping apps have both mobile and TV versions. However, developing multiple user interface versions increases the workload of app development. Furthermore, because different manufacturers produce the same type of device, the same app needs to employ fixed strategies, such as scaling, to adapt to the slight differences between devices from different manufacturers. In addition, due to the emergence of foldable phones, the screen size differences between the same type of device can become very large. For example, if the mobile version of an app runs on a candybar phone, but the UI is still laid out according to the candybar phone's screen size on a foldable phone, the interface will become unsuitable. Therefore, even with multiple user interface versions developed, the problem of inflexibly adapting the user interface layout to different screen sizes still exists.

[0054] Taking grid system technology as an example, this technology involves striping the screen width and aligning the edges of all controls with the grid lines. When screen dimensions change, the UI controls are stretched proportionally according to the grid line positions. This technology, which stretches UI controls, can handle minor differences in screen dimensions to some extent (e.g., different candybar phones may have different resolutions like 1920*1080 or 1920*1200). However, when screen dimensions differ significantly, it cannot change the relative positions of the UI controls, limiting its flexibility.

[0055] Taking responsive layout technology as an example, responsive layout technology specifically involves pre-setting multiple width ranges based on the screen width and designing a separate layout effect for each width range. For instance, when an app needs to display a GUI, it queries the current device screen width to see which width range it falls into and applies the corresponding layout. Then, within the same width range, it fine-tunes the coordinate position by proportional stretching or automatic wrapping. However, because this technology requires designing a separate layout effect for each width range, it still involves a large workload, and the interface layout design is not flexible enough, making it difficult for the user interface layout to flexibly adapt to different screen specifications.

[0056] Taking the calculation of UI control layout under specific specifications using a layout manager as an example, this layout manager calculates the layout of controls under specific specifications by defining the coordinates of UI controls. For example: buttonA.x + buttonA.width + 10 = buttonB.x, indicating that the horizontal spacing between buttons A and B is 10 pixels. buttonA.y = buttonB.y, indicating that the tops of buttons A and B are aligned. buttonC.y ≥ buttonB.y + buttonB.height, indicating that button C must be below button B. However, this technique has the following problems: First, the technique is not comprehensive and the layout design is not flexible enough, only supporting single-dimensional constraints. For example, it cannot define a button width as twice its height (width and height are different dimensions). Second, the technique does not support logical conditions. For example, some detailed controls may not be displayed on a screen that is too compact. Third, the layout performance of this technique is poor. For example, the amount of calculation increases exponentially as the number of controls increases. Fourth, the layout expression of this technique is too complex. Developers need to describe a lot of trivial layout constraints, resulting in a large workload.

[0057] In summary, the technical solutions adopted by the above-mentioned technologies all suffer from problems such as complex user interface layout design, large workload for developers, and difficulty in flexibly adapting the interface layout to different screen specifications.

[0058] In view of this, embodiments of this application provide a user interface display method that, by designing multiple constraint expressions including one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints, can support multi-dimensional constraints (such as length and width being different dimensions). Since constraint expressions represent the layout conditions of interface elements in the user interface under various available screen area specifications, this simple, flexible, and efficient layout expression through multiple constraint expressions allows the determined interface layout to adapt more flexibly to different screen sizes. Even when screen specifications change, the interface layout can be automatically and dynamically adjusted, achieving good adaptability across different screen sizes. This simplifies interface layout design, reduces the workload for developers, and allows the interface layout to adapt more flexibly to different screen sizes.

[0059] In some embodiments, the method provided in this application is applied to an electronic device with a display screen. First, a first target interface is displayed in a first-specification available screen area with a first interface layout, the first interface layout being determined according to the first specification and a preset constraint expression set. Second, in response to the available screen area changing from the first specification to a second specification, the first target interface is displayed in a second-specification available screen area with a second interface layout, the second interface layout being determined according to the second specification and a preset constraint expression set. The preset constraint expression set includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications; the multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0060] In the above embodiments, since the preset constraint expression group represents the layout conditions of interface elements in the user interface under various available screen area specifications, and supports one or more multi-dimensional constraints such as linear constraints, quadratic constraints, Boolean constraints, and conditional constraints, it not only makes layout expression simple and efficient, but also provides comprehensive layout description capabilities, making the layout method more flexible. Therefore, by using the preset constraint expression group, the interface layout of the user interface can be automatically adjusted according to different screen range specifications, and displayed on the target interface with the most reasonable interface layout, so that the user interface can more flexibly adapt to various screen range specifications (such as size, resolution, or aspect ratio). In this way, through flexible layout design, developers do not need to develop multiple versions of the user interface, reducing their workload and improving development efficiency. Even when the screen specifications change, the layout of the user interface can maintain good adaptability and rationality, thereby providing users with a better user experience.

[0061] The system architecture of the embodiments of this application will be described exemplarily below.

[0062] This application provides a layout system. The layout system includes an electronic device with a display screen.

[0063] The aforementioned electronic devices can be mobile phones with displays (including candybar phones and foldable phones), tablets, handheld computers, personal computers, cellular phones, personal digital assistants (PDAs), wearable devices (such as smartwatches and smart bracelets), televisions, portable devices, smart screens, laptops, smart speakers with screens, in-vehicle infotainment systems, and smart home devices (such as control panels), etc. This application does not limit the specific type of electronic device or the operating system installed on it.

[0064] Figure 5 A schematic diagram of one structure of electronic device 500 is shown. For example... Figure 5 As shown, the electronic device 500 may include a processor 510, an external memory interface 520, an internal memory 521, a universal serial bus (USB) interface 530, a wireless communication module 560, an audio module 570, a sensor module 580, buttons 590, a motor 591, an indicator 592, a camera 593, and a display screen 594, etc.

[0065] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 500. In other embodiments of this application, the electronic device 500 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.

[0066] Processor 510 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. The different processing units may be independent devices or integrated into one or more processors.

[0067] The controller can be the nerve center and command center of the electronic device 500. The controller can generate operation control signals based on the instruction opcode and timing signals to control the fetching and execution of instructions.

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

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

[0070] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 510 may include multiple I2C buses. The processor 510 can couple to the touch sensor, charger, flash, camera 593, etc., through different I2C bus interfaces. For example, the processor 510 can couple to the touch sensor through the I2C interface, enabling the processor 510 and the touch sensor to communicate through the I2C bus interface, thereby realizing the touch function of the electronic device 500.

[0071] The I2S interface can be used for audio communication. In some embodiments, the processor 510 may include multiple I2S buses. The processor 510 can be coupled to the audio module 570 via the I2S bus to enable communication between the processor 510 and the audio module 570. In some embodiments, the audio module 570 can transmit audio signals to the wireless communication module 560 via the I2S interface to enable the function of answering phone calls through a Bluetooth headset.

[0072] The PCM interface can also be used for audio communication, sampling, quantizing, and encoding analog signals. In some embodiments, the audio module 570 and the wireless communication module 560 can be coupled via the PCM bus interface. In some embodiments, the audio module 570 can also transmit audio signals to the wireless communication module 560 via the PCM interface, enabling the function of answering phone calls through a Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.

[0073] The UART interface is a universal serial data bus used for asynchronous communication. This bus can be a bidirectional communication bus. It converts the data to be transmitted between serial and parallel communication. In some embodiments, the UART interface is typically used to connect the processor 510 and the wireless communication module 560. For example, the processor 510 communicates with the Bluetooth module in the wireless communication module 560 via the UART interface to implement Bluetooth functionality. In some embodiments, the audio module 570 can transmit audio signals to the wireless communication module 560 via the UART interface to enable music playback through Bluetooth headphones.

[0074] The MIPI interface can be used to connect the processor 510 to peripheral devices such as the display screen 594 and the camera 593. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI). In some embodiments, the processor 510 and the camera 593 communicate via the CSI interface to enable the electronic device 500 to capture images. The processor 510 and the display screen 594 communicate via the DSI interface to enable the electronic device 500 to display images.

[0075] USB port 530 is a USB standard compliant interface, which can be a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 530 can be used to connect a charger to charge electronic device 500, and can also be used for data transfer between electronic device 500 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

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

[0077] The wireless communication function of the electronic device 500 can be implemented through an antenna, a wireless communication module 560, a modem processor, and a baseband processor.

[0078] Antennas are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 500 can be used to cover one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antennas can be multiplexed as diversity antennas for a wireless local area network. In some other embodiments, antennas can be used in conjunction with tuning switches.

[0079] The wireless communication module 560 can provide solutions for wireless communication applications on the electronic device 500, 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. The wireless communication module 560 can be one or more devices integrating at least one communication processing module. The wireless communication module 560 receives electromagnetic waves via an antenna, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to the processor 510. The wireless communication module 560 can also receive signals to be transmitted from the processor 510, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via the antenna.

[0080] In some embodiments, the electronic device 500 can communicate with a network and other devices via wireless communication technologies. These wireless communication technologies may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time-Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies. The GNSS may include Global Positioning System (GPS), Global Navigation Satellite System (GLONASS), BeiDou Navigation Satellite System (BDS), Quasi-Zenith Satellite System (QZSS), and / or Satellite Based Augmentation Systems (SBAS).

[0081] Electronic device 500 implements display functions through a GPU, a display screen 594, and an application processor. The GPU is a microprocessor for image processing, connecting the display screen 594 and the application processor. The GPU performs mathematical and geometric calculations and is used for graphics rendering. Processor 510 may include one or more GPUs, which execute program instructions to generate or modify display information.

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

[0083] Camera 593 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device 500 may include one or N cameras 593, where N is a positive integer greater than 1.

[0084] The external storage interface 520 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 500. The external memory card communicates with the processor 510 through the external storage interface 520 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0085] Internal memory 521 can be used to store computer executable program code, which includes instructions. Processor 510 executes various functional applications and data processing of electronic device 500 by running the instructions stored in internal memory 521. Internal memory 521 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 during the use of electronic device 500 (such as audio data, phonebook, etc.). Furthermore, internal memory 521 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.

[0086] The audio module 570 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. The audio module 570 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 570 may be located in the processor 510, or some functional modules of the audio module 570 may be located in the processor 510.

[0087] The sensor module 580 may include pressure sensors, gyroscope sensors, barometric pressure sensors, magnetic sensors, accelerometers, distance sensors, proximity sensors, fingerprint sensors, temperature sensors, touch sensors, ambient light sensors, bone conduction sensors, etc.

[0088] A touch sensor, also known as a "touch panel," can be located on the display screen 594. The touch sensor and display screen 594 together form a touchscreen, also called a "touch screen." The touch sensor detects touch operations applied to or near it. The touch sensor can then transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 594. In some embodiments, the touch sensor may also be located on the surface of the electronic device 500, in a different position than the display screen 594.

[0089] Buttons 590 include control buttons, power buttons, volume buttons, etc. Buttons 590 can be mechanical buttons or touch-sensitive buttons. Electronic device 500 can receive button input and generate key signal inputs related to user settings and function control of electronic device 500.

[0090] Motor 591 can generate vibration alerts. Motor 591 can be used for incoming call vibration alerts or for touch vibration feedback. For example, different vibration feedback effects can be corresponding to touch operations applied to different applications (such as taking photos, playing audio, etc.). Motor 591 can also correspond to different vibration feedback effects for touch operations applied to different areas of the display screen 594. Different application scenarios (such as time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also be customized.

[0091] Indicator 592 can be an indicator light, used to indicate charging status, power changes, or to indicate messages, missed calls, notifications, etc.

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

[0093] Figure 6 A software architecture block diagram of an electronic device is shown.

[0094] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer.

[0095] The application layer can include a series of application packages.

[0096] like Figure 6 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS.

[0097] 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.

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

[0099] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0100] Content providers store and retrieve data, making that data accessible to applications. This data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc.

[0101] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views.

[0102] A phone manager is used to provide communication functions for electronic devices. For example, it manages call status (including connection and disconnection).

[0103] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0104] The notification manager allows applications to display notifications in the status bar. These notifications can be used to convey 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, message alerts, or connection status. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0105] The Android Runtime consists of core libraries and a virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system.

[0106] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0107] The application layer and application framework layer run in a 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.

[0108] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0109] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0110] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0111] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0112] A 2D graphics engine is a graphics engine for 2D drawing.

[0113] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver, camera driver, audio driver, and sensor driver.

[0114] In some embodiments, an electronic device with a display screen is used to perform a user interface display method. Specifically, the electronic device with the display screen is used to display a first target interface in a first interface layout in an available screen area of ​​a first specification, the first interface layout being determined according to a first specification and a preset set of constraint expressions. The electronic device with the display screen is also used to display the first target interface in a second interface layout in an available screen area of ​​a second specification in response to a change in the available screen area from the first specification to a second specification, the second interface layout being determined according to a second specification and a preset set of constraint expressions. The preset set of constraint expressions includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0115] In this embodiment, the electronic device with a display screen is mainly used in scenarios where the available screen area changes from a first specification to a second specification. By designing a set of preset constraint expressions that can represent the layout conditions of interface elements in the user interface under various available screen area specifications, the layout requirements of the interface layout are essentially defined, eliminating the need for developers to specifically define how each control should be laid out. This makes the layout simpler and more flexible, reduces the workload of developers, and improves development efficiency. Furthermore, when the available screen area changes from the first specification to the second specification, the constraint expression set allows for dynamic adjustment of the interface layout, enabling the interface layout to transition from the first to the second interface layout. This achieves adaptive display of the user interface under different screen specifications, improving the flexibility, rationality, and adaptability of the user interface layout.

[0116] In one implementation, the first target interface can be any interface of the target application. A set of predefined constraint expressions is stored in the application file of the target application. For example, if the target application is software, the application file can be the application installation package.

[0117] In one implementation, the available screen area can be the full screen of an electronic device (such as a candybar phone or tablet), a preset display window (e.g., some applications do not occupy the entire screen area by default, but use a window of a preset size), a split-screen display window (allowing users to view or operate two different applications simultaneously), a foldable screen (such as a foldable phone), or even different screen sizes within the same electronic device, such as landscape or portrait orientations, etc. The electronic device can adaptively display the user interface in available screen areas of different sizes, and can also adaptively adjust the user interface when screen sizes change to better adapt to the current screen area, providing users with a superior visual and GUI interaction experience.

[0118] In one implementation, an electronic device with a display screen can control the display driver in the kernel layer, thereby controlling the display of user interfaces for various computer software on the available screen area of ​​the display screen.

[0119] Specifically, an electronic device with a display screen can control the display driver of the kernel layer, thereby controlling the available screen area of ​​a first specification on the display screen to display a first target interface in a first interface layout.

[0120] Specifically, an electronic device with a display screen can also control the display driver of the kernel layer, thereby controlling the available screen area of ​​the second specification on the display screen to display the first target interface in a second interface layout.

[0121] In another implementation, the electronic device with a display screen also includes a solver, which solves a set of preset constraint expressions to obtain target layout parameters. For example, the target layout parameters may specifically be one or more of a first layout parameter, a second layout parameter, a third layout parameter, and layout parameters corresponding to the first target interface.

[0122] Optionally, the target layout parameters are the optimal or approximate solution of a preset set of constraint expressions.

[0123] For example, the solver may include a complete solver or an incomplete solver. Wherein: a complete solver is used to solve for the optimal solution of a set of preset constraint expressions. An incomplete solver is used to solve for an approximate solution of the set of preset constraint expressions.

[0124] For example, the solver may include an incremental solver or a non-incremental solver. The incremental solver is used to solve preset constraint expressions with initial values ​​for variables. The non-incremental solver is used to solve preset constraint expressions without initial values ​​for variables.

[0125] Understandably, the above-mentioned solvers can be designed and used for different application scenarios and needs, and different solvers can be used in combination.

[0126] For example, an incremental solver is used to solve a set of preset constraint expressions to obtain the target layout parameters. Since it is not necessary to build the solution environment from scratch every time, the incremental solution method can reduce computation time and improve solution efficiency.

[0127] In another implementation, the electronic device with the display screen also includes a generative model, which is used to solve a set of preset constraint expressions to obtain the target layout parameters.

[0128] For example, by combining the knowledge extraction capabilities of generative models and the understanding capabilities of human-computer interaction with the precise reasoning and problem-solving capabilities of formal methods, a set of preset constraint expressions can be solved to obtain the target layout parameters. This allows for a more intelligent, efficient, and flexible solution to the set of preset constraint expressions.

[0129] In another implementation, the electronic device with a display screen also includes an optimizer, which optimizes the preset constraint expression set before solving it. That is, the optimizer optimizes the preset constraint expression set to obtain an optimized set of preset constraint expressions, which is then provided to the solver or generative model.

[0130] Alternatively, the optimizer can be located inside or outside the solver.

[0131] In other embodiments, the electronic device having a display screen is also configured to, in response to an operation of switching a first target interface to a second target interface in an available screen area of ​​a first specification, display the second target interface in a third interface layout in the available screen area of ​​the first specification, the third interface layout being determined according to the first specification, a first layout parameter and a preset constraint expression set.

[0132] In another implementation, the electronic device with a display screen also includes a variable selector, used in scenarios where a first target interface in an available screen area of ​​a first specification is switched to a second target interface. The electronic device with the display screen dynamically adds or deletes corresponding constraint equations based on the constraint expression corresponding to the variable selector of the update control. The update control represents the updated control of the second target interface relative to the first target interface. In this way, the electronic device with the display screen copies the corresponding constraint expression based on the variable selector of the update control to update the preset constraint expression group, which is efficient and convenient.

[0133] In this embodiment, the electronic device with a display screen is mainly used in scenarios where a first target interface is switched to a second target interface within an available screen area of ​​the same specification. The interface layout can be dynamically adjusted by using preset constraint expression groups, a first specification, and first layout parameters, transitioning from the first interface layout to the third interface layout, thus refreshing the layout of the second target interface and providing users with a smooth layout transition experience. In this way, in scenarios where the target interface changes, there is no need to design an additional interface layout that conforms to the change in the target interface; the user interface can still adaptively display under different target interfaces, reducing the workload of developers and achieving a more flexible and reasonable display of the target interface.

[0134] Based on the user interface display method described in this application embodiment implemented by an electronic device with a display screen, a set of preset constraint expressions is designed to represent the layout conditions of interface elements in the user interface under various available screen area specifications. This makes the layout expression simpler and more flexible, meeting the layout requirements of various application scenarios. For example, it can adaptively display a reasonable interface layout for available screen areas of different specifications; and it can still meet the interface layout requirements of the target interface when switching targets (such as page scrolling). Thus, it eliminates the need to develop multiple user interface versions. The user interface can flexibly adapt to various screen specifications (such as size, resolution, or aspect ratio), changes in different screen areas, and switching of target interfaces, reducing the workload of developers, improving development efficiency, and enhancing the user's visual experience and GUI interaction experience.

[0135] In other embodiments, the electronic device with a display screen is used to perform a user interface layout method. Specifically, the electronic device with the display screen is used to obtain the specifications of a target screen area, which is used to display a first target interface. The electronic device with the display screen is used to determine the layout parameters corresponding to the first target interface based on the specifications of the target screen area and a preset set of constraint expressions. The electronic device with the display screen is also used to display the first target interface in the target screen area according to the layout parameters corresponding to the first target interface.

[0136] Based on the user interface layout method described in this application embodiment implemented by an electronic device with a display screen, the layout parameters corresponding to the first target interface, determined by the specifications of the target screen area and a set of preset constraint expressions, can adapt well to various target interfaces, achieving adaptive layout of the user interface under different screen specifications. This results in a simple and flexible layout design, eliminating the need for developers to create multiple user interface versions, reducing workload, improving development efficiency, and enhancing the flexibility and rationality of the interface layout, thereby improving the user's visual experience and GUI interaction experience.

[0137] In one implementation, the electronic device with a display screen also includes a runtime constraint layout tool. This runtime constraint layout tool refers to the layout tool used when computer software (such as apps, system software, etc.) is deployed on the electronic device and runs.

[0138] For example, the open-source constraint layout tool can be integrated into the operating system of an electronic device with a display screen, or it can be integrated into the application of an electronic device with a display screen.

[0139] For example, the above user interface display method and / or the above user interface layout method can be executed by a runtime constraint layout tool.

[0140] For example, such as Figure 7 As shown, the runtime constraint layout tool may include one or more of the solvers (specifically the incremental solver), optimizers, and variable selectors mentioned above.

[0141] In this embodiment of the application, the electronic device with a display screen is equipped with an Integrated Development Environment (IDE). An IDE refers to a source code editor used for software development, as well as supporting development and debugging tools, which can provide the layout tools required for computer software development.

[0142] In some embodiments, the IDE is used to design a group of constraint expressions. This group of constraint expressions includes multiple constraint expressions that represent the layout conditions of interface elements in the target application's user interface under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0143] In one implementation, the constraint expression group can be the aforementioned preset constraint expression group.

[0144] In one implementation, the constraint expression design language can be a domain-specific language (DSL). A DSL is a functional expression language defined to meet the needs of specific scenarios; in this embodiment, it is a descriptive language for interface layout. By using a DSL language to design constraint expressions, layout design becomes simpler, allowing developers to easily express their layout intentions and achieve the required layout structure, unlike traditional UI development where programmers need to design and assemble simple layout managers to achieve complex layout effects.

[0145] In one implementation, the basic constraint expression is: express">|<|=|:express|value-range!priority;

[0146] Here, express represents a linear expression with N variables. This means that variables in this basic constraint expression can have product relationships with constants, but variables cannot have product relationships with each other.

[0147] `value-range` represents a range of values ​​for one or more variables. For example, `value-range` supports multiple notations. For instance, the range of variable X can be written as 0 to 100; the range of variable Y can be written as 25 ± 20%. By expanding the notation of `value-range`, it avoids using multiple conditional expressions to represent cases greater than or less than, making the expression more concise.

[0148] Priority indicates the priority of layout rules within the interface layout rules. For example, the priority of layout rules is set according to a preset priority.

[0149] In basic constraint expressions, colons and equal signs have the same meaning. Colons are supported for compatibility with cascading style sheets (CSS) syntax. Furthermore, for range expressions, colons are more intuitive than equal signs, for example: #btnA[width]:150~200.

[0150] In one implementation, the constraint expression uses the specification parameters of the available screen area as constants and the layout parameters of the user interface as variables. These layout parameters (i.e., variables) represent the relevant properties of interface elements (such as controls). In other words, the relevant properties affecting the layout of interface elements (such as controls) are the variables to be solved in the constraint expression.

[0151] In one implementation, for UI controls, UI control properties can be of the predefined selector[property] type (i.e., the control's ID + property), associated with a set of UI element properties;

[0152] Optionally, the control properties supported in the embodiments of this application include, but are not limited to:

[0153] width: width of the control;

[0154] height: Control height;

[0155] left, x: leftmost element;

[0156] right: Right-hand coordinate;

[0157] top, y: top coordinate;

[0158] bottom: coordinates of the bottom;

[0159] begin: The left or right direction is determined by the current window's language writing direction;

[0160] end: The left or right direction is determined by the current window's language writing direction;

[0161] central-x: The horizontal center position of the control, equivalent to x + width / 2;

[0162] center-y: The vertical center position of the control, equivalent to y+height / 2;

[0163] `visible`: A boolean property. Determines whether the object is visible (invisible but still occupies space, meaning width and height are still calculated normally).

[0164] `hidden`: A boolean property. Determines whether the control is hidden (a hidden control does not occupy space, equivalent to `width` and `height` being zero).

[0165] `enable`: A boolean property. Indicates whether something is enabled (e.g., a button is grayed out and cannot be clicked, a text box is grayed out and cannot be entered)...

[0166] Building upon this, variables can be expressed in the format of the host control's [properties]. In other words, a variable can be expressed in the format of a control's [property] with a specified control ID. For example, #btnA[width] represents the width of button A. Here, btnA is the ID of button A, and width is the property of button A. #btnA[height] represents the height of button A, and button A can be understood as the host control.

[0167] In another implementation, developers can define control properties according to actual needs. For example, they can define new control properties such as margin, padding, border, rotation, opacity, etc., without further restrictions.

[0168] In this embodiment, the supported control attributes are richer, further enhancing the expressiveness and adaptability of the controls. By defining the aforementioned control attributes, layout design becomes more flexible, better adapting to the needs of different screen sizes and dynamic screen changes.

[0169] In one implementation, express supports one or more of the following computation types: linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0170] Optionally, linear constraints can be represented as linear expressions. A linear expression contains first-order terms of the variables. For example, examples of linear constraints are as follows:

[0171] btnA[x]>btnB[x]+btnB[width]+8; / *The position of button A is more than 8 units to the right of button B* /

[0172] btnA[width] / btnB[width] = 2; / *It appears to involve division, but it's actually still a linear constraint because it can be transformed into the following form:* /

[0173] btnA[width] = 2btnB[width];

[0174] btnA[width] = 2btnA[height]; / *The width of button A is twice its height* / ...

[0175] In this way, by supporting linear constraints, it is possible to define linear relationships between different dimensions (such as the width of button A being twice its height, where width and height are different dimensions), enabling direct mathematical relationships between attributes of different dimensions.

[0176] Optionally, quadratic constraints can be represented as quadratic expressions. Quadratic expressions are used to describe area-related constraints. A quadratic expression contains square terms of variables (i.e., multiplication of variables by themselves or multiplication of variables with each other). For example, examples of quadratic constraints are as follows:

[0177] / * Regardless of its width and height, a text box may need an area greater than 100 to accommodate the same amount of text. * /

[0178] txtA[width]*txtA[height]>100……

[0179] In this way, by supporting quadratic constraints, more complex nonlinear relationships can be handled, improving the flexibility of the layout to meet diverse layout needs.

[0180] Optionally, Boolean constraints can be represented as Boolean expressions to describe the logical relationships between controls. A Boolean constraint consists of a set of Boolean expressions. Boolean expressions can be Boolean variables, or numerical expressions such as linear or quadratic expressions as defined above. Furthermore, Boolean constraints concatenate Boolean variables and numerical expressions using logical operators. Supported logical operators include one or more of the following: AND (&), OR (|), NOT (!), implication (->), and equivalence (<->). The implication (->) operator can also be written as →, such as a→b being equivalent to... The equivalent (<->) operator can also be written as like Equivalent to two constraints and For example, Boolean constraint paradigms are as follows:

[0181] #btnA[width]=#btnB[width]&#btnB[width]=#btnC[width]

[0182] / * This is actually equivalent to splitting it into two constraints * /

[0183] #btnA[width]=#btnB[width];

[0184] #btnB[width]=#btnC[width];

[0185] / *The width of btnB is either equal to the width of btnA or equal to the width of btnC.* /

[0186] #btnA[width]=#btnB[width]|#btnB[width]=#btnC[width]

[0187] #btnA[enable] = ! #btnB[enable]; / *Button A and button B cannot be active at the same time* /

[0188] / * When the container width is greater than 100, the width of btnA is half that of the container; when it is less than 100, the width of btnA is the container width minus 50.* /

[0189] #parent[width]>100->#btnA[width]=parent[width] / 2;

[0190] #parent[width]<100->#btnA[width]=parent[width]-50……

[0191] In this way, by supporting Boolean constraints, it is possible to define complex relationships between control properties. Through the logical judgment of Boolean constraints themselves, as well as linear or quadratic constraints, comprehensive constraints on attributes of different dimensions can be achieved, enabling the user interface to adapt well to different screen sizes.

[0192] Optionally, conditional constraints can be represented as conditional expressions (if...else...) to visually represent the type of constraint. For example, a common media query in the World Wide Web (Web) might apply a set of layout styles for PC pages if the window width is less than 500 pixels, and otherwise apply a set of layout styles for mobile pages. An example of expressing this using conditional constraint behavior would be as follows:

[0193]

[0194]

[0195] Furthermore, conditional constraints can also limit whether a control is compressed based on different screen sizes, or add an ellipsis button when the stack view, even after being expanded to its maximum, still cannot accommodate its internal subviews. For example, when the page width is less than a certain threshold, the menu bar will be compressed into smaller buttons, as shown in the following example:

[0196]

[0197] In this way, by supporting conditional constraints, different constraint rules can be applied under different conditions (such as screens of different sizes), and the relationships between different properties of controls can be defined according to specific conditions, thereby achieving cross-dimensional constraints.

[0198] In this embodiment, since Express supports one or more of the following calculation types: linear constraints, quadratic constraints, Boolean constraints, and conditional constraints, it can support multi-dimensional constraints and more flexibly define the relationships between controls, rather than being limited to a single dimension. This makes the layout design simpler, more flexible, and more efficient, and can dynamically adjust the layout of controls according to different screen sizes, ensuring that the user interface displays well on different devices and screen sizes.

[0199] In another implementation, the constraint expression includes pseudo-elements. Exemplary pseudo-elements include, but are not limited to:

[0200] ::before: indicates the previous sibling element of the current element;

[0201] ::after: indicates the next sibling element after the current element;

[0202] ::parent: indicates the direct parent container element of the current element;

[0203] ::root: indicates that it points to a page;

[0204] window: indicates the viewport. When you want an element to not scroll with the page, such as the bottom tab navigation label, the top search box, the toolbar, the menu bar, etc., you can align the element to the bottom or top of the window.

[0205] ::self: indicates that it refers to the current element itself. When the constraint expression only writes the attribute without square brackets and does not specify the host element, it represents this attribute of the current node. It can be regarded as a shorthand form of the ::self pseudo-element.

[0206] Among them, pseudo-elements can be applied to various independent constraint expressions. In an independent constraint expression, the concept of "current element" identifies the element specified on the left side of this expression and can only be written on the right side of the constraint expression because the "current element" needs to be identified based on the left side.

[0207] In another implementation, in the case of representing the distance relationship between two elements, a constraint expression is defined using syntactic sugar. This can avoid cumbersome operations and can more concisely and efficiently determine the constraint representation. Exemplarily, @h and @v indicate whether the line spacing or column spacing is defined in this line. The ways to define the spacing size are as follows:

[0208] A - 10 - B: indicates that the fixed spacing is 10;

[0209] A ∼ 10 ∼ B: indicates that the spacing is greater than 10 (the wavy line can be imagined as a rubber band);

[0210] A > 10 < B: indicates that the spacing is less than 10;

[0211] A - 10 ∼ 20 - B: indicates that the spacing is between 10 and 20;

[0212] A -- B: indicates that the spacing is 0

[0213] A ∼∼ B: indicates that the spacing is greater than zero

[0214] Example:

[0215] h|#btnA - 10 - #btnB|; / * The spacing is 10 * /

[0216] h|#btnA ∼ 10 ∼ #btnB|; / * The spacing is greater than 10 * /

[0217] ]h|#btnA > 10 < #btnB|; / * The spacing is less than 10 * /

[0218] h|#btnA - 10 ∼ 20 - #btnB|; / * The spacing is between 10 and 20 * /

[0219] h|#btnA -- #btnB|; / * The spacing is 0 * /

[0220] h|#btnA ∼∼ #btnB|; / * The spacing is greater than 0 * / ...

[0221] In another implementation, the constraint expression can represent that a group of controls can be aligned horizontally or vertically. For example, the examples of the constraint expression are as follows:

[0222] Alignment direction (alignment method)|Control set|;

[0223] The available alignment strategies are:

[0224] Vertical direction: top, center, bottom

[0225] Horizontal direction: begin, center, end, left, right

[0226] Example:

[0227] h(central)|#btnA#btnB#btnC|; / * Center buttons A, B, and C horizontally* /

[0228] h(central)|.classA|; / * Center alignment; control collections can be represented using variable selectors * /

[0229] h(top)|.classA|; / * Top alignment * /

[0230] h(bottom)|.classA|; / * Low-end alignment * /

[0231] h(monospace)|.classA|; / * Equal height, with top and bottom aligned * /

[0232] v(central)|.classA|; / * Vertically center-aligned * /

[0233] v(left)|.classA|; / *Left alignment* /

[0234] v(right)|.classA|; / * Whether left or right alignment depends on the language of the current page * /

[0235] v(begin)|.classA|; / * Whether left or right alignment depends on the language of the current page * /

[0236] v(end)|.classA|; / *Right alignment* /

[0237] v(monospace)|.classA|; / * Vertically uniform width, horizontally aligned * /

[0238] Alignment is often used in conjunction with spacing. It can be defined as follows:

[0239] / *Controls selected by the class A variable selector are horizontally centered, with a spacing greater than 20, and a fixed spacing of 10 from the container edge.* /

[0240] h(central)|-10-::before~20~.classA~20~::after-10-|;

[0241] Alignment can also be combined with boolean variables. We define true as "h" for horizontal alignment and false as "v" for vertical alignment.

[0242] / * If the container control is larger than 400, the buttons inside will be arranged horizontally. Otherwise, they will be arranged vertically. * /

[0243] $dir = #parent[width] > 400;

[0244] $dir(central)|-10-#btnA~20~btnB~20~#btnC-10-|;

[0245] / * You can also directly inline the bool variable and write it in the following form* /

[0246] (#parent[width]>400)(central)|-10-#btnA~20~btnB~20~#btnC-10-|;…

[0247] In other embodiments, constraint expressions can indicate that controls are not allowed to occlude each other. The prohibition of mutual occlusion between controls is an implicit constraint. For example, btnA is not occluded by btnB; an example constraint expression is as follows:

[0248] #btnA[z]>btnB[z]||btnA[left]>btnB[right]||

[0249] #btnA[right]<btnB[left]||#btnA[top]> btnB[bottom]||#btnA[bottom] <btnB[top]……

[0250] For example, btnA should not be obscured by any other controls. Hand-writing these expressions would generate a massive amount of data, thus requiring a simplified syntax. Examples of constraint expressions are as follows:

[0251] uncoverable(variable selector1, variable selector2?); / * None of the controls selected by variable selector1 can be obscured by any of the controls selected by variable selector2. * /

[0252] uncoverable(#btnA,#btnB); / * Button A cannot be obscured by button B * /

[0253] `uncoverable(#btnA, .classB);` / * Button A cannot be assigned to an element with class B * /

[0254] uncoverable(#btnA); / * Button A cannot be obscured by any element * /

[0255] `uncoverable(.classA, .classB);` / * Elements declared with classA cannot be obscured by elements declared with classB * /

[0256] In this embodiment, firstly, developers do not need to describe the layout of each specific interface element (the coordinates, width, height, visibility, and other attributes that may affect the layout of controls within the available screen area). Instead, they describe the interface layout requirements through a set of constraint expressions, such as alignment, centering, spacing, A being to the left of B, B and C having equal widths, etc. After solving the constraint expression set, and laying out the interface according to the solved layout parameters, each element (such as controls) can meet the layout requirements, making the layout more reasonable. Since the constraint expression set describes "layout requirements" rather than a definite "layout result," different layout results can be obtained when the same app runs on screen areas of different specifications, thus achieving the effect of "adaptive layout." Secondly, traditional interface development methods require developers to use limited simple layout managers, such as table layouts, list layouts, and flow layouts, to achieve complex layout effects through nested assembly. This process requires programmers to think and design, and is not a simple mapping of the descriptions of UX designers. Different developers may design different implementation schemes for the same layout effect. Traditional interface layout schemes cannot well cope with the differences in screen area specifications. To achieve a layout adaptable to different screen sizes, one either needs to invest extra effort, such as designing different interface versions for different screen sizes, or resort to methods that reduce the overall effect, such as implementing only limited scaling and alignment. This application's embodiment achieves greater layout flexibility while reducing developer workload and increasing development efficiency. Finally, the description of Boolean (logical) and linear relationships in the constraint expression group effectively enables the user interface layout to adaptively display on available screen sizes. In summary, this application's embodiment offers a simpler and more flexible layout design, reducing developer workload and improving development efficiency. It solves the technical problems of complex development processes and inflexible layout design in related technologies, automatically generating UI layouts that match the designer's intentions, flexibly adapting to different screen sizes, ensuring an app is optimal on various screen sizes, and enhancing the user's visual and GUI interaction experience.

[0257] In one implementation, the above constraint expression group can be written directly by the developer in the IDE.

[0258] In another implementation, the IDE can include a generative model. The constraint expressions described above can then be generated by the generative model.

[0259] In other embodiments, the IDE is used to obtain interface layout rules based on a domain-specific language (DSL). The IDE is used to compile the interface layout rules into a set of constraint expressions. The IDE is also used to package the constraint expression set into the installation file of the target application.

[0260] In one implementation, interface layout rules can be used to describe the layout requirements of interface elements.

[0261] In one implementation, the interface layout rules include preset layout rules and default layout rules. Preset layout rules are determined based on editing operations. Default layout rules are determined based on fundamental aesthetic principles of interface design.

[0262] For example, a preset layout rule represents a layout rule determined by the developer based on the user experience (UX) designer's description of the interface (such as a verbal description by the UX designer or a design document provided by the UX designer).

[0263] For example, the IDE includes a visual editor for editing preset layout rules. For instance, when editing preset layout rules, the visual editor allows users to drag and drop UI (e.g., GUI) components (such as buttons, text boxes, or labels) constrained by the layout rules onto the design interface, and adjust them intuitively (e.g., by dragging and dropping) to adjust their position, size, color, or font. Furthermore, the visual editor can be used to set the relative positions of components, define behaviors that respond to user interactions (such as click events), and configure layout parameters to adapt to different screen sizes or resolutions, etc. Ultimately, it outputs preset layout rules for a GUI interface with a better user experience. In this way, the visual editor enables WYSIWYG UI (e.g., GUI) interface design, reducing the difficulty of interface compilation and allowing developers to quickly build user interfaces that meet requirements without needing to focus too much on the underlying code details.

[0264] For example, basic aesthetic principles include horizontal and vertical alignment, and distributed alignment.

[0265] Optionally, preset layout rules have higher priority than default layout rules. That is, in the event of a conflict between two layout rules, the preset layout rules are retained, while those belonging to the default layout rules are removed. Since the development environment cannot understand what layout is most "reasonable," UI layout rules need to be as comprehensive and specific as possible. However, overly detailed definitions can burden developers. Therefore, default layout rules are introduced, automatically incorporating some basic "aesthetic principles" as default requirements. Furthermore, the default layout rules have lower priority; therefore, if developers feel that the default layout does not meet their expectations, they can use preset priority rules to "override" the default layout rules. This allows developers to achieve a balance between development efficiency and flexibility, automatically generating a reasonable GUI layout that conforms to the aesthetics of most people.

[0266] In one implementation, the IDE also includes a DSL compiler, which is used to compile interface layout rules into a set of constraint expressions.

[0267] Specifically, the IDE inputs the interface layout rules into the DSL compiler, which then outputs a set of constraint expressions. This allows developers to automatically calculate reasonable layout parameters based solely on the interface layout rules, rather than relying on specific dimensions, positions, and relative relationships. This reduces the developer's workload and improves development efficiency.

[0268] Optionally, the DSL compiler includes one or more of a lexical analyzer, a syntactic analyzer, and a syntax feature callback tool. The lexical analyzer transforms the character stream in the interface layout rules into a stream of syntactically meaningful tokens. This syntactically meaningful token stream refers to a series of tokens with specific meanings extracted from the source code after lexical analysis. The syntactic analyzer transforms the token stream into statements with specific syntactic functions. The syntax feature callback is used to associate statements with specific syntactic functions with their code implementation logic.

[0269] Optionally, the DSL compiler also includes a variable selector, which is used to set constraint expressions for UI elements (such as controls) with the same properties in batches. For example, if a shopping app's user interface displays multiple product controls with the same area size, the variable selector can design a template for a constraint expression for these multiple product controls. This template could be represented as "[Product List Item] has an area of ​​4cm²". 2 This is used to define the control property of multiple product controls. In other words, all controls with this property (i.e., an area of ​​4cm²) are considered as such. 2All product controls can apply this constraint expression template. Furthermore, the variable selector can refer to multiple controls with the same properties (i.e., the multiple product controls mentioned above). Using the variable selector, when a group of controls needs to apply a similar set of constraint expressions, the control properties of multiple controls can be designed in batches, avoiding the tedious process of writing constraint expressions one by one, thus making it more efficient.

[0270] For example, variable selectors can be expressed in two ways: combined and independent. An example of a combined expression is as follows:

[0271] Variable selector {

[0272] Expression 1;

[0273] Expression 2; ......

[0275] }

[0276] Examples of independent expression are as follows:

[0277] Variable selector1[property] = expression1;

[0278] Variable selector2[property] = expression2...

[0279] Alternatively, pseudo-elements can also be applied to qualify variable selector syntax (within curly braces).

[0280] In the variable selector syntax (within curly braces): the concept of "current element" identifies each element in the set selected by the variable selector, and is applied in a loop and sequentially.

[0281] In another implementation, the IDE also includes a preview module. This module executes interface layout rules based on the screen area specified in the preview, simulating the interface appearance when the software runs on an electronic device. This allows developers to adjust the current interface layout rules in a timely manner to better meet layout requirements.

[0282] In another implementation, the IDE is also used to obtain multiple preset specifications. These specifications represent the dimensions of the available screen area of ​​the user interface. The IDE is also used to determine the layout parameters corresponding to the target interface under various preset specifications based on a set of constraint expressions. The target interface includes any interface of the target application. The IDE is further used to package the layout parameters corresponding to the target interface under various preset specifications into the target application's installation file.

[0283] For example, multiple preset specifications can be common screen specifications (such as mobile phone screen specifications, tablet screen specifications, desktop monitor screen specifications), or important specifications preset by developers.

[0284] Optionally, the IDE also includes a solver, which determines the layout parameters of the target interface under various preset specifications based on the constraint expression set. Specifically, firstly, the specification parameters of each preset specification are used as constants in the preset constraint expression set. Secondly, the solver solves the preset constraint expression set after substituting the constants to obtain the optimal solution or approximate solution (i.e., optimal variable values ​​or approximate variable values) of the preset constraint expression set corresponding to the target interface under each preset specification, which is the layout parameter of the target interface under each preset specification.

[0285] For example, the solver may include a complete solver or an incomplete solver. Wherein: a complete solver is used to solve for the optimal solution of a set of preset constraint expressions. An incomplete solver is used to solve for an approximate solution of the set of preset constraint expressions.

[0286] For example, the solver may include an incremental solver or a non-incremental solver. The incremental solver is used to incrementally solve a preset constraint expression with initial values ​​of variables. The non-incremental solver is used to solve a preset constraint expression without initial values ​​of variables.

[0287] For example, the above-mentioned solvers can be designed and used for different application scenarios and needs, and different solvers can be used in combination.

[0288] For example, by using incremental solvers and complete solvers to solve the preset constraint expression set, the layout parameters corresponding to the target interface under various preset specifications can be obtained.

[0289] For example, the solver also includes a constraint conflict analysis module for identifying conflicts between layout rules. This allows the constraint conflict analysis module to alert developers which layout rules conflict, eliminating the need for developers to repeatedly adjust the layout through trial and error, thus improving the ease of software development.

[0290] For example, the constraint conflict analysis module is also used to output conflicting layout rules when the solver cannot find a solution that satisfies the preset set of constraint expressions.

[0291] For example, the constraint conflict analysis module is also used to retain the required layout rules according to a preset priority. The preset priority can be that the usage priority of a preset layout rule is greater than that of a default layout rule.

[0292] Optionally, the IDE also includes an optimizer for optimizing the preset constraint expression set to obtain an optimized preset constraint expression set, and providing the optimized preset constraint expression set to the solver.

[0293] Alternatively, the optimizer can be located inside or outside the solver.

[0294] In another implementation, such as Figure 8 As shown, the IDE can include the visual editor, preview module, and compilation and packaging tools mentioned above. The compilation and packaging tools can include the DSL compiler, optimizer, and solver mentioned above. Specifically, the DSL compiler can include a lexical analyzer, a syntactic analyzer, a syntax feature callback tool, and a variable selector. Specifically, the solver can include an incremental solver, a complete solver, and a constraint conflict analysis module.

[0295] For ease of understanding, the following description, in conjunction with the accompanying drawings, provides an exemplary method for developing a user interface according to this application. This user interface development method is applied to... Figure 5 and Figure 6 The electronic device shown is equipped with a display screen.

[0296] like Figure 9 As shown, this application provides a user interface development method, which can be executed by an electronic device with a display screen. Specifically, it can be performed by... Figure 8 The IDE execution shown includes the following methods:

[0297] S901, an electronic device with a display screen acquires interface layout rules based on a domain-specific language DSL.

[0298] In one embodiment, the interface layout rules include preset layout rules and default layout rules. For example, the preset layout rules and default layout rules are merged to obtain the interface layout rules. This is because interface layout rules need to be as comprehensive and specific as possible, but overly detailed definitions can burden developers. Therefore, merging the preset layout rules and default layout rules to form interface layout rules can reduce the burden on developers and achieve comprehensive and specific interface layout.

[0299] In one embodiment, obtaining interface layout rules based on a domain-specific language (DSL) includes: acquiring user editing operations through a visual editor to obtain interface layout rules based on the DSL output by the visual editor. Editing operations are used to edit the layout of interface elements in the user interface. Preset layout rules are determined based on the editing operations, while default layout rules are determined based on the fundamental aesthetic principles of interface design.

[0300] In this embodiment of the application, a visual editor enables the WYSIWYG drawing of UI (such as GUI) interfaces (i.e., editing operations that determine preset layout rules), which reduces the difficulty of interface compilation. This allows developers to quickly build user interfaces that meet the requirements without having to pay too much attention to the details of the underlying code, further reducing the workload of developers and improving compilation efficiency.

[0301] In one embodiment, the preset layout rules have a higher priority than the default layout rules. This way, if a developer feels that the default layout rules do not meet their expectations, they can use the preset priority to "override" the default layout rules, allowing developers to achieve a balance between development efficiency and flexibility, and automatically generating a reasonable GUI layout that conforms to the aesthetics of most people.

[0302] S902, electronic devices with displays compile interface layout rules into a set of constraint expressions.

[0303] The constraint expression group comprises multiple constraint expressions, which represent the layout conditions of interface elements in the target application's user interface under various available screen area specifications. These constraint expressions include one or more of the following: linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0304] In this way, by designing a set of constraint expressions that can represent the layout conditions of interface elements in the user interface of the target application under various available screen area specifications, it is equivalent to defining the layout requirements of the interface layout. Developers do not need to define how each control should be laid out. The layout is simpler, more flexible and efficient, reducing the workload of developers and improving development efficiency. It solves the technical problems of complex development process and inflexible layout design in related technologies.

[0305] S903, an electronic device with a display screen, packages a group of constraint expressions into the installation file of the target application.

[0306] In this embodiment of the application, based on the installation file of the target application which stores a group of constraint expressions, when the target application runs on an electronic device with a display screen, it can flexibly adapt to different screen sizes and automatically generate a UI layout that conforms to the designer's original intention, so that an app can be optimal under different screen sizes, thereby improving the user's visual experience and GUI interaction experience.

[0307] In other embodiments, the user interface development method further includes: an electronic device with a display screen acquiring multiple preset specifications, each specification representing the specifications of an available screen area of ​​the user interface; the electronic device with the display screen determining layout parameters corresponding to a target interface under each preset specification based on a set of constraint expressions; the target interface including any interface of a target application; and the electronic device with the display screen packaging the layout parameters corresponding to the target interface under each preset specification into the installation file of the target application.

[0308] In this embodiment, by determining the layout parameters corresponding to the target interface under various preset specifications and packaging these parameters into the installation file of the target application, the initial values ​​of subsequent variables can be determined based on the layout parameters corresponding to the target interface under various preset specifications when the target application is running, thereby improving the solution efficiency. Especially when using incremental solution, the closer the initial values ​​of the variables are to the optimal solution, the smaller the computational load, thus increasing the computational speed and quickly determining the target layout parameters suitable for the target screen specifications.

[0309] The following description, in conjunction with the accompanying drawings, provides an exemplary method for displaying a user interface provided in this application. This user interface display method is applied to... Figure 5 and Figure 6 The electronic device shown is equipped with a display screen.

[0310] like Figure 10 As shown, this application provides a user interface display method, which can be executed by an electronic device having a display screen. The method includes:

[0311] S1001, an electronic device with a display screen displays a first target interface in a first interface layout within the available screen area of ​​a first specification.

[0312] The layout of the first interface is determined based on the first specification and a set of preset constraint expressions.

[0313] In some embodiments, specifications refer to the size, resolution, or aspect ratio of the available screen area. A first specification can be a specific size, resolution, or aspect ratio. For example, a first specification can specifically be a 1080p resolution (1920x1080 pixels).

[0314] In some embodiments, displaying a first target interface in a first interface layout within the available screen area of ​​a first specification includes: determining first layout parameters corresponding to the first target interface under the first specification based on a preset set of constraint expressions; and displaying the first target interface in the available screen area of ​​the first specification according to the first layout parameters.

[0315] In this embodiment, since the constraint expressions represent the layout conditions of interface elements in the user interface under various available screen area specifications, they are equivalent to describing the layout requirements of the user interface. Therefore, when the user interface runs on the available screen area of ​​the first specification, the first target interface is displayed according to the first layout parameters determined by the preset constraint expression group, so that the first target interface corresponding to the first specification displays the best visual effect, improving the user's visual experience.

[0316] In one implementation, the first layout parameter is the optimal or approximate solution of a preset constraint expression set. Thus, since the relevant attributes affecting the layout of elements (such as controls) are the variables to be solved in the constraint expressions, the optimal or approximate solution of the preset constraint expression set can constrain the relevant attributes of the element (such as controls) layout, enabling the relevant elements (such as controls) to have a good interface representation.

[0317] In one implementation, determining the first layout parameters corresponding to the first target interface under the first specification, based on a set of preset constraint expressions, includes: determining the first preset specification most similar to the first specification from a variety of preset specifications. The layout parameters corresponding to the first target interface under each preset specification are predetermined. Using the layout parameters corresponding to the first target interface under the first preset specification as the first initial parameters of the set of preset constraint expressions, the set of preset constraint expressions is solved according to the first specification to obtain the first layout parameters.

[0318] For example, multiple preset specifications, and the layout parameters corresponding to the first target interface under each preset specification, can be predetermined in the IDE.

[0319] Furthermore, multiple preset specifications, and the layout parameters corresponding to the first target interface under each preset specification, can be stored in the installation file of the target application.

[0320] In this embodiment of the application, since there are multiple preset specifications and the layout parameters corresponding to the first target interface under each preset specification are predetermined, by finding the first preset specification that is most similar to the first specification and using the layout parameters corresponding to the first target interface under the first preset specification as the first initial parameters of the preset constraint expression group, the solution efficiency of the preset constraint expression group can be improved.

[0321] Optionally, the constraint expressions in the preset constraint expression group use the specification parameters of the available screen area as constants and the layout parameters of the user interface as variables.

[0322] For example, specifications refer to known data such as the size, resolution, or aspect ratio of the available screen area.

[0323] For example, layout parameters (i.e., variables) are used to represent the properties of UI elements (such as controls). In other words, the relevant properties that affect the layout of UI elements (such as controls) are the variables to be solved in the constraint expression.

[0324] Optionally, the layout parameters corresponding to the first target interface under the first preset specification are used as the first initial parameters of the preset constraint expression group. The preset constraint expression group is solved according to the first specification to obtain the first layout parameters, including: using the specification parameters corresponding to the first specification as constants in the preset constraint expression group, using the first initial parameters as the initial values ​​of variables, and solving the preset constraint expression group to obtain the first layout parameters.

[0325] In this embodiment, by solving a set of preset constraint expressions for the initial values ​​(first initial parameters) of constants and variables, the first layout parameters can be converged more quickly. In particular, when using incremental calculation, the closer the initial values ​​of the variables are to the optimal solution, the smaller the computational load, thereby improving the calculation speed and quickly determining the first layout parameters suitable for the current screen specifications.

[0326] In another implementation, determining the first layout parameters corresponding to the first target interface under the first specification based on the preset constraint expression set includes: using the specification parameters corresponding to the first specification as constants in the preset constraint expression set, solving the preset constraint expression set to obtain the first layout parameters.

[0327] In this embodiment, applied to scenarios involving the installation or first-time running of a target application, it is not necessary to pre-set multiple preset specifications or pre-determine the layout parameters corresponding to the first target interface under each preset specification. Instead, it directly solves the preset constraint expression set under the first specification to determine the first layout parameters suitable for the current screen specification. This embodiment can more flexibly handle scenarios requiring the determination of layout parameters for a preset constraint expression set.

[0328] For example, such as Figure 11 As shown, a plurality of first target interfaces are illustrated, including interfaces of large screens such as televisions or PCs, interfaces of medium screens such as tablets or foldable devices, interfaces of candybar phones, interfaces of small screens such as wearable devices (such as smartwatches), and interfaces of in-vehicle infotainment screens.

[0329] S1002, the electronic device with a display screen responds to the change of the available screen area from a first specification to a second specification, and displays the first target interface in the available screen area of ​​the second specification with a second interface layout.

[0330] The layout of the second interface is determined based on the second specification and a set of preset constraint expressions.

[0331] For example, the second specification can be a specific size, resolution, or aspect ratio that differs from the first specification. For instance, the second specification could specifically be 1440p (2560x1440 pixels).

[0332] For example, the first specification and the second specification can be screens of different specifications, such as landscape or portrait screens of the same electronic device, different windows in a split-screen display window, screens of different specifications corresponding to the folded and unfolded states of a folding machine, or preset display windows of different specifications of different electronic devices, etc.

[0333] In this embodiment, the available screen area changes from a first specification to a second specification. The interface layout is adjusted by a set of preset constraint expressions, ensuring that the interface layout still meets the adaptive layout requirements under dynamic changes in screen specifications. In other words, regardless of how the specifications of the available screen area change, the user interface can automatically adjust its layout to adapt to the new screen specifications, ensuring that interface elements (such as position and size) are still displayed reasonably, aesthetically pleasing, and easy to operate.

[0334] In some embodiments, displaying the first target interface in a second interface layout within the available screen area of ​​the second specification includes: determining second layout parameters corresponding to the first target interface under the second specification based on a preset set of constraint expressions; and displaying the first target interface in the available screen area of ​​the second specification according to the second layout parameters.

[0335] In this embodiment of the application, in response to the application scenario where the available screen area changes from the first specification to the second specification, the first target interface is displayed according to the second layout parameters determined by the preset constraint expression group, so that the first target interface corresponding to the second specification displays the best visual effect and improves the user's visual experience.

[0336] In one implementation, determining the second layout parameters corresponding to the first target interface under the second specification, based on a set of preset constraint expressions, includes: identifying the second preset specification most similar to the second specification from a variety of preset specifications. Using the layout parameters corresponding to the first target interface under the second preset specification as the second initial parameters of the set of preset constraint expressions, the set of preset constraint expressions is solved according to the second specification to obtain the second layout parameters. This improves the efficiency of solving the set of preset constraint expressions.

[0337] Optionally, the layout parameters corresponding to the first target interface under the second preset specification are used as the second initial parameters of the preset constraint expression group. The preset constraint expression group is solved according to the second specification to obtain the second layout parameters, including: using the specification parameters corresponding to the second specification as constants in the preset constraint expression group, using the second initial parameters as the initial values ​​of variables, and solving the preset constraint expression group to obtain the second layout parameters.

[0338] In this embodiment, by solving a set of preset constraint expressions for the initial values ​​(second initial parameters) of the constants and variables, the second layout parameters can be converged more quickly. In particular, when using incremental calculation, the closer the initial values ​​of the variables are to the optimal solution, the smaller the computational load, thereby improving the calculation speed and quickly determining the second layout parameters suitable for the current screen specifications.

[0339] In this embodiment, the application is primarily used in scenarios where the available screen area changes from a first specification to a second specification. By designing a set of preset constraint expressions that can represent the layout conditions of interface elements under various available screen area specifications, the layout requirements of the interface are essentially defined, eliminating the need for developers to specifically define how each control should be laid out. This makes the layout simpler and more flexible, reduces the workload for developers, and improves development efficiency. Furthermore, when the available screen area changes from the first specification to the second specification, the preset constraint expression set can dynamically adjust the interface layout, allowing it to transition from the first to the second layout. This enables adaptive display of the user interface under different screen specifications, improving the flexibility, rationality, and adaptability of the user interface layout.

[0340] In other embodiments, the method further includes: an electronic device having a display screen, in response to an operation for switching a first target interface to a second target interface in an available screen area of ​​a first specification, displaying the second target interface in a third interface layout in the available screen area of ​​the first specification, the third interface layout being determined according to the first specification, a first layout parameter and a preset constraint expression set.

[0341] For example, the second target interface is any interface of the target application that is different from the first target interface.

[0342] In this embodiment, it is mainly applied to scenarios where a first target interface is switched to a second target interface within an available screen area of ​​the same specification. For example, when the user scrolls through the current target interface, the interface switches from the first target interface to the second. The interface layout can be dynamically adjusted by using preset constraint expression groups, a first specification, and first layout parameters, transitioning from the first interface layout to the third interface layout, thus refreshing the layout of the second target interface and providing the user with a smooth layout transition experience. In this way, in scenarios where the target interface changes, there is no need to design an additional interface layout that conforms to the change in the target interface; the user interface can still adaptively display under different target interfaces, reducing the workload of developers and achieving a more flexible and reasonable display of the target interface.

[0343] In some implementations, displaying the second target interface in a third interface layout within the available screen area of ​​the first specification includes: using the specification parameters corresponding to the first specification as constants in a preset constraint expression set, and using the first layout parameters as initial values ​​for variables, solving the preset constraint expression set to obtain the third layout parameters. The second target interface is then displayed within the available screen area of ​​the first specification according to the third layout parameters.

[0344] In this embodiment, since the variables of the preset constraint expression group affect the relevant attributes of the layout of interface elements (such as controls), changes in the target interface, i.e., changes in the variables of the preset constraint expression group, will cause changes in the preset constraint expression group. Therefore, it is necessary to re-solve the preset constraint expression group corresponding to the second target interface, and use the resulting third layout parameters as the third interface layout to update the layout effect of the second target interface. In this way, because the layout design is simple and flexible, developers do not need to develop multiple user interface versions, enabling the user interface to adapt to various target interfaces within the same available screen range, and to reasonably lay out the UI (such as GUI) on various target interfaces without improving the user's visual experience or GUI interaction experience.

[0345] Optionally, when switching from the first target interface to the second target interface, an update control is retrieved. The constraint expressions in the preset constraint expression group are updated based on the update control. This is because the change in the target interface causes the control to change; that is, changes in the variables in the preset expression group are equivalent to changes in the constraint expressions in the preset constraint expression group.

[0346] For example, an update control is used to represent a control that is updated by the second target interface relative to the first target interface.

[0347] For example, updating the constraint expressions in the preset constraint expression group based on the update control includes: determining the variable selector corresponding to the update control. Here, the variable selector refers to multiple controls with the same property. The constraint expression corresponding to the variable selector of the update control is used as the constraint expression of the update control and updated to the preset constraint expression group. For example, if the control property of the update control is the same as the control property of the multiple product controls referred to by the variable selector, then the update control can use "[Product List Item] has an area of ​​4cm²". 2 This constraint expression.

[0348] In the embodiments of this application, in the application scenario of dynamically generated controls, the constraint expression of the newly added control can be determined efficiently and accurately.

[0349] In another implementation, the specification parameters corresponding to the first specification are used as constants in the preset constraint expression set, and the first layout parameter is used as the initial value of the variable. The preset constraint expression set is then solved to obtain the third layout parameter. Specifically, the updated preset constraint expression set can be solved to obtain the third layout parameter. In this way, the constraint expressions in the preset constraint expression set will be automatically updated when the variables in the preset expression set change.

[0350] In other embodiments, the method further includes optimizing the preset constraint expression set before solving it. This allows for subsequent solving of the optimized preset constraint expression set, improving solution efficiency.

[0351] For example, in the optimization operation of a preset constraint expression group, the initial values ​​of the constants and variables in the preset constraint expression group are determined.

[0352] In one implementation, the optimization operation includes constraint expression simplification and / or variable simplification of the constraint expression.

[0353] For example, constraint expression simplification can be applied to scenarios where constraint expressions are redundant. For instance, in the constraint expression a>band b>c and a>c, since a>b and b>c already derive a>c, a>c is redundant and can be deleted; the effect is the same. Thus, simplifying constraint expressions can reduce the computational load for solving layout parameters.

[0354] For example, variable simplification of constraint expressions can be applied to scenarios where variables can be replaced by other variables. For instance, in the equation ab = 10 and a > 10 and b < 100, solving the equation ab = 10 yields a = b + 10. Substituting all variables 'a' into the equation, all variables 'a' in the predefined constraint expression group can be replaced by variable 'b'. Therefore, one variable 'a' can be eliminated, and the expression group can be rewritten as b > 0 and b < 100, which is equivalent. This reduces the computational load for solving layout parameters and improves solution efficiency.

[0355] For example, after simplifying the variables in the constraint expression, the values ​​of the variables eliminated by the simplification are calculated. For instance, after obtaining the value of b, it is necessary to substitute it back into the equation a = b + 10 to restore the value of variable a. Thus, since the values ​​of the variables eliminated by variable elimination still need to be determined in the final business context, it is necessary to restore the eliminated variables after finding the optimal solution.

[0356] In some embodiments, the solution method for solving the set of preset constraint expressions can be complete or incomplete, incremental or non-incremental. Specifically: complete solution is used to find the optimal solution to the set of preset constraint expressions. Incomplete solution is used to find an approximate solution to the set of preset constraint expressions. Incremental solution is used to solve preset constraint expressions with initial values ​​for variables. Non-incremental solution is used to solve preset constraint expressions without initial values ​​for variables.

[0357] For example, incremental solving is used to solve a pre-defined set of constraint expressions to obtain the target layout parameters. Since it is not necessary to build the solution environment from scratch each time, incremental solving can reduce computation time and improve solution efficiency.

[0358] The following description, in conjunction with the accompanying drawings, provides an exemplary user interface layout method provided in this application, which is applied to... Figure 5 and Figure 6 The electronic device shown is equipped with a display screen.

[0359] like Figure 12 As shown, this application embodiment provides a user interface layout method, which can be executed by an electronic device having a display screen. The method includes:

[0360] S1201, an electronic device with a display screen acquires the specifications of a target screen area.

[0361] The target screen area is used to display the first target interface. For example, the target screen area can be the default display window of a candybar phone, or it can be the screen area of ​​a foldable phone in its folded or unfolded state, and so on.

[0362] S1202, the electronic device with a display screen determines the layout parameters corresponding to the first target interface according to the specifications of the target screen area and the preset constraint expression group.

[0363] In some embodiments, determining the layout parameters corresponding to the first target interface based on the specifications of the target screen area and a set of preset constraint expressions includes: determining a second preset specification from a variety of preset specifications that is most similar to the specifications of the target screen area; using the layout parameters corresponding to the first target interface under the second preset specification as the second initial parameters of the set of preset constraint expressions; and solving the set of preset constraint expressions according to the specifications of the target screen area to obtain the layout parameters corresponding to the first target interface.

[0364] In this embodiment, by finding the second preset specification that is most similar to the specification of the target screen area, and using the layout parameters corresponding to the first target interface under the second preset specification as the second initial parameters of the preset constraint expression group, the layout parameters corresponding to the first target interface can be solved, thereby improving the solution efficiency of the preset constraint expression group.

[0365] In one implementation, the layout parameters corresponding to the first target interface under the second preset specification are used as the second initial parameters of the preset constraint expression group. The preset constraint expression group is solved according to the specification of the target screen area to obtain the layout parameters corresponding to the first target interface. This includes: using the specification parameters corresponding to the specification of the target screen area as constants in the preset constraint expression group, using the second initial parameters as the initial values ​​of variables, and solving the preset constraint expression group to obtain the layout parameters corresponding to the first target interface.

[0366] Optionally, the layout parameters corresponding to the first target interface are the optimal or approximate solution of a preset set of constraint expressions.

[0367] In this embodiment, by solving a set of preset constraint expressions for the initial values ​​(second initial parameters) of constants and variables, the layout parameters corresponding to the first target interface can be converged more quickly. In particular, when using incremental calculation, the closer the initial values ​​of the variables are to the optimal solution, the smaller the computational load, thereby improving the calculation speed and quickly determining the layout parameters corresponding to the first target interface suitable for the current screen specifications.

[0368] In other embodiments, determining the layout parameters corresponding to the first target interface based on the specifications of the target screen area and a set of preset constraint expressions includes: using the specification parameters corresponding to the specifications of the target screen area as constants in the set of preset constraint expressions, solving the set of preset constraint expressions, and obtaining the layout parameters corresponding to the first target interface.

[0369] In this embodiment, applied to scenarios involving the installation or first-time running of a target application, it is not necessary to pre-set multiple preset specifications or pre-determine the layout parameters corresponding to the first target interface under each preset specification. Instead, the layout parameters corresponding to the first target interface suitable for the current screen specification are determined by directly solving the preset constraint expression set under the specifications of the target screen area. This allows for more flexible handling of scenarios requiring the determination of layout parameters for the preset constraint expression set.

[0370] S1203, the electronic device with a display screen displays the first target interface in the target screen area according to the layout parameters corresponding to the first target interface.

[0371] In this embodiment, the layout parameters corresponding to the first target interface, determined by the specifications of the target screen area and a set of preset constraint expressions, can adapt well to various target interfaces, achieving adaptive layout of the user interface under different screen specifications. This results in a simple and flexible layout design, eliminating the need for developers to create multiple user interface versions, reducing workload, improving development efficiency, and enhancing the flexibility and rationality of the interface layout, thereby improving the user's visual experience and GUI interaction experience.

[0372] like Figure 13 As shown, this application provides a user interface display device 1300, applied to an electronic device with a display screen. The device includes a first display module 21 and a second display module 22. The first display module 21 displays a first target interface in a first-specification available screen area using a first interface layout, the first interface layout being determined according to the first specification and a preset constraint expression set. The second display module 22, in response to a change in the available screen area from the first specification to a second specification, displays the first target interface in a second-specification available screen area using a second interface layout, the second interface layout being determined according to the second specification and a preset constraint expression set. The preset constraint expression set includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0373] like Figure 14 As shown, this application provides a user interface layout device 1400, applied to an electronic device with a display screen. The device includes a first acquisition module 31, a determination module 32, and a third display module 33. The acquisition module 31 acquires the specifications of a target screen area, which is used to display a first target interface. The determination module 32 determines the layout parameters corresponding to the first target interface based on the specifications of the target screen area and a preset constraint expression set. The preset constraint expression set includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints. The third display module 33 displays the first target interface in the target screen area according to the layout parameters corresponding to the first target interface.

[0374] like Figure 15As shown, this application embodiment provides a user interface development device 1500, applied to an electronic device with a display screen. The electronic device is equipped with an integrated development environment (IDE). The device includes: a second acquisition module 41, used to acquire interface layout rules based on a domain-specific language (DSL); a compilation module 42, used to compile the interface layout rules into a constraint expression group; and a packaging module 43, used to package the constraint expression group into the installation file of the target application. The constraint expression group includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface of the target application under various available screen area specifications. The multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

[0375] like Figure 16 As shown, this application provides another electronic device 1600. The electronic device 1600 includes a processor 1610 and a memory 1620 for storing processor-executable instructions. When the processor 1610 is configured to execute instructions, the electronic device 1600 implements the method described above.

[0376] Figure 16 The electronic device 1600 shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0377] Electronic device 1600 is manifested in the form of a general-purpose computing device. Components of electronic device 1600 may include, but are not limited to: one or more processors 1610, memory 1620, communication bus 1640 connecting different system components (including memory 1620 and processor 1610), and communication interface 1630.

[0378] The communication bus 1640 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. Examples of these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0379] Electronic devices 1600 typically include a variety of computer system-readable media. These media can be any available media that can be accessed by the electronic device, including volatile and non-volatile media, removable and non-removable media.

[0380] Memory 1620 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) and / or cache memory. The electronic device may further include other removable / non-removable, volatile / non-volatile computer system storage media. Although Figure 16 As not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disc drive for reading and writing to a removable non-volatile optical disc (e.g., a compact disc read-only memory (CD-ROM), a digital video disc read-only memory (DVD-ROM), or other optical media) may be provided. In these cases, each drive may be connected to the communication bus 1640 via one or more data media interfaces. The memory 1620 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of the embodiments of this application.

[0381] A program / utility having a set (at least one) of program modules can be stored in memory 1620. Such program modules include—but are not limited to—an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. The program modules typically perform the functions and / or methods described in the embodiments of this application.

[0382] Electronic device 1600 can also communicate with one or more external devices (e.g., keyboard, pointing device, display, etc.), and with one or more devices that enable a user to interact with the electronic device, and / or with any device that enables the electronic device to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed through communication interface 1630. Furthermore, electronic device 1600 can also communicate through a network adapter ( Figure 16(Not shown) communicates with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet). The aforementioned network adapter can communicate with other modules of the electronic device via the communication bus 1640. It should be understood that, although... Figure 16 As not shown, other hardware and / or software modules can be used in conjunction with the electronic device 1600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, disk arrays (RAID) systems, tape drives, and data backup storage systems.

[0383] The processor 1610 performs various functional applications and data processing by running programs stored in the memory 1620.

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

[0385] It is understood that the aforementioned electronic devices, etc., include hardware structures and / or software modules corresponding to perform each function in order to achieve the above-mentioned functions. Those skilled in the art should readily recognize that, in conjunction with the exemplary units and algorithm steps described in conjunction with the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed by hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the embodiments of this application.

[0386] This application embodiment can divide the above-mentioned electronic device into functional modules according to the method example described above. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application embodiment is illustrative and only represents one logical functional division. In actual implementation, there may be other division methods.

[0387] This application also provides a storage medium storing computer program instructions. When the computer program instructions are executed by an electronic device, the electronic device performs the method described above.

[0388] This application also provides a computer program product, including a computer-readable storage medium storing a computer program, which causes at least one processor to perform the above-described method when the computer program is executed.

[0389] The electronic devices, storage media, or computer program products provided in the embodiments of this application are all used to execute the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

[0390] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0391] In the embodiments of this application, the functional units can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0392] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, essentially, or the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as flash memory, portable hard disk, read-only memory, random access memory, magnetic disk, or optical disk.

[0393] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A user interface display method, applied to an electronic device having a display screen, characterized in that, include: In the available screen area of ​​the first specification, the first target interface is displayed with a first interface layout, the first interface layout being determined according to the first specification and a preset constraint expression group; In response to the available screen area changing from the first specification to the second specification, the first target interface is displayed in the available screen area of ​​the second specification with a second interface layout, the second interface layout being determined according to the second specification and the preset constraint expression group; The preset constraint expression group includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications; the multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

2. The user interface display method according to claim 1, characterized in that, The step of displaying the first target interface in a first interface layout within the available screen area of ​​the first specification includes: Based on the preset constraint expression group, determine the first layout parameters corresponding to the first target interface under the first specification; The first target interface is displayed in the available screen area of ​​the first specification, according to the first layout parameters.

3. The user interface display method according to claim 2, characterized in that, The step of determining the first layout parameters corresponding to the first target interface under the first specification based on the preset constraint expression group includes: A first preset specification that is most similar to the first specification is determined from a variety of preset specifications; the layout parameters of the first target interface under each preset specification are predetermined. Using the layout parameters corresponding to the first target interface under the first preset specification as the first initial parameters of the preset constraint expression group, the preset constraint expression group is solved according to the first specification to obtain the first layout parameters.

4. The user interface display method according to claim 3, characterized in that, The constraint expressions in the preset constraint expression group use the specification parameters of the available screen area as constants and the layout parameters of the user interface as variables; the first initial parameter of the preset constraint expression group is obtained by solving the preset constraint expression group according to the first specification, using the layout parameters corresponding to the first target interface under the first preset specification as the first initial parameter of the preset constraint expression group, and obtaining the first layout parameters. Using the specification parameters corresponding to the first specification as constants in the preset constraint expression group, and using the first initial parameter as the initial value of the variable, the preset constraint expression group is solved to obtain the first layout parameter.

5. The user interface display method according to claim 3 or 4, characterized in that, The first layout parameter is the optimal or approximate solution of the preset constraint expression set.

6. The user interface display method according to any one of claims 1-5, characterized in that, The method further includes: In response to an operation to switch a first target interface in the available screen area of ​​the first specification to a second target interface, the second target interface is displayed in the available screen area of ​​the first specification with a third interface layout, the third interface layout being determined based on the first specification, the first layout parameters, and the preset constraint expression group.

7. The user interface display method according to claim 6, characterized in that, The constraint expressions in the preset constraint expression group use the specification parameters of the available screen area as constants and the layout parameters of the user interface as variables. Displaying the second target interface in a third interface layout within the available screen area of ​​the first specification includes: Using the specification parameters corresponding to the first specification as constants in the preset constraint expression group, and using the first layout parameter as the initial value of the variable, the preset constraint expression group is solved to obtain the third layout parameter. The second target interface is displayed in the available screen area of ​​the first specification, according to the third layout parameters.

8. The user interface display method according to claim 1, characterized in that, The first target interface is any interface of the target application, and the preset constraint expression group is stored in the application file of the target application.

9. The user interface display method according to any one of claims 1-8, characterized in that, The step of responding to a change in the available screen area from the first specification to the second specification, and displaying the first target interface in a second interface layout in the available screen area of ​​the second specification, includes: Based on the preset constraint expression group, determine the second layout parameters corresponding to the first target interface under the second specification; The first target interface is displayed in the available screen area of ​​the second specification, according to the second layout parameters.

10. The user interface display method according to claim 9, characterized in that, The step of determining the second layout parameters corresponding to the first target interface under the second specification based on the preset constraint expression group includes: A second preset specification that is most similar to the second specification is determined from a variety of preset specifications; the layout parameters of the first target interface under each preset specification are predetermined. Using the layout parameters corresponding to the first target interface under the second preset specification as the second initial parameters of the preset constraint expression group, the preset constraint expression group is solved according to the second specification to obtain the second layout parameters.

11. A user interface layout method, applied to an electronic device with a display screen, characterized in that, include: Obtain the specifications of the target screen area, which is used to display the first target interface; Based on the specifications of the target screen area and a set of preset constraint expressions, the layout parameters corresponding to the first target interface are determined; the set of preset constraint expressions includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications; the multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints. The first target interface is displayed in the target screen area according to the layout parameters corresponding to the first target interface.

12. A user interface development method, applied to an electronic device with a display screen, wherein the electronic device is equipped with an integrated development environment (IDE), characterized in that, include: Obtain the interface layout rules based on the domain-specific language DSL; Compile the interface layout rules into a group of constraint expressions; The constraint expression group is packaged in the installation file of the target application; wherein the constraint expression group includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface of the target application under various available screen area specifications; the multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

13. The user interface development method according to claim 12, characterized in that, The method further includes: Obtain multiple preset specifications, where each specification represents the specification of the available screen area of ​​the user interface; Based on the constraint expression set, determine the layout parameters corresponding to the target interface under various preset specifications; the target interface includes any interface of the target application. The layout parameters corresponding to the target interface under various preset specifications are packaged in the installation file of the target application.

14. The user interface development method according to claim 12 or 13, characterized in that, The integrated development environment (IDE) includes a visual editor, and the acquisition of interface description information based on a domain-specific language (DSL) includes: The user's editing operations are obtained through the visual editor, resulting in interface layout rules based on a domain-specific language (DSL) output by the visual editor. The editing operations are used to edit the layout of interface elements in the user interface. The interface layout rules include preset layout rules and default layout rules. The preset layout rules are determined based on the editing operations, and the default layout rules are determined based on the basic aesthetic principles of interface design. The preset layout rules have a higher priority than the default layout rules.

15. A user interface display device, applied to an electronic device having a display screen, characterized in that, include: A first display module is configured to display a first target interface in a first interface layout in an available screen area of ​​a first specification, wherein the first interface layout is determined according to the first specification and a preset constraint expression group. The second display module is configured to, in response to the available screen area changing from the first specification to the second specification, display the first target interface in the available screen area of ​​the second specification with a second interface layout, wherein the second interface layout is determined according to the second specification and the preset constraint expression group; The preset constraint expression group includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications; the multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

16. A user interface layout device, applied to an electronic device having a display screen, characterized in that, include: The first acquisition module is used to acquire the specifications of the target screen area, the target screen area being used to display the first target interface; The determining module is used to determine the layout parameters corresponding to the first target interface based on the specifications of the target screen area and a preset constraint expression group; the preset constraint expression group includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface under various available screen area specifications; the multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints. The third display module is used to display the first target interface in the target screen area according to the layout parameters corresponding to the first target interface.

17. A user interface development apparatus for use in an electronic device having a display screen, the electronic device being equipped with an integrated development environment (IDE), characterized in that, include: The second acquisition module is used to acquire interface layout rules based on the domain-specific language DSL; The compilation module is used to compile the interface layout rules into a group of constraint expressions; A packaging module is used to package the constraint expression group into the installation file of the target application; wherein, the constraint expression group includes multiple constraint expressions, which represent the layout conditions of interface elements in the user interface of the target application under various available screen area specifications; the multiple constraint expressions include one or more of linear constraints, quadratic constraints, Boolean constraints, and conditional constraints.

18. An electronic device, characterized in that, include: A processor, and a memory for storing processor-executable instructions; When the processor is configured to execute the instructions, it causes the electronic device to implement the method as described in any one of claims 1-14.

19. A storage medium storing computer program instructions thereon; characterized in that, When the computer program instructions are executed by the electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1-14.

20. A computer program product, characterized in that, The method includes a computer-readable storage medium storing a computer program, which, when executed by at least one processor, causes the at least one processor to perform the method according to any one of claims 1-14.

Images