Android hierarchy Viewer

There are many useful tools in the android SDK kit that can help programmers develop and test Android applications, greatly improving their work efficiency. Hierachy viewer is a visual debugging tool that helps developers analyze, design, debug, and adjust the UI easily to improve development efficiency. This article will show you how to use this tool in the development process of Android.

1. Design Interface

In our example, there are three different interfaces for us to demonstrate how to use hierarchy viewer. Each interface uses the linearlayout and framelayout layout S, as well as the textview and imageview controls of the text box. For example, a kitten, a fish tank, and a goldfish are used for the patterns on the three interfaces. For details about their respective positions, see:

1) in the above three figures, the leftmost graph uses a vertical layout of linearlayout and is divided into two rows. The first row is a textview text box, the text in it is "safe", and the fifth line is a framelayout frame layout, which contains a fish and a fish tank respectively.

2) In the middle graph, a vertical layout of linearlayout is used and divided into two rows. The first line is the text box with "unsafe" text, the second row also has a horizontal layout of linearlayout, which contains two imageview controls: a fish tank and a fish, and a kitten.

3) In the rightmost diagram, a vertical layout of linearlayout is used and divided into two rows. The first row is a text box with "yum" text, row 2nd is a framelayout frame layout that contains a kitten and a fish. It is a bit like the first image.

2. Start the application

After designing the interface, we can use the simulator to start our application. Note that hierachy viewer cannot be started in the debug state.

3. Start hierachy Viewer

Currently, hierachy viewer cannot be started in the ADT Android plug-in of eclipse. However, hierachy viewer can be started in the android SDK toolkit using command lines. The specific method is, go to the tools directory under Android SDK and run hierachyviewer in command line mode:

After starting, you can see the following interface, showing information about the currently running simulator. Here we can click the activity we have started:

At the same time, we can see that there are two buttons representing two functions:

1) Load view hierarchy: You can view the control layers on the interface.

2) inspect screenshot: Enter the precise view mode on the interface.

4 inspecting screenshots (precise view mode on the Interface)

Click the inspecting screenshots button to go to the precise view mode. In this mode, developers can click any part of the interface to zoom in or out to view the location and status of each control on the interface, as shown in:

At the same time, you can save the captured interface as an image file in PNG format.

5 load view hierarchy)

Next, we will focus on how to view the hierarchical relationships of each control in the load view hierachy interface.

First, click the load view hierarchy button to go to the interface shown in:

Note: There are three buttons at the bottom left of the screen: The simulator list interface (main menu), the load view hierachy main interface, and the inspecting screenshots main interface.

Next, we can see that the load view hierachy interface is divided into four parts:

1) the left side (the largest area) shows the hierarchy of the interface controls, which is called the main window,

2) in the upper-right corner, the hierarchy of controls in the entire application is displayed in a thumbnail. You can move the cursor over the display area to display the related control information in the main form.

3) in the middle of the area on the right, the specific attributes of each control are displayed, which are the attribute faces of the control.

4) the area in the lower-right corner shows the control that the user points. The specific position on the interface is marked in red to facilitate user identification.

6. Understand the main window of hierachy Viewer

The main window of the leftmost part shows the hierarchies of all controls in an activity from left to right. the rightmost part is the control of the lowest layer.

In our example, if you select the first interface (the leftmost interface of the three graph interfaces mentioned above), you can see it on the rightmost side of the main window from right to left, the rightmost side is the two imageview controls: the image of the fish tank and the image of the fish.

To the left, we can see that these two controls are actually wrapped in the framelayout layout. Here we can clearly see that the layout ID is @ ID/framelayoutfishbowl. On the left side, you can see the controls on the last layer: The linearlayout layout Control and Its textview control (displaying the word "SAFE") and the framelayout layout control of @ ID/framelayoutfishbowl.

7. view the status of each specific control

When you click a control in the main window, you will see a lot of details about the control. A window will pop up above the control, the actual external display of the control is displayed. The number of views shows the number of the Control and Its subcontrols. The measurement and layout of the node of the control are displayed) and the time for drawing a view (draw), such:

For example, here, 1 view indicates that this text control does not contain any other child control, and only 1 is itself. The three circle indicators with colors below show the three phases in measurement, layout, and draw, respectively, the time percentage occupied by this control. If it is green, it indicates that the control is faster than the other 50% controls in this phase, if the color is yellow, the processing speed of the control is slower than that of other 50% controls. If the color is red, the processing speed of the control is the slowest at this stage, for example:

When we press the "display view" button, when we click a control, after 1-2 seconds, a small window will be opened separately to display the space separately.

1) Let's take a look at the thumbnail display window in the upper right corner. When there are too many controls on the interface, you can click a part in this window, the control status of this region is immediately displayed in the main window.

2) The detailed properties of the clicked control are displayed in the attribute list in the middle of the right.

3) the actual position of the clicked control is displayed in the lower right corner of the interface. If show extra views is selected, the actual image of the control is also displayed in this area, very clear.

It is the actual effect shown when we click the Golden Fish image:

8. Refresh the display

Note that in hierarchy viewer, after you modify the interface, you must manually click the refresh button to display the updated interface information in hierarchy viewer. Operations are performed on the 2nd and 3rd interfaces of the application respectively. We can see that the layout of these two interfaces is slightly more complex than that of the first interface.

For the android UI, invalidate and requestlayout are the most important processes. hierarchyviewer provides a way to help us debug the specific UI to execute the invalidate and requestlayout processes. The method is simple, you only need to select the View button that you want to perform the two operations. Of course, we need to place a breakpoint in a method such as onmeasure. This function is very useful for custom UI components and can help you separately observe whether the display logic of relevant interfaces is correct.

Summary

In this article, a simple example is provided to illustrate the use of hierarchy viewer, a good tool in Android.

With this tool, you can easily view and debug the UI of the application and analyze its performance. We recommend that you use this tool to develop and design the UI during the development phase.

Reference recommendations:

Android utility hierarchy viewer practice

Use hierarchy viewer to optimize Layout