Android的SDK工具包中,有很多十分有用的工具,可以帮助程序员开发和测试Android应用程序,大大提高其工作效率。其中的一款叫Hierachy Viewer的可视化调试工具,可以很方便地帮助开发者分析,设计,调试和调整UI界面,提高开发效率。本文将以一个实际例子讲解如何使用该款工具运用在Android的开发过程中。
1 设计界面
在我们的这个例子中,有三个不同的界面,以方便我们演示使用Hierarchy Viewer。每一个界面都使用了LinearLayout和FrameLayout布局,以及文本框TextView及图片框ImageView控件。如下图,三个界面中的图案分别用了一只小猫,一个鱼缸,一条金鱼,它们各自的位置布局见下图:
1)在上面的三个图中,最左面的一个图,使用了一个垂直布局的LinearLayout,并且划分为两行,第一行是一个TextView文本框,里面的文字是“Safe”,第2行是一个FrameLayout帧布局,分别包含了一条鱼和一个鱼缸子。
2)中间的图中,使用了一个垂直布局的LinearLayout,并且划分为两行,第一行是写有“Unsafe”文本的文本框,第二行也有一个LinearLayout的水平布局,分别又包含了两个ImageView控件:一个鱼缸及鱼,还有一只小猫。
3)最右边的图中,使用了一个垂直布局的LinearLayout,并且划分为两行,第一行是写有“Yum” 文本的文本框,第2行是一个FrameLayout帧布局,分别包含了一条小猫和一条鱼。跟第一张图有点相象。
2 启动应用程序
在设计界面后,我们直接用模拟器启动我们的应用程序,要注意的是,在debug状态下,是不能启动Hierachy Viewer的。
3 启动Hierachy Viewer
目前,在eclipse的ADT Android插件中,还不能启动Hierachy Viewer,但可以从Android SDK工具包中,通过命令行的方式可以启动,具体方法为,到Android SDK下的tools目录下,在命令行方式下运行hierachyviewer即可:
在启动后,可以看到如下的界面,会显示当前正在运行中的模拟器的信息,这里我们可以鼠标点击我们已经启动了的Activity:
同时可以看到,有两个按钮,分别代表两个功能:
1) Load View Hierarchy : 可以查看界面的控件层次
2) Inspect Screenshot : 进入界面精确查看模式
4 Inspecting Screenshots(界面精确查看模式)
先点Inspecting Screenshots按钮,进入界面精确查看模式。在这个模式下,开发者可以随意点界面的任意一部分,进行放大或缩小观察以查看界面中各控件的具体位置和情况,如下图所示:
同时,还可以将截取的界面另外保存为PNG格式的图片文件。
5 Load View Hierarchy (界面控件层次查看)
接下来,我们重点学习如何在Load View Hierachy中,查看界面中各个控件的层次结构关系。
首先当点Load View Hierarchy按钮后,会进入如下图所示界面:
注意,在屏幕的左下方,有三个按钮,分别是模拟器的列表界面(主菜单)、Load View Hierachy主界面、Inspecting Screenshots主界面。
接下来,我们看上图,Load View Hierachy界面被划分为四个部分:
1)左侧(面积最大一块),该部分显示界面控件的层次结构,我们称之为主窗口,
2)右上方,是以缩略图的方式显示整个应用中的各控件的层次关系,可通过鼠标在这个显示区域进行移动,以便在主窗体显示相关的控件信息。
3)右边区域的中间部分,显示的每个控件的具体属性,是控件的属性面版。
4)右下角部分的区域,显示出用户所点的控件,在界面中的具体位置,会用红色部分标出,方便用户辨识。