Chapter 1 to do this, you must first use the Android SDK (5) and androidsdk

Chapter 1 to do this, you must first use the Android SDK (5) and androidsdk
1.5 UI layout analysis tool-View tool (Hierarchy Viewer)

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 a visual debugging tool that allows developers to easily design, debug, and adjust interfaces to improve development efficiency and get twice the result with half the effort. It provides the following functions:

1) visually obtain the UI layout design structure and various attributes to help us optimize the layout design;

2) combined with debug to help observe the invalidate and requestLayout operations on specific UI objects.

Next, let's take a simple example to see how Hierarchy Viewer is used (note that Hierachy Viewer cannot be started in debug State ).

Hierarchyviewer is easy to use. after starting the simulator or connecting to the real machine, double-click hierarchyviewer. bat under the android sdk/tools directory and you will see the page from 1 to 28.

Figure 1-28 Hierarchy ViewerMain Interface

 

Windows lists the Windows that can be used to display the View structure of the currently selected device, and selects a Window, such as com. char1/com. char1.Char1Activity, double-click the activity and enter LayoutView. to parse the relevant Window, this process takes several seconds. The tree layout diagram of the current Window is listed on the left, the right side lists the attributes of a selected subview and its position in the window, as shown in figure 1-29.

Figure 1-29 Layout View

 

Note that the View structure listed in Layout View starts from the root node of the View, for example, layout for Launcher, its underlying basic layout DragLayer is actually placed in a FrameLayout, which is managed by the DecorView of PhoneWindow.

In the lower-left corner of the page, click the button similar to the "jiugongge" button to go to the page called "Pixel Perfect View" for Android. The UI effect is mainly observed from the details, as shown in figure 1-30.

Figure 1-30 Pixel Perfect View

 

On the left is the browser view, in the middle is the global view, on the right is the details of the current focus to enlarge, is pixel level, very useful for viewing details. Refresh Rate is used to control how often a View is updated from a simulator or on a real machine. Zoom is used to enlarge the local details. The details are displayed in the rightmost view. Overlay is interesting. It is mainly used to test the effect of loading a new image on the current view. After you click the fourth button in the upper left corner to select an image, you can control the transparent reading displayed on the current interface, slide the control from 0% to 100%. If Showin Loupe is selected, the enlarged view on the right also displays the details of the loaded image with transparency. However, the current Overlay is relatively simple. The merged image can only be drawn from the origin point in the lower left corner of the interface and cannot be moved.

In Layout View, select a view icon and double-click it to view the actual display effect of the View. You can click Show Extras, which is also more practical, it can display the boundaries of different elements in the View and help us check whether they are correct, as shown in figure 1-31.

 

Figure 1-31 actual display

 

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 for which you want to perform these two operations and click the button on the Right of Show Extras. 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.