Android 性能优化 一 布局优化工具Hierarchy Viewer的使用



    网上已经有很多关于Hierarchy Viewer如何使用的文章,这里就不一步步的演示具体怎样使用了,ddna兄的《【Android工具】被忽略的UI检视利器:Hierarchy Viewer》与张兴业的《Android UI 优化——使用HierarchyViewer工具》都写的很棒。


一、打开方式

    Hierarchy Viewer有两种打开方式:一种是Eclipse -> Window->Open Perspective->Other ->HierarchyView视图,另外一种是命令行中执行<sdk>/tools/hierarchyviewer。


二、无法打开Hierarchy Viewer问题

手机连接后出现的问题

[hierarchyviewer]Unable to get view server version from device ******
[hierarchyviewer]Unable to get view server protocol version from device ******
[ViewServerDevice]Unable to debug device: ******
[hierarchyviewer]Unable to get the focused window from device ******

如何在Root的手机上开启ViewServer,使得HierachyViewer能够连接
解决View Hierarchy不能启动

    根本原因是:Hierarchy Viewer默认只能在非加密设备使用,例如工程机,工程平板或者模拟器。为了能够在任何手机上使用Hierarchy Viewer,你得在你的应用中添加 View Server(Android Framework 工程师 Romain Guy开发的项目),这是一个开源库。

<uses-permissionandroid:name="android.permission.INTERNET"/>


三、Hierarchy Viewer界面介绍

    Hierarchy Viewer界面分为:Tree View、Tree OverView、Properties View

(1) Tree View

Tree View 顶部




从左到右每一个按钮的作用
Save the tree view as a PNG image  - 把当前视图保存为图片
Capture the window layers as a photoshop document - 保存为PhotoShop可以打开的psd文件

                    用 Photoshop的文档图来理解应用是怎么创建的是很有用的。但是用来去掉小范围的重绘有点难度。

Reload the view hierarchy - 重新加载
Display the selected view image in a separate window - 弹出一个新的窗口显示当前选中的视图
Invalidate the layout for the current window - 
Request the view to lay out - 
Request the view to output its displaylist to logcat
Obtain layout times for tree rooted as selected node - 获取选中视图的布局时间


Tree View 中部 - 以树形结构显示当前界面层级,后面会着重介绍。


Tree View底部

Filter by class or id - 可以直接通过输入类名或者id查找自己感兴趣的视图

右下角可以调整当前展示的界面的大小


(2) Tree OverView

    以缩略图形式展示全景


(3) Properties View

    显示当前视图节点属性列表


(4) Layout View

    显示当前页面轮廓图



四、用途

    Hierarchy Viewer有两个用途,一个是用于分析当前页面视图层级,再者也能分析布局的时间统计(Measrue、Layout、Draw)所需要的具体时间,本篇主要是关注布局时间的统计功能。

   以下是在Android 2.3.7手机上统计一个页面布局的截图,点击某一个节点会显示出其中(Measrue、Layout、Draw)所需要的具体时间:

Android 性能优化 一 布局优化工具Hierarchy Viewer的使用_第1张图片

发现有问题,每一个上面都是显示n/a,需要点击重新统计点击"Profile Node",因为没有连接手机截图所以这个按钮是灰色的图片只是演示下"Profile Node"位置



下面是最终效果,能看到Measue 、Layout 、 Draw的执行执行

Android 性能优化 一 布局优化工具Hierarchy Viewer的使用_第2张图片

 

从上图可看出,每个视图节点下方都有三个小点,分别代码Measue 、Layout 、 Draw的性能,有三种颜色红、黄、绿 分别代表效率差、中、优。


五、参考资料

Android Layout Tricks #1
Optimizing Layout Hierarchies
Android性能优化系列---Improving Layout Performance(一)

Optimizing Your UI
Hierarchyviewer 官方YouTuBe介绍视频


2014-07-14  增加界面介绍、每个节点中三个小点的含义、参考资料


你可能感兴趣的:(Android 性能优化 一 布局优化工具Hierarchy Viewer的使用)