"Android Tools" ignored UI viewer: Hierarchy Viewer

The Hierarchy Viewer is a tool released with ANDROIDSDK, located under the Tools folder, named Hierarchyviewer.bat. It's a very useful and easy-to-use tool for Android, which helps us to better view and design the user interface (UI), which is definitely a tool for UI viewing, but it seems like very few people are mentioning it because it's too simple.

Specifically, there are 2 main functions:

1. Intuitively get the information of UI layout design structure and various properties from the visual angle, help us to optimize the layout design;
2. The process of combining debug to help observe specific UI objects for invalidate and requestlayout operations.

1. Basic Use Method

(1) Hierarchyviewer is very simple to use, start the simulator or connect to the real machine, Start Hierarchyviewer.bat, you will see the following interface, devices list of the devices can be observed, Windows listed is the currently selected device can be used to display the view structure of the window:

Select the window you want to watch, such as the Com.android.launcher/com.android.launcher.launcher item listed above, and then click Load View Hierarchy on the menu bar to enter layout View, due to parse the relevant window, so this process takes a few seconds, the left list is the current window of the tree layout chart, the right list is currently selected a child view of the property information and the position in the window:

Note that the view structure listed in Layout view starts from the root node of the view, such as the layout used for launcher, and its underlying base layout draglayer is actually placed in a framelayout. The framelayout was also managed by Phonewindow's Decorview.

(2) Click on the lower left corner of the interface similar to the nine Gongge button, entered the android called Pixel Perfect view of the interface, the interface is mainly to observe the UI effect from the details:

On the left is the browse view, the middle is the global view, the right side is the current focus on the details of the zoom, is pixel level, is very useful for observing the details.

Refresh rate controls How long view data is updated from the emulator or the real machine.

Zoom is used to zoom in on local details, and the details are displayed on the rightmost view.

Overlay is interesting to test the effect of loading a new image on the current view, click Load ... After you select a picture, you can control the transparent read that appears on the current interface, sliding the 0%~100% control. If show in Loupe is selected, the zoomed-in view on the right also displays the details of the loaded picture in a transparent display. But at present this overlay does relatively simple, the synthesis diagram can only draw from the bottom left corner of the interface as the origin point, cannot move.

(3) In Layout view, select a view icon, click on the toolbar display view, you can see the actual display of this View, you can click on show Extras, this function is more practical, you can display the view of the different elements of the boundary displayed To help us check whether it is correct.

2. Invalidate and requestlayout functions of Hierarchyviewer

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.

"Android Tools" ignored UI viewer: Hierarchy Viewer