Method for checking layout modification effect in real time based on Layout Inspector

Abstract

The invention belongs to the technical field of Android Studio plug-ins, and discloses a method for checking a layout modification effect in real time based on Layout Inspector, and the method is based on the specific workflow of an Android Studio plug-in and comprises the following steps: S1, establishing communication: an Android Studio end communicates with a mobile phone App end; s2, information is obtained, and the Android Studio end obtains the UI information of the obtained interface; and S3, complete control is carried out, and the control of the Android Studio end on the mobile phone App is realized. Through the function of checking the layout modification effect in real time, a developer can directly carry out the design that what you see is what you get in the IDE, can quickly try different layout schemes, change colors or fonts and the like, and does not need to worry that the changes immediately influence compiling and running of the whole application program; the instant feedback mechanism enables a developer to concentrate on details of an interface and user experience, so that an optimal design scheme is rapidly iterated, and the method can check a layout modification effect in real time under the condition of not recompiling and running an application program, so that the development efficiency is improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of Android Studio plug-ins, and specifically is a method for viewing layout modification effects in real time based on Layout Inspector. Background Art

[0002] In the development of Android clients, the parameters of some interface controls are often modified. At the same time, some controls are dynamically added through code. Many effects can only be seen when the mobile phone is running. When the effect is not ideal, continue to modify, compile, and run to see the effect. Prior art 1: The Run function of Android Studio allows developers to compile code, build APK, and install it on the selected target device (emulator or real device), which significantly increases the time cost. After modifying the code, it is necessary to wait for the entire compilation and deployment process to be completed before the modification effect can be seen, which is inefficient. In order to improve efficiency, a solution that can view the modification effect in real time is required; Prior art 2: The Instant Run mechanism introduced in Android Studio 2.3 and later versions is designed to improve the compilation and running speed. By directly applying code modifications without restarting the application, although it can be significantly accelerated in most cases, for certain types of modifications (such as manifest file modifications and system control modifications), Instant Run still requires a complete compilation and deployment process, which is inefficient. The efficiency and effect of Instant Run may vary depending on the type and complexity of the code modification, and there is uncertainty. In some cases, Instant Run may cause runtime errors or inconsistent behavior because it does not always perform a complete compilation process.

[0003] This solution is a plug-in implemented based on the Android Studio development environment. The plug-in can view the modification effects in real time, helping developers and designers to view the modification effects in time, greatly improving the efficiency of the image work. Summary of the invention

[0004] The purpose of the present invention is to provide a method for viewing layout modification effects in real time based on Layout Inspector, so as to solve the problems raised in the above background technology.

[0005] In order to achieve the above object, the present invention provides the following technical solution: a method for viewing layout modification effects in real time based on Layout Inspector, the specific workflow of the method based on the Android Studio plug-in is:

[0006] S1, establish communication between Android Studio and mobile App;

[0007] S2, obtain information, Android Studio obtains the UI information;

[0008] S3, full control, realizes the control of mobile app from Android Studio;

[0009] S4, Edit, perform visual editing;

[0010] S5, synchronize information. Android Studio synchronizes the edited information to the mobile app.

[0011] S6,display,real-time rendering display.

[0012] Preferably, the specific operation process of the method based on the Android Studio plug-in is:

[0013] A1. Install the plug-in in Android Studio. After opening the plug-in, an interface for selecting the running App process will pop up first;

[0014] A2, after selecting a process, will execute a task in the background, which is to obtain the currently active ClientWindow;

[0015] A3, after Window selection, another task will be executed in the background to obtain the required information and store it for rendering;

[0016] A4, randomly select a control in the plug-in rendering interface and double-click it;

[0017] A5, after confirming the changeable items, the modification information will be sent to the App and the modification effect will be rendered.

[0018] Preferably, the specific operation process of A1 is as follows: when the plug-in is started, a friendly user interface will pop up first to guide the user to select an Android application process that is currently running or about to run. This interface lists the application processes on all available devices and simulators, and the user needs to select a target application process from them. This is done to ensure that the plug-in can connect to the correct application and obtain its real-time layout information.

[0019] Preferably, the acquisition process of A2 is as follows: once the user selects the application process, the plug-in will start a task in the background, which communicates with the device through Android Debug Bridge (ADB) or other debugging interfaces to obtain the active window (ClientWindow) in the current application interface. This process may take some time because it needs to wait for the application to load and the interface rendering to be stable. After obtaining the ClientWindow, the plug-in will be able to access the view hierarchy and layout information of the window.

[0020] Preferably, the specific task content of A3 is: to obtain the ViewHierarchy and ViewProperties that need to be displayed, all of which are stored in binary information in li files, and the FileEditor in the Layout Inspector will parse these li files and render the view of the app interface into the plug-in.

[0021] Preferably, the specific operation process of A4 is as follows: after double-clicking, all information of the control will appear. After finding the property to be changed, the changeable items of the property will pop up according to the property type. The plug-in will highlight the control and provide an editing panel to allow the user to modify the properties of the control (color, size, margin).

[0022] Preferably, the SDK on the App side in A5 will respond, and after the SDK responds, the App interface will be refreshed. When the user completes the modification of the control properties and clicks to confirm, the plug-in will package the modification information into a specific format and send it to the SDK on the application side through ADB or other communication mechanisms. After receiving this information, the SDK on the application side will parse it and apply it to the corresponding control.

[0023] Preferably, the method is based on that when an Android Studio plug-in is installed in Layout Inspector, once the LayoutInspector layout is modified and applied, the application interface will be refreshed immediately to show the modified effect. At the same time, the rendering interface of the plug-in will also be updated synchronously to reflect the latest layout status.

[0024] The beneficial effects of the present invention are as follows:

[0025] 1. The present invention enables developers to perform “what you see is what you get” design directly in the IDE by enabling the function of viewing the layout modification effect in real time. They can quickly try different layout schemes, adjust the position and size of controls, change colors or fonts, etc., without having to worry that these changes will immediately affect the compilation and operation of the entire application. This instant feedback mechanism allows developers to focus more on the details of the interface and the user experience, thereby quickly iterating the optimal design scheme. This method can view the layout modification effect in real time without recompiling and running the application, thereby improving development efficiency.

[0026] 2. The present invention uses the Layout Inspector tool, so that developers can directly operate layout elements on the graphical interface and change their property values ​​through the property editor. This intuitive operation mode not only reduces the need to write code, but also reduces the error rate caused by manual input errors. In addition, the Layout Inspector usually provides rich property editing options and visualization tools (such as color selectors, size adjusters, etc.), making the modification of property values ​​easier and more intuitive, avoiding the tedious manual code writing process.

[0027] 3. The present invention also promotes team collaboration and version control by directly modifying the attribute values ​​of layout elements. In multi-person collaborative projects, designers and developers can more easily share and discuss layout adjustment plans without worrying about code merging or conflicts. At the same time, since all modifications are made on the graphical interface, these changes can be more easily tracked and recorded, thereby ensuring the maintainability and traceability of the project. This intuitive development method not only improves development efficiency, but also reduces rework costs caused by errors. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] Figure 1 It is the work flow chart of the present invention. DETAILED DESCRIPTION

[0029] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0030] like Figure 1 As shown, an embodiment of the present invention provides a method for viewing layout modification effects in real time based on Layout Inspector. The specific workflow of the method based on the Android Studio plug-in is as follows:

[0031] S1, establish communication between Android Studio and mobile App;

[0032] S2, obtain information, Android Studio obtains the UI information;

[0033] S3, full control, realizes the control of mobile app from Android Studio;

[0034] S4, Edit, perform visual editing;

[0035] S5, synchronize information. Android Studio synchronizes the edited information to the mobile app.

[0036] S6,display,real-time rendering display.

[0037] Among them, the specific operation process of this method based on the Android Studio plug-in is:

[0038] A1. Install the plug-in in Android Studio. After opening the plug-in, an interface for selecting the running App process will pop up first;

[0039] A2, after selecting a process, will execute a task in the background, which is to obtain the currently active ClientWindow;

[0040] A3, after Window selection, another task will be executed in the background to obtain the required information and store it for rendering;

[0041] A4, randomly select a control in the plug-in rendering interface and double-click it;

[0042] A5, after confirming the changeable items, the modification information will be sent to the App and the modification effect will be rendered.

[0043] The specific operation process of A1 is as follows: when the plug-in is started, a friendly user interface will pop up first, guiding the user to select the Android application process that is currently running or about to run. This interface lists the application processes on all available devices and simulators, and the user needs to select a target application process from them. This is done to ensure that the plug-in can connect to the correct application and obtain its real-time layout information. The interface layout is clear and usually includes a title bar, description text, device / simulator list, and application process list. The title bar clearly identifies the name of the plug-in and the current operation (such as "Select the target application process"), and the description text briefly introduces the importance of selecting the process and how to operate it.

[0044] Among them, the acquisition process of A2 is: once the user selects the application process, the plug-in will start a task in the background, which communicates with the device through Android Debug Bridge (ADB) or other debugging interfaces to obtain the active window (ClientWindow) in the current application interface. This process may take some time because it needs to wait for the application to load and the interface rendering to be stable. After obtaining the ClientWindow, the plug-in will be able to access the view hierarchy and layout information of the window. After receiving the query request, it will process the request and return a response containing the ClientWindow information. The response contains the window's view hierarchy, control layout information (such as position, size, attributes, etc.) and other related data. The plug-in task will receive these response data and parse them for subsequent use.

[0045] Among them, the specific task content of A3 is: to obtain the View Hierarchy and ViewProperties that need to be displayed. All this information is stored in the li file in binary form. The FileEditor in the Layout Inspector will parse these li files and render the view of the app interface into the plug-in. This step is the key link in the real-time viewing method of layout modification effects, because it involves extracting complex UI layout information from the device side and preparing it for parsing and rendering in the Android Studio plug-in.

[0046] The specific operation process of A4 is as follows: after double-clicking, all the information of the control will appear. After finding the property to be changed, the changeable items of the property will pop up according to the property type. The plug-in will highlight the control and provide an editing panel to allow users to modify the properties of the control (color, size, margin). When users modify the control properties, the plug-in will apply these changes to the real-time preview area of ​​the application interface in real time, which means that users can immediately see the modified layout effect without recompiling or restarting the application. This real-time feedback mechanism greatly improves the efficiency and accuracy of layout adjustment.

[0047] Among them, the SDK on the App side in A5 will respond. After the SDK responds, the App interface will be refreshed. When the user completes the modification of the control properties and clicks Confirm, the plug-in will package the modification information into a specific format and send it to the SDK on the application side through ADB or other communication mechanisms. After receiving this information, the SDK on the application side will parse it and apply it to the corresponding control.

[0048] Among them, this method is based on the fact that when the Android Studio plug-in is installed in the Layout Inspector, once the LayoutInspector layout is modified and applied, the application interface will be refreshed immediately to show the modified effect. At the same time, the rendering interface of the plug-in will also be updated synchronously to reflect the latest layout status. The rendering interface of the Layout Inspector plug-in will also be updated synchronously to reflect the latest layout status, which means that the View Hierarchy and Properties panels in the plug-in will display the latest control arrangement and property settings.

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

[0050] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for viewing layout modification effects in real time based on Layout Inspector, characterized in that: The specific workflow of this method based on the Android Studio plug-in is as follows: S1, establish communication between Android Studio and mobile App; S2, obtain information, Android Studio obtains the UI information of the interface; S3, full control, realizes the control of mobile app from Android Studio; S4, Edit, perform visual editing; S5, synchronize information. Android Studio synchronizes the edited information to the mobile app. S6,display,real-time rendering display.

2. According to claim 1, a method for realizing real-time viewing of layout modification effects based on Layout Inspector is characterized in that: The specific operation process of this method based on the Android Studio plug-in is as follows: A1. Install the plug-in in Android Studio. After opening the plug-in, an interface for selecting the running App process will pop up first; A2, after selecting a process, will execute a task in the background, which is to obtain the currently active ClientWindow; A3, after Window selection, another task will be executed in the background to obtain the required information and store it for rendering; A4, randomly select a control in the plug-in rendering interface and double-click it; A5, after confirming the changeable items, the modification information will be sent to the App and the modification effect will be rendered.

3. According to claim 1, a method for realizing real-time viewing of layout modification effects based on Layout Inspector is characterized in that: The specific operation process of A1 is as follows: when the plug-in is started, a friendly user interface will pop up first, guiding the user to select the Android application process that is currently running or about to run. This interface lists the application processes on all available devices and simulators, and the user needs to select a target application process from them. This is done to ensure that the plug-in can connect to the correct application and obtain its real-time layout information.

4. According to claim 1, a method for realizing real-time viewing of layout modification effects based on Layout Inspector, characterized in that: The acquisition process of A2 is as follows: once the user selects the application process, the plug-in will start a task in the background, which communicates with the device through Android Debug Bridge (ADB) or other debugging interfaces to obtain the active window (ClientWindow) in the current application interface; This process may take some time because it needs to wait for the application to load and the interface rendering to stabilize; after obtaining the ClientWindow, the plug-in will be able to access the view hierarchy and layout information of the window.

5. The method for realizing real-time viewing of layout modification effects based on Layout Inspector according to claim 1, characterized in that: The specific task of A3 is to obtain the View Hierarchy and ViewProperties that need to be displayed. All this information is stored in the li file as binary information. The FileEditor in LayoutInspector will parse these li files and render the view of the app interface into the plug-in.

6. The method for realizing real-time viewing of layout modification effects based on Layout Inspector according to claim 1, characterized in that: The specific operation process of A4 is as follows: after double-clicking, all information of the control will appear. After finding the property to be changed, the changeable items of the property will pop up according to the property type. The plug-in will highlight the control and provide an editing panel to allow the user to modify the properties of the control (color, size, margin).

7. The method for realizing real-time viewing of layout modification effects based on Layout Inspector according to claim 1, characterized in that: The SDK on the App side in A5 will respond. After the SDK responds, the App interface will be refreshed. When the user completes the modification of the control properties and clicks Confirm, the plug-in will package the modification information into a specific format and send it to the SDK on the application side through ADB or other communication mechanisms. After receiving this information, the SDK on the application side will parse it and apply it to the corresponding control.

8. The method for realizing real-time viewing of layout modification effects based on Layout Inspector according to claim 1, characterized in that: This method is based on the fact that when the Android Studio plug-in is installed in the Layout Inspector, once the LayoutInspector layout is modified and applied, the application interface will be refreshed immediately to show the modified effect. At the same time, the rendering interface of the plug-in will also be updated synchronously to reflect the latest layout status.

Images