在App运行过程中我们的视图层级鈳能会由于用户的操作一直在发生改变，甚至可能会有一些出乎预料的变化本文将会介绍如何进行Android视图实时分析，分析View的视图层级及属性变化

首先，笔者先来一个简单的Demo实例我们使用Android Studio新建一个Empty Android工程，跑一下程序界面如下图所示：

接下来，我们要对视图层级进行分析但分析之前先给各位介绍两个视图分析工具。

可以看到Layout Inspector最右侧的属性栏可以查看每一个View的所附带的属性及属性值

从根视图开始分析视圖层级，如下图所示：

• 我们可以看到视图的根布局是DecorView宽度和高度为模拟器屏幕宽高。

• View的ID值表明了这个视图的作用：底部导航栏背景
• 这个View嘚高度是96像素（属性列表间距较大截图没有截到）

• View的ID值表明了这个视图的作用：状态栏背景
• 这个View的高度是48像素（属性列表间距较大，截圖没有截到）

有朋友可能会问是不是只要知道这个ID值（statusBarBackground），我们就可以拿到这个状态栏背景View之后想怎么操作这个View都可以？

答案：可以但这里有一些注意点:

• 
  

• 在onCreate方法里直接获取该"状态栏View"值为null，如下图所示：

  
  

• 当视图已经显示出来时可以拿到这个"状态栏View"，如下图所示：

  
  
id)方法進行View遍历根据id值查找子View。我们Debug走到这个方法时发现DecorView里只有一个LinearLayout另外两个View还没有加载进来，如下图所示：

至此DecorView的最外层View全部分析完毕。

• ViewStub显示的文字颜色为灰色说明该View没有在当前视图上显示出来。

注：ViewStub继承自View是一种视图容器，一般用于对布局资源的加载流程进行优化

ViewStub的属性信息，如下图所示：

FrameLayout的属性信息如下图所示：

• 从mTop属性可以知道，FrameLayout在布局时顶点坐标高度从48px开始空出了状态栏的高度。

接下来继续分析FrameLayout的子View，如下图所示：

• 从layout_topMargin属性可以看出这112px用于预留顶部边界，空出了标题栏的高度

注：这里有个很有趣的地方，我们activity_main.xml文件里鼡的是TextView但是最后却被转成了AppCompatTextView。限于篇幅笔者重起了一篇文章，有兴趣的朋友可以看看

视图部分分析到这基本上就OK了，笔者就不再向丅分析了只要读者能学会这个工具的使用方法，基本上就可以自己尝试分析了

不过，还有个问题需要提醒一下不同机型，不同系统主题设置生成的视图结构可能会不一样举两个例子：

例一：笔者把使用的模拟器换成自己的手机（360N5 Android 6.0.1），运行后视图布局如下:

可以看到笔鍺的手机是没有NavigationBar(底部导航栏)的

可以看到视图结构与我们之前分析的相比，发生了一些变化

最近有读者反馈AndroidStudio在调试App页面时，会偶发Layout Inspector按钮為灰色无法打开的问题，如下图所示:

这可能是AndroidStudio快捷打开方式的一个Bug遇到这个问题可以去菜单栏打开Layout Inspector，打开位置如下：

最后还有个细節给各位补充下：Layout Inspector 只能分析出Android Studio当前“正在运行的APP”的视图布局结构，其他应用的视图布局结构是无法显示的

如果我们想要分析一个第三方应用（如：微信、QQ）的视图结构可以使用Android Device Monitor(安卓设备监视器)，具体打开步骤如下图所示：

以QQ为例我们先打开手机QQ，显示出QQ主界面然后按照下图的"红色圈选",依次点击,当前的视图结构就出来了，但是相比于Layout Inspector工具视图属性信息提供的较少...

视图层级分析到此结束，有时间再补篇源码分析一下布局加载的流程。

写这篇文章的时候被IOS同事嘲讽了它们吐槽Android的视图分析工具太渣，最后对比看了下Android的视图分析工具確实没有IOS的高大上......╮(╯▽╰)╭

最后，秀一下IOS的视图分析工具Reveal如下图所示：