Android Utility Hierarchy Viewer Combat

In the Android SDK Toolkit, there are many useful tools that can help programmers develop and test Android applications, greatly improving their productivity. One of them is called Hierachy Viewer Visual debugging tool, can be easily in the developer design, debugging and adjustment interface, improve user development efficiency. This article will take a practical example of how to use the tool in the Android development process. The reader of this article is intended for users with initial Android knowledge.

Step 1 Design The interface

In our example, there are three different interfaces to allow us to demonstrate the use of the hierarchy Viewer. Each interface uses the LinearLayout and framelayout layouts, as well as text box TextView and picture frame ImageView controls. For example, three of the patterns in the interface with a kitten, a fish tank, a goldfish, their respective location layout see:

In the above three diagrams, the leftmost figure, using a vertical layout of the linearlayout, and divided into two lines, the first line is a TextView text box, the text is "Safe", the 2nd line is a framelayout frame layout, Contains a fish and an aquarium, respectively.

In the middle of the diagram, using a vertical layout of the linearlayout, and divided into two lines, the first line is written with "Unsafe" text box, the second row also has a linearlayout horizontal layout, respectively, and contains two ImageView controls: A fish tank and fish, and a kitten.

On the far right, a vertical layout of the linearlayout is used, divided into two lines, the first line is a text box with "Yum" text, and the 2nd line is a framelayout frame layout that contains a kitten and a fish, respectively. It's a little bit like the first picture.

Step 2 Start the application

After designing the interface, we start our application directly with the simulator, it is important to note that the Hierachy Viewer cannot be started in the debug state.

Step 3 Start the Hierachy Viewer

Currently, the Hierachy Viewer cannot be launched in the ADT Android plugin for Eclipse, but can be launched from the Android SDK Toolkit via the command line, in the Tools directory under the Android SDK, Run Hierachyviewer in the command line mode.

After booting, you can see the following interface, which displays information about the currently running emulator, where we can click on the activity we have started:

As you can see, there are two buttons, representing two functions respectively:

1) Load View Hierarchy (can view the control hierarchy of the interface)

2) Inspect screenshot (Enter the interface for precise viewing mode)

The functions of both are described below.

Step 4 inspecting screenshots (interface precise viewing mode)

Click the Inspecting Screenshots button first to enter the interface to view the mode accurately. In this mode

, developers can zoom in or out of any part of the interface to see the exact location and situation of the controls in the interface, as shown in:

At the same time, the intercepted interface can also be saved in PNG format as a picture file.

Step 5 Load View Hierarchy View the control hierarchy of the interface

Next, we'll focus on how to view the hierarchical relationships of the various controls in the interface in Load View hierachy. First, when the load View hierarchy button is clicked, it enters the interface as shown:

Note that, at the bottom left of the screen, there are three buttons, when the leftmost button is returned is the emulator's list interface (that is, just into the hierarchy Viwer interface), the middle button is the load View hierachy The main interface, the user can switch back and forth in both States.

Next, we see that the Load View Hierachy interface is divided into four parts, the leftmost (the largest piece of area), which shows the hierarchical structure of the interface control, which we call the main window, and the upper right part, which shows the hierarchical relationship of the controls in the entire application in the form of thumbnails. When a control in an interface is more than one, you can move through the display area with the mouse, and the relevant control information is displayed in the main window on the left. The middle portion of the right area, which displays the specific properties of each control, is the property panel of the control. The lower right part of the area, when the user point in the interface of a control, will be displayed in this section of the area, display the user's point of control, in the interface in the specific location, will be marked with red parts, easy to identify users.

Step 6 Understanding the main window of the Hierachy Viewer

The left-most main window shows the hierarchy of all controls in an activity from left to right, with the most right part being the lowest-level control. In our case, if the first interface is selected (that is, the leftmost one of the three graph interfaces mentioned above), at the far right of the main window, from right to left, you can see that the rightmost is two ImageView controls: pictures of fish tanks and pictures of small fish.

Looking left, you will see that the two controls are actually wrapped in a framelayout layout, where you can see clearly that the ID of this layout is @id/framelayoutfishbowl. Looking to the left, you can see the next layer of controls: the LinearLayout layout Control and the TextView control it contains (which displays the word "Safe") and the Framelayout layout control for @id/framelayoutfishbowl.

Readers can try to familiarize themselves with the use of the controls in the other two activity interfaces in Hierachy Viewer.

Step 7 Review the situation for each specific control

When you click on each control in the main window, you will see a lot more details about the control, which will pop up a window above the control, showing the actual outside of the control, the number of the control and its child controls displayed by the number of views, the measurement of that node of the control (measure), Layout and Drawing view (draw) time, such as:

For example, the 1 view here indicates that the text control does not contain any more child controls, only 1 of which are itself. The color of the three circles led below, respectively, shows in the measurement (measure), Layout and draw view (draw) Three stages, the control takes up a percentage of the time, if it is green, indicating that the control at this stage than the other 50% of the control speed is faster, A yellow representation is slower than the other 50% controls, and red indicates that the control is processing at the slowest rate in that phase, such as:

When we press the "Display View" button, when we click on a control, after a few 1-2 seconds, we will open a separate small window, showing the space alone.

Let's look at the thumbnail window in the upper right corner. When the controls in the interface are too long, you can click a section in this window, and the area control will be displayed in the main window, and in the list of properties in the center right, the detailed properties of the clicked control will be displayed. The lower right corner shows the actual position of the clicked Control in the entire interface, and if show extra views is checked, the actual picture of the control will also be displayed in this area, which is very clear. Is the effect of the actual display when we order goldfish this picture:

Step 8 Refresh the display

Note that in the hierarchy Viewer, when the interface is modified, you need to manually click the Refresh button to synchronize the updated interface in the hierarchy Viewer. In the application of the 2nd, the 3rd interface to operate, you can see that the layout of the two interfaces is slightly more complex than the first interface.

For Android UI, invalidate and Requestlayout are the most important processes, Hierarchyviewer provides a way to help us debug a specific UI to perform invalidate and requestlayout processes , the method is simple, just select the view click button that you want to perform both actions. Of course, we need to make a breakpoint in a method such as Onmeasure (). This feature is useful for UI components that are customizable, and can help to see if the relevant interface display logic is correct separately.

Summary

In this article, through a simple example, the use of a good tool hierarchy viewer in Android, using this tool, users can easily view and debug the UI interface in the application, analyze its performance, It is recommended that users use this tool to develop and design the UI during the development phase.

"Reprint: Http://hb.qq.com/a/20110809/000032.htm"

Android Utility Hierarchy Viewer Combat