如何打造稳定、好用的 Android LayoutInspector?

时间:2022-11-16 11:34:53

一、背景

 

Android 开发者在日常的开发中,经常需要用到查看视图的功能,Android Studio 开发团队为我们提供了 LayoutInspector 插件。在较新的版本提供了 LiveLayoutInspector,支持 3D,但是不管是 LayoutInspector 还是 LiveLayoutInspector 都非常难用。比如:

  • 速度极慢,遇到复杂的布局经常超时
  • 某些情况无法选中指定的 View

本文将围绕 LayoutInspector 的痛点,分析问题并修复,最终将 LayoutInspector 变成一个稳定、好用的插件。

二、加速 Dump View Hierarchy

 

2.1 问题描述

如何打造稳定、好用的 Android LayoutInspector?

开发复杂业务的同学在使用 LayoutInspector 时都遇到过上图所示的错误:由于 View 树结构复杂超时。网上也有其他相关的解决办法,原理就是修改 timeout 的值,目前默认值是 20s,所以改成 1min,大概率是可以的了。

为了更好的解决这个问题,比如是否能加速?我们看一下整个 LayoutInspector 抓取的流程。梳理流程之前,我们需要找到功能的入口。

2.2 问题分析

2.2.1 Dump 总流程

平常开发者使用 LayoutInspector 的流程一般如下:

  • 和 Attach debugger 类似,先获取要 LayoutInspector 的进程
  • 如果进程中不止一个 ViewRootImpl,还需要选择 window

如何打造稳定、好用的 Android LayoutInspector?

在 IDEA Plugin 框架体系中,大多数插件的功能入口都依赖 Action,上图 LayoutInspector 的功能入口对应的 Action 如何找到呢?最快速、准确的办法就是 Debug,在我们点击功能入口之前,在 AnAction#actionPerformed 加上断点。

如何打造稳定、好用的 Android LayoutInspector?

从 AndroidRunLayoutInspectorAction 出发,我们找到了真正的任务:

  1. LayoutInspectorCaptureTask。 

抓取 View 视图的关键方法如下:

如何打造稳定、好用的 Android LayoutInspector?

我们可以看到这里先构造了一个 Options,Opentions 中有个参数:ProtocolVersion,目前我们能使用的是 ProtocolVersion.Version1,Goolge 内可以通过 StudioFlags 打开 ProtocolVersion.Version2。

如何打造稳定、好用的 Android LayoutInspector?

capture view 的流程会比较长,涉及到 adb 通信原理,我们先简单了解一下 adb 通信架构。

  • adb server: 运行在我们的 PC 开发机上,监听 5037 端口
  • adb daemon: 运行在 Android 设备上
  • adb server 通过 USB/tcp 和 adbd 通信

如何打造稳定、好用的 Android LayoutInspector?

了解了基本的 adb 通信基础之后,我们再来看整个 captureview 的原理:

  • 通过 ClientWindow 发起 loadWindowData 的请求(在这里可以看到默认超时时间是 20s)
  • ClinetImpl 收到请求,让 HandleViewDebug 将本次请求封装成 JDWP,然后准备发送
  • ClientImpl 将数据先发送给本 PC 上的 adb server
  • adb server 将数据通过 usb/tcp 透传给 Android 设备上的 adbd
  • Android 设备上的 adbd 根据之前选择的进程信息,将信息再透传给指定的 jdwp 线程
  • jdwp 通过 native 调用 DDMServer 方法
  • DdmHandleViewDebug 收到请求开始处理
  • 处理完请求后,再通过 socket 返回,LayoutInspector 收到结果解析后展示

如何打造稳定、好用的 Android LayoutInspector?

参考:debugger.cc

  • https://android.googlesource.com/platform/art/+/android-cts-5.0_r9/runtime/debugger.cc#3778

2.2.2 dump v1 原理

在上图的流程中可以看到在最后的调用中,有 dump 和 dumpv2 两个方法,而且 dump 方法已经废弃了。

如何打造稳定、好用的 Android LayoutInspector?

源码 ViewDebug.java:

如何打造稳定、好用的 Android LayoutInspector?

看源码我们知道 v1 dump 是获取被 @ExportedProperty 注解作用的 filed 和 method,然后将这些数据写入 ByteArrayOutputStream。比如 View的 padding 属性:

如何打造稳定、好用的 Android LayoutInspector?

当然也有 method:

如何打造稳定、好用的 Android LayoutInspector?

上面两图中的 category: padding 和 focus 体现在 LayoutInspector 的属性面板中:

如何打造稳定、好用的 Android LayoutInspector?

上面看源码的结论:v1 是通过反射遍历所有的 Filed 和 Method。

在我的手机 One Plus7 Android 10 上,View 的 filed 有 487 个,method 有 915 个。写一段简单的代码展示一下仅遍历耗时:

如何打造稳定、好用的 Android LayoutInspector?

输出:

  1. D/View#dump: 10705ms and 692 views 

可以看到我们还没有添加逻辑,仅仅遍历耗时都达到了 10s。

2.2.3 dump v2 原理

  1. 看 ViewDebug#dumpv2: 

如何打造稳定、好用的 Android LayoutInspector?

调用到了 View#encode:

如何打造稳定、好用的 Android LayoutInspector?

相比 v1,v2 就很克制了,只返回有限的数据,需要什么数据就获取什么数据,但不支持自定义的属性,相当于牺牲了一定的灵活性,加快了 dump 的速度。在灵活性、速度两个方面,Google 将 v1 和 v2都保留了,并通过 StudioFlags 提供了开关。

2.3 解决方案

对比完 v1 和 v2 之后,基本可以确定 v2 的速度会快很多了。我们通过自定义 Action,并替换掉原生的 LayoutInspectorCaptureTask,关键是替换下面这个方法:

如何打造稳定、好用的 Android LayoutInspector?

2.3 效果&收益

v2 相比 v1 速度快了非常多,下面贴一下抖音直播间的 Dump 数据,设备:One Plus 7 Android 10.

  1. LayoutInspector V1: 18803ms  
  2. LayoutInspector V2: 328ms 

本章节介绍了如何使用 v2 dump 协议来加速,下面介绍第二个痛点:某些情况无法选中指定的 View。

三、精确获取点击的 View

 

3.1 问题描述

LayoutInspector 还有一个不尽人意的地方——无法选中指定的 View。举个例子:

如何打造稳定、好用的 Android LayoutInspector?

上图蓝框其实是一个空白的没有内容的 View,这个蓝框盖在了「收礼」这个红圈上。在我们点击这个红圈的时候,却是选中的蓝框。

3.2 问题分析

我们首先分析一下 LayoutInspector 的 swing 组件组成:

如何打造稳定、好用的 Android LayoutInspector?

LayoutInspector 中间图片的预览就是上图中的 myPreview。为了解决这个问题,我们看一下这个点击选中的逻辑。IDEA 自定义插件中使用的 GUI 框架是 Java Swing,组件的鼠标点击、鼠标移入、鼠标退出等事件都可以通过 MouseAdapter 来监听。ViewNodeActiveDisplay 的 MouseAdapter 如下:

如何打造稳定、好用的 Android LayoutInspector?

查找指定的 View 逻辑:

如何打造稳定、好用的 Android LayoutInspector?

代码反映出,LayoutInspector 为了满足点击事件消费的顺序,是从后往前遍历的,Z 轴值较大的 View 优先消费事件。但是在很多情况,我们更需要通过比较 View 的面积大小,来选中指定的 View。

3.3 解决方案

其实代码好修复,但是比较麻烦的是,如何替换 ViewNodeActiveDisplay 中getNode 和 updateSelection 相关逻辑呢,我注意到调用 getNode 的地方都是 click/mouseEnter 等事件,所以我们可以替换掉 MosueAdapter,然后重写 getNode 和 updateSelection。

如何打造稳定、好用的 Android LayoutInspector?

如何打造稳定、好用的 Android LayoutInspector?

四、手把手教你搭建 IDEA Plugin 开发环境

 

修复上述两个痛点需要新建一个 IDEA Plugin,和一般插件开发环境略有不同的是,我们需要依赖 android plugin。

如何打造稳定、好用的 Android LayoutInspector?

然后在 build.gradle 中添加如下配置:

  1. // See https://github.com/JetBrains/gradle-intellij-plugin/ 
  2. intellij { 
  3.     localPath = "/Users/xx/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/202.7231092/Android Studio.app" 
  4.     plugins = ['android'
  5.     updateSinceUntilBuild false 

localPath 填写你本地的 Android Studio app 路径。

前面我们提到 LayoutInspector 是 android 插件的一部分,所以这里我们声明 plugins = ['android']

五、总结

 

本文围绕原生 LayoutInspector 的两个痛点,介绍了 LayoutInspector 的工作原理,并提出了解决方案,使得原生 LayoutInspector 稳定、好用。在文章最后也介绍了如何搭建插件工程,方便未接触过插件的新人能进入插件的新世界。

原文地址:https://mp.weixin.qq.com/s?__biz=MzI1MzYzMjE0MQ==&mid=2247489292&idx=1&sn=794667e0f4392b60947b255e7378fd81&utm_source=tuicool&utm_medium=referral