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

96
梦想编织者灬小楠
2017.08.29 19:03* 字数 1957
android_7.1.png
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
activity.png

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

1.Android SDKtools包下的hierarchyviewer,最终展现的视图效果如下:

hierarchyviewer.png
hierarchyviewer.png

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

layout_inspector.png
layout_inspector.png

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

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

正文

一.视图层级分析

从根视图开始分析视图层级,如下图所示:

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

DecorView的第一个子View(LinearLayout), 如下图所示:

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

DecorView的第二个子View(View),如下图所示:

navigationbar.png
navigationbar.png
  • View的ID值表明了这个视图的作用:底部导航栏背景
  • 这个View的高度是96像素(属性列表间距较大,截图没有截到)

DecorView的第三个子View(View),如下图所示:

statusbar.png
statusbar.png
  • View的ID值表明了这个视图的作用:状态栏背景
  • 这个View的高度是48像素(属性列表间距较大,截图没有截到)

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

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

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


    get_statusbar.png
    get_statusbar.png
  • 在onCreate方法里直接获取该"状态栏View"值为null,如下图所示:


    get_statusbar_fail.png
    get_statusbar_fail.png
  • 当视图已经显示出来时,可以拿到这个"状态栏View",如下图所示:


    get_statusbar_success.png
    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
    statusbar_reason.png

    结论:当我们在OnCreate方法里执行完setContentView(int id)方法后,"状态栏View"和"底部导航栏View"还没有添加进DecorView,此时生成的DecorView并不是最终显示的DecorView。

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


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

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

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

ViewStub的属性信息,如下图所示:

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

FrameLayout的属性信息,如下图所示:

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

接下来,继续分析FrameLayout的子View,如下图所示:

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

ContentFrameLayout的视图属性,如下图所示:

content_framelayout.png
content_framelayout.png
  • ContentFrameLayout的高度相比于父布局减少了112px
  • 从layout_topMargin属性可以看出,这112px用于预留顶部边界,空出了标题栏的高度
content_framelayout2.png
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
actionbar_container.png
  • ActionBarContainer从名字也可以看出这是一个标题栏容器。
  • ActionBarContainer的子View中当前处于显示状态的只有一个Toolbar。

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

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

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

360N5.png
360N5.png

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

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

change_theme.png
change_theme.png

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

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


layout_inspector_error.png
layout_inspector_error.png

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


layout_inspector_open.png
layout_inspector_open.png

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

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

android_device_monitor.png
android_device_monitor.png

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

qq_layout.png
qq_layout.png

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

题外话

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

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

reveal.png
reveal.png
Android文集