Hierarchy Viewer

有时应用的布局结构会减慢运行速度,为了帮助解决这个问题,Android SDK提供了Hierarchy Viewer工具。

Hierarchy Viewer可以帮助调试和优化UI。它提供了布局层次的可视化表示(View Hierarchy窗口),并带有每个节点的性能信息。它还提供了一个放大的视图(Pixel Perfect窗口)来进一步检测布局的像素。

使用Hierarchy Viewer

运行Hierarchy Viewer并选择一个窗口

使用Hierarchy Viewer步骤如下:

  1. 连接设备或者启动一个模拟器。为了保证安全,Hierarchy Viewer只能连接开发版本的Android系统。
  2. 安装要测试的应用。
  3. 运行应用,并保证UI可见。
  4. 启动位于<sdk>/tools/目录的hierarchyviewer。
  5. 启动后的窗口展示了一个设备和模拟器的列表。点击每一项左侧的箭头可以展开列表,会显示每个设备或模拟器正在运行的UI可见的应用。


    图1
  6. 选择要调试的应用,可以选择点击Load View Hierarchy查看视图层次,或者点击Inspect Screentshot查看Pixel Perfect窗口

关于View Hierarchy窗口

View Hierarchy窗口展示应用的视图对象。针对每一个视图对象,View Hierarchy窗口还展示了渲染性能数据。

在该窗口,你会看到4个窗格:

图2
  1. Tree View:左侧窗格展示了视图树。视图树可以检测单独的视图对象,或者视图对象的关系。要缩放视图树,可以使用底部的滑块,或者使用鼠标的滚轮。可以使用鼠标拖动视图树的显示范围。
    在底部Filter by class or id中输入类或者id值,可以搜索匹配的节点。匹配的节点,背景会由灰色变为蓝色。
    点击顶部的Save As PNG可以保存视图树的截图。
    点击Capture Layers可以将布局保存为PSD文件。每个视图会被保存为一个单独的PhotoShop图层。
  2. Tree Overview右上窗格为视图树的概览。
  3. Properties View右侧中部的窗格为属性窗口。
  4. Layout View右下窗格为布局视图。点击该窗格的一个视图对象,会高亮显示。每一块的边框颜色提供了额外的信息:
    • 粗红色:当前选择的视图。
    • 细红色:当前选择视图的父级。
    • 白色:表示该视图不是当前选择视图的父集或者子集。

在当前页面的UI变化后,View Hierarchy窗口不会自动更新。需要点击顶部的Load View Hierarchy参会刷新。

同样的,如果切换到了其他页面,窗口也不会自动更新。想要更新它,你需要首先点击Hierarchy Viewer工具左下角的按钮切换到第一次打开时的选择应用的窗口,然后重新加载视图。

使用视图树中的单个视图

视图树的每个节点代表一个单独的视图。一些信息是始终可见的:

图3
  1. 视图的类型,即所属的class
  2. 视图地址
  3. 视图的id值,即android:id
  4. 性能指标:三个带颜色的圆点,分别代表measure、layout、draw三个方法相对于其他视图的渲染速度:
  • 绿色:表示该视图快于视图树中50%的视图。
  • 黄色:表示该视图慢于视图树中50%的视图。
  • 红色:表示该视图是视图树中最慢的。
  1. 视图索引:该视图在父级的索引,从0开始。

选择一个节点,会出现一个小窗口来展示额外的信息:

  • 图片:该视图的截屏。
  • 视图数量:该节点所拥有的视图数量,包含本身。
  • 渲染时间:实际的measure、layout、draw耗时。

使用View Hierarchy调试

View Hierarchy窗口可以通过提供UI的静态显示来帮助调制应用。在你操作应用的时候,这个显示保持不变,直到你执行invalidate并request layout来重绘。

重绘步骤如下:

  • 选择视图树中的一个视图。重绘一个视图会强制重绘它的子视图。
  • 点击顶部的Invalidate。这会将视图标记为无效的,并在下次布局时进行重绘。
  • 点击Request Layout。绘制需要重绘的视图。

手动重绘允许你观察视图树,并在代码中通过单步调试检查单​​个View对象的属性。

通过View Hierarchy进行优化

View Hierarchy帮助你甄别减慢渲染速度的性能问题。你需要查看带有红色或者黄色圆点的节点,查看是一直慢还是某些条件会变慢。

注意慢性能不一定就是问题,尤其是对于ViewGroup对象。在ViewGroup有很多子View时渲染肯定会变慢。

使用Pixel Perfect

Pixel Perfect是一种用于检查像素属性并从设计图形中绘制UI的工具。

关于Pixel Perfect窗口

Pixel Perfect窗口展示了一个放大的当前设备或模拟器可见的屏幕图像。你可以使用它检测单独的像素属性。你也可以用它帮助你根据位图设计布局应用程序UI。

在该窗口,有如下窗格:

图4
  1. 视图对象窗格:在窗口的左侧。这是一个当前视图对象的层级列表。包括你的应用中的和系统产生的。
  2. Pixel Perfect放大镜窗格:在窗口中央。这是放大的屏幕图像。它被一个网格覆盖,网格的每个方块代表一个像素。点击一个方块,在底部会显示该像素的色值和坐标信息。
  3. Pixel Perfect窗格:在窗口右侧。这里展示了模拟器当前的屏幕显示。

使用Pixel Perfect叠加

你通常根据作为位图图像完成的设计构建UI。Pixel Perfect窗口可以帮助你加载一张图片叠加到当前的屏幕截图中。

使用步骤如下:

  • 启动你的应用,导航到想要叠加的页面。
  • 启动Hierarchy Viewer,导航到Pixel Perfect窗口。
  • 点击顶部的Load Overlay。加载一张图片。
  • Pixel Perfect窗格会显示叠加后的效果。
    叠加的图像默认有50%的透明度,你可以通过底部的滑块进行修改。
    默认情况下,叠加层也不会显示在“放大镜”窗格中。 要显示它,请在窗口顶部设置Show in Loupe

点击Save as PNG时,叠加层不会保存到最终的图片上。

可能遇到的问题

Hierarchy Viewer连接设备失败

系统必须是开发版本,有root权限,且View Server开启。
检验一台手机是否开启了View Server的办法为:

adb shell service call window 3

若返回值是:

Result: Parcel(00000000 00000000 '........') 

说明View Server处于关闭状态。
若返回值是:

Result: Parcel(00000000 00000001 '........')

说明View Server处于开启状态。
我们可以使用以下命令打开View Server:

adb shell service call window 1 i32 4939

使用以下命令关闭View Server:

adb shell service call window 2 i32 4939

注:本文翻译自Google官方文档。“Hierarchy Viewer连接设备失败”来自博友的博客http://www.cnblogs.com/fatfatdachao/p/4403282.html,仅记录一下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容