A method and apparatus for generating layout code

Abstract

The present invention discloses a method and apparatus for generating layout code, which relates to the field of computer technology. A specific embodiment of the method includes obtaining a design image and extracting element information of each layer in the design image; sequentially traversing every two layers in a loop to obtain a tree structure stored in the layer; wherein, the area of the parent layer in the tree structure is greater than or equal to the area of the sub-layer and is the smallest; receiving an instruction of a selected layer, and obtaining the selected layer and all its sub-layers; determining sibling layers adjacent to the left and upper sides of each layer, and laying out each sibling layer according to a preset rule to generate layout code. Thus, the embodiment of the present invention can solve the problem of low efficiency in the process of application development.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular, to a method and apparatus for generating layout code. Background Art

[0002] With the continuous development of client applications, there are more and more requirements. Its R & D not only needs to meet the product requirements, but also needs to ensure the code quality. Therefore, it is very important to reduce some repetitive work and focus on the business code. Therefore, solving repetitive work has become the main goal of cost reduction and efficiency improvement.

[0003] In the process of implementing the present invention, the inventors found that there are at least the following problems in the prior art:

[0004] Currently, when developing the layout code of an application, the effect diagram and layer annotations are first designed, and then the layout-related code is developed according to the effect diagram and annotations. For example, in the process of developing the layout code for a client based on the ISO system (iOS is a mobile operating system developed by Apple Inc.). Thus, in the development process, the code work related to the client layout is repeated, wasting a lot of time and greatly reducing the development efficiency. Summary of the Invention

[0005] In view of this, embodiments of the present invention provide a method and apparatus for generating layout code, which can solve the problem of low efficiency in the application development process.

[0006] To achieve the above object, according to one aspect of the embodiments of the present invention, a method for generating layout code is provided, including obtaining a design image and extracting element information of each layer in the design image; traversing each pair of layers in sequence to obtain a tree structure stored in the layer; wherein, the area of the parent layer in the tree structure is greater than or equal to the area of the sub-layer and is the smallest; receiving an instruction of a selected layer, and obtaining the selected layer and all its sub-layers; determining the sibling layers adjacent to the left and upper sides of each layer, and laying out each sibling layer according to a preset rule to generate layout code.

[0007] Optionally, determining the sibling layers adjacent to the left and upper sides of each layer includes:

[0008] Obtaining all the sibling layers on the left or upper side of the target layer, and calculating the distance between the sibling layer and the target layer;

[0009] Judging whether the number of the sibling layers with the closest distance is greater than or equal to 2. If so, the sibling layer with the longer overlapping length is the sibling layer adjacent to the left or upper side of the target layer, otherwise the sibling layer with the closest distance is the sibling layer adjacent to the left or upper side of the target layer; wherein, the overlapping length refers to the parallel length of the sibling layer and the target layer in the direction perpendicular to the straight-line distance between the sibling layer and the target layer.

[0010] Optionally, before determining the sibling layers adjacent to the left and upper sides of each layer, it includes:

[0011] Merge the sibling layers at the same level in the obtained layers to obtain a new parent layer; wherein, the new parent layer is a sub-layer of the original parent layer;

[0012] Determine whether the sibling layers at the same level to be merged are custom layers. If so, remove the sibling layers at the same level to be merged and then determine the sibling layers adjacent to the left and upper sides of each layer. Otherwise, directly determine the sibling layers adjacent to the left and upper sides of each layer.

[0013] Optionally, according to a preset rule, layout each sibling layer to generate layout code, including:

[0014] The layout of the sibling layer is represented as (x, y, width, height); wherein, width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the upper side of the layer and the upper side of the parent layer.

[0015] In addition, according to an aspect of an embodiment of the present invention, there is provided an apparatus for generating layout code, including an acquisition module for obtaining a design image and extracting element information of each layer in the design image; traversing each pair of layers in sequence to obtain a tree structure stored in the layers; wherein, the area of the parent layer in the tree structure is greater than or equal to the area of the sub-layer and is the smallest; a selection module for receiving an instruction of a selected layer and obtaining the selected layer and all its sub-layers; a generation module for determining the sibling layers adjacent to the left and upper sides of each layer and laying out each sibling layer according to a preset rule to generate layout code.

[0016] Optionally, the generation module determines the sibling layers adjacent to the left and upper sides of each layer, including:

[0017] Obtain all the sibling layers on the left or upper side of the target layer and calculate the distance between the sibling layer and the target layer;

[0018] Determine whether the number of sibling layers with the closest distance is greater than or equal to 2. If so, the one with the longer overlapping length is the sibling layer adjacent to the left or upper side of the target layer. Otherwise, the one with the closest distance is the sibling layer adjacent to the left or upper side of the target layer; wherein, the overlapping length refers to the parallel length between the sibling layer and the target layer in the direction perpendicular to the linear distance between the sibling layer and the target layer.

[0019] Optionally, before the generation module determines the sibling layers adjacent to the left and upper sides of each layer, it includes:

[0020] Merge sibling layers at the same level in the obtained layers to obtain a new parent layer; wherein, the new parent layer is a sub-layer of the original parent layer.

[0021] Determine whether the sibling layers at the same level to be merged are custom layers. If so, remove the sibling layers at the same level to be merged and then determine the sibling layers adjacent to the left and upper sides of each layer. Otherwise, directly determine the sibling layers adjacent to the left and upper sides of each layer.

[0022] Optionally, the generating module layouts each sibling layer according to a preset rule to generate layout code, including:

[0023] The layout of the sibling layer is represented as (x, y, width, height); where width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the upper side of the layer and the upper side of the parent layer.

[0024] According to another aspect of the embodiments of the present invention, there is also provided an electronic device, including:

[0025] One or more processors;

[0026] A storage device for storing one or more programs,

[0027] When the one or more programs are executed by the one or more processors, the one or more processors implement the method described in any of the above embodiments of generating layout code.

[0028] According to another aspect of the embodiments of the present invention, there is also provided a computer-readable medium, on which a computer program is stored, and when the program is executed by a processor, it implements the method described in any of the above embodiments based on generating layout code.

[0029] One of the embodiments of the above invention has the following advantages or beneficial effects: The present invention obtains a design image, extracts the element information of each layer in the design image; sequentially traverses every two layers in a loop to obtain the tree structure stored in the layers; receives an instruction for a selected layer, and obtains the selected layer and all its sub-layers; determines the sibling layers adjacent to the left and upper sides of each layer, and layouts each sibling layer according to a preset rule to generate layout code. Therefore, the present invention can avoid repeating the code related to client layout and realize the development of layout code quickly and conveniently.

[0030] The further effects of the above non-conventional optional methods will be described in combination with specific embodiments below. Description of the Drawings

[0031] The drawings are used to better understand the present invention and do not constitute an improper limitation to the present invention. Among them:

[0032] Figure 1 is a schematic diagram of the main process of the method for generating layout code according to an embodiment of the present invention;

[0033] Figure 2 is a schematic diagram of the main process of the method for generating layout code according to another embodiment of the present invention;

[0034] Figure 3 is a schematic diagram of the main process of the method for generating layout code according to still another embodiment of the present invention;

[0035] Figure 4 is a schematic diagram of the relationship before and after merging sibling layers according to an embodiment of the present invention;

[0036] Figure 5 is another schematic diagram of the relationship before and after merging sibling layers according to an embodiment of the present invention;

[0037] Figure 6 is a schematic diagram of the layout of sibling layers according to a specific embodiment of the present invention;

[0038] Figure 7 is a schematic diagram of the main process of the method for determining the adjacent sibling layer on the left or upper side of a layer according to an embodiment of the present invention;

[0039] Figure 8 is a schematic diagram of the overlapping length according to an embodiment of the present invention;

[0040] Figure 9 is a schematic diagram of the layer layout representation according to an embodiment of the present invention;

[0041] Figure 10 is a schematic diagram of the main modules of the device for generating layout code according to an embodiment of the present invention;

[0042] Figure 11 is an exemplary system architecture diagram to which the embodiments of the present invention can be applied;

[0043] Figure 12 is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing the embodiments of the present invention. Detailed Embodiments

[0044] The following describes exemplary embodiments of the present invention with reference to the accompanying drawings. Various details of the embodiments of the present invention are included to facilitate understanding, and they should be considered merely exemplary. Therefore, those of ordinary skill in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, descriptions of well-known functions and structures are omitted for clarity and conciseness in the following description.

[0045] Figure 1 It is a schematic diagram of the main process of the method for generating layout code according to the first embodiment of the present invention. The method for generating layout code may include:

[0046] Step S101: Obtain a design image and extract the element information of each layer in the design image.

[0047] Step S102: Traverse each pair of layers in sequence to obtain the tree structure stored in the layer.

[0048] In the embodiment, the area of the parent layer in the tree structure is greater than or equal to the area of the sub-layer, and it is the smallest one with an area greater than or equal to the area of the sub-layer.

[0049] Step S103: Receive an instruction for a selected layer, and obtain the selected layer and all its sub-layers.

[0050] In the embodiment, when a certain layer is clicked, the currently clicked layer and all its sub-layers are selected and saved.

[0051] Step S104: Determine the sibling layers adjacent to the left and upper sides of each layer, and layout each sibling layer according to a preset rule to generate layout code.

[0052] In the embodiment, when determining the sibling layers adjacent to the left and upper sides of the layer, all the sibling layers on the left or upper side of the target layer can be obtained, and then the distance between the sibling layer and the target layer is calculated. Then, it is judged whether the number of the sibling layers with the closest distance is greater than or equal to 2. If it is greater than or equal to 2, the one with more overlapping length is the sibling layer adjacent to the left or upper side of the target layer. If it is less than 2, the one with the closest distance is the sibling layer adjacent to the left or upper side of the target layer.

[0053] It should be noted that the layout of the sibling layer can be expressed as (x, y, width, height). Wherein, width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the upper side of the layer and the upper side of the parent layer. That is to say, according to the preset rule, the layout of the layer can be represented by the sibling layers adjacent to the left and upper sides of the determined layer.

[0054] Therefore, according to the various embodiments described above, the present invention solves the problem that repetitive work wastes a lot of time and the development efficiency is low during the process of developing an application program. Through the absolute coordinates obtained from the design drawing (the rendering after being designed by the UI designer), the absolute coordinates are converted into relative coordinates through a layout algorithm, and layout code is directly generated.

[0055] Figure 2It is a schematic diagram of the main process of a method for generating layout code according to another embodiment of the present invention. The method for generating layout code may include:

[0056] Step S201: Obtain a design image and extract the element information of each layer in the design image.

[0057] Step S202: Traverse each pair of layers in sequence to obtain the tree structure stored in the layer.

[0058] In the embodiment, the area of the parent layer in the tree structure is greater than or equal to the area of the child layer and is the smallest.

[0059] Step S203: Receive an instruction for a selected layer, and obtain the selected layer and all its child layers.

[0060] Step S204: Merge the sibling layers at the same level in the obtained layers to obtain a new parent layer.

[0061] In the embodiment, the new parent layer is a child layer of the original parent layer.

[0062] It should be noted that merging layers here can facilitate further encapsulation of the layers and make the layout code structure clearer.

[0063] Step S205: Determine whether the sibling layers at the same level that are merged are custom layers. If so, perform Step S206 first and then Step S207; otherwise, directly perform Step S207.

[0064] Step S206: Remove the sibling layers at the same level that are merged.

[0065] In the embodiment, since they are custom layers, removing them does not affect the generation of the layout code, but only multiple custom layers are combined into a new custom layer.

[0066] Step S207: Determine the sibling layers adjacent to the left and upper sides of each layer, and layout each sibling layer according to a preset rule to generate layout code.

[0067] In the embodiment, when determining the sibling layers adjacent to the left and upper sides of the layer, all the sibling layers on the left or upper side of the target layer can be obtained, and then the distance between the sibling layer and the target layer is calculated. Subsequently, it is determined whether the number of the closest sibling layers is greater than or equal to 2. If it is greater than or equal to 2, the one with more overlapping length is the sibling layer adjacent to the left or upper side of the target layer; if it is less than 2, the closest one is the sibling layer adjacent to the left or upper side of the target layer.

[0068] In addition, the layout of sibling layers can be expressed as (x, y, width, height), where width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the top of the layer and the top of the parent layer.

[0069] Figure 3 is a schematic diagram of the main process of a method for generating layout code according to another embodiment of the present invention. Based on the iOS operating system, the method for generating layout code may include:

[0070] Step S301, obtaining a design image, and extracting element information of each layer in the design image.

[0071] In an embodiment, the element information of each layer in the design image is extracted through a Sketch plug-in (Sketch is a vector drawing application). The Sketch plug-in can directly export a json file of the design image, which includes the element information of each layer in the design image, such as coordinates, text color, font size, control type, etc.

[0072] In addition, you can use macOS (macOS is an operating system that runs on Apple's Macintosh series of computers and is a graphical user interface operating system) visualization application software to perform various functions on the layers.

[0073] Step S302, removing element information of the mask layer.

[0074] In an embodiment, among the extracted layers, there are some mask layers having the same element information, so these repeated mask layers can be removed.

[0075] Furthermore, the removed layers and their element information may be stored in a preset array.

[0076] Step S303, sorting the layers from small to large according to the areas in the element information.

[0077] Step S304, looping through every two layers in turn to obtain a tree structure of layer storage, wherein the area of ​​the parent layer in the tree structure is greater than or equal to the area of ​​the child layer, and is greater than or equal to the smallest area of ​​the child layer.

[0078] In the embodiment, since the coordinate attributes of each layer in the json file of the design image are for screen vertices and there is no parent-child hierarchical relationship, it is necessary to convert the hierarchical relationship of the generated tree structure.

[0079] Further, all the layers are sorted in ascending order by area. After sorting, the two layers are traversed in a loop in turn. According to the preset principle for determining the parent layer, all the parent-child hierarchical relationships are found, and the generated tree structure is stored. Even further, the preset principle for determining the parent layer is that the layer with the smallest area that can enclose a layer is its parent layer, that is, the view with the smallest area that can be greater than or equal to the area of the child layer is its parent layer.

[0080] Step S305: Receive the instruction of the selected layer, and obtain the selected layer and all its sub-layers.

[0081] In the embodiment, when receiving a click on a certain layer, the currently clicked layer and all its sub-layers are selected and saved.

[0082] Step S306: Merge the sibling layers at the same level in the obtained layers to obtain a new parent layer. Among them, the new parent layer is a sub-layer of the original parent layer.

[0083] In the embodiment, multiple layers can be merged into a new parent layer by selecting layers in a box or selecting multiple layers, and the layers to be merged must be sibling layers at the same level.

[0084] For example: There are originally three sub-views B, C, and D. After merging, a new parent layer New will be generated. After successful merging, New is the new parent layer of the three sub-views B, C, and D, and the original parent layer A is the parent layer of the newly merged layer New. The relationship before and after merging is as follows Figure 4 shown.

[0085] Step S307: Determine whether the sibling layers at the same level to be merged are custom layers. If so, first perform Step S308 and then perform Step S309. Otherwise, directly perform Step S309.

[0086] In the embodiment, the custom layer refers to a non-native layer existing in the system, but a custom layer encapsulated by a developer for simple controls.

[0087] Step S308: Remove the sibling layers at the same level to be merged.

[0088] In the embodiment, the sibling layers at the same level to be merged are removed. The relationship before and after merging is as Figure 5 shown. B, C, and D have been merged into a new custom layer, and the new custom layer includes the implementations of the B, C, and D layers. Therefore, the B, C, and D layers can be removed.

[0089] Step S309: Sort the sibling layers at the same level in a preset manner.

[0090] In an embodiment, the distances between the left side of a layer and the left side of its parent layer, and between the upper side of the layer and the upper side of its parent layer can be summed up, and then the layers are sorted in ascending order according to the summation result.

[0091] Step S310: Determine the sibling layers adjacent to the left and upper sides of each layer.

[0092] In an embodiment, check whether there are adjacent sibling view controls above and to the left of each layer. For example Figure 6 as shown, there are none above and to the left of Layer B, and there is none above Layer C, and Layer B is to the left. The specific process of determining the sibling layers adjacent to the left or upper side of a layer is as Figure 7 shown:

[0093] Step S701: Obtain all the sibling layers to the left or above the target layer.

[0094] Step S702: Calculate the distances between the sibling layers and the target layer.

[0095] In an embodiment, calculate the distance between the left side of the sibling layer and the left side of the target layer.

[0096] Step S703: Determine whether the number of sibling layers with the closest distance is greater than or equal to 2. If so, proceed to step S704; otherwise, proceed to step S705.

[0097] Step S704: The sibling layer with more overlapping length is the adjacent sibling layer to the left or above the target layer.

[0098] In an embodiment, when the distances between two or more sibling layers and the target layer are the same, compare the overlapping lengths. The sibling layer with more overlapping length is the adjacent sibling layer to the left or above the target layer. Herein, the overlapping length refers to the parallel length between the sibling layer and the target layer in the direction perpendicular to the linear distance between them. As Figure 8 shown, the linear distances between sibling layers 1 and 2 and target layer 3 are the same, but in the direction perpendicular to this linear distance, the parallel length between sibling layer 1 and target layer 3 is greater than that between sibling layer 2 and target layer 3.

[0099] Step S705: The sibling layer with the closest distance is the adjacent sibling layer to the left or above the target layer.

[0100] Step S311: Layout each sibling layer according to a preset rule to generate layout code.

[0101] In an embodiment, as Figure 9As shown, the layout of each sibling layer should be represented as (x, y, width, height), where width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the upper side of the layer and the upper side of the parent layer. Additionally, the distance between the right side of the child layer and the left side of the parent layer is right, and the distance between the lower side of the child layer and the upper side of the parent layer is bottom.

[0102] It should be noted that if there are no adjacent sibling layers on the left and upper sides of the child layer, the distance between the left side of the child layer and the left side of the parent layer can be represented as left, i.e., x = left, and the distance between the upper side of the child layer and the upper side of the parent layer is top, i.e., y = top.

[0103] For example: As Figure 6 shown in the sibling layers, first layout sibling layer B. Since there are no sibling layers on the left and upper sides of sibling layer B, sibling layer B is directly laid out against parent layer A, i.e., the layout of sibling layer B is (left, top, width, height). Next, layout sibling layer C. There is sibling layer B on the left side of sibling layer C and no sibling layer on the upper side. Assuming the interval between sibling layer B and sibling layer C is 10, the layout of sibling layer C is (B.right + 10, y, width, height). Similarly, the layout of sibling layer E is (C.right + 10, D.bottom + 10, width, height), and so on. The final layout code can be generated. That is, the layout code of sibling layer B is b.frame = CGRectMake(left, top, width, height), and the layout code of sibling layer C is c.frame = CGRectMake(B.right + 10, y, width, height).

[0104] Figure 10 is a device for generating layout code according to an embodiment of the present invention. As Figure 10 shown, the device 1000 for generating layout code includes an acquisition module 1001, a selection module 1002, and a generation module 1003. Among them, the acquisition module 1001 obtains a design image and extracts the element information of each layer in the design image; traverses each pair of layers in sequence to obtain the tree structure stored in the layers. Among them, the area of the parent layer in the tree structure is greater than or equal to the area of the child layer and is the smallest. The selection module 1002 receives an instruction to select a layer and obtains the selected layer and all its child layers. The generation module 1003 determines the adjacent sibling layers on the left and upper sides of each layer and layouts each sibling layer according to a preset rule to generate layout code.

[0105] Preferably, the generating module 1003 determines the sibling layers adjacent to the left and upper sides of each layer, including:

[0106] Obtain all the sibling layers on the left or upper side of the target layer, and calculate the distance between the sibling layer and the target layer. Determine whether the number of sibling layers with the closest distance is greater than or equal to 2. If so, the sibling layer with the longer overlapping length is the sibling layer adjacent to the left or upper side of the target layer; otherwise, the sibling layer with the closest distance is the sibling layer adjacent to the left or upper side of the target layer.

[0107] As another embodiment, before the generating module 1003 determines the sibling layers adjacent to the left and upper sides of each layer, it includes:

[0108] Merge the sibling layers at the same level in the obtained layers to obtain a new parent layer; wherein, the new parent layer is a sub-layer of the original parent layer;

[0109] Determine whether the sibling layers at the same level to be merged are custom layers. If so, remove the sibling layers at the same level to be merged and then determine the sibling layers adjacent to the left and upper sides of each layer; otherwise, directly determine the sibling layers adjacent to the left and upper sides of each layer.

[0110] In addition, when the generating module 1003 layouts each sibling layer according to a preset rule to generate layout code, the layout of the sibling layer can be represented as (x, y, width, height); where width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the upper side of the layer and the upper side of the parent layer.

[0111] It should be noted that there is a corresponding relationship between the method for generating layout code and the device for generating layout code in the present invention in terms of specific implementation content, so the repeated content will not be described again.

[0112] Figure 11 An exemplary system architecture 1100 is shown that can apply the method for generating layout code or the device for generating layout code according to the embodiments of the present invention.

[0113] As Figure 11 shown, the system architecture 1100 may include terminal devices 1101, 1102, 1103, a network 1104, and a server 1105. The network 1104 is used to provide a medium for communication links between the terminal devices 1101, 1102, 1103 and the server 1105. The network 1104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0114] Users can interact with server 1105 via network 1104 using terminal devices 1101, 1102, and 1103 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 1101, 1102, and 1103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (for example only).

[0115] Terminal devices 1101, 1102, and 1103 can be various electronic devices with a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptop computers, desktop computers, and so on.

[0116] Server 1105 can be a server that provides various services, such as a back-end management server that supports shopping websites browsed by users using terminal devices 1101, 1102, and 1103 (for example only). The back-end management server can analyze and process data such as product information query requests received, and feedback the processing results (such as target push information, product information - for example only) to the terminal device.

[0117] It should be noted that the method for generating layout code provided in the embodiments of the present invention is generally executed by server 1105. Correspondingly, the device for generating layout code is generally set in server 1105.

[0118] It should be understood that Figure 11 the numbers of terminal devices, networks, and servers in

[0119] are merely illustrative. According to the implementation requirements, there can be any number of terminal devices, networks, and servers. Figure 12 The following refers to Figure 12 which shows a schematic structural diagram of a computer system 1200 of a terminal device suitable for implementing the embodiments of the present invention.

[0120] As Figure 12 shown, computer system 1200 includes a central processing unit (CPU) 1201, which can perform various appropriate actions and processes according to the program stored in read-only memory (ROM) 1202 or the program loaded from storage section 1208 into random access memory (RAM) 1203. In RAM 1203, various programs and data required for the operation of system 1200 are also stored. CPU 1201, ROM 1202, and RAM 1203 are connected to each other via bus 1204. Input / output (I / O) interface 1205 is also connected to bus 1204.

[0121] The following components are connected to the I / O interface 1205: an input section 1206 including a keyboard, a mouse, etc.; an output section 1207 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc. and a speaker, etc.; a storage section 1208 including a hard disk, etc.; and a communication section 1209 including a network interface card such as a LAN card, a modem, etc. The communication section 1209 performs communication processing via a network such as the Internet. A drive 1210 is also connected to the I / O interface 1205 as needed. A removable medium 1211 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc. is installed on the drive 1210 as needed so that a computer program read therefrom is installed into the storage section 1208 as needed.

[0122] Specifically, according to an embodiment disclosed by the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment disclosed by the present invention includes a computer program product which includes a computer program carried on a computer-readable medium, and the computer program includes program codes for performing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 1209, and / or installed from the removable medium 1211. When the computer program is executed by a central processing unit (CPU) 1201, the above-described functions defined in the system of the present invention are executed.

[0123] It should be noted that the computer-readable medium shown in the present invention can be a computer-readable signal medium, a computer-readable storage medium, or any combination of the two. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples of the computer-readable storage medium can include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present invention, the computer-readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The computer-readable signal medium can also be any computer-readable medium other than the computer-readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0124] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagram can represent a module, a program segment, or a part of code that contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than marked in the accompanying drawings. For example, two consecutive blocks shown may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram or flowchart, and the combination of blocks in the block diagram or flowchart, can be implemented by a dedicated hardware-based system for performing the specified functions or operations, or by a combination of dedicated hardware and computer instructions.

[0125] The modules involved in the embodiments of the present invention can be implemented in software or in hardware. The described modules can also be provided in a processor. For example, it can be described as: a processor includes an acquisition module, a selection module, and a generation module. Among them, the names of these modules do not constitute a limitation to the module itself in some cases.

[0126] As another aspect, the present invention also provides a computer-readable medium. The computer-readable medium can be included in the device described in the above embodiments; or it can exist alone without being assembled into the device. The above computer-readable medium carries one or more programs. When the above one or more programs are executed by the device, the device includes: obtaining a design image, extracting element information of each layer in the design image; sequentially traversing every two layers in a loop to obtain a tree structure stored in the layer; wherein, the area of the parent layer in the tree structure is greater than or equal to the area of the sub-layer and is the smallest; receiving an instruction of a selected layer, obtaining the selected layer and all its sub-layers; determining the sibling layers adjacent to the left and upper sides of each layer, and arranging each sibling layer according to a preset rule to generate layout code.

[0127] According to the technical solution of the embodiments of the present invention, the problem of low efficiency in the application development process can be solved.

[0128] The above specific embodiments do not constitute a limitation to the protection scope of the present invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. A method for generating layout code, characterized in that, comprising: obtaining a design image and extracting element information of each layer in the design image; sequentially traversing every two layers in a loop to obtain a tree structure stored in the layers; wherein, the area of the parent layer in the tree structure is greater than or equal to the area of the child layer and is the smallest; the coordinate attributes of each layer in the design image are all relative to the screen vertices and there is no parent-child hierarchical relationship; sorting all the layers in ascending order of area, and then sequentially traversing every two layers in a loop, and finding all the parent-child hierarchical relationships according to a preset principle for determining the parent layer; the preset principle for determining the parent layer is that the layer with the smallest area that can enclose a layer is its parent layer; receiving an instruction for a selected layer, and obtaining the selected layer and all its child layers; determining the sibling layers adjacent to the left and upper sides of each layer, and laying out each sibling layer according to a preset rule to generate layout code; wherein, determining the sibling layers adjacent to the left and upper sides of each layer includes: obtaining all the sibling layers on the left or upper side of the target layer, and calculating the distance between the sibling layer and the target layer; judging whether the number of the sibling layers with the closest distance is greater than or equal to 2. If so, the sibling layer with the longer overlapping length is the sibling layer adjacent to the left or upper side of the target layer, otherwise the sibling layer with the closest distance is the sibling layer adjacent to the left or upper side of the target layer; wherein, the overlapping length refers to the parallel length between the sibling layer and the target layer in the direction perpendicular to the straight-line distance between the sibling layer and the target layer.

2. The method according to claim 1, characterized in that, before determining the sibling layers adjacent to the left and upper sides of each layer, it includes: merging the sibling layers of the same level in the obtained layers to obtain a new parent layer; wherein, the new parent layer is a child layer of the original parent layer; judging whether the sibling layers of the same level to be merged are custom layers. If so, removing the sibling layers of the same level to be merged and then determining the sibling layers adjacent to the left and upper sides of each layer, otherwise directly determining the sibling layers adjacent to the left and upper sides of each layer.

3. The method according to any one of claims 1-2, characterized in that, laying out each sibling layer according to a preset rule to generate layout code, including: the layout of the sibling layer is represented as (x, y, width, height); wherein, width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the upper side of the layer and the upper side of the parent layer.

4. An apparatus for generating layout code, characterized in that, comprising: an obtaining module, configured to obtain a design image and extract element information of each layer in the design image; sequentially traversing every two layers in a loop to obtain a tree structure stored in the layers; wherein, the area of the parent layer in the tree structure is greater than or equal to the area of the child layer and is the smallest; A selection module, configured to receive instructions of a selected layer, obtain the selected layer and all its sub - layers; in the design image, the coordinate attributes of each layer are targeted at the screen vertices and there is no parent - child hierarchical relationship; sort all the layers in ascending order according to their areas, and after sorting, loop through the two layers in sequence. According to the preset principle for determining the parent layer, find all the parent - child hierarchical relationships; the preset principle for determining the parent layer is that the layer with the smallest area that can enclose a layer is its parent layer. A generation module, configured to determine the sibling layers adjacent to the left and upper sides of each layer, and layout each sibling layer according to preset rules to generate layout code; wherein, determining the sibling layers adjacent to the left and upper sides of each layer includes: Obtain all the sibling layers on the left or upper side of the target layer, and calculate the distance between the sibling layer and the target layer. Judge whether the number of sibling layers with the closest distance is greater than or equal to 2. If so, the sibling layer with the longer overlapping length is the sibling layer adjacent to the left or upper side of the target layer; otherwise, the sibling layer with the closest distance is the sibling layer adjacent to the left or upper side of the target layer; wherein, the overlapping length refers to the parallel length between the sibling layer and the target layer in the direction perpendicular to the straight - line distance between the sibling layer and the target layer.

5. The apparatus according to claim 4, wherein, before the generation module determines the sibling layers adjacent to the left and upper sides of each layer, it includes: Merge the sibling layers at the same level in the obtained layers to obtain a new parent layer; wherein, the new parent layer is a sub - layer of the original parent layer. Judge whether the sibling layers at the same level to be merged are custom layers. If so, remove the sibling layers at the same level to be merged and then determine the sibling layers adjacent to the left and upper sides of each layer; otherwise, directly determine the sibling layers adjacent to the left and upper sides of each layer.

6. The apparatus according to any one of claims 4 - 5, wherein, the generation module layouts each sibling layer according to preset rules to generate layout code, including: The layout of the sibling layer is represented as (x, y, width, height); wherein, width is the width of the layer, height is the height of the layer, x is the distance between the left side of the layer and the left side of the parent layer, and y is the distance between the upper side of the layer and the upper side of the parent layer.

7. An electronic device, wherein, comprises: One or more processors; A storage device, configured to store one or more programs, when the one or more programs are executed by the one or more processors, enabling the one or more processors to implement the method according to any one of claims 1 - 3.

8. A computer - readable medium, on which a computer program is stored, wherein, when the program is executed by a processor, it implements the method according to any one of claims 1 - 3.

Images