Interface generation method and device

Abstract

The invention provides an interface generation method, which comprises the following steps that: in response to user operation, determining layout parameters of an interface layout corresponding to a target application in key canvases with different sizes, the layout parameter of each key canvas comprising a key attribute value of each UI component in each key canvas; interpolation processing is carried out on the key attribute value of each UI component in the key canvas of different sizes, a key attribute value change curve is determined, and the key attribute value change curve indicates the change trend of the key attribute value of each UI component in the canvas of different sizes; based on the key attribute value change curve, a layout calculation function is determined, and the layout calculation function is used for determining layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal after the target application is deployed to the target terminal. According to the interface generation method provided by the invention, the interface layout design can be completed by responding to the user operation, and the interface layout parameters are automatically adjusted according to different screen parameters, so that the interface layout is adaptive to various different screens.

Description

Technical Field

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

[0002] In recent years, with the increase in the types of terminal devices, users access applications through more and more devices with different screen sizes. In order to enable application pages to provide a consistent, high-quality user experience on all devices, front-end developers must design and develop application page layouts that can adapt to different screen devices. Summary of the invention

[0003] The embodiment of the present application provides an interface generation method, which automatically adjusts interface layout parameters according to different screen parameters, so that the interface layout is adapted to a variety of different screens.

[0004] In a first aspect, the present application provides an interface generation method, comprising responding to user operations, determining layout parameters of an interface layout corresponding to a target application in key canvases of different sizes, the layout parameters of each key canvas including key attribute values ​​of each user interface (UI) component in each key canvas; performing interpolation processing on the key attribute values ​​of each UI component in key canvases of different sizes, determining a key attribute value change curve, the key attribute value change curve indicating a change trend of the key attribute values ​​of each UI component in canvases of different sizes; determining a layout calculation function based on the key attribute value change curve, the layout calculation function being used to determine the layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal after the target application is deployed to the target terminal.

[0005] The interface layout design is completed on a few canvases of different sizes, and the layout parameters of the interface layout design on canvases of different sizes are determined as key layout parameters. Each key layout parameter includes the key attribute value of each UI component in the interface layout design. The key attribute value change curve is obtained by interpolating the key attribute values ​​of UI components on canvases of different sizes. The layout calculation function is generated by the change curve. The interface layout parameters corresponding to different screen parameters are calculated by the layout calculation function, that is, the interface layout corresponding to different screen parameters is obtained, so that the designed interface layout can be adapted to different screens.

[0006] Optionally, the user operation includes a drag operation, and the drag operation is used to drag the target UI component from the UI component area to the target position in the key canvas. For example, the developer needs to add a Text component in the key canvas, so the developer drags the Text component from the UI component bar to the target position in the key canvas and then releases it. The editor responds to the drag operation and adds the Text component in the key canvas.

[0007] The interface layout design can be completed through a free drag and drop operation similar to PPT. There is no need to write code by hand. The layout design of the front-end page can be quickly and intuitively implemented by simply dragging components freely, which effectively solves the problems of development efficiency and difficulty in getting started.

[0008] In a possible implementation, interpolation processing is performed on key attribute values ​​of each UI component in key canvases of different sizes, and a specific implementation of determining the key attribute value variation curve is: comparing the key attribute values ​​of each UI component in key canvases of different sizes to determine the different key attribute values ​​of each UI component; interpolation processing is performed on the different key attribute values ​​of each UI component to determine the key attribute value variation curve of each UI component.

[0009] In this possible implementation, by interpolating key attribute values ​​with differences, the obtained key attribute value change curve can indicate the changing trend of the key attribute values ​​with different canvas sizes, and the key attribute values ​​corresponding to different canvas sizes can be obtained through each key attribute value change curve of each UI component, thereby realizing the adjustment of the key attribute values ​​of the UI components with the changes of different canvas sizes. It can be understood that different canvas sizes correspond to different screen size parameters, that is, the key attribute values ​​of each UI component are adjusted with the change of screen size, thereby realizing the adaptive adjustment of interface layout parameters with the change of screen size, and realizing interface design adapted to different screen sizes.

[0010] In one possible implementation, interpolation processing is performed on the key attribute values ​​with differences of each UI component, and a specific implementation of determining the key attribute value change curve of each UI component is: in response to the user's first input operation, a target interpolation formula is determined; based on the target interpolation formula, interpolation processing is performed on the key attribute values ​​with differences of each UI component, and the key attribute value change curve of each UI component is determined.

[0011] Developers can choose appropriate interpolation formulas to interpolate key attribute values ​​according to different situations, so that the obtained key attribute value change curve is more accurate. For example, for linearly changing key attribute values, linear interpolation formulas are selected for interpolation processing, and for nonlinearly changing key attribute values, nonlinear interpolation formulas (such as step interpolation formulas) are selected for interpolation processing.

[0012] Optionally, the first input operation includes a selection operation, which is used to select a target interpolation formula from multiple interpolation formulas. For example, the development interactive interface has an interpolation formula selection bar, and the user can select a suitable interpolation formula from several interpolation formulas. The editor responds to the selection operation to determine that the interpolation formula selected by the user is the target interpolation formula, and uses the target interpolation formula to interpolate the key attribute values.

[0013] Alternatively, the first input operation includes an editing operation, and the editing operation is used to edit the interpolation formula, and the edited interpolation formula is used as the target interpolation formula. For example, when the interpolation formula in the interpolation formula selection column does not meet the required interpolation formula, the developer can edit the interpolation formula in the custom input box, and the editor responds to the editing operation, determines the interpolation formula edited by the user as the target interpolation formula, and uses the target interpolation formula to perform interpolation processing on the key attribute value.

[0014] In another possible implementation, the determination of the key attribute value change curve is also related to a second input operation of the user, where the second input operation is used to input a curve adjustment parameter, and the curve adjustment parameter is used to adjust the key attribute value change curve.

[0015] In order to further ensure the accuracy of the key attribute value change curve, after the key attribute value change curve is generated by interpolation processing, the developer can also adjust the key attribute value change curve by adjusting the curve parameters of the key attribute value change curve.

[0016] In another possible implementation, in response to user operations, determining the layout parameters of the interface layout corresponding to the target application in key canvases of different sizes is specifically implemented by determining the size of the key canvas in response to a first user operation; and determining the key attribute value of each UI component in the key canvas in response to a second user operation.

[0017] Optionally, the first user operation includes a selection operation, the selection operation is used to select a target size from multiple typical sizes as the size of the key canvas; or the first user operation includes a scaling operation, the scaling operation is used to scale the size of the key canvas to the target size.

[0018] That is to say, the developer can determine the size of the key canvas through a variety of operation methods. For example, a suitable typical canvas can be selected from several typical canvases as the key canvas. The scale of the typical canvas is the size of the key canvas. Alternatively, the size of the key canvas can be determined by freely scaling the canvas.

[0019] In one example, the second user operation includes a drag operation, where the drag operation is used to drag the target UI component from the UI component area to a target position in the key canvas.

[0020] In another possible implementation, the key attribute value includes a width attribute value and / or a height attribute value, the width attribute value indicates the width of the UI component, and the height attribute value indicates the height of the UI component. In this way, the relative stretching layout adaptation of the interface layout in different screen sizes is achieved. For example, when the display size of the interface layout changes, the display width and / or height of the UI component changes accordingly to achieve the adaptation of the interface layout to different screen sizes.

[0021] In another possible implementation, the key attribute values ​​include a width attribute value, a height attribute value, a top offset attribute value, and a left offset attribute value. The width attribute value indicates the width of the UI component, the height attribute value indicates the height of the UI component, the top offset attribute value indicates the distance between the UI component and the upper border of the key canvas, and the left offset attribute value indicates the distance between the UI component and the left border of the key canvas. In this way, the adaptive layout of the interface layout in different screen sizes is achieved. For example, when the display size of the interface layout changes, that is, the canvas changes, the layout position and size of the UI components in the canvas also change accordingly, so that the interface layout can be adapted to different screen sizes.

[0022] In another possible implementation, the interface generation method provided by the present application also includes sending the layout file to the target terminal, so that after the target terminal loads the target application, the layout calculation function determines the target layout parameters corresponding to the screen of the target terminal according to the screen parameters of the target terminal, and the target terminal renders the display interface of the target application according to the target layout parameters.

[0023] On the terminal side, only the layout calculation function needs to calculate the target layout parameters corresponding to the terminal's screen according to the screen parameters of the terminal device (such as screen size), and then the target terminal can render according to the target layout parameters to obtain a display interface adapted to the terminal's screen, so that a set of code can be adapted to devices of various screen types (such as special-shaped screens and folding screens). This further improves the adaptability of the interface layout, eliminating the need for developers to develop a set of interface layouts for each frame of the screen, effectively reducing the developer's workload. On the other hand, the calculation process of the layout calculation function has little computing power overhead on the terminal device, and has little or no impact on the performance of the terminal device.

[0024] In a second aspect, the present application provides an interface generation method, including loading a target application file, the target application file including a layout file, the layout file being generated based on the method described in the first aspect; obtaining screen parameters of a target terminal; determining target layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal and a layout calculation function; and rendering a display interface of the target application based on the target layout parameters.

[0025] After the terminal deploys the target application, it loads the layout file, calls the layout calculation function to solve the target layout parameters corresponding to the terminal's screen size, and then renders according to the target layout parameters to obtain a display interface that fits the terminal's screen size. The calculation process of the layout calculation function has a small computational energy overhead on the device, and a display interface that fits the screen size can be obtained with little or almost no impact on the performance of the terminal device.

[0026] In a third aspect, the present application provides an interface generation device, comprising a response module, a first determination module, a second determination module and a generation module, wherein the response module is used to respond to user operations, determine the layout parameters of the interface layout corresponding to the target application in key canvases of different sizes, and the layout parameters of each key canvas include the key attribute values ​​of each UI component in each key canvas; the first determination module is used to perform interpolation processing on the key attribute values ​​of each UI component in key canvases of different sizes, and determine a key attribute value change curve, which indicates the change trend of the key attribute values ​​of each UI component in canvases of different sizes; the second determination module is used to determine a layout calculation function based on the key attribute value change curve, and the layout calculation function is used to determine the layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal after the target application is deployed to the target terminal, and the generation module is used to generate a layout file based on the layout calculation function and the layout parameters.

[0027] In another possible implementation, the first determination module is specifically used to compare the key attribute values ​​of each UI component in key canvases of different sizes to determine the different key attribute values ​​of each UI component; interpolate the different key attribute values ​​of each UI component to determine the key attribute value change curve of each UI component.

[0028] In another possible implementation, interpolation processing is performed on the key attribute values ​​with differences of each UI component to obtain a key attribute value change curve of each UI component. A specific implementation is: in response to the user's first input operation, a target interpolation formula is determined; based on the target interpolation formula, interpolation processing is performed on the key attribute values ​​with differences of each UI component to determine the key attribute value change curve of each UI component.

[0029] In another possible implementation, the first input operation includes a selection operation, and the selection operation is used to select a target interpolation formula from multiple interpolation formulas; or, the first input operation includes an editing operation, and the editing operation is used to edit the interpolation formula, and the edited interpolation formula is used as the target interpolation formula.

[0030] In another possible implementation, the determination of the key attribute value change curve is also related to a second input operation of the user, where the second input operation is used to input a curve adjustment parameter, and the curve adjustment parameter is used to adjust the key attribute value change curve.

[0031] In another possible implementation, the response module is specifically configured to respond to the first user operation to determine the size of the key canvas; and respond to the second user operation to determine the key attribute value of each UI component in the key canvas.

[0032] In another possible implementation, the first user operation includes a selection operation, where the selection operation is used to select a target size from multiple typical sizes as the size of the key canvas; or, the first user operation includes a scaling operation, where the scaling operation is used to scale the size of the key canvas to the target size.

[0033] In another possible implementation, the second user operation includes a drag operation, where the drag operation is used to drag the target UI component from the UI component area to a target position in the key canvas.

[0034] In another possible implementation, the key attribute value includes a width attribute value and / or a height attribute value, the width attribute value indicates the width of the UI component, and the height attribute value indicates the height of the UI component; or, the key attribute value includes a width attribute value, a height attribute value, a top offset attribute value, and a left offset attribute value, the width attribute value indicates the width of the UI component, the height attribute value indicates the height of the UI component, the top offset attribute value indicates the distance between the UI component and the upper border of the key canvas, and the left offset attribute value indicates the distance between the UI component and the left border of the key canvas.

[0035] In another possible implementation, the interface generation device provided by the present application also includes a sending module, which is used to send the layout file to the target terminal, so that after the target terminal loads the target application, the layout calculation function determines the target layout parameters corresponding to the screen of the target terminal according to the screen parameters of the target terminal, and the target terminal renders the display interface of the target application according to the target layout parameters.

[0036] In a fourth aspect, the present application provides an interface generation device, comprising a loading module, an acquisition module, a third determination module and a rendering module, wherein the loading module is used to load a target application file, the target application file includes a layout file, and the layout file is generated based on the method described in the first aspect; the acquisition module is used to obtain the screen parameters of the target terminal; the third determination module is used to determine the target layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal and a layout calculation function; the rendering module is used to render the display interface of the target application based on the target layout parameters.

[0037] In a fifth aspect, an embodiment of the present application provides a computing device, comprising a memory and a processor, wherein the memory stores instructions, and when the instructions are executed by the processor, the method described in the first aspect and / or the second aspect is implemented.

[0038] In a sixth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the method described in the first aspect and / or the second aspect is implemented.

[0039] In a seventh aspect, an embodiment of the present application further provides a computer program or a computer program product, wherein the computer program or the computer program product comprises instructions, which, when executed, cause a computer to execute the method described in the first aspect and / or the second aspect.

[0040] In an eighth aspect, an embodiment of the present application further provides a chip, comprising at least one processor and a communication interface, wherein the processor is used to execute the method described in the first aspect and / or the second aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 The design interaction interface of a graphical front-end design tool of related technology 1 is shown;

[0042] Figure 2 A system architecture diagram of related technology 1 is shown;

[0043] Figure 3 A flowchart of a method for developing a graphical front end in a related technology is shown;

[0044] Figure 4 The following is a flowchart showing the implementation of the related technology 1 in the terminal device;

[0045] Figure 5 The following is a design interactive interface of a graphical front-end design tool of the related technology 2;

[0046] Figure 6 A system architecture diagram of related technology 2 is shown;

[0047] Figure 7 A flowchart of a method for developing a graphical front end of a related technology is shown;

[0048] Figure 8 A flow chart of a method in a terminal device of the related technology 2 is shown;

[0049] Fig. 9 The design interaction interface of a graphical front-end design tool of related technology three is shown;

[0050] Fig.10 A system architecture diagram of related technology three is shown;

[0051] Fig.11 A flowchart of a method for developing a graphical front end of a related technology is shown;

[0052] Fig.12 A flowchart of a method in a terminal device of related technology 3 is shown;

[0053] Fig.13 A schematic diagram of an application scenario of the interface generation method provided in an embodiment of the present application is shown;

[0054] Fig.14 A schematic diagram showing an implementation form of the interface generation method provided in an embodiment of the present application in platform software;

[0055] Fig.15 A schematic diagram of a flow chart of an interface generation method provided in an embodiment of the present application is shown;

[0056] Fig.16A and Fig. 16B They are schematic diagrams of a key canvas interface respectively;

[0057] Fig.17 A schematic diagram showing a trend editing panel;

[0058] Fig.18 A method flow chart of the interface generation method provided by an embodiment of the present application on a terminal is shown;

[0059] Fig.19A and Fig.19B They are schematic diagrams of a key canvas interface respectively;

[0060] Fig. 20 A schematic diagram showing a trend editing panel;

[0061] Fig.21 A schematic diagram of a flow chart of an interface generation method provided in an embodiment of the present application;

[0062] Fig. 22 A schematic diagram of a flow chart of an interface generation method provided in an embodiment of the present application;

[0063] Fig.23 A schematic diagram of the structure of an interface generation device provided in an embodiment of the present application;

[0064] Fig.24 A schematic diagram of the structure of an interface generation device provided in an embodiment of the present application;

[0065] Fig.25 A schematic diagram of the structure of a computing device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0066] In order to better introduce the embodiments of the present application, the relevant concepts in the embodiments of the present application are first introduced below.

[0067] Graphical front-end design tool: A visual, graphical application interface development tool. By using this tool, developers of different experience levels can create interactive interfaces for web and mobile applications through a graphical user interface, using visual operations such as dragging and dropping components. Low-code development platforms reduce the pressure on non-technical developers and help them avoid code writing. At the same time, they also provide support for professional developers to help them extract the tedious underlying architecture and infrastructure tasks in the application development process.

[0068] Canvas: It is the working area in a graphical design tool, which represents the size and boundaries of the actual design output. Developers create, edit and arrange design elements (such as shapes, lines, text, images, etc.) on the canvas.

[0069] Integrated development environment (IDE): An application used to provide a program development environment, generally including tools such as code editors, compilers, debuggers, and graphical user interfaces.

[0070] Constraint Layout: Built on a flexible constraint system, it can mark the relative positions between views. Complex UI design can be completed without multiple layers of nesting, suitable for UI adaptive solutions.

[0071] Flex layout: Flexible box model layout, which enables the parent element to adjust the height, width and arrangement order of child elements by allocating gaps between child elements, so as to best adapt to the available layout space (to different devices and screens of different sizes).

[0072] Key value: represents the clear state of a front-end component (also called UI component) on a specific canvas size (including one or more of the front-end properties such as position, size, rotation, etc.), which are explicitly defined by the user. For example, a component has a width of 40px on a canvas of 400px and a width of 50px on a canvas of 1000px.

[0073] Transition value: The value between or outside the key values ​​is called a transition value, which is automatically calculated by an interpolation algorithm in the embodiment of the present application. For example, under the above-mentioned key values, the width of a component on a screen with a width of 700px may be 45px, and the width of a component on a screen with a width of 100px may be 35px. The transition value can also be understood as the key value of the UI component in a non-key canvas.

[0074] Key canvas: A canvas with a key value and a specific size, such as the 400px and 1000px canvas mentioned above.

[0075] In order to complete the development of interface layout, the industry used to use handwritten layout code to complete the development of interface layout. This method is code-centric. Although it is convenient for developers to directly modify the code to quickly respond to business needs, it still has some shortcomings. For example, handwritten code cannot quickly and intuitively see the interface layout effect, and tools such as real machine simulators are needed; complex pages often contain the layout of a large number of UI components, and handwritten code development efficiency is low and requires high coding skills from developers.

[0076] In response to the above-mentioned problems of handwritten front-end code, a related technology proposes a solution for implementing page layout through a graphical development method similar to PPT operation: developers with different experience levels no longer need to write code by hand, but can quickly and intuitively implement the layout of the front-end page by simply dragging and dropping components freely.

[0077] Figure 1 A design interaction interface of a graphical front-end design tool of related technology 1 is shown.

[0078] Figure 2 A system architecture diagram of the related technology 1 is shown. Figure 2 As shown, a set of free-drag layout methods based on absolute position coordinates or margins is provided. In the graphical front-end design tool, developers no longer need to write code by hand, but can realize the layout of the front-end page by simply freely dragging UI components and setting the property bar; on the terminal device, the rendering engine renders the layout effect according to the UI component layout information.

[0079] Figure 3 A flowchart of a method for developing a graphical front end of a related technology is shown. Figure 3 As shown in the figure, the developer first selects a canvas of a certain size, then drags UI components on the canvas to implement page layout, and generates a layout configuration file after the layout is completed; if you need to support multiple terminal devices with different screen sizes, you need to develop multiple sets of page layouts. When the layout development of all devices is completed, all the generated layout configuration files are packaged into the application.

[0080] Figure 4 The following is a flowchart of the implementation of the related technology 1 in the terminal device. After the application is deployed to the terminal device, the rendering engine directly draws the UI layout according to the coordinate value or margin value of the UI component in the layout configuration file.

[0081] Although this solution effectively solves the problems of development efficiency and difficulty of getting started, free dragging is usually based on absolute position coordinates or margins, which fixes the coordinates and size of UI components. No matter how the device screen is changed, the coordinates and size of the fixed components will not change, and dynamic layout adaptation cannot be achieved. In order to adapt to different terminal devices, multiple sets of interfaces need to be developed, so the development workload is large. And when new terminal devices with new screen sizes are added later, a new set of interface layouts needs to be developed to adapt, and the subsequent maintenance workload is also large.

[0082] In order to solve the problem of adapting to different terminal devices, the second related technology proposes a constraint layout solution. Constraint layout stipulates a series of layout logic rules, sets the relative position and relationship between components by using the layout attributes they provide, and supports the use of visual and graphical operations such as dragging and dropping to generate application interface layouts; at runtime, through real-time layout calculation, the best layout effect is obtained on the current device screen.

[0083] Figure 5 A design interaction interface of a graphical front-end design tool of related technology 2 is shown.

[0084] Figure 6 A system architecture diagram of the related technology 2 is shown. Figure 6 As shown, on the graphical front-end design tool, layout constraints are set through visual interactive methods such as dragging and dropping to complete the application interface layout; on the terminal device, a constraint solving engine is added to solve the constraint set according to the current device screen size.

[0085] Figure 7 The flowchart of the method of developing the related technology 2 in the graphical front end is shown. Figure 7 As shown, the developer first adds UI components to the canvas, then sets constraints for the UI components according to the constraint layout rules, and finally generates a layout constraint set.

[0086] Figure 8 The flowchart of the method of the second related technology in the terminal device is shown. Figure 8 As shown, the generated constraint set is used in the constraint solving engine in the terminal device to solve the problem, and the solution result is used for UI layout drawing by the UI interface rendering engine.

[0087] Although the solution of related technology 2 solves the problem of adapting to different terminal devices, there are still some problems. For example, developers need to learn constraint layout rules, the threshold for use is high, it is difficult to sort out the relationship between various constraints in complex scenarios, and the operation is not as simple as free dragging; because it relies on the computing power of the terminal device to solve the constraint set, in complex layout scenarios, the rendering efficiency may be affected due to insufficient computing power of the device, resulting in interface display jams; and different manufacturers have different constraint layout rules, such as Android's ConstraintLayout and Apple's Auto Layout, and the workload of adapting the same application across different platforms is large.

[0088] Related technology 3 proposes a Flex layout solution. The main idea of ​​Flex layout is to enable the parent element to adjust the width, height, and arrangement of the child elements to better adapt to the available layout space. The advantage of the Flex elastic box model is that you only need to declare the behavior that the layout should have, without giving a specific implementation method. The layout engine is responsible for completing the actual layout calculation.

[0089] Fig. 9 A design interaction interface of a graphical front-end design tool of related technology three is shown.

[0090] Fig.10 A system architecture diagram of related technology 3 is shown. Fig.10 As shown, on the graphical front-end design tool, the layout is completed through visual interactive methods such as dragging and dropping, and the Flex properties are set in the property bar to complete the application interface layout; on the terminal device, a layout engine is added to solve the Flex layout according to the current device screen size.

[0091] Fig.11 The flowchart of the method of developing the related technology three in the graphical front end is shown. Fig.11 As shown, the developer first adds UI components to the canvas, then sets Flex-related layout properties according to Flex layout rules, and finally generates a layout file.

[0092] Fig.12 The flowchart of the method in the terminal device of the related technology 3 is shown. Fig.12 As shown, the layout file is parsed in the layout engine in the terminal device to solve the layout, and the solution result is used to draw the UI layout through the UI interface rendering engine.

[0093] Similar to related technology 2, related technology 3 also stipulates a set of unique layout rules. It is generally believed that the learning cost of this set of rules is slightly lower than that of constraint layout (still much higher than existing technology 1), but there are still the following shortcomings: developers are required to learn a large number of layout attributes, the interaction effects between attributes are complex, and the development difficulty is relatively large; in order to achieve rich layout effects, this technology requires a large number of container components to be used in combination, and too many nested layers of components can easily lead to a decline in terminal device performance; the flexibility is poor, and some layout effects cannot be achieved using this technology, so this technology is often used in conjunction with other layout solutions.

[0094] In summary, the existing technologies and related technologies have the following problems:

[0095] 1. The free drag layout method is not adaptable to multiple devices, and the workload is large. When adding support for different terminal devices, it needs to be redeveloped and adapted, which affects development efficiency.

[0096] 2. Constraint layout or Flex layout requires developers to learn a lot of layout logic rules before they can use it. The threshold is high. Complex layout solutions are required at runtime, resulting in poor rendering performance and affecting user experience.

[0097] 3. Currently, there is a lack of a graphical front-end design tool that is easy to use, simple to operate, and can efficiently adapt to different terminal devices.

[0098] In response to the above problems, an embodiment of the present application proposes an interface generation method, which allows developers to complete layout design on a few key canvases of different sizes by using a free drag operation similar to PPT or entering UI component properties in a property bar, and then interpolate the key attribute values ​​of UI components on canvases of different sizes to obtain a key attribute value change curve, and then generate a layout calculation function based on the key attribute value change curve. The layout calculation function can be used to calculate the layout parameters corresponding to different screen sizes, so that the developed interface layout can be adapted to screen devices of multiple sizes.

[0099] The interface generation method provided by this application can complete the component design of the interface by dragging or entering the UI component properties in the property bar. There is no need to write code by hand or learn a large number of layout logic rules such as those in related technologies two or three. The layout design of the front-end page can be quickly and intuitively realized by simply dragging components freely, which effectively solves the problems of development efficiency and difficulty of getting started. At the same time, the layout calculation function can calculate the layout parameters corresponding to the screen parameters according to different screen parameters, so as to realize the adaptation of the interface layout design to devices with different screen parameters. The layout calculation function has less computing power overhead on the terminal device and has less impact on the performance of the terminal device.

[0100] The detailed implementation of the interface generation method and device provided in the embodiments of the present application is described in detail below with reference to the accompanying drawings.

[0101] Fig.13 A schematic diagram of an application scenario of the interface generation method provided in the embodiment of the present application is shown. Fig.13 As shown, on the development side, the layout design of a few key canvases of different sizes and the related editing of the change trend are implemented in the editor, and the key values ​​in the key canvases of different sizes are processed in the compiler to obtain the key attribute value change curve. The key attribute value change curve generates a layout calculation function through the layout calculation function generation module. The code generation module generates a layout file according to the layout calculation function and the layout parameters of the key canvas layout design. The layout file is packaged into the application file to obtain the layout files on different application platforms (such as Fig.13 The terminal application file executed by the target platform A, target platform B and target platform C in the target platform A. After the terminal device with different screen parameters (such as screen size parameters) loads the terminal application file, the layout calculation function calculates the corresponding target layout parameters according to the screen size parameters of the terminal, and the target layout parameters are rendered to obtain the interface layout adapted to the screen size.

[0102] Fig.14 A schematic diagram showing an implementation form of the interface generation method provided in an embodiment of the present application in platform software. Fig.14 The implementation form of the interface generation method provided by the implementation of this application on the IDE and terminal device is given, wherein the portion shown in the dotted box is a newly added module of the embodiment of this application based on the existing platform software. Inside the editor, the embodiment of this application designs a key canvas editing module and a layout change trend editing module, allowing developers to design the front-end interface layout under screens of different sizes and configure the layout change trend; inside the compiler, the embodiment of this application designs a layout key value processing module, a layout calculation function generation module, and a front-end code generation module to obtain a layout file that can adjust the layout parameters according to different screen parameters. When the application is running on the terminal device side, the layout file generated in the IDE is called, and the layout calculation function calculates the corresponding target layout parameters according to the screen size parameters of the terminal. The target layout parameters are rendered to obtain the interface layout adapted to the screen size.

[0103] Fig.15 FIG. 1 is a flow chart of an interface generation method provided by an embodiment of the present application. Fig.15 As shown, the interface generation method provided by this application mainly includes the following steps:

[0104] (1) When designing an interface, developers first determine the key canvas and then design the layout on the key canvas.

[0105] This step is performed when the developer designs the front-end interface layout. In this step, the developer determines the size of the key canvas by freely scaling the canvas size or selecting a canvas of a typical size. After the user determines the size of the key canvas, the canvas is automatically marked as the key canvas; then the layout design is performed on the key canvas. For example, the user can freely drag and drop components in the key canvas to any position, and it also supports quick editing functions for UI components such as scaling, rotating angle, etc.

[0106] (ii) Compare key values ​​of layout attributes.

[0107] This step is performed after the developer completes the layout design of the key canvas. In this step, the layout key value processing module automatically compares the layout attribute key values ​​of the two sets of key canvases and finds the key attribute values ​​with differences. The compared layout attribute key values ​​include the component position, width, height, margins, etc. set by the developer.

[0108] (3) The developer sets the layout change trend interpolation method.

[0109] This step is performed after step 2. For the key values ​​of layout attributes obtained by comparison in step 2, developers can select different interpolation methods to configure the change trend. The change curves of different interpolation methods can be viewed through the visual interface and parameter preferences can be set. In addition to the preset linear interpolation, step, etc., users can also use custom interpolation calculation methods.

[0110] (iv) Generate layout calculation function.

[0111] This step is executed after the developer has designed the layout of all key canvases. In this step, the function generation module generates a layout dynamic calculation function, which can dynamically calculate the absolute coordinates, width, height and other layout information of each component under the screen size according to the screen size of the current device, combined with the key values ​​of the layout attributes designed by the user and the set interpolation method. The generated function can support multiple platform languages, such as js, ets, etc., and developers can choose by themselves.

[0112] (V) Call the layout calculation function to solve the current screen layout.

[0113] This step is executed when the terminal device loads the application. When the terminal loads the application, it first queries its own device screen parameters, then calls the generated layout calculation function, dynamically calculates the optimal layout solution for the current screen, and then renders it.

[0114] The specific implementation of the interface generation method provided in the embodiment of the present application is described in detail below through two specific implementation examples.

[0115] In an example implementation, the interface generation method provided by the embodiment of the present application can realize the relative stretching layout of the designed application interface in multiple devices with different screen sizes. The characteristic of the relative stretching layout is that the display width and / or height of the components in the interface are not fixed values, but the start and end positions are determined by relative reference objects. For example, when the display size of the layout changes, the display width of the UI component changes accordingly. The specific implementation steps are as follows:

[0116] S11. Select a canvas of typical size as the key canvas to design the application interface layout.

[0117] In this step, the developer completes the interface layout design of the key canvas in the editor, such as Fig.16A and Fig. 16B As shown. Developers can freely scale the canvas size or select the key canvas by presetting the canvas size, and then complete the layout design by freely dragging the component position, freely scaling the component size, etc. A ruler is displayed above the canvas and the width of the key canvas is marked. Developers can click the mark icon to quickly switch to the key canvas of the corresponding width to view or design the layout effect. Fig.16A and Fig. 16B 2 sizes of key canvas are shown, with the component width increasing as the canvas width increases.

[0118] S12. Compare the key values ​​of the layout attributes of the two groups of key canvases.

[0119] This step is performed in the IDE to automatically compare the layout differences of the two sets of key canvases and obtain the key values ​​of the layout attributes. In an example, the key values ​​of the layout attributes of the two sets of key canvases are shown in Table 1:

[0120] Key Values Key Canvas 1 Key Canvas 2 Width of Image1 1100px 1400px Width of Text 1 1000px 1500px Width of Text 2 1000px 1500px Width of Text 3 1000px 1500px

[0121] Table 1

[0122] S13. On the layout key value change trend editing panel, set the interpolation method.

[0123] In this step, the developer can select a preset interpolation method or a custom interpolation method for the change trend of each layout key value according to the requirements. This embodiment uses the default linear interpolation.

[0124] Fig.17A schematic diagram of the change trend editing panel is shown. Developers can select the key attribute value of the UI component to be processed in the key value selection bar. For example, the width of Image1 can be selected in the key value selection bar, indicating that the change trend of the width attribute value of Image1 needs to be set. The interpolation processing method for the key value of the layout attribute can be determined in the interpolation method bar. The interpolation processing method can be determined in a variety of ways, such as by selecting a preset interpolation method or by custom input to determine the target interpolation formula. Fig.17 As shown, a preset linear interpolation interpolation method can be selected to perform interpolation processing on the layout attribute key value.

[0125] After setting the interpolation method, the key trend editing panel can also display the change curve obtained after interpolation processing using the interpolation method, such as Fig.17 As shown, when the width of Image1 is selected in the key value selection and the linear interpolation processing method is selected in the interpolation method bar, the width of Image1 in the two key canvases is processed by linear interpolation, and the change curve presented is a curve with a positive slope. In other words, the width of Image1 is positively correlated with the size of the canvas. The width of Image1 will increase as the canvas increases and decrease as the canvas decreases.

[0126] S14. Automatically generate a layout calculation function according to the result processed by the set interpolation method.

[0127] Generate the js code layout calculation function according to the result of the linear interpolation processing in step S13:

[0128]

[0129]

[0130] S15. Package the layout calculation function code generated in step S14 and other front-end codes (such as layout-independent codes, background colors and shadows, etc.) together and run them on the terminal device.

[0131] This step is performed on the terminal device, such as Fig.18 As shown, when loading an application, the terminal device first reads its own device size parameters, and then substitutes them into the layout dynamic calculation function to solve the layout, thereby completing the rendering process.

[0132] The interface generation method provided in the embodiment of the present application improves the graphical front-end design tool. Developers can quickly complete the layout design by freely dragging UI components. They only need to design the layout of a few key canvases. When running on different terminal devices, the layout can be automatically calculated to complete multi-device adaptation. Compared with the existing technology, the development threshold is lowered and the development efficiency is improved.

[0133] In another example implementation, the interface generation method provided in the embodiment of the present application can realize the layout of the designed application interface in multiple devices with different screen sizes. The difference from the previous example is that the scene of the previous example is that the size of the UI component is stretched as the device screen size changes; while the scene of this example is that the size and position of the UI component change as the device screen size changes. The specific implementation steps are as follows:

[0134] S21. Select a canvas of typical size as the key canvas to design the application interface layout.

[0135] In this step, the developer completes the layout design of the application interface on the key canvas in the editor, such as Fig.19A and Fig.19B As shown, in this embodiment, two sizes of key canvases are designed. As the size of the canvas increases, the arrangement position and size of the UI components in the canvas change.

[0136] S22. Compare the key values ​​of the layout attributes of the two groups of key canvases.

[0137] This step is performed in the IDE to automatically compare the layout differences of the two sets of key canvases and obtain the key values ​​of the layout attributes. Since there are many UI components in the canvas, here we take the UI component Image1 as an example. The comparison results of the key attribute values ​​of the UI component Image1 in the two key canvases are shown in Table 2:

[0138] Key Values Key Canvas 1 Key Canvas 2 Width of Image1 400px 600px Height of Image1 400px 600px Top offset of Image1 50px 500px Left offset of Image1 20px 100px

[0139] Table 2

[0140] S23. On the layout key value change trend editing panel, set the interpolation method.

[0141] In this step, the developer can select a preset interpolation method or a custom interpolation method for the change trend of each layout key value according to the needs. In this embodiment, the width and height of Image1 are linearly interpolated, and the top offset and the left offset are step interpolated.

[0142] Fig. 20 A schematic diagram of the change trend editing panel is shown. Developers can select the key attribute value of the UI component to be processed in the key value selection bar. For example, they can select the top offset of Image1 in the key value selection bar, indicating that they want to set the change trend of the top offset attribute value of Image1. In the interpolation method bar, you can determine the interpolation processing method for the key values ​​of the layout attributes. The interpolation processing method can be determined in a variety of ways. For example, you can determine the target interpolation formula by selecting a preset interpolation method or by custom input. Fig. 20As shown, a preset step interpolation interpolation method can be selected to perform interpolation processing on the layout attribute key value.

[0143] After setting the interpolation method, the key trend editing panel can also display the change curve obtained after interpolation processing using the interpolation method, such as Fig. 20 As shown, when the top offset of Image1 is selected in the key value selection and the step interpolation processing mode is selected in the interpolation mode bar, the key values ​​of the top offset of Image1 in the two key canvases are processed by step interpolation, and the change curve presented is a step-like change curve. That is to say, the value of the top offset of Image1 is A when the size of the canvas is in a certain range, and the value is B when the size of the canvas is in another range.

[0144] S24. Automatically generate layout calculation function according to the set interpolation method

[0145] The calculation function of the js code layout generated according to the linear interpolation processing result of S23 is consistent with the previous example. The js code generated by step interpolation is as follows:

[0146]

[0147] S25. The layout calculation function code generated by S24 is packaged together with other front-end codes and run on the terminal device. The execution method is the same as the previous example and will not be repeated here for brevity.

[0148] The interface generation method provided in the embodiment of the present application supports developers to configure a variety of different layout change methods, realizes the flexibility and diversity of multi-device layout adaptation, and can support different design needs of developers. For example, the interface layout designed and generated by this embodiment can be adapted to devices of various screen types, such as special-shaped screens and folding screens.

[0149] Fig.21 The following is a flow chart of an interface generation method provided by an embodiment of the present application. The method can be executed on a development device to generate a layout file that can be adapted to multiple devices with different screen sizes. Fig.21 As shown, the interface generation method provided in the embodiment of the present application includes steps S2101 to S2104.

[0150] In step S2101, in response to a user operation, layout parameters of an interface layout corresponding to a target application in key canvases of different sizes are determined.

[0151] Developers can determine the key canvas in a variety of ways.

[0152] For example, the developer can determine the key canvas by free scaling operations. For example, in the key canvas editing interface, there will first be a canvas of a default size. If the canvas size does not meet the requirements, the developer can change the canvas size by scaling operations to obtain a canvas size that meets the requirements, and use the canvas after the scaling operation as the key canvas.

[0153] Alternatively, the developer can select several preset typical-sized canvases as the key canvas for this interface design. For example, a typical canvas selection bar will be set in the key canvas editing interface, and the developer can select a typical canvas that meets the requirements from several preset typical canvases as the key canvas. For example, several typical canvases may include a canvas of 1000px*500px, a canvas of 1500*500px, a canvas of 400px*400px, and a canvas of 600px*600px. The developer can select a canvas of 1000px*500px and a canvas of 1500*500px as two key canvases.

[0154] Alternatively, the developer can determine the key canvas by inputting in the canvas property bar. For example, the key canvas editing interface has a canvas property editing bar, and the canvas is set by inputting the required property value in the canvas property editing bar. For example, inputting 1000px*500px in the size property of the canvas property editing bar will obtain a canvas with a size of 1000px*500px, and the set canvas is used as the key canvas.

[0155] After the key canvas is determined, the developer can start to design the layout on the key canvas. Optionally, the developer can design the layout by dragging. For example, from the UI component area, drag the required target UI component to the target position in the key canvas and then release it to quickly and intuitively complete the layout design. It is understandable that the UI component area includes a variety of UI components, such as Image components and Text components.

[0156] After dragging the required UI components to the key canvas, the developer can also adjust the UI components through rotation, scaling, etc. until a satisfactory layout design is obtained.

[0157] The editor responds to user operations and records the layout parameters of the key canvas. The layout parameters in the key canvas include key attribute values ​​of each UI component in the key canvas.

[0158] The key attribute values ​​of the UI component may optionally include one or more of the width, height, rotation angle, top offset, and left offset of the UI component. For example, when the designed interface layout is a relative stretch layout, that is, the size of the UI component in the interface layout design changes with the change of the canvas, the key attribute values ​​of the UI component may be the width and height attribute values. When the designed interface layout is a shift layout, that is, the size and position of the UI component in the interface layout design will change with the change of the canvas, the key attribute values ​​of the UI component may be four attribute values: width, height, rotation angle, top offset, and left offset.

[0159] In step S2102, interpolation processing is performed on the key attribute values ​​of each UI component in key canvases of different sizes to determine a key attribute value variation curve.

[0160] The key attribute values ​​of each UI component in key canvases of different sizes are compared to find out the key attribute values ​​with differences, and then the key attribute values ​​with differences are interpolated to obtain the key attribute value change curve corresponding to each UI component.

[0161] Developers can interact with the editor in a variety of ways to determine the interpolation method. For example, they can select the required interpolation formula from multiple preset interpolation formulas to interpolate key attribute values ​​through selection operations; they can also freely edit the required interpolation formula to interpolate key attribute values ​​through customization.

[0162] The specific implementation of determining the interpolation processing method can be found in the above Fig.17 and Fig. 20 For the sake of brevity, the detailed description is not repeated here.

[0163] In another example, in order to further ensure the accuracy of the key attribute value change curve, after the key attribute value change curve is generated by interpolation processing, the developer can also adjust the key attribute value change curve by adjusting the curve parameters of the key attribute value change curve. For example, the developer can adjust the key attribute value change curve by entering the curve adjustment parameters in the curve parameter adjustment bar. Optionally, the curve adjustment parameters may include parameters such as curve function value and slope. Alternatively, the developer can also adjust the curve by other operation methods, such as dragging a point on the curve.

[0164] It needs to be explained that for the key attribute values ​​of UI components that do not change in multiple key canvas layout designs, the key attribute values ​​of the UI components are fixed values. It can also be understood that the key attribute value change curve corresponding to the UI component attributes is f(x)=a, that is, a curve parallel to the x-axis, that is, for screens with any screen size parameters, the key value of the UI component is the fixed value a.

[0165] The key attribute value change curve of each UI component indicates the law of how the key attribute values ​​of the UI component change with the change of the canvas, that is, the key attribute value change curve establishes a mapping relationship between the canvas size and the key attribute value, and the key attribute values ​​corresponding to different canvas sizes can be obtained through the key attribute value change curve. It can be understood that canvases of different sizes correspond to screens of different sizes, so the key attribute value change curve establishes a mapping relationship between different screen sizes and the key attribute values ​​of each UI component, and the key attribute values ​​corresponding to different screen sizes can be obtained through the key attribute value change curve.

[0166] In step S2103, a layout calculation function is determined based on the key attribute value change curve.

[0167] After determining the key attribute value change curve, the layout calculation function code is generated through the layout calculation function generation module. The specific implementation of the layout calculation function code generation can be found in the above code description, which will not be repeated here for brevity.

[0168] The layout calculation function can calculate the key attribute values ​​of each UI component of the interface layout corresponding to the screen parameters based on the screen parameters. For example, the screen parameters include screen size parameters. The screen size parameters are used as the input of the layout calculation function. The layout calculation function performs calculations based on the screen size and outputs the key attribute values ​​of each UI component of the interface layout corresponding to the screen size, thereby achieving adaptation to various types of devices with different sizes.

[0169] In step S2104, a layout file is generated based on the layout calculation function and the layout parameters.

[0170] Generate a layout file based on the layout calculation function and the layout parameters in the key canvas, package the layout file into the application, and generate an application installation package. In one example, the installation of the application includes uploading it to a cloud server for terminal users to download and install. When the terminal user installs and deploys the application on the terminal device, the terminal device loads and runs the application, first obtain the screen size parameters of the terminal device, such as reading the screen size parameters through the screen size storage interface. For example, the terminal device is a Huawei mate30 smartphone with a screen size of 6.62 inches and 1080px*2340px. The screen size parameters are used as the input of the layout calculation function, and the key attribute values ​​of each UI component of the interface layout adapted to the screen size of the Huawei mate30 smartphone are output, and then the layout parameters other than the key attribute values ​​in the layout parameters of the key canvas are combined, such as the color, background color and shadow of the UI component, to obtain the layout parameters under the screen size.

[0171] It should be explained that the applications mentioned in the embodiments of the present application can be any type of application, such as chat applications, shopping applications, game applications, news applications, and web applications, etc. They can also be applications that need to download installation packages for installation, or they can be small program applications that do not require downloading installation packages, etc.

[0172] Fig. 22 This is a flow chart of an interface generation method provided in an embodiment of the present application. The method can be executed on a terminal device, and the terminal device can be any device with a screen, such as a mobile phone, a tablet computer, a smart wearable device, a car terminal, a TV, a computer, etc. Fig. 22 As shown, the interface generation method provided in the embodiment of the present application includes steps S2201 to S2204.

[0173] In step S2201, the target application file is loaded.

[0174] The terminal device loads and runs the target application file, which contains the Fig.21 The component file obtained by the steps shown.

[0175] The layout file includes layout calculation function codes and other layout parameter codes that are not related to screen parameter changes, such as the color, shadow, texture of UI components and the background properties of the canvas.

[0176] The embodiment of the present application does not limit the type of the target application. The target application can be any type of application, such as chat applications, shopping applications, game applications, news applications, and web applications. It can also be an application that requires downloading an installation package to install, or it can be a small program application that does not require downloading an installation package.

[0177] In step S2202, the screen parameters of the target terminal are obtained.

[0178] The terminal device will store the parameters of the terminal device screen, such as screen resolution, screen size and other parameters, and will leave an interface for calling and using. By calling the interface, the terminal screen parameters, such as screen size parameters, can be obtained.

[0179] In step S2203, based on the screen parameters of the target terminal and the layout calculation function, target layout parameters corresponding to the screen parameters of the target terminal are determined.

[0180] The screen size parameter is used as the input of the layout calculation function of each UI component, and the key attribute value of each UI component corresponding to the screen size parameter is output.

[0181] For example, the terminal device is a Huawei mate30 smartphone with a screen size of 6.62 inches and 1080px*2340px. The screen size parameters are used as the input of the layout calculation function, and the key attribute values ​​of each UI component of the interface layout adapted to the screen size of the Huawei mate30 smartphone are output. Then, the layout parameters of the key canvas except the key attribute values ​​are combined, such as the color, background color and shadow of the UI components, to obtain the layout parameters (i.e., the target layout parameters) under the screen size.

[0182] In step S2204, a display interface of the target application is rendered based on the target layout parameters.

[0183] By rendering the target layout parameters, a display interface of the target application adapted to the screen is obtained, thereby obtaining a better display effect and improving the user experience.

[0184] The implementation of this application does not limit the rendering method, and any suitable rendering method can be used to render according to the target layout parameters to obtain a display interface.

[0185] Based on the same concept as the above-mentioned embodiment of the interface generation method, the present application embodiment also provides an interface generation device 2300, which can be integrated and deployed in an IDE, including a method for implementing Figure 13-21 The units or modules of each step in the interface generation method shown.

[0186] Fig.23 The structure diagram of an interface generation device provided in an embodiment of the present application is shown in FIG. The device is applied to a computing device, such as Fig.23As shown, the interface generation device 2300 at least includes a response module 2301, a first determination module 2302, a second determination module 2303 and a generation module 2304, wherein the response module 2301 is used to respond to user operations, determine the layout parameters of the interface layout corresponding to the target application in key canvases of different sizes, and the layout parameters of each key canvas include the key attribute values ​​of each UI component in each key canvas; the first determination module 2302 is used to perform interpolation processing on the key attribute values ​​of each UI component in key canvases of different sizes, and determine the key attribute value change curve, and the key attribute value change curve indicates the change trend of the key attribute values ​​of each UI component in canvases of different sizes; the second determination module 2303 is used to determine the layout calculation function based on the key attribute value change curve, and the layout calculation function is used to determine the layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal after the target application is deployed to the target terminal, and the generation module 2304 is used to generate a layout file based on the layout calculation function and the layout parameters.

[0187] In another possible implementation, the first determination module 2302 is specifically used to compare the key attribute values ​​of each UI component in key canvases of different sizes to determine the different key attribute values ​​of each UI component; interpolate the different key attribute values ​​of each UI component to determine the key attribute value change curve of each UI component.

[0188] In another possible implementation, interpolation processing is performed on the key attribute values ​​with differences of each UI component to obtain a key attribute value change curve of each UI component. A specific implementation is: in response to the user's first input operation, a target interpolation formula is determined; based on the target interpolation formula, interpolation processing is performed on the key attribute values ​​with differences of each UI component to determine the key attribute value change curve of each UI component.

[0189] In another possible implementation, the first input operation includes a selection operation, and the selection operation is used to select a target interpolation formula from multiple interpolation formulas; or, the first input operation includes an editing operation, and the editing operation is used to edit the interpolation formula, and the edited interpolation formula is used as the target interpolation formula.

[0190] In another possible implementation, the determination of the key attribute value change curve is also related to a second input operation of the user, where the second input operation is used to input a curve adjustment parameter, and the curve adjustment parameter is used to adjust the key attribute value change curve.

[0191] In another possible implementation, the response module 2301 is specifically configured to respond to the first user operation to determine the size of the key canvas; and respond to the second user operation to determine the key attribute value of each UI component in the key canvas.

[0192] In another possible implementation, the first user operation includes a selection operation, which is used to select a target size from multiple typical sizes as the size of the key canvas; or the first user operation includes a scaling operation, which is used to scale the size of the key canvas to the target size.

[0193] In another possible implementation, the second user operation includes a drag operation, where the drag operation is used to drag the target UI component from the UI component area to a target position in the key canvas.

[0194] In another possible implementation, the key attribute value includes a width attribute value and / or a height attribute value, the width attribute value indicates the width of the UI component, and the height attribute value indicates the height of the UI component; or, the key attribute value includes a width attribute value, a height attribute value, a top offset attribute value, and a left offset attribute value, the width attribute value indicates the width of the UI component, the height attribute value indicates the height of the UI component, the top offset attribute value indicates the distance between the UI component and the upper border of the key canvas, and the left offset attribute value indicates the distance between the UI component and the left border of the key canvas.

[0195] In another possible implementation, the interface generating device 2300 provided in the present application also includes a sending module 2305, which is used to send the layout file to the target terminal, so that after the target terminal loads the target application, the layout calculation function determines the target layout parameters corresponding to the screen of the target terminal according to the screen parameters of the target terminal, and the target terminal renders the display interface of the target application according to the target layout parameters.

[0196] The interface generation device 2300 according to the embodiment of the present application may correspond to the method described in the embodiment of the present application, and the above and other operations and / or functions of each module in the interface generation device 2300 are respectively to implement Figure 13-21 For the sake of brevity, the corresponding processes of each method in are not repeated here.

[0197] Based on the same concept as the above-mentioned embodiment of the interface generation method, the embodiment of the present application also provides an interface generation device 2400, which is deployed on a terminal device, and the terminal device can be any device with a screen, such as a mobile phone, a tablet computer, a smart wearable device, a car terminal, a TV, a computer, etc. The generation device 2400 includes a Fig. 22 The units or modules of each step in the interface generation method shown.

[0198] Fig.24 This is a schematic diagram of the structure of an interface generation device provided in an embodiment of the present application. Fig.24As shown, the interface generating device 2400 at least includes a loading module 2401, an acquisition module 2402, a third determination module 2403 and a rendering module 2404, wherein the loading module 2401 is used to load the target application file, the target application file includes a layout file, and the layout file is generated based on the method described in the first aspect; the acquisition module 2402 is used to obtain the screen parameters of the target terminal; the third determination module 2403 is used to determine the target layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal and the layout calculation function; the rendering module 2404 is used to render the display interface of the target application based on the target layout parameters.

[0199] The interface generation device 2400 according to the embodiment of the present application may correspond to the method described in the embodiment of the present application, and the above and other operations and / or functions of each module in the interface generation device 2400 are respectively to implement Fig. 22 For the sake of brevity, the corresponding processes of each method in are not repeated here.

[0200] The present application also provides a computing device, including at least one processor, a memory and a communication interface, wherein the processor is used to execute Figure 12-22 The method described.

[0201] Fig.25 A schematic diagram of the structure of a computing device provided in an embodiment of the present application.

[0202] like Fig.25 As shown, the computing device 2500 includes at least one processor 2501, a memory 2502, a communication interface 2503 and a display screen 2504. The processor 2501, the memory 2502, the communication interface 2503 and the display screen 2504 are connected in communication, and the communication connection can be achieved by wired means (such as a bus) or by wireless means. The communication interface 2503 is used to receive data (the layout file of the target application) sent by other devices; the memory 2502 stores computer instructions, and the processor 2501 executes the computer instructions to execute the interface generation method in the aforementioned method embodiment, and the display screen 2503 is used to display the interface layout of the target application.

[0203] It should be understood that in the embodiment of the present application, the processor 2501 may be a central processing unit CPU, and the processor 2501 may also be other general-purpose processors, digital signal processors (DSP), application specific integrated circuits (ASIC), field programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0204] The memory 2502 may include a read-only memory and a random access memory, and provides instructions and data to the processor 2501. The memory 2502 may also include a nonvolatile random access memory.

[0205] The memory 2502 may be a volatile memory or a nonvolatile memory, or may include both volatile and nonvolatile memories. Among them, the nonvolatile memory may be a read-only memory (ROM), a programmable ROM (PROM), an erasable programmable ROM (EPROM), an electrically erasable programmable ROM (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link DRAM (SLDRAM), and direct rambus RAM (DRRAM).

[0206] It should be understood that the computing device 2500 according to the embodiment of the present application can execute the implementation of the embodiment of the present application. Figure 13-22 The method shown, the detailed description of the implementation of this method can be found above, for the sake of brevity, it will not be repeated here.

[0207] An embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon. When the computer instructions are executed by a processor, the above-mentioned interface generation method is implemented.

[0208] An embodiment of the present application provides a chip, which includes at least one processor and an interface, wherein the at least one processor determines program instructions or data through the interface; the at least one processor is used to execute the program instructions to implement the interface generation method mentioned above.

[0209] An embodiment of the present application provides a computer program or a computer program product, which includes instructions. When the instructions are executed, the computer is caused to execute the interface generation method mentioned above.

[0210] Those of ordinary skill in the art should further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those of ordinary skill in the art may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0211] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented by hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0212] The specific implementation methods described above further illustrate the purpose, technical solutions and beneficial effects of the present application in detail. It should be understood that the above description is only the specific implementation method of the present application and is not intended to limit the scope of protection of the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application should be included in the scope of protection of the present application.

Claims

1. A method for generating an interface, characterized in that: include: In response to the user operation, determine the layout parameters of the interface layout corresponding to the target application in the key canvases of different sizes, where the layout parameters of each key canvas include the key attribute value of each UI component in each key canvas; Performing interpolation processing on key attribute values ​​of each UI component in key canvases of different sizes to determine a key attribute value variation curve, wherein the key attribute value variation curve indicates a variation trend of the key attribute values ​​of each UI component in canvases of different sizes; Based on the key attribute value change curve, determining a layout calculation function, wherein the layout calculation function is used to determine target layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal after the target application is deployed to the target terminal; A layout file is generated based on the layout calculation function and the layout parameters.

2. The method according to claim 1, characterized in that The interpolation process is performed on the key attribute values ​​of each UI component in key canvases of different sizes to determine the key attribute value change curve, including: Comparing key attribute values ​​of each UI component in key canvases of different sizes, and determining different key attribute values ​​of each UI component; Interpolation processing is performed on the key attribute values ​​with differences of each UI component to determine a key attribute value change curve of each UI component.

3. The method according to claim 2, characterized in that The interpolation processing is performed on the key attribute values ​​with differences of each UI component to determine the key attribute value change curve of each UI component, including: In response to a first input operation by a user, determining a target interpolation formula; Interpolation processing is performed on the key attribute values ​​with differences of each UI component based on the target interpolation formula to determine a key attribute value change curve of each UI component.

4. The method according to claim 3, characterized in that The first input operation includes a selection operation, and the selection operation is used to select a target interpolation formula from a plurality of interpolation formulas; Alternatively, the first input operation includes an editing operation, the editing operation is used to edit the interpolation formula, and the edited interpolation formula is used as the target interpolation formula.

5. The method according to any one of claims 1 to 4, characterized in that: The determination of the key attribute value change curve is also related to a second input operation of the user, where the second input operation is used to input a curve adjustment parameter, and the curve adjustment parameter is used to adjust the key attribute value change curve.

6. The method according to any one of claims 1 to 5, characterized in that: The step of responding to the user operation and determining the layout parameters of the interface layout corresponding to the target application in key canvases of different sizes includes: In response to the first user operation, determining a size of the key canvas; In response to the second user operation, a key attribute value of each UI component in the key canvas is determined.

7. The method according to claim 6, characterized in that The first user operation includes a selection operation, wherein the selection operation is used to select a target size from a plurality of typical sizes as the size of the key canvas; Alternatively, the first user operation includes a zooming operation, and the zooming operation is used to zoom the size of the key canvas to a target size.

8. The method according to claim 6 or 7, characterized in that: The second user operation includes a drag operation, and the drag operation is used to drag the target UI component from the UI component area to a target position in the key canvas.

9. The method according to any one of claims 1 to 8, characterized in that: The key attribute value includes a width attribute value and / or a height attribute value, the width attribute value indicates the width of the UI component, and the height attribute value indicates the height of the UI component; Alternatively, the key attribute value includes a width attribute value, a height attribute value, a top offset attribute value and a left offset attribute value, the width attribute value indicates the width of the UI component, the height attribute value indicates the height of the UI component, the top offset attribute value indicates the distance between the UI component and the upper border of the key canvas, and the left offset attribute value indicates the distance between the UI component and the left border of the key canvas.

10. The method according to any one of claims 1 to 9, characterized in that: Also includes: The layout file is sent to the target terminal so that after the target terminal loads the target application, the layout calculation function determines the target layout parameters corresponding to the screen of the target terminal according to the screen parameters of the target terminal, and the target terminal renders the display interface of the target application according to the target layout parameters.

11. An interface generation method, characterized in that: include: Loading a target application file, wherein the target application file includes a layout file, and the layout file is generated based on the method according to any one of claims 1 to 10; Get the screen parameters of the target terminal; Determining target layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal and a layout calculation function; A display interface of the target application is obtained by rendering based on the target layout parameters.

12. An interface generation device, characterized in that: include: A response module, used to respond to user operations and determine layout parameters of the interface layout corresponding to the target application in key canvases of different sizes, wherein the layout parameters of each key canvas include key attribute values ​​of each UI component in each key canvas; A first determination module is used to perform interpolation processing on key attribute values ​​of each UI component in key canvases of different sizes to determine a key attribute value change curve, where the key attribute value change curve indicates a change trend of the key attribute values ​​of each UI component in canvases of different sizes; a second determination module, configured to determine a layout calculation function based on the key attribute value change curve, wherein the layout calculation function is configured to determine layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal after the target application is deployed to the target terminal; A generation module is used to generate a layout file based on the layout calculation function and the layout parameters.

13. The device according to claim 12, characterized in that The first determining module is specifically used for: Comparing key attribute values ​​of each UI component in key canvases of different sizes, and determining different key attribute values ​​of each UI component; Interpolation processing is performed on the key attribute values ​​with differences of each UI component to determine a key attribute value change curve of each UI component.

14. The device according to claim 13, characterized in that The interpolation processing is performed on the key attribute values ​​with differences of each UI component to obtain the key attribute value change curve of each UI component, including: In response to a first input operation by a user, determining a target interpolation formula; Interpolation processing is performed on the key attribute values ​​with differences of each UI component based on the target interpolation formula to determine a key attribute value change curve of each UI component.

15. The device according to claim 14, characterized in that The first input operation includes a selection operation, and the selection operation is used to select a target interpolation formula from a plurality of interpolation formulas; Alternatively, the first input operation includes an editing operation, the editing operation is used to edit the interpolation formula, and the edited interpolation formula is used as the target interpolation formula.

16. The device according to any one of claims 12 to 15, characterized in that: The determination of the key attribute value change curve is also related to a second input operation of the user, where the second input operation is used to input a curve adjustment parameter, and the curve adjustment parameter is used to adjust the key attribute value change curve.

17. The device according to any one of claims 12 to 16, characterized in that: The response module is specifically used for: In response to the first user operation, determining a size of the key canvas; In response to the second user operation, a key attribute value of each UI component in the key canvas is determined.

18. The device according to claim 17, characterized in that The first user operation includes a selection operation, wherein the selection operation is used to select a target size from a plurality of typical sizes as the size of the key canvas; Alternatively, the first user operation includes a zooming operation, and the zooming operation is used to zoom the size of the key canvas to a target size.

19. The device according to claim 17 or 18, characterized in that The second user operation includes a drag operation, and the drag operation is used to drag the target UI component from the UI component area to a target position in the key canvas.

20. The device according to any one of claims 12 to 19, characterized in that The key attribute value includes a width attribute value and / or a height attribute value, the width attribute value indicates the width of the UI component, and the height attribute value indicates the height of the UI component; Alternatively, the key attribute value includes a width attribute value, a height attribute value, a top offset attribute value and a left offset attribute value, the width attribute value indicates the width of the UI component, the height attribute value indicates the height of the UI component, the top offset attribute value indicates the distance between the UI component and the upper border of the key canvas, and the left offset attribute value indicates the distance between the UI component and the left border of the key canvas.

21. The device according to any one of claims 12 to 20, characterized in that: Also includes: A sending module is used to send the layout file to the target terminal so that after the target terminal loads the target application, the layout calculation function determines the target layout parameters corresponding to the screen of the target terminal according to the screen parameters of the target terminal, and the target terminal renders the display interface of the target application according to the target layout parameters.

22. An interface generation device, characterized in that: include: A loading module, used to load a target application file, wherein the target application file includes a layout file, and the layout file is generated based on the method according to any one of claims 1 to 10; An acquisition module is used to acquire screen parameters of the target terminal; A third determination module, configured to determine target layout parameters corresponding to the screen parameters of the target terminal based on the screen parameters of the target terminal and a layout calculation function; A rendering module is used to render a display interface of the target application based on the target layout parameters.

23. A computing device comprising a memory and a processor, characterized in that: Instructions are stored in the memory, and when the instructions are executed by the processor, the method according to any one of claims 1 to 10 or the method according to claim 11 is implemented.

24. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 10 or the method according to claim 11 is implemented.

Images