A layout relationship code generation method and device

Abstract

The embodiment of the present invention provides a method and device for generating code for layout relations, and relates to the field of application technology, wherein the method comprises: determining the position and size of each layer in the user interface reflected in the design file of the user interface; determining the dependency information of each layer according to the position of each layer; obtaining description information of the relative position between the position of each layer and the position represented by the dependency information of the layer according to the dependency information of each layer and the position of each layer; generating the layout relations of each layer according to the description information and size of each layer; and generating the code for describing the layout relations with reference to the preset code rules. The scheme provided by the embodiment of the present invention is applied to generate the code for layout relations, and the efficiency of generating the code for layout relations is improved.

Description

Technical Field

[0001] The present invention relates to the field of application technology, and in particular to a layout relationship code generation method and device. Background Art

[0002] In a UI (User Interface) development scenario, a designer usually designs the UI interface to obtain a design file, and then a developer develops the UI based on the design file.

[0003] The UI interface designed by the designer usually contains multiple layers, and each layer may be distributed in different positions of the UI, forming a layout relationship between the layers. Developers need to implement the above layout relationship through code during the UI development process.

[0004] In the prior art, developers are generally required to analyze design files, obtain the above layout relationship, and then write code based on the layout relationship. This results in a large amount of human resources being required in the process of generating layout relationship code, resulting in low efficiency in generating layout relationship code. Summary of the invention

[0005] The purpose of the embodiment of the present invention is to provide a layout relationship code generation method to improve the efficiency of generating layout relationship code. The specific technical solution is as follows:

[0006] In a first aspect of the present invention, a method for generating layout relationship codes is provided, the method comprising:

[0007] Determining the position and size of each layer in the user interface as reflected in the user interface design file;

[0008] Determining dependency information of each layer according to the position of each layer, wherein the dependency information of each layer represents a position to be referenced when determining the position of the layer when generating the user interface;

[0009] According to the dependency information of each layer and the position of each layer, descriptive information of the relative position between the position of each layer and the position represented by the dependency information of the layer is obtained;

[0010] Generate the layout relationship of each layer based on the description information and size of each layer;

[0011] Referring to preset code rules, a code for describing the layout relationship is generated.

[0012] In one embodiment of the present invention, determining the dependency information of each layer according to the position of each layer includes:

[0013] Determine a reference layer among the layers, and obtain candidate dependency information of the reference layer according to the position of the reference layer;

[0014] Determine the outer layer unit of the user interface according to the position of each layer, wherein the layer unit is: a layer row or a layer column, each layer in the layer row has an intersecting area with at least one other layer after being expanded horizontally, and each layer in the layer column has an intersecting area with at least one other layer after being expanded vertically;

[0015] Determine the traversal order of each outer layer unit according to a preset traversal order determination method, wherein the traversal order determination method is: determine the traversal order of the layer unit according to the distance between the layer unit and the edge of the user interface and the distance between the layer units;

[0016] For each layer unit of the outer layer, the layer unit is taken as the unit to be operated, and according to the traversal order determination method, the traversal order of the layer units in the unit to be operated determined according to the row-column interlaced method is obtained, the unit to be operated is updated to a layer unit containing multiple layers in the determined layer unit, and the step of obtaining the traversal order of the layer units in the unit to be operated determined according to the row-column interlaced method according to the traversal order determination method, until there is no layer unit containing multiple layers in the determined layer unit, wherein the row-column interlaced method is: when the unit to be operated is a layer row, the determined layer unit is a layer column, and when the unit to be operated is a layer column, the determined layer unit is a layer row;

[0017] For each layer except the base layer, the first layer, the second layer and the base layer are used as candidate dependency information of the layer, wherein the first layer is a layer included in a layer unit of an outer layer that is located before a target layer unit in a traversal order, the second layer is a layer that is located before the layer in a traversal order in the target layer unit, and the target layer unit is a layer unit of the outer layer where the layer is located;

[0018] Dependency information of each layer is determined according to the alternative dependency information of each layer.

[0019] In one embodiment of the present invention, determining the dependency information of each layer according to the candidate dependency information of each layer includes:

[0020] Dependency information for each layer is determined as follows:

[0021] Selecting, from the candidate dependency information of the layer, the first candidate dependency information having the smallest lateral distance between the represented position and the position of the layer;

[0022] Selecting, from the candidate dependency information of the layer, the second candidate dependency information having the smallest longitudinal distance between the represented position and the position of the layer;

[0023] The first candidate dependency information and the second candidate dependency information are determined as dependency information of the layer.

[0024] In one embodiment of the present invention, generating the layout relationship of each layer according to the description information and size of each layer includes:

[0025] Based on the description information of each layer, the layout relationship of each layer is generated to describe the layer size in one of the following ways:

[0026] Describing the layer size in the layout relationship with the layer size reflected in the design file;

[0027] Describing the size of a layer as a ratio between the layer and its parent layer in the layout relationship;

[0028] In the layout relationship, the size of the layer is described by the size of the content in the layer;

[0029] The dimensions of a layer are described in the layout relationship as the ratio of its aspect ratio to its height.

[0030] In one embodiment of the present invention, when there is a mask on the layer, the size of the layer reflected in the design file is: the size of the overlapping area between the layer and the mask.

[0031] In a second aspect of the present invention, a layout relationship code generation device is provided, the device comprising:

[0032] A position and size determination module, used to determine the position and size of each layer in the user interface as reflected in the user interface design file;

[0033] A dependency information determination module, used to determine dependency information of each layer according to the position of each layer, wherein the dependency information of each layer represents a position to be referenced when determining the position of the layer when generating the user interface;

[0034] A description information acquisition module, used for obtaining description information of the relative position between the position of each layer and the position represented by the dependency information of the layer according to the dependency information of each layer and the position of each layer;

[0035] A layout relationship generation module is used to generate the layout relationship of each layer according to the description information and size of each layer;

[0036] The code generation module is used to generate codes for describing the layout relationship by referring to preset code rules.

[0037] In one embodiment of the present invention, the dependency information determination module includes:

[0038] A first candidate determination submodule is used to determine a base layer among various layers, and obtain candidate dependency information of the base layer according to the position of the base layer;

[0039] The outer layer unit determination submodule is used to determine the outer layer unit in the user interface according to the position of each layer, wherein the layer unit is: a layer row or a layer column, each layer in the layer row has an intersecting area with at least one other layer after being expanded horizontally, and each layer in the layer column has an intersecting area with at least one other layer after being expanded vertically;

[0040] The outer layer order determination submodule is used to determine the traversal order of each outer layer layer unit according to a preset traversal order determination method, wherein the traversal order determination method is: determining the traversal order of the layer unit according to the distance between the layer unit and the edge of the user interface and the distance between the layer units;

[0041] The layer order determination submodule is used for obtaining the traversal order of the layer units in the unit to be operated according to the row-column interlaced manner for each layer unit in the outer layer, taking the layer unit as the unit to be operated, according to the traversal order determination method, updating the unit to be operated to a layer unit containing multiple layers in the determined layer unit, and returning to the step of obtaining the traversal order of the layer units in the unit to be operated according to the row-column interlaced manner according to the traversal order determination method, until there is no layer unit containing multiple layers in the determined layer unit, wherein the row-column interlaced manner is: when the unit to be operated is a layer row, the determined layer unit is a layer column, and when the unit to be operated is a layer column, the determined layer unit is a layer row;

[0042] A second candidate determination submodule is configured to use, for each layer except the base layer, a first layer, a second layer and the base layer as candidate dependency information of the layer, wherein the first layer is a layer included in a layer unit of an outer layer that is located before a target layer unit in a traversal order, the second layer is a layer that is located before the layer in a traversal order in the target layer unit, and the target layer unit is a layer unit of the outer layer where the layer is located;

[0043] The dependency information determination submodule is used to determine the dependency information of each layer according to the candidate dependency information of each layer.

[0044] In one embodiment of the present invention, the dependency information determination submodule is specifically used to:

[0045] Dependency information for each layer is determined as follows:

[0046] Selecting, from the candidate dependency information of the layer, the first candidate dependency information having the smallest lateral distance between the represented position and the position of the layer;

[0047] Selecting, from the candidate dependency information of the layer, the second candidate dependency information having the smallest longitudinal distance between the represented position and the position of the layer;

[0048] The first candidate dependency information and the second candidate dependency information are determined as dependency information of the layer.

[0049] In one embodiment of the present invention, the layout relationship generating module is specifically used to:

[0050] Based on the description information of each layer, the layout relationship of each layer is generated to describe the layer size in one of the following ways:

[0051] Describing the layer size in the layout relationship with the layer size reflected in the design file;

[0052] Describing the size of a layer as a ratio between the layer and its parent layer in the layout relationship;

[0053] In the layout relationship, the size of the layer is described by the size of the content in the layer;

[0054] The dimensions of a layer are described in the layout relationship as the ratio of its aspect ratio to its height.

[0055] In one embodiment of the present invention, when there is a mask on the layer, the size of the layer reflected in the design file is: the size of the overlapping area between the layer and the mask.

[0056] In a third aspect, an embodiment of the present invention provides an electronic device, including a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus;

[0057] Memory, used to store computer programs;

[0058] The processor is used to implement any method step described in the first aspect when executing the program stored in the memory.

[0059] In another aspect of the present invention, a computer-readable storage medium is provided, wherein a computer program is stored in the computer-readable storage medium, and when the computer program is executed by a processor, any method step described in the first aspect is implemented.

[0060] In yet another aspect of the present invention, there is provided a computer program product comprising instructions, which, when executed on a computer, enables the computer to execute any one of the method steps described in the first aspect.

[0061] As can be seen from the above, in the scheme for generating layout relationship code provided by the embodiment of the present invention, the dependency information of each layer and the description information of the relative position between the layer and the position represented by the dependency information of the layer can be determined according to the design file of the user interface, so that each layer can determine its own position according to the position represented by the dependency information, and therefore the layout relationship of each layer can be determined according to the size and description information of each layer, and the code for describing the layout relationship can be generated by referring to the layout relationship and the preset code rules. In this process, the developer does not need to analyze the design file and determine the layout relationship of the layer. The layout relationship of the layer can be determined directly according to the information recorded in the design file, and the code for the layout relationship can be generated, thereby saving human resources and improving the efficiency of generating layout relationship code. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art are briefly introduced below.

[0063] Figure 1 A schematic flow chart of a code generation method for a first layout relationship provided in an embodiment of the present invention;

[0064] Figure 2 A schematic flow chart of a method for generating codes for a second layout relationship provided in an embodiment of the present invention;

[0065] Figure 3 A schematic diagram of layer distribution in a user interface provided in an embodiment of the present invention;

[0066] Figure 4 A schematic flow chart of a method for generating codes for a third layout relationship provided in an embodiment of the present invention;

[0067] Figure 5 A schematic diagram of the structure of a code generation device for a first layout relationship provided in an embodiment of the present invention;

[0068] Figure 6 A schematic diagram of the structure of a code generation device for a second layout relationship provided in an embodiment of the present invention;

[0069] Figure 7 The present invention is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0070] The technical solutions in the embodiments of the present invention will be described below in conjunction with the accompanying drawings in the embodiments of the present invention.

[0071] Since the efficiency of currently generating layout relationship codes is low, in order to solve this problem, an embodiment of the present invention provides a layout relationship code generation method and device.

[0072] In one embodiment of the present invention, a method for generating layout relationship codes is provided, the method comprising:

[0073] Determine the position and size of each layer in the above user interface as reflected in the user interface design file.

[0074] Dependency information of each layer is determined according to the position of each layer, and the dependency information of each layer represents a position to be referenced when determining the position of the layer when generating the above-mentioned user interface.

[0075] According to the dependency information of each layer and the position of each layer, description information of the relative position between the position of each layer and the position represented by the dependency information of the layer is obtained.

[0076] Generate the layout relationship of each layer based on the description information and size of each layer.

[0077] With reference to the preset code rules, a code for describing the above layout relationship is generated.

[0078] As can be seen from the above, the dependency information of each layer and the description information of the relative position between the layer and the position represented by the dependency information of the layer can be determined according to the design file of the user interface, so that each layer can determine its own position according to the position represented by the dependency information. Therefore, the layout relationship of each layer can be determined according to the size and description information of each layer, and the code for describing the layout relationship can be generated by referring to the layout relationship and the preset code rules. In this process, the developer does not need to analyze the design file and determine the layout relationship of the layer. The layout relationship of the layer can be determined directly according to the information recorded in the design file, and the code for the layout relationship can be generated, thereby saving human resources and improving the efficiency of generating the code for the layout relationship.

[0079] The following describes a method and device for generating codes for a layout relationship provided by an embodiment of the present invention through specific embodiments.

[0080] See also Figure 1 , an embodiment of the present invention provides a flow chart of a code generation method for a first layout relationship, and the method includes the following steps S101-S105.

[0081] S101: Determine the position and size of each layer in the user interface as reflected in the user interface design file.

[0082] The above-mentioned design file may be a sketch file. Since the design file is a file generated by the designer when designing the user interface, each layer in the sketch file may represent a layer in the user interface respectively, and the position and size of each layer in the sketch file is the position and size of each layer in the user interface. When the sketch file contains a symbol type layer, the symbol type layer may contain other layers, and only the position and size of other layers contained in the symbol type layer may be determined, while the position and size of the symbol type layer may not be determined.

[0083] In addition, the above-mentioned design file can also be a file in the form of a picture, and the picture content represents the user interface, and the position and size of each layer can also be recorded in digital form.

[0084] Specifically, the above-mentioned positions are the absolute positions of each layer in the user interface reflected by the design file. The above-mentioned positions can be determined according to the preset coordinate system of the user interface. For example, since most user interfaces are rectangular, the coordinate origin of the above-mentioned coordinate system can be the upper-left vertex of the user interface, the horizontal right direction is the positive horizontal axis of the coordinate system, and the vertical downward direction is the positive vertical axis of the coordinate system. In addition, the upper-right vertex, lower-left vertex or any point in other user interfaces can also be used.

[0085] The position of a layer in a user interface can be represented by the position of a preset point in the layer in the user interface. For example, the above-mentioned layers are mostly regular shapes, such as rectangles. The upper left corner vertex of the layer can be used as the preset point, and the position of the layer can be represented by the position of the upper left corner vertex in the user interface. The upper right corner vertex, the lower right corner vertex, the lower left corner vertex or any point in the layer can also be used as the above-mentioned preset point.

[0086] In addition, since most of the above layers are regular shapes, such as rectangles, the size of the above layers can be determined by the length and height of the layers.

[0087] In one embodiment of the present invention, when a mask exists on a layer, since only the area in the layer overlapping with the mask can be displayed, when a mask exists on the layer, the size of the layer reflected in the above design file is: the size of the overlapping area between the layer and the mask, and the area that does not overlap with the mask will not be displayed, so there is no need to consider the area in the layer that does not overlap with the mask.

[0088] S102: Determine dependency information of each layer according to the position of each layer.

[0089] The dependency information of each layer represents a position to be referenced when determining the position of the layer when generating the above user interface.

[0090] Specifically, the dependency information of each layer may be other layers, that is, the layer determines its own position by referring to the positions of other layers, or may be a user interface, that is, the layer determines its own position by referring to its own position in the user interface.

[0091] Since the user interface is a two-dimensional plane, the position of the layer needs to be determined based on the horizontal and vertical positions of the layer. Therefore, the layer dependency information includes horizontal dependency information and vertical dependency information. The horizontal dependency information and vertical dependency information can be different information, so that the layer determines its own position by referring to different positions in the horizontal and vertical directions respectively.

[0092] In addition, the above layers may include a layer having the same size as the user interface, and the dependency information of the layer may be the user interface, while other layers may refer to the layer having the same size as the user interface.

[0093] S103: According to the dependency information of each layer and the position of each layer, obtain description information of the relative position between the position of each layer and the position represented by the dependency information of the layer.

[0094] Specifically, since the position of each of the above-mentioned layers is the position of the layer in the user interface, when the dependency information of the layer is the user interface, the position of the layer can be directly used as the above-mentioned description information. When the dependency information of the layer is other layers, the relative position between the layer and the other layers referenced by the layer can be determined as the above-mentioned description information based on the position of the layer and the positions of other layers referenced by the layer.

[0095] Among them, the above-mentioned relative position includes the relative position in the horizontal direction and the relative position in the vertical direction. The above-mentioned relative position indicates the relative direction relationship between each layer and the dependency information of the layer in the horizontal or vertical direction, such as the layer is located on the right side or below the dependency information of the layer, etc., and also indicates the distance between each layer and the dependency information of the layer in the horizontal or vertical direction, such as the distance between the layer and the dependency information of the layer is 10 pixels in the horizontal direction and 15 pixels in the vertical direction, etc.

[0096] Specifically, the spacing between the above-mentioned layers in the horizontal or vertical direction can be expressed as the distance between the edges of the layers. For example, the horizontal spacing between layer A and layer B can be the spacing between the left edge of layer A and the left edge of layer B, or it can be the spacing between the closest edges between layer A and layer B. For example, if layer A is located on the left side of layer B, the horizontal spacing between layer A and layer B can be expressed by the spacing between the right edge of layer A and the left edge of layer B.

[0097] In addition, the horizontal spacing of the above layers may also be represented by the distance between the vertical lines where the center points of the layers are located, and the vertical spacing of the above layers may also be represented by the distance between the horizontal lines where the center points of the layers are located.

[0098] Furthermore, the relative positions of the layers can also be determined based on the coordinates of the layers in the user interface, and the relative positions of the layers in the horizontal direction can be determined by the difference in the horizontal coordinates of the layers, and the absolute value of the horizontal coordinate difference indicates the horizontal spacing between the layers, and the positive or negative value of the horizontal coordinate difference indicates the relative direction of the layers in the horizontal direction. The relative positions of the layers in the vertical direction can be determined by the difference in the vertical coordinates of the layers, and the absolute value of the vertical coordinate difference indicates the vertical spacing between the layers, and the positive or negative value of the vertical coordinate difference indicates the relative direction of the layers in the vertical direction.

[0099] For example, if in the coordinate system of the user interface, the right direction is the positive horizontal direction and the downward direction is the positive vertical direction, then if the difference between the horizontal coordinates of layer 1 and layer 2 is 10, it means that layer 1 is 10 pixels to the right of layer 2. If the difference between the vertical coordinates of layer 1 and layer 2 is -5, it means that layer 1 is 5 pixels above layer 2.

[0100] In one embodiment of the present invention, the size of the user interface reflected in the design file is fixed, but the sizes of the screens of different electronic devices are different. Therefore, when the above user interface is displayed on the screens of different electronic devices, the sizes of the user interface are different. However, the position of the layer in the user interface reflected in the design file is the position of the layer in the user interface of a fixed size. Therefore, if the position of the layer in the user interface reflected in the design file is used directly, the position of the layer will not change with the change of the size of the user interface. Therefore, the embodiment of the present invention uses the description information of the relative position between the position of each layer and the position represented by the dependency information of the layer, so that when the position of a certain layer changes with the size of the user interface, the positions of other layers that determine their own positions with reference to the position of the layer will also change in the user interface.

[0101] S104: Generate layout relationships of the layers according to the description information and size of each layer.

[0102] Specifically, the above-mentioned layout relationship of the layers can be used to describe the relative position between each layer and the position of the dependency information of the layer, as well as the size of each layer. Therefore, the layout of the layers in the user interface can be determined according to the above-mentioned layout relationship.

[0103] In one embodiment of the present invention, the layer size may be described in one of the following ways (i) to (iv).

[0104] (i) In the above layout relationship, the layer size is described by the size of the layer reflected in the above design file.

[0105] That is, the layer in the user interface always maintains the size of the layer reflected in the above design file.

[0106] (ii) In the above layout relationship, the layer size is described by the ratio between the layer and its parent layer.

[0107] Among them, the above-mentioned parent layer is the layer that contains this layer. The ratio between the above-mentioned layer and its parent layer includes the ratio between the width of the layer and the parent layer, and the ratio between the height of the layer and the parent layer, such as 40%, etc. Therefore, when the size of the parent layer becomes larger, the size of this layer will also become larger, and when the size of the parent layer becomes smaller, the size of this layer will also become smaller.

[0108] Specifically, when the ratio of the size between the layer and the parent layer reflected in the design file reaches a preset ratio, the layer size can be described as the ratio between the layer and its parent layer. For example, the above preset ratio can be 80%.

[0109] (iii) In the above layout relationship, the layer size is described by the size of the content in the layer.

[0110] Specifically, in order to fully display the content in the layer, the layer size may be described by the size of the content in the layer.

[0111] When the content in the layer reflected in the design file is a preset type of content, the layer size can be described by the size of the content in the layer. For example, the preset type can be characters, pictures, videos, etc.

[0112] (iv) In the above layout relationship, the layer size is described by the aspect ratio of the layer.

[0113] Specifically, as the aspect ratio of the layer changes, the aspect ratio of the content displayed by the layer may change accordingly, making it impossible for the content displayed by the layer to achieve the best display effect. Therefore, the layer size can be described by the aspect ratio of the layer, such as an aspect ratio of 16:9.

[0114] When the aspect ratio of the layer reflected in the design file is a preset aspect ratio, the layer size can be described by the aspect ratio of the layer. For example, the preset aspect ratio can be 4:3, 16:9, etc.

[0115] In one embodiment of the present invention, the sizes of different layers may be described using different methods in (1) to (4) above.

[0116] S105: Generate a code for describing the above layout relationship by referring to a preset code rule.

[0117] Specifically, since the codes of application programs running in different operating systems need to comply with the code rules of the operating systems, it is necessary to generate codes for describing the above layout relationship according to the code rules of the operating system that displays the above user interface.

[0118] In addition, other attribute information such as the color of each layer and the type of content contained therein may also be determined. When generating the code for describing the above layout relationship, the color of each layer and the type of content contained therein are defined.

[0119] For example, the type of content contained in the above layer may be a character type, a picture type, etc.

[0120] As can be seen from the above, the dependency information of each layer and the description information of the relative position between the layer and the position represented by the dependency information of the layer can be determined according to the design file of the user interface, so that each layer can determine its own position according to the position represented by the dependency information. Therefore, the layout relationship of each layer can be determined according to the size and description information of each layer, and the code for describing the layout relationship can be generated by referring to the layout relationship and the preset code rules. In this process, the developer does not need to analyze the design file and determine the layout relationship of the layer. The layout relationship of the layer can be determined directly according to the information recorded in the design file, and the code for the layout relationship can be generated, thereby saving human resources and improving the efficiency of generating the code for the layout relationship.

[0121] See also Figure 2 , provides a flow chart of the code generation method for the second layout relationship, which is similar to the above Figure 1 Compared with the illustrated embodiment, the above step S102 can be implemented by the following steps S102A-S102D.

[0122] S102A: Determine a reference layer among the layers, and obtain candidate dependency information of the reference layer according to the position of the reference layer.

[0123] Specifically, since each layer needs to determine its own information based on the position represented by the dependent information, in order to determine the position of each layer in the user interface, it is necessary to first determine a baseline layer, and use the baseline layer as the basis for determining the position of each layer. Other layers refer to each other based on the baseline layer to determine their own positions.

[0124] In the case that the user interface includes a layer having the same size as the user interface, the layer having the same size as the user interface may be used as a reference layer, and the reference layer may also be referred to as a parent layer.

[0125] In one embodiment of the present invention, any layer can be used as the reference layer.

[0126] In one embodiment of the present invention, the reference layer itself can be used as candidate dependency information of the reference layer, and the user interface can also be used as candidate dependency information of the reference layer.

[0127] S102B: Determine the outer layer unit in the user interface according to the position of each layer.

[0128] The above-mentioned layer unit is: a layer row or a layer column.

[0129] Each layer in the above layer row has an intersecting area with at least one other layer after being expanded horizontally.

[0130] Each layer in the above layer list has an intersecting area with at least one other layer after being extended vertically.

[0131] Specifically, the layers in the user interface are divided into layer rows or layer columns as outer layer units, and the arrangement relationship between the layers can be obtained. If the user interface contains layers of the same size as the user layer, the layers other than the layers of the same size as the user layer are divided into layer rows and layer columns.

[0132] In one embodiment of the present invention, each layer can be divided into each layer row according to the size relationship between the ordinates of the upper edge and the lower edge of each layer. Specifically, for each layer, if the ordinate of the upper edge or the lower edge of the layer is between the ordinates of the upper edge and the lower edge of another layer, the two layers are located in the same layer row.

[0133] Each layer can be divided into layer columns according to the size relationship between the horizontal coordinates of the left edge and the right edge of each layer. Specifically, for each layer, if the horizontal coordinate of the left edge or the right edge of the layer is between the horizontal coordinates of the left edge and the right edge of another layer, the two layers are in the same layer column.

[0134] See also Figure 3 , provides a schematic diagram of the distribution of layers in a user interface.

[0135] The largest solid-line frame represents a layer H having the same size as the user interface, other solid-line frames represent various layers AG in the user interface, and the dotted-line area represents various layer rows and layer columns.

[0136] As can be seen from the figure, after layer A and layer B are expanded horizontally, there is an intersection area, and after layer C, layer D, layer E, layer F, and layer G are expanded horizontally, there is an intersection area, so layer A and layer B belong to the same layer row 1, and layers C-layer G belong to the same layer row 2. Layer row 1 and layer row 2 are two outer layer layer units in the user interface.

[0137] S102C: Determine the traversal order of each outer layer layer unit according to a preset traversal order determination method.

[0138] The traversal order is determined in the following manner: the traversal order of the layer units is determined according to the distance between the layer unit and the edge of the user interface, and the distance between the layer units.

[0139] Specifically, an outer layer unit having the smallest distance from the edge of the user interface may be selected as the first determined layer unit.

[0140] For each undetermined outer layer unit, the smallest distance between the outer layer unit and the determined layer unit and the edge of the user interface is determined as the unit distance of the outer layer unit. The undetermined outer layer unit with the smallest unit distance is determined as the next determined layer unit.

[0141] Each time a new determined layer unit is determined, the unit distance of each undetermined outer layer unit needs to be re-determined. Each outer layer unit is determined in turn until each outer layer unit is determined, and the order of determining each outer layer unit is used as the traversal order of each outer layer unit.

[0142] In one embodiment of the present invention, if the outer layer unit is a layer row, the distance between each layer contained in the outer layer unit and the upper edge or lower edge of the user interface can be calculated, and the minimum value of the calculated distance can be selected as the distance between the maximum layer unit and the edge of the user interface.

[0143] If the outer layer unit is a layer column, the distance between each layer contained in the outer layer unit and the left edge or right edge of the user interface can be calculated, and the minimum value of the calculated distances can be selected as the distance between the outer layer unit and the edge of the user interface.

[0144] The distance between a layer contained in a layer unit of an outer layer and a layer contained in a layer unit of another outer layer is calculated, and the minimum value of the calculated distances can be selected as the distance between the layer units of the outer layers.

[0145] In another embodiment of the present invention, the traversal order of each outer layer unit can also be determined based on the maximum distance between the outer layer unit and the user interface, the maximum distance between the outer layer units, or the arrangement order of the outer layer units in the user interface can be used as the traversal order of the outer layer units. The traversal order of each outer layer unit can also be determined in other ways.

[0146] See also Figure 3 Since the distance between layer row 1 and the upper edge of the user interface is smaller than the distance between layer row 2 and the lower edge of the user interface, layer row 1 is determined first, and then layer row 2. The traversal order of the outer layer units is layer row 1, layer row 2.

[0147] S102D: For each outer layer layer unit, take the layer unit as the unit to be operated, and according to the above-mentioned traversal order determination method, obtain the traversal order of the layer units in the above-mentioned unit to be operated that are determined in a row-column staggered manner, update the above-mentioned unit to be operated to a layer unit containing multiple layers in the determined layer unit, and return to the above-mentioned step of obtaining the traversal order of the layer units in the above-mentioned unit to be operated that are determined in a row-column staggered manner according to the above-mentioned traversal order determination method, until there is no layer unit containing multiple layers in the determined layer unit.

[0148] The row-column interlacing method is as follows: when the unit to be operated is a layer row, the determined layer unit is a layer column; when the layer unit to be operated is a layer column, the determined layer unit is a layer row.

[0149] In one embodiment of the present invention, if the maximum layer unit is a layer row and contains multiple layer columns, the layer row is used as a unit to be operated. For the layer row, the traversal order of the layer columns contained in the layer row is determined. If the determined layer column contains multiple layers, the layer column containing the multiple layers is used as a new unit to be operated, and the traversal order of the layer rows contained in the layer column is determined. If the determined layer row contains multiple layers, the layer row containing the multiple layers is used as a new unit to be operated, and the traversal order of the layer columns contained in the layer row is determined. And so on, until there are no more layer units containing multiple layers, that is, each minimum layer unit containing only one layer is determined. Since each minimum layer unit contains only one layer, the traversal order of the minimum layer units is the traversal order of the layers contained in each minimum layer unit.

[0150] Specifically, the distance between each layer column and the user interface is determined, and the layer with the smallest distance can be selected as the first determined layer column. For each undetermined layer column, the smallest distance between the layer column and the determined layer column and the distance between the layer column and the edge of the user interface is determined as the column distance of the layer column. The undetermined layer column with the smallest column distance is determined as the next determined layer column.

[0151] Each time a new layer column is determined, the column distance of each undetermined layer column needs to be re-determined. Each layer column is determined in sequence until each layer column is determined, and the order in which each layer column is determined is used as the traversal order of each layer column.

[0152] If the layer column with a determined traversal order contains multiple layer rows, the distance between each layer row and the user interface and the distance between each layer row and other layer columns outside the layer column is determined, and the one with the smallest distance is selected as the first determined layer row. For each undetermined layer row, the smallest distance between the distance between the layer row and the determined layer row and the distance between the layer row and the edge of the user interface is determined as the row distance of the layer row. The undetermined layer row with the smallest row distance is determined as the next determined layer row.

[0153] Each time a new determined layer row is determined, the row distance of each undetermined layer row needs to be re-determined. Each layer row is determined in sequence until each layer row is determined, and the order in which each layer row is determined is used as the traversal order of each layer row.

[0154] If the layer row whose traversal order has been determined contains multiple layer columns, the traversal order of each layer column will continue to be determined, and so on.

[0155] The case where the maximum layer unit is a layer column is similar to the case where the maximum layer unit is a layer row, and will not be described in detail here.

[0156] For a layer column, the distance between each layer included in the layer column and the left edge or right edge of the user interface may be calculated, and the minimum value of the calculated distances is selected as the distance between the layer column and the edge of the user interface.

[0157] For a layer row, the distance between each layer included in the layer row and the upper edge or lower edge of the user interface may be calculated, and the minimum value of the calculated distances is selected as the distance between the layer row and the edge of the user interface.

[0158] You can calculate the distance between the layers in one layer row and the layers in another layer row, and the distance between the layers and the edge of the user interface, and select the minimum value of the calculated distances as the distance between layer rows. You can calculate the distance between the layers in one layer column and the layers in another layer column, and select the minimum value of the calculated distances as the distance between layer columns.

[0159] In addition, you can also calculate the distance between the layers included in a layer row and the layers included in another layer row, and the distance between the layers and the edge of the user interface, and select the maximum value of the calculated distances as the distance between layer rows; calculate the distance between the layers included in a layer column and the layers included in another layer column, and select the maximum value of the calculated distances as the distance between layer columns; or determine the distance between layer rows and the distance between layer columns by other methods.

[0160] See also Figure 3 , layer row 1 includes layer columns 11 and 12, layer column 11 includes layer A, and layer column 12 includes layer B. Since the distance between layer A and the left edge of the user interface is smaller than the distance between layer B and the right edge of the user interface, the traversal order of layer column 11 is before that of layer column 12.

[0161] Layer row 2 includes layer column 21, layer column 22, layer column 23 and layer column 24, wherein layer column 21 includes layer C, layer column 22 includes layer D and layer E, layer column 23 includes layer F, layer column 24 includes layer G, and layer column 22 also includes layer row 221 and layer row 222, layer row 221 includes layer D, and layer row 222 includes layer E.

[0162] In the process of determining the traversal order of layer column 21-layer column 24, since the distance between layer column 24 and the user edge is the smallest, layer column 24 is determined first. Since the distance between layer column 23 and layer column 24 is smaller than the distance between layer column 21 and the left edge of the user interface, layer column 23 is determined next. The distance between layer column 22 and layer column 23 is larger than the distance between layer column 21 and the edge of the user interface. Therefore, layer column 21 including layer C is determined next, and finally layer column 22 is determined.

[0163] Since layer column 22 includes two layer rows 221 and 222, the traversal order of layer row 221 and layer row 222 is determined. Since layer row 221 is flush with the upper edge of layer C, layer row 221 is determined first, and then layer row 222 is determined.

[0164] Therefore, the traversal order of the layers contained in layer row 2 is layer G, layer F, layer C, layer D, and layer E.

[0165] S102E: For each layer except the above-mentioned base layer, the first layer, the second layer and the above-mentioned base layer are used as candidate dependency information of the layer.

[0166] Among them, the above-mentioned first layer is: a layer contained in an outer layer unit that is located before the target layer unit in the traversal order, the above-mentioned second layer is: a layer that is located before the layer in the traversal order in the above-mentioned target layer unit, and the above-mentioned target layer unit is: a layer unit of the outer layer where the layer is located.

[0167] In one embodiment of the present invention, each outer layer unit can be determined in sequence according to the traversal order of the outer layer unit. In the process of traversing each outer layer unit, each layer is determined in sequence according to the traversal order of the layers in the outer layer unit. After the traversal of the layers in the outer layer unit is completed, the layers in the next outer layer unit are traversed in the traversal order of the outer layer units, and so on, so as to determine the arrangement order of all layers in the user interface. Specifically, the layer tags of each layer can be stored in sequence in the form of an array, and the order in which the layer tags are stored in the array is the arrangement order of the layers corresponding to the layer tags.

[0168] Since the above process of determining the arrangement order of layers is performed according to the traversal order of the outer layer unit, for each layer, the layers contained in the outer layer unit whose traversal order is before the target layer unit are arranged before the layer, and since in the same outer layer unit, the process of determining the arrangement order of layers is performed according to the traversal order of layers, for each layer, the layers whose traversal order is before the layer in the target layer unit are also arranged before the layer. Therefore, for each layer, other layers that are before the layer in the arrangement order of layers can be used as the alternative dependency information of the layer.

[0169] However, for the layer that is ranked first in the arrangement order, there is no other layer arranged before this layer, so the base layer is determined as the alternative dependent information of this layer.

[0170] See also Figure 3 , the arrangement order of layer A to layer G is layer A, layer B, layer G, layer F, layer C, layer D, layer E, and the base layer is layer H.

[0171] For layer E, layer A, layer B, layer G, layer F, layer C, layer D and layer F are alternative dependency information of layer E.

[0172] S102F: Determine dependency information of each layer according to the alternative dependency information of each layer.

[0173] Specifically, for each layer, dependency information can be randomly selected from the alternative dependency information, or the alternative dependency information whose represented position is farthest from the position of the layer can be selected as the dependency information of the layer. The dependency information of each layer can also be determined through steps S102F1-S102F3, which will not be described in detail here.

[0174] From the above, it can be seen that the embodiment of the present scheme determines the alternative dependency information of each layer according to the distance between the layer row and the layer column, and the distance between the layer row and the layer column and the user interface, and then selects the dependency information of each layer from the alternative dependency information, so that the order of mutual dependence between the layers generally satisfies the rule of minimizing the distance between the layer row and the layer column where the adjacent layers are located, so that the dependency information of each layer and the layer generally maintains the same rule in relative position.

[0175] See also Figure 4 , an embodiment of the present invention provides a flow chart of a code generation method for a third layout relationship, and the dependency information of each layer can be determined through the following steps S102F1-S102F3.

[0176] S102F1: From the candidate dependency information of the layer, select the first candidate dependency information having the smallest lateral distance between the represented position and the position of the layer.

[0177] Specifically, the lateral distances between the position of the layer and the positions represented by each candidate dependency information of the layer may be calculated respectively, and the candidate dependency information with the smallest lateral distance may be selected as the first candidate dependency information.

[0178] S102F2: From the candidate dependency information of the layer, select the second candidate dependency information having the smallest longitudinal distance between the represented position and the position of the layer.

[0179] Specifically, the longitudinal distances between the position of the layer and the positions represented by each candidate dependency information of the layer may be calculated respectively, and the candidate dependency information with the smallest longitudinal distance may be selected as the second candidate dependency information.

[0180] The first candidate dependency information and the second candidate dependency information may be the same or different.

[0181] S102F3: Determine the first candidate dependency information and the second candidate dependency information as dependency information of the layer.

[0182] Since the user interface is a two-dimensional plane, it is necessary to determine the position of the layer in the horizontal and vertical directions respectively, so as to determine the position of the layer in the user interface. Therefore, it is necessary to determine the first candidate dependency information in the horizontal direction and the second candidate dependency information in the vertical direction respectively as the dependency information of the layer.

[0183] It can be seen from the above that the dependency information of each layer is the dependency information that is closest to the layer. Therefore, determining the position of the layer according to the position represented by the dependency information can make the determined position of the layer more accurate.

[0184] In one embodiment of the present invention, Figure 3Take as an example to illustrate the process of determining the dependency information of each layer.

[0185] First, divide layer A to layer G into different layer rows, and then divide each layer row into layer columns.

[0186] Among them, layer A and layer B belong to the same layer row 1, and layer C-layer G belong to another layer row 2. Layer row 1 includes layer column 11 where layer A is located, and layer column 12 where layer B is located. Layer row 2 includes layer column 21 where layer C is located, layer column 22 where layers D and E are located, layer column 23 where layer F is located, and layer column 24 where layer G is located. Layer column 22 includes layer row 221 where layer D is located, and layer row 222 where layer E is located. .

[0187] Next, determine the traversal order of layer row 1 and layer row 2.

[0188] Among them, the distance between layer row 1 and the upper edge of the user interface is smaller than the distance between layer row 2 and the lower edge of the user interface, so the cell traversal order of layer row 1 is before that of layer row 2.

[0189] Furthermore, the layer traversal order of the layers included in layer row 1 and layer row 2 is determined respectively.

[0190] Among them, layer row 1 includes layer column 11 and layer column 12. Since the distance between layer column 11 and the left edge of the user interface is smaller than the distance between layer column 12 and the right edge of the user interface, layer column 11 is arranged before layer column 12, and the traversal order of layer A is before layer B.

[0191] The traversal order of the layers in layer row 2 has been described above. The traversal order of the layers is layer G, layer F, layer C, layer D and layer E, which will not be repeated here.

[0192] Again, determine the alternative dependency information for each layer.

[0193] Among them, taking layer C as an example, the alternative dependency information of layer C is layer A, layer B and layer H. Taking layer D as an example, the alternative dependency information of layer D is layer A, layer B, layer G, layer F, layer C and layer H.

[0194] Finally, for each layer, the dependency information of the layer is determined in the candidate dependency information of the layer.

[0195] For each layer, taking the layer with the smallest horizontal distance and the layer with the smallest vertical distance from the layer as the dependency information of the layer as an example, for layer A, layer H is determined as the dependency information of layer A; for layer B, layer A is determined as the vertical dependency information of layer B, and layer H is determined as the horizontal dependency information of layer B; for layer G, layer B is determined as the vertical dependency information of layer G, and layer H is determined as the horizontal dependency information of layer G, and so on, to determine the dependency information of each layer.

[0196] Corresponding to the aforementioned layout relationship code generation method, an embodiment of the present invention further provides a layout relationship code generation device.

[0197] See also Figure 5 The present invention provides a schematic diagram of the structure of a code generation device for a first layout relationship, the device comprising:

[0198] A position and size determination module 501 is used to determine the position and size of each layer in the user interface as reflected in the user interface design file;

[0199] A dependency information determination module 502, used to determine dependency information of each layer according to the position of each layer, wherein the dependency information of each layer represents a position to be referenced when determining the position of the layer when generating the user interface;

[0200] A description information obtaining module 503, for obtaining description information of the relative position between the position of each layer and the position indicated by the dependency information of the layer according to the dependency information of each layer and the position of each layer;

[0201] A layout relationship generating module 504, used to generate the layout relationship of each layer according to the description information and size of each layer;

[0202] The code generation module 505 is used to generate a code for describing the layout relationship by referring to a preset code rule.

[0203] As can be seen from the above, the dependency information of each layer and the description information of the relative position between the layer and the position represented by the dependency information of the layer can be determined according to the design file of the user interface, so that each layer can determine its own position according to the position represented by the dependency information. Therefore, the layout relationship of each layer can be determined according to the size and description information of each layer, and the code for describing the layout relationship can be generated by referring to the layout relationship and the preset code rules. In this process, the developer does not need to analyze the design file and determine the layout relationship of the layer. The layout relationship of the layer can be determined directly according to the information recorded in the design file, and the code for the layout relationship can be generated, thereby saving human resources and improving the efficiency of generating the code for the layout relationship.

[0204] See also Figure 6 The embodiment of the present invention provides a schematic diagram of the structure of a code generation device for a second layout relationship, which is similar to the above Figure 5 Compared with the embodiment shown, the dependency information determination module 502 includes:

[0205] A first candidate determination submodule 502A is used to determine a base layer among various layers, and obtain the candidate dependency information of the base layer according to the position of the base layer;

[0206] The outer layer unit determination submodule 502B is used to determine the outer layer unit in the user interface according to the position of each layer, wherein the layer unit is: a layer row or a layer column, each layer in the layer row has an intersecting area with at least one other layer after being expanded horizontally, and each layer in the layer column has an intersecting area with at least one other layer after being expanded vertically;

[0207] The outer layer order determination submodule 502C is used to determine the traversal order of each outer layer layer unit according to a preset traversal order determination method, wherein the traversal order determination method is: determining the traversal order of the layer unit according to the distance between the layer unit and the edge of the user interface and the distance between the layer units;

[0208] The layer order determination submodule 502D is used for obtaining the traversal order of the layer units in the unit to be operated determined in a row-column staggered manner according to the traversal order determination method for each layer unit in the outer layer, taking the layer unit as the unit to be operated, updating the unit to be operated to a layer unit containing multiple layers in the determined layer unit, and returning to the step of obtaining the traversal order of the layer units in the unit to be operated determined in a row-column staggered manner according to the traversal order determination method, until there is no layer unit containing multiple layers in the determined layer unit, and taking the arrangement order of the smallest layer unit containing only one layer as the arrangement order of the layers contained in the smallest layer unit, wherein the row-column staggered manner is: when the unit to be operated is a layer row, the determined layer unit is a layer column, and when the unit to be operated is a layer column, the determined layer unit is a layer row;

[0209] The second candidate information submodule 502E is used to use the first layer, the second layer and the baseline layer as candidate dependency information of each layer except the baseline layer, wherein the first layer is a layer included in the layer unit of the outer layer that is located before the target layer unit in the traversal order, the second layer is a layer that is located before the layer in the target layer unit in the traversal order, and the target layer unit is a layer unit of the outer layer where the layer is located;

[0210] The dependency information determination submodule 502F is used to determine the dependency information of each layer according to the candidate dependency information of each layer.

[0211] From the above, it can be seen that the embodiment of the present scheme determines the alternative dependency information of each layer according to the distance between the layer row and the layer column, and the distance between the layer row and the layer column and the user interface, and then selects the dependency information of each layer from the alternative dependency information, so that the order of mutual dependence between the layers generally satisfies the rule of minimizing the distance between the layer row and the layer column where the adjacent layers are located, so that the dependency information of each layer and the layer generally maintains the same rule in relative position.

[0212] In one embodiment of the present invention, the dependency information determining submodule 502F is specifically used to:

[0213] Dependency information for each layer is determined as follows:

[0214] Selecting, from the candidate dependency information of the layer, the first candidate dependency information having the smallest lateral distance between the represented position and the position of the layer;

[0215] Selecting, from the candidate dependency information of the layer, the second candidate dependency information having the smallest longitudinal distance between the represented position and the position of the layer;

[0216] The first candidate dependency information and the second candidate dependency information are determined as dependency information of the layer.

[0217] It can be seen from the above that the dependency information of each layer is the dependency information that is closest to the layer. Therefore, determining the position of the layer according to the position represented by the dependency information can make the determined position of the layer more accurate.

[0218] In one embodiment of the present invention, the layout relationship generating module 504 is specifically used to:

[0219] Based on the description information of each layer, the layout relationship of each layer is generated to describe the layer size in one of the following ways:

[0220] Describing the layer size in the layout relationship with the layer size reflected in the design file;

[0221] Describing the size of a layer as a ratio between the layer and its parent layer in the layout relationship;

[0222] In the layout relationship, the size of the layer is described by the size of the content in the layer;

[0223] The dimensions of a layer are described in the layout relationship as the ratio of its aspect ratio to its height.

[0224] In one embodiment of the present invention, when there is a mask on the layer, the size of the layer reflected in the design file is: the size of the overlapping area between the layer and the mask.

[0225] The embodiment of the present invention further provides an electronic device, such as Figure 7 As shown, it includes a processor 701, a communication interface 702, a memory 703 and a communication bus 704, wherein the processor 701, the communication interface 702, and the memory 703 communicate with each other through the communication bus 704.

[0226] Memory 703, used for storing computer programs;

[0227] The processor 701 is used to implement any method step of the code generation method for the above-mentioned layout relationship when executing the program stored in the memory 703.

[0228] When the electronic device provided by the embodiment of the present invention is applied to generate layout relationship code, the dependency information of each layer and the description information of the relative position between the layer and the position represented by the dependency information of the layer can be determined according to the design file of the user interface, so that each layer can determine its own position according to the position represented by the dependency information. Therefore, the layout relationship of each layer can be determined according to the size and description information of each layer, and the code for describing the layout relationship can be generated by referring to the layout relationship and preset code rules. In this process, the developer does not need to analyze the design file and determine the layout relationship of the layer. The layout relationship of the layer can be directly determined according to the information recorded in the design file, and the layout relationship code can be generated, thereby saving human resources and improving the efficiency of generating layout relationship code.

[0229] The communication bus mentioned in the above terminal can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus.

[0230] The communication interface is used for communication between the above terminal and other devices.

[0231] The memory may include a random access memory (RAM) or a non-volatile memory, such as at least one disk memory. Optionally, the memory may also be at least one storage device located away from the aforementioned processor.

[0232] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0233] In another embodiment of the present invention, a computer-readable storage medium is provided, wherein a computer program is stored in the computer-readable storage medium, and when the computer program is executed by a processor, any method step described in the code generation method for the above-mentioned layout relationship is implemented.

[0234] When the computer program stored in the computer-readable storage medium provided by the present embodiment is applied to generate layout relationship codes, the dependency information of each layer and the description information of the relative position between the layer and the position represented by the dependency information of the layer can be determined according to the design file of the user interface, so that each layer can determine its own position according to the position represented by the dependency information. Therefore, the layout relationship of each layer can be determined according to the size and description information of each layer, and the code for describing the layout relationship can be generated by referring to the layout relationship and the preset code rules. In this process, the developer does not need to analyze the design file and determine the layout relationship of the layer. The layout relationship of the layer can be determined directly according to the information recorded in the design file, and the layout relationship code can be generated, thereby saving human resources and improving the efficiency of generating layout relationship code.

[0235] In another embodiment provided by the present invention, a computer program product including instructions is also provided, which, when executed on a computer, enables the computer to execute any method step of the code generation method for layout relationship described in the above embodiments.

[0236] When executing the computer program product provided by this embodiment to generate layout relationship code, the dependency information of each layer and the description information of the relative position between the layer and the position represented by the dependency information of the layer can be determined according to the design file of the user interface, so that each layer can determine its own position according to the position represented by the dependency information. Therefore, the layout relationship of each layer can be determined according to the size and description information of each layer, and the code for describing the layout relationship can be generated by referring to the layout relationship and the preset code rules. In this process, the developer does not need to analyze the design file and determine the layout relationship of the layer. The layout relationship of the layer can be determined directly according to the information recorded in the design file, and the layout relationship code can be generated, thereby saving human resources and improving the efficiency of generating layout relationship code.

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

[0238] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

[0239] Each embodiment in this specification is described in a related manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for devices, electronic devices, computer-readable storage media, and computer program products, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

[0240] The above description is only a preferred embodiment of the present invention and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention are included in the protection scope of the present invention.

Claims

1. A code generation method for layout relationship, characterized in that: The method comprises: Determining the position and size of each layer in the user interface as reflected in the user interface design file; Determine a reference layer among the layers, and obtain candidate dependency information of the reference layer according to the position of the reference layer; Determine the outer layer unit of the user interface according to the position of each layer, wherein the layer unit is: a layer row or a layer column, each layer in the layer row has an intersecting area with at least one other layer after being expanded horizontally, and each layer in the layer column has an intersecting area with at least one other layer after being expanded vertically; Determine the traversal order of each outer layer unit according to a preset traversal order determination method, wherein the traversal order determination method is: determine the traversal order of the layer unit according to the distance between the layer unit and the edge of the user interface and the distance between the layer units; For each layer unit of the outer layer, the layer unit is taken as the unit to be operated, and according to the traversal order determination method, the traversal order of the layer units in the unit to be operated determined according to the row-column interlaced method is obtained, the unit to be operated is updated to a layer unit containing multiple layers in the determined layer unit, and the step of obtaining the traversal order of the layer units in the unit to be operated determined according to the row-column interlaced method according to the traversal order determination method, until there is no layer unit containing multiple layers in the determined layer unit, wherein the row-column interlaced method is: when the unit to be operated is a layer row, the determined layer unit is a layer column, and when the unit to be operated is a layer column, the determined layer unit is a layer row; For each layer except the base layer, the first layer, the second layer and the base layer are used as candidate dependency information of the layer, wherein the first layer is a layer included in a layer unit of an outer layer that is located before a target layer unit in a traversal order, the second layer is a layer that is located before the layer in a traversal order in the target layer unit, and the target layer unit is a layer unit of the outer layer where the layer is located; Determine the dependency information of each layer according to the candidate dependency information of each layer, wherein the dependency information of each layer represents a position to be referenced when determining the position of the layer when generating the user interface, and the dependency information of each layer is other layers or user interfaces; According to the dependency information of each layer and the position of each layer, obtain description information of the relative position between the position of each layer and the position represented by the dependency information of the layer, where the dependency information of each layer is a user interface, the description information is the position of the layer in the user interface, and where the dependency information of each layer is other layers, the description information is the relative position between the layer and other layers; Generate the layout relationship of each layer based on the description information and size of each layer; Referring to preset code rules, a code for describing the layout relationship is generated.

2. The method according to claim 1, characterized in that: The step of determining the dependency information of each layer according to the candidate dependency information of each layer includes: Dependency information for each layer is determined as follows: Selecting, from the candidate dependency information of the layer, the first candidate dependency information having the smallest lateral distance between the represented position and the position of the layer; Selecting, from the candidate dependency information of the layer, the second candidate dependency information having the smallest longitudinal distance between the represented position and the position of the layer; The first candidate dependency information and the second candidate dependency information are determined as dependency information of the layer.

3. The method according to claim 1, characterized in that The generating of the layout relationship of each layer according to the description information and size of each layer includes: Based on the description information of each layer, the layout relationship of each layer is generated to describe the layer size in one of the following ways: Describing the layer size in the layout relationship with the layer size reflected in the design file; Describing the size of a layer as a ratio between the layer and its parent layer in the layout relationship; In the layout relationship, the size of the layer is described by the size of the content in the layer; The dimensions of a layer are described in the layout relationship as the ratio of its aspect ratio to its height.

4. The method according to any one of claims 1 to 3, characterized in that When there is a mask on a layer, the size of the layer reflected in the design file is: the size of the overlapping area between the layer and the mask.

5. A layout relationship code generation device, characterized in that: The device comprises: A position and size determination module, used to determine the position and size of each layer in the user interface as reflected in the user interface design file; The dependency information determination module is used to determine the base layer in each layer, and obtain the candidate dependency information of the base layer according to the position of the base layer; determine the outer layer unit in the user interface according to the position of each layer, wherein the layer unit is: a layer row or a layer column, each layer in the layer row has an intersection area with at least one other layer after being expanded horizontally, and each layer in the layer column has an intersection area with at least one other layer after being expanded vertically; determine the traversal order of each outer layer layer unit according to a preset traversal order determination method, wherein the traversal order determination method is: determine the traversal order of the layer unit according to the distance between the layer unit and the edge of the user interface, and the distance between the layer units; for each outer layer layer unit, take the layer unit as the unit to be operated, obtain the traversal order of the layer units determined in the row-column staggered manner in the unit to be operated according to the traversal order determination method, update the unit to be operated to a layer unit containing multiple layers in the determined layer unit, and return the traversal order determined in the traversal order determination method. The traversal order determination method includes a step of obtaining the traversal order of the layer units in the unit to be operated determined in a row-column interleaving method until there is no layer unit containing multiple layers in the determined layer units, wherein the row-column interleaving method is: when the unit to be operated is a layer row, the determined layer unit is a layer column, and when the unit to be operated is a layer column, the determined layer unit is a layer row; for each layer except the reference layer, the first layer, the second layer and the reference layer are used as candidate dependency information of the layer, wherein the first layer is: a layer included in the layer unit of the outer layer whose traversal order is before the target layer unit, the second layer is: a layer before the layer in the target layer unit whose traversal order is before the layer, and the target layer unit is: a layer unit of the outer layer where the layer is located; according to the candidate dependency information of each layer, the dependency information of each layer is determined, the dependency information of each layer represents a position to be referenced when determining the position of the layer when generating the user interface, and the dependency information of each layer is other layers or user interfaces; A description information acquisition module, used to obtain description information of the relative position between the position of each layer and the position represented by the dependency information of the layer according to the dependency information of each layer and the position of each layer. When the dependency information of each layer is a user interface, the description information is the position of the layer in the user interface. When the dependency information of each layer is other layers, the description information is the relative position between the layer and other layers. A layout relationship generation module is used to generate the layout relationship of each layer according to the description information and size of each layer; The code generation module is used to generate codes for describing the layout relationship by referring to preset code rules.

6. The device according to claim 5, characterized in that The dependency information determination submodule is specifically used for: Dependency information for each layer is determined as follows: Selecting, from the candidate dependency information of the layer, the first candidate dependency information having the smallest lateral distance between the represented position and the position of the layer; Selecting, from the candidate dependency information of the layer, the second candidate dependency information having the smallest longitudinal distance between the represented position and the position of the layer; The first candidate dependency information and the second candidate dependency information are determined as dependency information of the layer.

7. The device according to claim 5, characterized in that The layout relationship generation module is specifically used for: Based on the description information of each layer, the layout relationship of each layer is generated to describe the layer size in one of the following ways: Describing the layer size in the layout relationship with the layer size reflected in the design file; Describing the size of a layer as a ratio between the layer and its parent layer in the layout relationship; In the layout relationship, the size of the layer is described by the size of the content in the layer; The dimensions of a layer are described in the layout relationship as the ratio of its aspect ratio to its height.

8. The device according to any one of claims 5 to 7, characterized in that: When there is a mask on a layer, the size of the layer reflected in the design file is: the size of the overlapping area between the layer and the mask.

9. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor is used to implement any method step of claims 1-4 when executing a program stored in a memory.

Images