Android utility Hierarchy Viewer practice

There are many useful tools in the Android SDK toolkit that can help programmers develop and test Android applications, greatly improving their work efficiency. Hierachy Viewer is one of the visual debugging tools, which can help developers design, debug and adjust interfaces to improve the development efficiency of users. This article will show you how to use this tool in the development process of Android. The readers of this article are users with preliminary Android knowledge.

Step 1. design the 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:

 
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.

In the middle graph, a vertical layout of LinearLayout is used and divided into two rows. The first line is the text box with the "Unsafe" text, and the second line also has a horizontal layout of LinearLayout, two other ImageView controls are included: a fish tank and a fish, and a kitten.

In the rightmost diagram, a vertical layout of LinearLayout is used and divided into two rows. The first row is the text box with "Yum" text, and the second row is a FrameLayout frame layout, contains a kitten and a fish. It is a bit like the first image.

Step 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.

Step 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)

The following describes the functions of both.

Step 4. Inspecting Screenshots (precise view mode on the Interface)

Click the Inspecting Screenshots button to go to the precise view mode. In this mode

The developer 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.

Step 5 Load View Hierarchy View the control Hierarchy on the page

Next, we will focus on how to View the hierarchical relationship of each control in the Load View Hierachy interface. First, click the Load View Hierarchy button to go to the interface shown in:

 

Note that there are three buttons at the bottom left of the screen. When the leftmost button is clicked, the list interface of the simulator is returned (that is, the interface of Hierarchy Viwer just entered ), the intermediate button is the main interface of Load View Hierachy. You can switch back and forth between the two statuses.

Next, we can see that the Load View Hierachy interface is divided into four parts, which are the leftmost (the largest area). This part shows the hierarchy of the interface control, which is called the main window, in the upper-right corner, the hierarchy of controls in the entire application is displayed in a thumbnail. If there are many widgets on the interface, you can move the cursor over the display area to display the control information in the main window on the left. In the middle of the area on the right, the specific attributes of each control are displayed, which is the attribute Panel of the control. In the lower-right corner, when a widget is clicked on the user interface, the widget is displayed in the displayed area, and the specific position in the interface is displayed, marked in red to facilitate user identification.

Step 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.

You can try to view the controls in the other two activity interfaces in Hierachy viewer to familiarize yourself with the usage.

Step 7 view the details of each widget

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:

[Img]
Http://image20.it168.com/201108_240x180/718/83e6f4cb70a2070d.jpg
[/Img]
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.

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, and the control of this area will be displayed in the main window, And in the attribute list in the middle right, the detailed properties of the clicked control are displayed. 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:

 

Step 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 explains how to use Hierarchy viewer, a good tool in Android. With this tool, you can conveniently view and debug the UI interface of the application, to analyze its performance, we recommend that you use this tool to develop and design the UI.

Author: jackyrong"