The use of the Android Visual debugging tool hierarchy Viewer

There are many useful tools in the Android SDK Kit to help programmers develop and test Android apps, and improve their productivity dramatically. One of the visual debugging tools called Hierachy Viewer can easily help developers analyze, design, debug and adjust UI interfaces to improve development efficiency. This article will be a practical example of how to use this tool in the Android development process.

1 Design Interface

In our example, there are three different interfaces to facilitate our demonstration of using the hierarchy Viewer. Each interface uses the LinearLayout and framelayout layouts, as well as text box TextView and picture frame ImageView controls. The following figure, three interface patterns used a kitten, a fish tank, a goldfish, their respective location layout see the following figure:

1 in the above three diagrams, the leftmost diagram uses a vertical layout of the linearlayout and divides it into two lines, the first line is a TextView text box, the text inside is Safe, and line 2nd is a framelayout frame layout, A fish and a fishbowl were included.

2 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 line also has a linearlayout horizontal layout, It also contains two ImageView controls: A fish tank and a fishing, and a kitten.

3 The rightmost diagram uses a vertical layout of the linearlayout and divides it 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. It's a little bit like the first picture.

2 Starting the Application

After designing the interface, we start our application directly with the simulator, note that in the debug state, it is not possible to start the Hierachy viewer.

3 Start Hierachy Viewer

Currently, the Hierachy Viewer cannot be started in Eclipse's ADT Android plug-in, but can be started from the Android SDK Toolkit through the command-line, in the Tools directory under the Android SDK, Run Hierachyviewer in the command-line mode:

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

You can also see that there are two buttons that represent two features:

1 Load View hierarchy: You can view the control hierarchy of the interface

2) Inspect screenshot: Enter the interface for accurate viewing mode

4 inspecting screenshots (interface accurate view mode)

First click the Inspecting Screenshots button to enter the interface for accurate viewing mode. In this mode, developers can click any part of the interface to zoom in or zoom out to see the exact location and situation of each control in the interface, as shown in the following illustration:

Also, you can save the intercepted interface as a picture file in PNG format.

5 Load View Hierarchy (interface control hierarchy view)

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

First, when you click the Load View hierarchy button, you go to the interface shown in the following figure:

Note that at the bottom left of the screen, there are three buttons, which are the emulator's list interface (Main menu), the Load View hierachy main interface, and the inspecting screenshots main interface.

Next, we look at the graph, the Load View hierachy interface is divided into four parts:

1 the left side (the largest piece of area), which shows the hierarchy of the interface control, we call it the main window,

2 The upper right is a thumbnail representation of the hierarchical relationships of the controls in the entire application, which can be moved in the display area by the mouse to display the relevant control information on the main form.

3 The middle part of the right area, the specific property of each control displayed, is the property surface version of the control.

4 The lower right corner section of the area, showing the user's point of control, in the interface of the specific location, will be marked with a red part, user-friendly identification.