Android进阶 - 视图层级实时分析

android_7.1.png

摘要

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

引题

注：
1.笔者分析代码使用的API版本为API 25 (Android 7.1)
2.笔者使用的模拟器为Android 7.1

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

activity.png

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

1.Android SDK中tools包下的hierarchyviewer，最终展现的视图效果如下：

hierarchyviewer.png

2.Android Studio也有自带的视图分析工具 Layout Inspector（布局检查器）,打开方式如下图所示：

layout_inspector.png

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

注：笔者推荐Android Studio开发者可以使用Layout Inspector。

正文

一.视图层级分析

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

decorview.png

• 我们可以看到视图的根布局是DecorView，宽度和高度为模拟器屏幕宽高。
• DecorView中包含3个子View:LinearLayout、View、View。

---

DecorView的第一个子View（LinearLayout）, 如下图所示：

linearlayout.png

• LinearLayout的高度与屏幕高度相比少了96像素，从layout_bottomMargin属性可以知道这96像素用来预留底部边界了。

---

DecorView的第二个子View（View）,如下图所示：

navigationbar.png

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

---

DecorView的第三个子View（View）,如下图所示：

statusbar.png

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

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

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

• 只有在API 21(Android 5.0)以上才能获取到该"状态栏View",如下图所示：

  
  get_statusbar.png

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

  
  get_statusbar_fail.png

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

  
  get_statusbar_success.png
• 简单说明一下在onCreate方法里直接获取"状态栏View"值为null的原因：
  findViewById(int id) 这个方法最终会走的DecorView(ViewGroup)的findViewTraversal(int id)方法进行View遍历，根据id值查找子View。我们Debug走到这个方法时发现DecorView里只有一个LinearLayout，另外两个View还没有加载进来，如下图所示：
  statusbar_reason.png
  结论：当我们在OnCreate方法里执行完setContentView(int id)方法后，"状态栏View"和"底部导航栏View"还没有添加进DecorView，此时生成的DecorView并不是最终显示的DecorView。

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

---

接下来，分析DecorView的第一个子View(LinearLayout)，如下图所示：

linearlayout_detail.png

• LinearLayout包含两个子View：ViewStub和FrameLayout
• ViewStub显示的文字颜色为灰色，说明该View没有在当前视图上显示出来。

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

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

viewstub.png

• ViewStub的getVisibility属性值为 GONE (ViewStub处于隐藏状态)

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

framelayout.png

• FrameLayout的高度值为1136px，相比于父布局LinearLayout又少了48px。
• 从mTop属性可以知道，FrameLayout在布局时顶点坐标高度从48px开始，空出了状态栏的高度。

---

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

actionbaroverlaylayout.png

• FrameLayout只有一个子View：ActionBarOverlayLayout。
• ActionBarOverlayLayout的宽度和高度与FrameLayout保持一致。
• ActionBarOverlayLayout有两个子View：ContentFrameLayout和ActionBarContainer

ContentFrameLayout的视图属性，如下图所示：

content_framelayout.png

• ContentFrameLayout的高度相比于父布局减少了112px。
• 从layout_topMargin属性可以看出，这112px用于预留顶部边界，空出了标题栏的高度。

content_framelayout2.png

• ContentFrameLayout的mID属性值为content（android.R.id.content）
• ContentFrameLayout里的子View就是我们activity_main.xml中的视图了。

注：这里有个很有趣的地方，我们activity_main.xml文件里用的是TextView，但是最后却被转成了AppCompatTextView。限于篇幅，笔者重起了一篇文章Android进阶 - 源码中的视图转换，有兴趣的朋友可以看看。

ActionBarContainer的视图属性，如下图所示：

actionbar_container.png

• ActionBarContainer从名字也可以看出这是一个标题栏容器。
• ActionBarContainer的子View中当前处于显示状态的只有一个Toolbar。

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

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

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

360N5.png

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

例二：笔者把Activity的主题"Theme.AppCompat.Light.DarkActionBar"换成无标题栏主题"Theme.AppCompat.Light.NoActionBar"，运行后视图布局如下：

change_theme.png

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

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

layout_inspector_error.png

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

layout_inspector_open.png

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

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

android_device_monitor.png

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

qq_layout.png

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

题外话

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

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

reveal.png