再往左看，会看到这两个控件实际上是被包裹在FrameLayout布局中，这里可以清楚看到指出了这个布局的id为@id/frameLayoutFishbowl。再往左边看，可以看到再上一层的控件：LinearLayout布局控件以及它包含的一个TextView控件(显示“Safe”字样)以及@id/frameLayoutFishbowl的frameLayout布局控件。
读者可以尝试，在Hierachy viewer中，查看另外两个activity界面中的控件，熟悉其中的用法。
步骤7 查看每个具体控件的情况
当在主窗口中，点击每一个控件时，将会可以看到很多关于这个控件的详细信息，会在该控件的上方弹出一个窗口，其中会显示该控件的实际的效果图外，通过view的数目显示了该控件及其子控件的数目，该控件的该节点的测量(measure)、布局(layout)以及画视图(draw)的时间，如下图：
如上图，这里1 view表明这个文本控件没再包含其他子控件了，只有1个就是它本身。而下方的带颜色的三个圆圈指示灯，分别说明了在测量(measure)、布局(layout)以及画视图(draw)三个阶段，这个控件所占用的时间百分比，如果是绿色的，表示该控件在该阶段比起其他的50%的控件的速度要快，为黄色的表示比起其他的50%的控件的速度要慢，为红色的则表示该控件在该阶段的处理速度是最慢的，如下图：
当我们按“display View”按钮后，在当我们点某个控件时，在稍等1-2秒后，会另外单独打开一个小窗口，显示该空间的单独效果图。
我们再来看下右上角的缩略显示窗口。当界面里的控件太多时，可以在这个窗口中，点选某一部分，随即会在主窗口中显示该区域控件的情况，而在右方中部的属性列表中，会显示所点击的控件的详细属性情况。右下角则显示所点击的控件在整个界面中的实际位置，如果勾选了show extra views，则还会在这个区域中，将控件的实际图片也显示出来，十分清晰。下图是我们点金鱼这个图片时，实际显示的效果：
步骤8 刷新显示
要注意的是，在Hierarchy Viewer中，当修改了界面后，需要手工点Refresh按钮，才能同步在Hierarchy Viewer中显示更新过后的界面情况。下图是分别对应用中的第2，第3个界面进行操作的示意图，可以看到，这两个界面的布局比第一个界面稍微复杂了。
对于Android的UI来说，invalidate和requestLayout是最重要的过程，Hierarchyviewer提供了帮助我们Debug特定的UI执行invalidate和requestLayout过程的途径，方法很简单，只要选择希望执行这两种操作的View点击按钮就可以。当然，我们需要在例如onMeasure()这样的方法中打上断点。这个功能对于UI组件是自定义的非常有用，可以帮助单独观察相关界面显示逻辑是否正确。
小结
在本文中，通过简单的例子，讲解了在Android中一款不错的工具Hierarchy viewer的使用，使用这个工具，用户可以很方便地查看和调试应用中的UI界面，分析其性能，建议用户在开发阶段多使用这款工具对UI进行开发设计。