New UI-Hierarchy Viewer工具解析app的界面布局

New UI-Hierarchy Viewer工具解析app的界面布局

 ——转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途!

小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的

力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文

更加的详尽,帮到更多的人,O(∩_∩)O谢谢!

小猪Android开发交流群:小猪Android开发交流群群号:421858269

新Android UI实例大全目录:http://blog.csdn.net/coder_pig/article/details/42145907

本节引言:

我们开发Android应用的时候,通常是使用xml文件来完成用户界面的布局,然后加载这个xml文件

生成对应的控件树,然后从根节点逐级绘制到屏幕上,而当我们对控件进行操作的时候,我们需要找到

控件树中对一个的控件,进行相关处理！另外控件树的层次深度会影响到控件的加载,绘制,以及查找,

所以在编写界面布局的时候,我们需要选择最佳的布局方式来尽可能的减少控件树的层次深度！

而在Android中也给我们提供了一个用于查看布局层次的查看器:Hierachy Viewer工具！

我们可以借助这个工具来查看app界面中的层次结构,有助于帮我们开发出优化UI布局的层次

结构！好了,本节就来对Hierachy Viewer的使用进行一个讲解吧！

1)工具在哪？

答:sdk -> tools -> hierachyviewer.bat批处理文件

2)工具使用介绍:

step 1:双击hierachyviewer.bat后,会来到以下界面:(连接好模拟器或手机)

我们可以从界面上看到:三个按钮和显示手机当前运行进程的窗口:

三个按钮依次是: 

①Refresh:当手机界面发生了改变时,需要点击Refresh来更新界面信息

②Load View Hierarchy:加载视图层次,就是加载我们的控件树

③Inspect Screenshot:查看当前的手机屏幕,就是截图

step 2:我们先来看看Inspect Screenshot这个玩意吧!

直接点击Inspect Screenshot会来到一个新的界面,会把当前的手机屏幕截取下来

我们可以在这个界面上看到一个简单的层次树,以及某个为的颜色值,以及相应的坐标等！

我们可以看到一个简单的布局的层次图了,可以满足我们的一些基本需要了

当然,我们肯定不满足只看到布局的层次树,我们想知道相关控件的属性值或者

控件的绘制时间等,那么就要使用更加高级的Load View Hierarchy

step 3:在第一个界面选择正在运行的app的,双击或者选中后点击上方的LoadView Hierarchy

就可以进入到这样一个页面:

ps:图中的右边的四个按钮貌似理解有误:

Invalidate Layout是将xml转换成gpu显示的对象

Request Layout是gpu将displaylist绘制出来

Dump DisplayList:给你看displaylist

Profile Node:剖析节点,点击后会显示控件的相关加载时间

对于上面几个笔者也不是很了解,先记下吧！

step 4:点击Profile Node后,随便选一个节点,进行剖析

从上面我们可以获取到一些相关的信息:

①有2个view,说明当前的控件还含有其他子控件

②Measure,Layout,Draw依次是:测量,不会,绘制的时间

③三个灯也代表上述三个阶段,这个控件所占用的时间百分比:

绿色:表示该控件在该阶段比起其他的50%的控件的速度要快

黄色:表示比起其他的50%的控件的速度要慢

红色:表示该控件在该阶段的处理速度是最慢的

最后一点:

对于Android的UI来说，invalidate和requestLayout是最重要的过程，Hierarchyviewer提供了帮助我们

Debug特定的UI执行invalidate和requestLayout过程的途径，方法很简单，只要选择希望执行这两种

操作的View点击按钮就可以。当然，我们需要在例如onMeasure()这样的方法中打上断点。

这个功能对于UI组件是自定义的非常有用，可以帮助单独观察相关界面显示逻辑是否正确。