Interface layout file conversion method and device, equipment and medium
By using UI annotation graph information to generate and convert interface layout files, the problem of low efficiency in converting UI renderings into Android code in the existing technology is solved, and automatic conversion is achieved and efficiency is improved.
Patent Information
- Application Number
- CN202411834452.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-12
- Publication Date
- 2025-04-11
AI Technical Summary
In the prior art, UI renderings are converted into Android code by manually writing code, resulting in low conversion efficiency.
By obtaining the interface layout file generated in the first programming language, converting it into the interface layout file generated in the second programming language, using UI annotation graph information to generate the first interface layout file, and converting it into the second interface layout file of the second programming language required by the user.
The conversion of UI renderings can be achieved without manual code writing, improving the conversion efficiency of UI renderings into Android code.
Smart Images

Figure CN119806518A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of computer technology, and in particular, relates to a method, device, equipment and medium for converting an interface layout file. Background Art
[0002] With the continuous development of Android system, more and more devices are equipped with Android system, which leads to the development of a large number of Android applications (Application, APP), and the development of Android APP involves a lot of user interface (User interface, UI) development.
[0003] Based on this, in order to realize the user interface of Android APP, it is necessary to convert the UI renderings obtained by UI development into Android code to realize the corresponding user interface. However, in the prior art, the conversion of UI renderings into Android code is generally achieved by manually writing code, resulting in low conversion efficiency of UI renderings into Android code. Summary of the invention
[0004] The embodiments of the present application provide a method, device, equipment and medium for converting an interface layout file, which solves the problem of low conversion efficiency of converting UI renderings into Android code by manually writing code.
[0005] In a first aspect, an embodiment of the present application provides a method for converting an interface layout file, the method comprising:
[0006] Obtaining a first interface layout file, where the first interface layout file is generated in a first programming language based on user interface UI annotation diagram information;
[0007] The first interface layout file is converted into a second interface layout file, where the second interface layout file is generated based on a second programming language, and the first programming language and the second programming language are different programming languages.
[0008] In a second aspect, a device for converting an interface layout file is provided, the device comprising:
[0009] An acquisition module, used to acquire a first interface layout file, where the first interface layout file is generated in a first programming language based on user interface UI annotation diagram information;
[0010] The conversion module is used to convert the first interface layout file into a second interface layout file, the second interface layout file is generated based on a second programming language, and the first programming language and the second programming language are different programming languages.
[0011] In a third aspect, an electronic device is provided, comprising: a memory for storing computer program instructions; and a processor for reading and running the computer program instructions stored in the memory to execute the method for converting an interface layout file provided in any optional implementation manner in the first aspect.
[0012] In a fourth aspect, a computer storage medium is provided, on which computer program instructions are stored, and when the computer program instructions are executed by a processor, the method for converting an interface layout file provided by any optional implementation method in the first aspect is implemented.
[0013] In a fifth aspect, a computer program product is provided, the computer program product comprising a computer program, and when the computer program is executed by a processor, the method for converting an interface layout file provided by any optional implementation manner in the first aspect is implemented.
[0014] In an embodiment of the present application, it is possible to obtain a first interface layout file, which is generated in a first programming language based on user interface UI annotation diagram information, and then convert the first interface layout file into a second interface layout file, which is generated based on a second programming language, and the first programming language and the second programming language are different programming languages. In this way, the first interface layout file of the first programming language can be generated by using the UI annotation diagram information, and then converted to obtain the second interface layout file of the second programming language required by the user, without manually writing code to realize the conversion of UI renderings, thereby improving the conversion efficiency of UI renderings into Android code. BRIEF DESCRIPTION OF THE DRAWINGS
[0015] In order to more clearly illustrate the technical solution of the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.
[0016] Figure 1 This is one of the flow charts of a method for converting an interface layout file provided in an embodiment of the present application;
[0017] Figure 2 This is a second flow chart of a method for converting an interface layout file provided in an embodiment of the present application;
[0018] Figure 3 This is one of the interface schematic diagrams of a user interface provided in an embodiment of the present application;
[0019] Figure 4 This is a second interface schematic diagram of a user interface provided in an embodiment of the present application;
[0020] Figure 5 This is a third interface diagram of a user interface provided in an embodiment of the present application;
[0021] Figure 6 This is a fourth interface diagram of a user interface provided in an embodiment of the present application;
[0022] Figure 7 This is a flowchart of a method for converting an interface layout file provided in an embodiment of the present application;
[0023] Figure 8 It is a structural schematic diagram of a layout file conversion device provided in an embodiment of the present application.
[0024] Fig. 9 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0025] The features and exemplary embodiments of various aspects of the present application will be described in detail below. In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, rather than to limit the present application. For those skilled in the art, the present application can be implemented without the need for some of these specific details. The following description of the embodiments is only to provide a better understanding of the present application by illustrating the examples of the present application.
[0026] 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 statement "include..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.
[0027] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.
[0028] As described in the background technology, in order to realize the user interface of Android APP, it is necessary to convert the UI renderings obtained from UI development into Android code to realize the corresponding user interface. However, the existing technology can only convert them into JavaScript code based on the UI renderings, and cannot directly convert them into Android code based on the UI renderings. Therefore, the conversion of UI renderings into Android code is generally achieved by manually coding the code, resulting in low conversion efficiency of the UI renderings into Android code.
[0029] In response to the above problems, in the prior art, the UI design drawing can be uploaded to the Chat Generative Pre-trained Transformer (ChatGPT) to let ChatGPT output the corresponding Android code, but this method has the following problems: First, the results generated by GhatGPT generally cannot meet the actual business logic and require large-scale modification. Second, since the results generated by ChatGPT are different from the actual required results, but this difference has no rules to follow, it is difficult to modify according to the results of ChatGPT. It can only be used as a reference. The actual coding is still done manually, so the conversion efficiency is still low. Third, ChatGPT is not accurate in identifying the distance between controls. In actual coding, it is still necessary to check the actual distance between controls against the UI annotation diagram and make modifications, which is a large workload. Fourth, ChatGPT can only modify the results based on the language description, and some modifications are difficult to describe in words, resulting in low modification efficiency.
[0030] In order to solve the above problems, the embodiments of the present application provide a method, device, equipment and medium for converting an interface layout file, which can obtain a first interface layout file, which is generated in a first programming language based on user interface UI annotation diagram information, and then convert the first interface layout file into a second interface layout file, which is generated based on a second programming language, and the first programming language and the second programming language are different programming languages. In this way, the first interface layout file in the first programming language can be generated by using the UI annotation diagram information, and then converted to obtain the second interface layout file in the second programming language required by the user, without manually writing code to realize the conversion of UI renderings, thereby improving the conversion efficiency of UI renderings into Android code.
[0031] It should be noted that the method for converting an interface layout file provided in the embodiment of the present application can be executed by a device for converting an interface layout file, or a control module in the device for converting an interface layout file for executing the method for converting an interface layout file. In the embodiment of the present application, the method for converting an interface layout file provided in the embodiment of the present application is described by taking the method for converting an interface layout file executed by a device for converting an interface layout file as an example.
[0032] The following describes in detail the method for converting the interface layout file provided in the embodiment of the present application in conjunction with the accompanying drawings.
[0033] Figure 1 It is a flowchart of a method for converting an interface layout file provided in an embodiment of the present application.
[0034] like Figure 1 As shown, the execution subject of the method may be a device for converting the interface layout file. Based on this, the method may specifically include the following steps:
[0035] S110, obtaining a first interface layout file.
[0036] In some embodiments, the first interface layout file is generated in a first programming language based on the UI annotation diagram information, wherein the first programming language may be an interface layout development language for writing a user interface layout, for example, the first programming language may be JavaScript, which is not specifically limited here.
[0037] In addition, the UI annotation diagram refers to the detailed annotation of each view element in the user interface, such as size, color, spacing, etc., based on the UI rendering diagram. Correspondingly, the above-mentioned UI annotation diagram information may refer to relevant information in the user interface design, such as size, layout, color, font, etc., which is not specifically limited here.
[0038] To facilitate understanding of the method for converting interface layout files provided in an embodiment of the present application, it should be noted here that the interface layout file can be used to define the hierarchy of view elements in a user interface. One interface layout file corresponds to one user interface, and one user interface corresponds to multiple UI annotation diagram information, but one interface layout file is generated based on one UI annotation diagram information.
[0039] Based on this, in order to accurately and quickly obtain the first interface layout file, in one embodiment, the above S110 may specifically include the following steps:
[0040] Get multiple UI annotation information of the user interface;
[0041] A first interface layout file is generated based on the target UI annotation diagram information in a first programming language.
[0042] Among them, the above-mentioned target UI annotation diagram information can be determined based on multiple UI annotation diagram information. Specifically, the target UI annotation diagram information can be any one UI annotation diagram information selected from the above-mentioned multiple UI annotation diagram information based on actual needs. In addition, considering that the annotation information contained in each UI annotation diagram information may be different, in order to ensure the comprehensiveness and accuracy of the annotation information and avoid omission of annotation information, the above-mentioned target UI annotation diagram can also be generated based on at least two UI annotation diagram information among the above-mentioned multiple UI annotation diagram information. It should be noted that the embodiment of the present application does not specifically limit the specific method for determining the target UI annotation diagram information.
[0043] Specifically, the device for converting the interface layout file can obtain multiple UI annotation diagram information of the user interface, and generate a first interface layout file based on the target UI annotation diagram information in a first programming language. Since the target UI annotation diagram information can be generated based on the above-mentioned multiple UI annotation diagram information, the first interface layout file can be obtained accurately and quickly by obtaining more accurate and comprehensive UI annotation diagram information, so as to subsequently improve the efficiency of converting the UI rendering into Android code.
[0044] S120: Convert the first interface layout file into a second interface layout file.
[0045] In some embodiments, the second interface layout file may be generated based on a second programming language, which may be an interface layout development language for writing user interface layouts. Since the first programming language and the second programming language are different programming languages, the second programming language may be an interface layout development language other than the first programming language for writing user interface layouts. For example, the second programming language may be the Android xml language.
[0046] Specifically, after acquiring the first interface layout file, the interface layout file conversion device can convert the first interface layout file generated in the first programming language into the second interface layout file generated in the second programming language.
[0047] In an embodiment of the present application, it is possible to obtain a first interface layout file, which is generated in a first programming language based on user interface UI annotation diagram information, and then convert the first interface layout file into a second interface layout file, which is generated based on a second programming language, and the first programming language and the second programming language are different programming languages. In this way, the first interface layout file of the first programming language can be generated by using the UI annotation diagram information, and then converted to obtain the second interface layout file of the second programming language required by the user, without manually writing code to realize the conversion of UI renderings, thereby improving the conversion efficiency of UI renderings into Android code.
[0048] In order to accurately implement the conversion of the interface layout file, in one embodiment, Figure 2 As shown, the above S120 may specifically include the following steps:
[0049] S210: Determine view element information of multiple view elements in a first interface layout file.
[0050] In some embodiments, the first interface layout file may include multiple view elements, which may be buttons, sliders, input boxes, texts, images, and other related elements for display on the user interface. Accordingly, the view element information may refer to the type, color, size (width, height), font size, and other attributes of the view element, which are not specifically limited here. It should be noted that different view elements correspond to different view element information, which will not be described in detail here.
[0051] S220: Based on the view element information of the plurality of view elements, and in accordance with a preset layout file conversion template, convert the first interface layout file into a second interface layout file.
[0052] In some embodiments, the preset layout file conversion template may be generated in a second programming language. Based on this, since the preset layout file conversion template may include element configuration codes of multiple view elements, correspondingly, the element configuration code of each view element is written in the second programming language.
[0053] Specifically, the interface layout file conversion device can first determine the view element information of multiple view elements in the first interface layout file before converting the first interface layout file into the second interface layout file, and then based on the view element information of the multiple view elements, according to the element configuration codes of the multiple view elements in the preset layout file conversion template, convert the first interface layout file into the second interface layout file.
[0054] In this embodiment, by determining the view element information of multiple view elements in the first interface layout file and combining the element configuration codes of the multiple view elements in the preset layout file conversion template, the conversion of a first interface layout file generated in a first programming language to a second interface layout file in a second programming language can be accurately and quickly achieved. In this process, there is no need for manual code writing, and the second interface layout file in the second programming language required by the user can be quickly obtained.
[0055] In the above embodiment, it is necessary to determine the view element information of multiple view elements in the first interface layout file. In order to accurately determine the view element information of multiple view elements in the first interface layout file, in one embodiment, the above multiple view elements may include view elements of different levels, and the level of each view element may be determined based on the level distance of the view element from the root layout of the first interface layout file.
[0056] It should be noted that the interface layout file is a nested file. Specifically, the root layout refers to the top-level container of the entire interface layout file, that is, the root layout includes all view elements in the interface layout file, and the parent layout refers to the layout container of the interface layout file that contains view elements. In the interface layout file, the root layout can include one or more parent layouts, and each parent layout can also include its own child layout, which can also be the parent layout of the child view it contains. In this way, the above-mentioned hierarchical distance refers to the number of nested layers from the view element to the root layout. In an example, if the root layout of an interface layout file includes view element 1, layout A, layout B, layout A contains view element 2, layout B contains view element 3 and layout C, layout C contains view element 4. The hierarchical distance between the above-mentioned view element 1 and the root layout is 1, the hierarchical distance between the above-mentioned view element 2 and the root layout is 2, and the hierarchical distance between the above-mentioned view element 3 and the root layout is 3.
[0057] Based on this, the above S210 may specifically include the following steps:
[0058] Based on the hierarchy of each view element in the multiple view elements, the multiple view elements in the first interface layout file are traversed in a preset hierarchy order to obtain view element information of each view element in the multiple view elements.
[0059] The preset hierarchical order may be pre-set based on actual experience or circumstances. For example, the preset hierarchical order may be from large to small levels, or from small to large levels, and no specific limitation is made herein.
[0060] Specifically, since multiple view elements may include view elements of different levels, based on this, the device for converting the interface layout file can traverse the multiple view elements in the first interface layout file in a preset hierarchical order based on the level of each view element in the multiple view elements to obtain view element information of each view element in the multiple view elements.
[0061] In this embodiment, the view element information of each view element in multiple view elements can be obtained by traversal. In this process, the hierarchy between the view elements is erased, which improves the efficiency of converting UI renderings to Android code. In addition, the view element information is obtained based on the first interface layout file, ensuring the accuracy of the generated second interface layout file.
[0062] Based on this, in one embodiment, the view element information of each view element may include the position of the view element relative to the root layout of the first interface layout file. In addition, the first interface layout file may also include the relative position relationship between the root layout and multiple parent layouts. Based on this, the step of traversing the multiple view elements in the first interface layout file in a preset hierarchical order based on the hierarchy of each view element in the multiple view elements to obtain the position of each view element relative to the parent layout of the view element may specifically include the following steps:
[0063] Based on the hierarchy of each view element in the multiple view elements, traverse the multiple view elements in the first interface layout file in a preset hierarchy order to obtain a position of each view element relative to a parent layout of the view element;
[0064] For each view element, the position of the view element relative to the root layout of the first interface layout file is determined based on the position of the view element relative to the parent layout of the view element and the relative positional relationship between the root layout and multiple parent layouts.
[0065] Specifically, since the view element information of each of the above-mentioned view elements may include the position of the view element relative to the root layout of the first interface layout file, the interface layout file conversion device can, based on the hierarchy of each view element in the multiple view elements, traverse the multiple view elements in the first interface layout file in a preset hierarchical order to obtain the position of each view element relative to the parent layout of the view element, and then, for each view element, based on the position of the view element relative to the parent layout of the view element and the relative positional relationship between the root layout in the first interface layout file and the multiple parent layouts, determine the position of the view element relative to the root layout of the first interface layout file.
[0066] In this embodiment, by converting the position of each view element relative to the parent layout of the view element into the position of the view element relative to the root layout, the positions of each view element can be converted to the same coordinate system, thereby improving the accuracy of the obtained view element information.
[0067] In addition, after obtaining the view element information of the view element, it is necessary to generate a layout file in a second programming language based on the view element information of the view element. Based on this, in order to accurately obtain the layout file in the second programming language, in some embodiments, the view element information of each view element may include multiple element attributes, and the multiple element attributes may include element types. Based on this, the above-mentioned preset layout file conversion template may include sub-templates corresponding to multiple element types, each sub-template includes multiple configuration code data, and the multiple configuration code data may be configuration code data corresponding to multiple attributes, and the multiple attributes include the above-mentioned multiple element attributes.
[0068] Based on this, the above step of converting the first interface layout file into the second interface layout file based on the view element information of multiple view elements according to the preset layout file conversion template may specifically include:
[0069] For each view element in the plurality of view elements, determining a target sub-template matching the element type of the view element from a preset layout file conversion template;
[0070] Generate code data of the view element based on multiple element attributes of the view element and multiple configuration code data in the target sub-template;
[0071] A second interface layout file is generated based on the code data of each view element in the plurality of view elements.
[0072] Specifically, since the preset layout file conversion template may include sub-templates corresponding to multiple element types, the interface layout file conversion device can determine, for each view element in the multiple view elements, a target sub-template that matches the element type of the view element from the preset layout file conversion template. Since the target sub-template may include multiple configuration code data, the multiple configuration code data are configuration code data corresponding to multiple attributes, and the multiple attributes may include the above-mentioned multiple element attributes. In this way, the interface layout file conversion device can generate code data corresponding to the view element based on the multiple element attributes of the view element and the multiple configuration code data in the target sub-template, and then can generate the second interface layout file based on the code data of the multiple view elements.
[0073] In this embodiment, for each view element, code data of the view element can be generated based on multiple configuration code data corresponding to the view element and multiple element attributes of the view element, and then a second interface layout file containing the code data of all view elements can be obtained. In this way, there is no need to manually write code, which improves the efficiency of converting UI renderings to Android code.
[0074] In order to fully and in detail describe the device for converting the interface layout file provided in the embodiment of the present application, in one embodiment, the device for converting the interface layout file provided in the embodiment of the present application may specifically include:
[0075] By running the second interface layout file, the interface is switched to the user interface corresponding to the second interface layout file;
[0076] In response to user input to the user interface, the second interface layout file is updated.
[0077] Among them, the above-mentioned interface may refer to the currently displayed interface, and the above-mentioned user interface may be a related interface displayed based on the interface layout written in the second interface layout file.
[0078] In addition, the above input may be a click input, a touch input, a box selection input, a long press input, etc. on the user interface, and is not specifically limited here.
[0079] Specifically, the interface layout file conversion device can, after converting the first interface layout file into the second interface layout file, switch the interface to the user interface corresponding to the second interface layout file by running the second interface layout file, and then can receive and respond to the user's input to the user interface, and update the second interface layout file corresponding to the user interface.
[0080] In this embodiment, the second interface layout file can be updated by responding to the user input to the user interface displayed based on the second interface layout file. In this way, the code data of the user interface can be changed through visual operation of the user interface, which improves the convenience of modifying the code data.
[0081] Based on this, in one embodiment, the user interface may include multiple view elements. Based on this, the step of updating the second interface layout file in response to the user's first input to the first view element may specifically include:
[0082] In response to a first input of the user to the first view element, code data of the first view element in the second interface layout file is updated.
[0083] The first view element may be any one of a plurality of view elements included in the user interface. In addition, the first input may be a click input, a long press input, etc. for the first view element, which is not specifically limited here.
[0084] Specifically, after the interface is switched to the user interface corresponding to the second interface layout file by running the second interface layout file, the interface layout file conversion device can receive the user's first input to the first view element, and in response to the first input, update the code data of the first view element in the second interface layout file.
[0085] In one example, if Figure 3 As shown, the user interface 30 may include view element 1, view element 2, view element 3, and view element 4. When the user clicks on the view element 1, as shown in FIG. Figure 4 As shown, a window 31 will be displayed, which may include multiple element attributes corresponding to the view element 1, namely element attribute 1, element attribute 2, element attribute 3 and element attribute 4. When the user clicks on element attribute 1, element attribute 2, element attribute 3 and element attribute 4 to modify any of element attributes 1, element attribute 2, element attribute 3 and element attribute 4, the layout file conversion device can modify the corresponding code data in the second interface layout file accordingly.
[0086] In this embodiment, the second interface layout file can be updated by responding to the user's interface input to the view element. In this way, the code data of the user interface can be changed through visual operation of the user interface, which improves the convenience of modifying the code data.
[0087] In another embodiment, the user interface may include multiple view elements. Based on this, the step of updating the second interface layout file in response to the user input to the user interface may specifically include:
[0088] In response to a second input of the user to the second view element, an association relationship between at least two view elements is constructed in the second interface layout file.
[0089] The second view element may include at least two view elements among the plurality of view elements. Based on this, the second input may be a selection input, a click input, etc. for the at least two view elements, which is not specifically limited here.
[0090] Specifically, after running the second interface layout file to switch the interface to the user interface corresponding to the second interface layout file, the user interface may include multiple view elements, and the device for converting the interface layout file may receive the user's second input for the second view element. Since the second view element may include at least two view elements out of the multiple view elements, the device for converting the interface layout file can construct an association relationship between at least two view elements in the second interface layout file in response to the second input.
[0091] In one example, continuing Figure 3 As shown, when the user selects view element 1 and view element 2 in the box, the interface layout file conversion device can construct the association relationship between the at least two view elements in the second interface layout file. In this way, when the user deletes view element 1, view element 2 will automatically fill in the position of view element 1, and no other elements will be displayed at the original position of view element 2. Specifically, it can be as follows Figure 5 shown.
[0092] In this embodiment, by responding to the user's input on the at least two view elements, an association relationship between the at least two view elements can be constructed in the second interface layout file. In this way, the code data of the user interface can be changed through visual operations on the user interface, which improves the convenience of modifying the code data.
[0093] In yet another embodiment, the user interface may include multiple view elements. Based on this, the step of updating the second interface layout file in response to the user input to the user interface may specifically include:
[0094] In response to the user's third input to the third view element, the third view element is updated to a fourth view element, and in the second interface layout file, the code data of the third view element is updated to the code data of the fourth view element.
[0095] The third view element is any one of the plurality of view elements. In addition, the third input may be a click input, a touch input, etc. of the third view element, which is not specifically limited here.
[0096] Specifically, after running the second interface layout file to switch the interface to the user interface corresponding to the second interface layout file, the device for converting the interface layout file can receive a third input from the user to a third view element, and in response to the third input, update the third view element to a fourth view element, and in the second interface layout file, update the code data of the third view element to the code data of the fourth view element.
[0097] In one example, continuing Figure 3As shown, when the user long presses the view element 3, the layout file conversion device can respond to the user's long press input by inserting the XML file of the view element 5, so that the view element 3 is changed to the view element 5, as shown in FIG. Figure 6 And the code data of view element 3 and the code data of view element 5 can be updated in the second interface layout file.
[0098] In this embodiment, in response to the user's interface input to any view element, the view element can be updated to another view element, and the corresponding code data can be updated in the second interface layout file. In this way, the code data of the user interface can be changed through visual operations on the user interface, which improves the convenience of modifying the code data.
[0099] In addition, in one embodiment, the user interface may include multiple view elements and export controls, each view element includes multiple element attributes, based on which, the step of updating the second interface layout file in response to the user input to the user interface may specifically include the following steps:
[0100] In response to a fourth input of the user to the export control, for each element attribute, extracting code data of the element attribute from code data of the plurality of view elements respectively;
[0101] Save the code data of the element attributes to the target folder corresponding to the element attributes.
[0102] The fourth input may refer to a click input, a long press input, etc. of the export control, which is not specifically limited here. The target element attribute may be any one of the multiple element attributes.
[0103] Specifically, when the user interface includes multiple view elements and each view element includes multiple element attributes, the device for converting the interface layout file can respond to the user's input to the export control, and for each element attribute, extract the code data of the element attribute from the code data of multiple view elements respectively, and then save the code data of the element attribute to the target folder corresponding to the element attribute.
[0104] In this embodiment, the code data of the same element attributes in multiple view elements can be stored in the same file, so that the code data of the same element attributes can be adjusted later, thereby improving the convenience of code modification.
[0105] In order to fully describe the method for converting the interface layout file provided in the embodiment of the present application, in one embodiment, the method for converting the layout file provided in the embodiment of the present application is as follows: Figure 7 As shown, the following steps may be specifically included:
[0106] S710, obtaining a first interface layout file.
[0107] S720: Determine view element information of multiple view elements in the first interface layout file.
[0108] S730: For each view element among the multiple view elements, determine a target sub-template that matches the element type of the view element from a preset layout file conversion template.
[0109] S740, generating code data of the view element based on multiple element attributes of the view element and multiple configuration code data in the target sub-template.
[0110] S750, generating a second interface layout file based on the code data of each view element in the plurality of view elements.
[0111] S760: Switch the interface to a user interface corresponding to the second interface layout file by running the second interface layout file.
[0112] S770: In response to user input to the user interface, update the second interface layout file.
[0113] Specifically, it is possible to obtain a first interface layout file and determine view element information of multiple view elements in the first interface layout file, and then, for each view element in the multiple view elements, determine a target sub-template that matches the element type of the view element from a preset layout file conversion template, and then, based on multiple element attributes of the view element and multiple configuration code data in the target sub-template, generate code data for the view element, and then, based on the code data of each view element in the multiple view elements, generate a second interface layout file.
[0114] It should be noted that, in the case where the device for converting the interface layout file provided in the embodiment of the present application is a vehicle, if the vehicle is equipped with an Android system, correspondingly, the application deployed on the vehicle should also be an Android application.
[0115] Taking the login interface of the navigation application on the vehicle as an example, the vehicle can first obtain the first interface layout file of the interface layout of the above login interface written in the first programming language, and determine the view element information of multiple view elements in the first layout file. For example, if the view element is a "login" control, the corresponding view element information can be the color, size, etc. of the "login" control; if the view element is a "password" input box, the corresponding view element information can be the font size, size, etc. of the "password" input box. In this way, after determining the view element information of multiple view elements in the first layout file, the vehicle can determine the target sub-template corresponding to the element type of the view element from the preset layout file conversion template for each view element. For example, for the above-mentioned "Login" control, whose type is "Button" type, the target sub-template corresponding to the "Button" type can be obtained from the preset layout file conversion template. The target sub-template may include multiple configuration code data, and the multiple configuration code data may include color configuration code data, font size configuration code data, size configuration code data, etc. If the first interface layout file only limits the color and size of the "Login" control, the code data of the "Login" control can be obtained based on the two element attributes of the color and size of the "Login" control, and the color configuration code data and size configuration code data contained in the target sub-template. By analogy, the code data of each view element of all view elements in the above-mentioned login interface can be obtained, and then based on the code data of each view element of all view elements in the above-mentioned login interface, a second interface layout file for writing the interface layout of the above-mentioned login interface in a second programming language can be generated. Furthermore, by running the second interface layout file, the currently displayed interface can be switched to the user interface corresponding to the second interface layout file, that is, the login interface of the above-mentioned navigation application, and then the second interface layout file corresponding to the login interface can be updated by receiving and responding to the user's input to the login interface.
[0116] In this way, there is no need to manually write code to realize the conversion of UI renderings, thereby improving the conversion efficiency of UI renderings into Android code. In addition, the second interface layout file can be run to display the user interface, and the corresponding second interface layout file can be updated in response to the user's visual operation of the user interface, thereby improving the convenience of code modification.
[0117] Based on the same inventive concept, the present application embodiment also provides a device for converting an interface layout file, which can be specifically combined with Figure 8 The device for converting the interface layout file provided in the embodiment of the present application is described in detail.
[0118] Figure 8It is a structural schematic diagram of a device for converting an interface layout file provided in an embodiment of the present application.
[0119] like Figure 8 As shown, the interface layout file conversion device 800 may include:
[0120] An acquisition module 810 is used to acquire a first interface layout file, where the first interface layout file is generated in a first programming language based on user interface UI annotation diagram information;
[0121] The conversion module 820 is used to convert the first interface layout file into a second interface layout file, where the second interface layout file is generated based on a second programming language, and the first programming language and the second programming language are different programming languages.
[0122] In one embodiment, the device for converting the interface layout file provided in the embodiment of the present application may further include:
[0123] A determination module, used to determine view element information of multiple view elements in the first interface layout file;
[0124] The above-mentioned conversion module is specifically used to convert the first interface layout file into the second interface layout file based on the view element information of multiple view elements according to the preset layout file conversion template. The preset layout file conversion template is generated based on the second programming language, and the preset layout file conversion template includes element configuration codes of multiple view elements.
[0125] In one embodiment, the plurality of view elements include view elements of different levels, and the level of each view element is determined based on a level distance of the view element from a root layout of the first interface layout file;
[0126] The above-mentioned determination module is specifically used to traverse the multiple view elements in the first interface layout file in a preset hierarchical order based on the hierarchy of each view element in the multiple view elements, and obtain the view element information of each view element in the multiple view elements.
[0127] In one embodiment, the view element information of each view element includes a position of the view element relative to a root layout of the first interface layout file, and the first interface layout file also includes a relative position relationship between the root layout and a plurality of parent layouts;
[0128] Based on this, the above determination module is specifically used for:
[0129] Based on the hierarchy of each view element in the multiple view elements, traverse the multiple view elements in the first interface layout file in a preset hierarchy order to obtain a position of each view element relative to a parent layout of the view element;
[0130] For each view element, the position of the view element relative to the root layout of the first interface layout file is determined based on the position of the view element relative to the parent layout of the view element and the relative positional relationship between the root layout and multiple parent layouts.
[0131] In one embodiment, the view element information of each view element includes a plurality of element attributes, the plurality of element attributes include an element type, the preset layout file conversion template includes sub-templates corresponding to the plurality of element types, each sub-template includes a plurality of configuration code data;
[0132] Based on this, the above conversion module is specifically used for:
[0133] For each view element in the plurality of view elements, determining a target sub-template matching the element type of the view element from a preset layout file conversion template;
[0134] Generate code data of the view element based on multiple element attributes of the view element and multiple configuration code data in the target sub-template;
[0135] A second interface layout file is generated based on the code data of each view element in the plurality of view elements.
[0136] In one embodiment, the device for converting the interface layout file provided in the embodiment of the present application may further include:
[0137] A display module, used to switch the interface to a user interface corresponding to the second interface layout file by running the second interface layout file;
[0138] The updating module is used to update the second interface layout file in response to the user input to the user interface.
[0139] In one embodiment, the user interface includes a plurality of view elements;
[0140] Based on this, the above-mentioned update module is specifically used to update the code data of the first view element in the second interface layout file in response to the first input of the user to the first view element, and the first view element is any one of the multiple view elements. Or,
[0141] The updating module is specifically used to respond to the second input of the user to the second view element, the second view element includes at least two view elements in the plurality of view elements, and to establish an association relationship between the at least two view elements in the second interface layout file. Or,
[0142] The above-mentioned update module is specifically used to update the third view element to a fourth view element in response to the user's third input to the third view element, and to update the code data of the third view element to the code data of the fourth view element in the second interface layout file, where the third view element is any one of multiple view elements.
[0143] In an embodiment of the present application, it is possible to obtain a first interface layout file, which is generated in a first programming language based on user interface UI annotation diagram information, and then convert the first interface layout file into a second interface layout file, which is generated based on a second programming language, and the first programming language and the second programming language are different programming languages. In this way, the first interface layout file of the first programming language can be generated by using the UI annotation diagram information, and then converted to obtain the second interface layout file of the second programming language required by the user, without manually writing code to realize the conversion of UI renderings, thereby improving the conversion efficiency of UI renderings into Android code.
[0144] Each template in the device for converting the interface layout file provided in the embodiment of the present application can be implemented Figure 1 , Figures 2 to 7 The method steps of any of the embodiments shown in the figure can achieve the corresponding technical effects, which will not be described in detail here for the sake of brevity.
[0145] The device for converting the interface layout file in the embodiment of the present application can be an electronic device, or a component in the electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal, or it can be other devices other than the terminal. Exemplarily, the electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, a car electronic device, a mobile Internet device (Mobile Internet Device, MID), an augmented reality (augmented reality, AR) / virtual reality (virtual reality, VR) device, a robot, a wearable device, an ultra-mobile personal computer (ultra-mobile personal computer, UMPC), a netbook or a personal digital assistant (personal digital assistant, PDA), etc., and can also be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (personal computer, PC), a television (television, TV), a teller machine or a self-service machine, etc., which is not specifically limited in the embodiment of the present application.
[0146] Fig. 9 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application is shown.
[0147] The electronic device may include a processor 901 and a memory 902 storing computer program instructions.
[0148] Specifically, the processor 901 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.
[0149] The memory 902 may include a large capacity memory for data or instructions. By way of example and not limitation, the memory 902 may include a hard disk drive (HDD), a floppy disk drive, a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive or a combination of two or more of these. In appropriate cases, the memory 902 may include a removable or non-removable (or fixed) medium. In appropriate cases, the memory 902 may be inside or outside the electronic device. In a particular embodiment, the memory 902 is a non-volatile solid-state memory.
[0150] The memory may include read-only memory (ROM), random access memory (RAM), magnetic disk storage media devices, optical storage media devices, flash memory devices, electrical, optical or other physical / tangible memory storage devices. Thus, typically, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., memory devices) encoded with software including computer-executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the method according to an aspect of the present disclosure.
[0151] The processor 901 implements any one of the methods for converting the interface layout file in the above embodiments by reading and executing the computer program instructions stored in the memory 902 .
[0152] In one example, the electronic device may further include a communication interface 903 and a bus 910. Fig. 9 As shown, the processor 901, the memory 902, and the communication interface 903 are connected via a bus 910 and communicate with each other.
[0153] The communication interface 903 is mainly used to implement communication between various modules, devices, units and / or equipment in the embodiments of the present application.
[0154] Bus 910 includes hardware, software or both, and the parts of electronic equipment are coupled to each other.For example, but not limitation, bus may include accelerated graphics port (AGP) or other graphics bus, enhanced industrial standard architecture (EISA) bus, front side bus (FSB), hypertransport (HT) interconnection, industrial standard architecture (ISA) bus, infinite bandwidth interconnection, low pin count (LPC) bus, memory bus, micro channel architecture (MCA) bus, peripheral component interconnection (PCI) bus, PCI-Express (PCI-X) bus, serial advanced technology attachment (SATA) bus, video electronics standard association local (VLB) bus or other suitable bus or two or more of these combinations. In appropriate cases, bus 910 may include one or more buses. Although the present application embodiment describes and shows a specific bus, the application considers any suitable bus or interconnection.
[0155] In addition, in combination with the interface layout file conversion method in the above embodiment, the embodiment of the present application can provide a computer storage medium to implement. The computer storage medium stores computer program instructions; when the computer program instructions are executed by the processor, the interface layout file conversion method provided in the embodiment of the present application is implemented.
[0156] The embodiment of the present application also provides a computer program product, which includes a computer program, and the computer program is executed by a processor to implement the method for converting an interface layout file as provided in the embodiment of the present application.
[0157] It should be clear that the present application is not limited to the specific configuration and processing described above and shown in the figures. For the sake of simplicity, a detailed description of the known method is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between the steps after understanding the spirit of the present application.
[0158] It should also be noted that the exemplary embodiments mentioned in this application describe some methods or systems based on a series of steps or devices. However, this application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiment, or in a different order from the embodiment, or several steps can be performed simultaneously.
[0159] The above are only specific implementation methods of the present application. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here. It should be understood that the protection scope of the present application is not limited to this. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in this application, and these modifications or replacements should be included in the protection scope of this application.
Claims
1. A method for converting an interface layout file, characterized in that: The method comprises: Acquire a first interface layout file, where the first interface layout file is generated in a first programming language based on user interface UI annotation diagram information; The first interface layout file is converted into a second interface layout file, where the second interface layout file is generated based on a second programming language, and the first programming language and the second programming language are different programming languages.
2. The method according to claim 1, characterized in that: The converting the first interface layout file into a second interface layout file includes: Determining view element information of a plurality of view elements in the first interface layout file; Based on the view element information of the multiple view elements, the first interface layout file is converted into a second interface layout file according to a preset layout file conversion template, the preset layout file conversion template is generated based on the second programming language, and the preset layout file conversion template includes element configuration codes of the multiple view elements.
3. The method according to claim 2, characterized in that The multiple view elements include view elements of different levels, and the level of each of the view elements is determined based on the level distance between the view element and the root layout of the first interface layout file; The determining the view element information of the plurality of view elements in the first interface layout file includes: Based on the hierarchy of each view element in the multiple view elements, the multiple view elements in the first interface layout file are traversed in a preset hierarchy order to obtain view element information of each view element in the multiple view elements.
4. The method according to claim 3, characterized in that The view element information of each view element includes the position of the view element relative to the root layout of the first interface layout file, and the first interface layout file also includes the relative position relationship between the root layout and multiple parent layouts respectively; The step of traversing the plurality of view elements in the first interface layout file in a preset hierarchy order based on the hierarchy of each view element in the plurality of view elements to obtain view element information of each view element in the plurality of view elements includes: Based on the hierarchy of each view element in the multiple view elements, traverse the multiple view elements in the first interface layout file in a preset hierarchy order to obtain a position of each view element relative to a parent layout of the view element; For each of the view elements, the position of the view element relative to the root layout of the first interface layout file is determined based on the position of the view element relative to the parent layout of the view element and the relative positional relationship between the root layout and multiple parent layouts.
5. The method according to any one of claims 2 to 4, characterized in that: The view element information of each of the view elements includes a plurality of element attributes, the plurality of element attributes include an element type, the preset layout file conversion template includes sub-templates corresponding to the plurality of element types, each of the sub-templates includes a plurality of configuration code data; The converting the first interface layout file into the second interface layout file based on the view element information of the plurality of view elements according to a preset layout file conversion template includes: For each view element in the plurality of view elements, determining a target sub-template matching an element type of the view element from the preset layout file conversion template; Generate code data of the view element based on multiple element attributes of the view element and multiple configuration code data in the target sub-template; The second interface layout file is generated based on the code data of each view element in the multiple view elements.
6. The method according to any one of claims 1 to 5, characterized in that: After converting the first interface layout file into a second interface layout file, the method further includes: By running the second interface layout file, the interface is switched to a user interface corresponding to the second interface layout file; In response to user input to the user interface, the second interface layout file is updated.
7. The method according to claim 6, characterized in that The user interface includes a plurality of view elements; The updating of the second interface layout file in response to the user input to the user interface includes: In response to a first input of a user to a first view element, updating code data of the first view element in the second interface layout file, the first view element being any one of the plurality of view elements; or, The updating of the second interface layout file in response to the user input to the user interface includes: In response to a second input of the user to a second view element, the second view element includes at least two view elements of the plurality of view elements, and an association relationship between the at least two view elements is constructed in the second interface layout file; or, The updating of the second interface layout file in response to the user input to the user interface includes: In response to the user's third input to the third view element, the third view element is updated to a fourth view element, and in the second interface layout file, the code data of the third view element is updated to the code data of the fourth view element, and the third view element is any one of the multiple view elements.
8. A device for converting an interface layout file, characterized in that: The device comprises: An acquisition module, used to acquire a first interface layout file, wherein the first interface layout file is generated in a first programming language based on user interface UI annotation diagram information; The conversion module is used to convert the first interface layout file into a second interface layout file, where the second interface layout file is generated based on a second programming language, and the first programming language and the second programming language are different programming languages.
9. An electronic device, characterized in that: The device comprises: a processor and a memory storing computer program instructions; The processor reads and executes the computer program instructions to implement the method for converting an interface layout file as described in any one of claims 1-7.
10. A computer storage medium, characterized in that: The computer storage medium stores computer program instructions, and when the computer program instructions are executed by the processor, the method for converting the interface layout file according to any one of claims 1 to 7 is implemented.