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）所需要的具体时间：

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

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

 

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

五、参考资料

Android Layout Tricks #1

Optimizing Layout Hierarchies

Android性能优化系列---Improving Layout Performance（一）

Optimizing Your UI

Hierarchyviewer 官方YouTuBe介绍视频

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