做一个帮你快速调试UI参数的Android插件「建议收藏」

本文会介绍一个帮助我们快速调试UI参数的插件开发过程以及开发思路，可能需要一些简单的Idea平台插件开发经验，希望对大家会有一些帮助。

插件介绍

插件基于Layout Inspector，强化了这个工具，故取名Layout Master。

使用方式同Layout Inspector，呼出Android Studio(3.1以上)或Idea(2017.3以上)的Action面板，输入Layout Master点击即可，双击Property，支持修改的话会弹出Popup，同Layout Inspector一样，每次Activity重启了就需要再次运行Layout Master才可。

插件效果如下（图中仅演示了部分属性修改效果，支持很多属性）

项目Github地址：github.com/wuapnjie/La…

为什么要做这个插件

我在平时的Android开发过程中，会经常修改一些UI的参数，比如padding，margin，color等等，有时View是通过非XML代码动态注入的，很多参数设置在真机调试时才能看到（而且我是那种一定要看真机跑效果的人），所以很多时候效果不满意就要改参数继续看效果，设计师们也会经常让我们改一些UI上的参数，这样每次都要重新编译运行一次代码，或者Instant Run一下，项目小还好，项目一大，这个重新编译运行的时间成本就会很大，大大降低了开发效率。于是我决定开发这个插件，快速看到UI参数改变的效果。

插件的简单原理介绍

不同于React Native和Flutter这些框架实现的热加载（哈哈，其实我也不知道这些框架怎么实现的），这个插件对View的参数实时设置都是通过Java反射调用View自身的setXXX()方法实现的，所以只能看效果，代码本质上没有改变，需要达到满意效果后再去修改，但这还是大大节省了时间，至少对我来说是。

那要怎么样做到从电脑端（IDE端）调用APP上View的setXXX()方法呢？很简单，让手机与电脑之间进行一个Socket长连接，定义一些命令协议，就可以实现电脑端对手机端的控制。

实现思路与过程

最初的思考

首先要实现想要的功能，第一步就是建立手机端与电脑端的Socket长连接并拿到关于Activity的View Hierarchy和View的Properties。这样的功能我在两个地方看到过，一个是Facebook强大的调试框架Stetho，另外一个就是Android Studio自带的Layout Inspector。这两个工具都与手机端建立了一个Socket长连接，建立了自己的通信协议。下面我会简单介绍一下两者的区别，并解释了为什么我选择基于Layout Inspector做一个插件，而不是基于Stetho做一个代码扩展。

Stetho

Stetho这个项目功能十分强大，不光可以看到View Hierarchy，还可以调试数据库，监测网络等等，实现上和我之前介绍的一样，建立了一个Socket长连接，APP负责获取需要的数据，通过Socket传输到Chrome DevTools，这里Chrome DevTools有一个开发API，接收到特定的Json，会进行渲染显示，在DevTools的操作也会Json格式包装成特定的数据包发送给APP进行操作。由于Stetho的代码比较复杂，我没有对其深入研究，也不了解Chrome DevTools的API，但大致原理已经介绍了，如果你感兴趣或有什么想法，可以去研究研究。

Layout Inspector

同样，Layout Inspector也是通过Socket长连接来获取APP的相关UI信息，由于Idea的社区版代码是开源的，而作为Android插件的Layout Inspector代码也是开源，具体可以编译Idea项目查看，代码入口在android插件的AndroidRunLayoutInspectorAction.java类中。

两者差别

Stetho的Socket连接相关代码是写在它的库中的，需要调试的APP依赖这个项目，进行一些配置，侵入性较强，但功能强大。而Layout Inspector则对代码零侵入，那它是怎么实现Socket长连接的呢？其实我们在调试时，一直有一个长连接连接着电脑，那就是ADB，ADB工具在电脑端建立了一个Socket服务端，连接着所有开启了USB调试模式的手机客户端，所以所有我们调试的应用都可以使用Layout Inspector工具。

所以我选择了基于Layout Inspector制作了一款插件，代码零侵入，使用方便简单，而且Android SDK中和Idea中已经帮我做好了很多代码工作，实现起来简单，接下来我会介绍。

Layout Inspector分析

要基于Layout Inspector做，势必要对这个工具的实现过程有了解，这里我简单分析一下它的源码，同时也会涉及到Android SDK中的一个类ViewDebug。

Action入口

做过Idea插件开发的同学肯定都知道Idea的Action系统，很多我们进行的快捷操作在Idea平台中是一个个的Action

我们可以通过这个Action去快速找到它的入口类，上面也介绍了，在AndroidRunLayoutInspectorAction.java

@Override
public void actionPerformed(AnActionEvent e) {
  Project project = e.getProject();
  assert project != null;

  if (!AndroidSdkUtils.activateDdmsIfNecessary(project)) {
    return;
  }

  AndroidProcessChooserDialog dialog = new AndroidProcessChooserDialog(project, false);
  dialog.show();
  if (dialog.getExitCode() == DialogWrapper.OK_EXIT_CODE) {
    Client client = dialog.getClient();
    if (client != null) {
      new LayoutInspectorAction.GetClientWindowsTask(project, client).queue();
    }
    else {
      Logger.getInstance(AndroidRunLayoutInspectorAction.class).warn("Not launching layout inspector - no client selected");
    }
   }
}

IT知识分享网

从 入口代码中可以看出，我们要先选一个Process，也就是下面这个界面

Window选择

之后会在Background执行LayoutInspectorAction.GetClientWindowsTask，这个Task会获取当前活跃的ClientWindow（也就是Android中的Window），如果超过一个的话，会出现对话框让我们选择，这里就不贴图了，反正大家都用过。

Capture View

选择了Window之后就会在Background执行LayoutInspectorCaptureTask，这个Task会获取到需要显示的View Hierarchy，View Properties以及一张BufferedImage（选择Window的截图），这些信息全部以二进制的信息储存在.li文件中

显示

然后Layout Inspector自定义了一个FileEditor以支持.li文件的显示，也就是我们能看到View Tree和Properties Table的主界面。具体显示细节可参考LayoutInspectorContext类

Android SDK中的响应

上面介绍了Layout Inspector在插件端的简单流程，它想Android端要了Window信息，View的信息，相关代码都在HandleViewDebug类，下面是这个类的一些结构

也就是说服务端发出了一些命令的包，那作为客户端的Android是在哪里作出响应的呢？经过我的代码查找，我在Android SDK中发现了一个DdmHandleViewDebug类和ViewDebug类

从两个类的structure中就可以看出，Android端是在ViewDebug这个类获取各种信息的，具体代码就不分析了，大家感兴趣可以研究研究。

同时，这个类中有一个注解，叫ExportedProperty

IT知识分享网/** * This annotation can be used to mark fields and methods to be dumped by * the view server. Only non-void methods with no arguments can be annotated * by this annotation. */
@Target({ ElementType.FIELD, ElementType.METHOD })
@Retention(RetentionPolicy.RUNTIME)
public @interface ExportedProperty {
    ……
}

查看这个注解用的地方，可以发现，所有Layout Inspector中显示的Properties都被标注了这个注解。

通过这个注解我们可以给一些自定义的View暴露出想要显示的属性。

扩展Layout Inspector

经过上面的对Layout Inspector的分析，我们已经足够了解它并可以对其做扩展了。Layout Inspector只能查看View Hierarchy和Properties，它完全可以做更多的事情。

在HandleViewDebug类中有一个方法invokeMethod，这个方法可以做到调用View的相关方法，目前只支持primitive arguments的方法，很可惜，意味着我们不能改变TextView的text。

触发的方法在Android SDK的ViewDebug的invokeViewMethod方法中，可以看到是通过反射实现的，view post出去的

 		 /** * Invoke a particular method on given view. * The given method is always invoked on the UI thread. The caller thread will stall until the * method invocation is complete. Returns an object equal to the result of the method * invocation, null if the method is declared to return void * @throws Exception if the method invocation caused any exception * @hide */
    public static Object invokeViewMethod(final View view, final Method method,
            final Object[] args) {
        final CountDownLatch latch = new CountDownLatch(1);
        final AtomicReference<Object> result = new AtomicReference<Object>();
        final AtomicReference<Throwable> exception = new AtomicReference<Throwable>();

        view.post(new Runnable() {
            @Override
            public void run() {
                try {
                    result.set(method.invoke(view, args));
                } catch (InvocationTargetException e) {
                    exception.set(e.getCause());
                } catch (Exception e) {
                    exception.set(e);
                }

                latch.countDown();
            }
        });

        try {
            latch.await();
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }

        if (exception.get() != null) {
            throw new RuntimeException(exception.get());
        }

        return result.get();
    }

接下来就好办了，核心方法Idea和Android SDK都为我们提供好了，我们只需要构建我们的插件UI，写入View的相关方法即可。

由于我们需要对View的Property进行操作，由于负责显示View Properties的控件是私有的，所以这里我通过反射获取了实例，并为其添加了一个双击鼠标事件。

IT知识分享网private var propertyTable: PTable

init {
  val editorReflect = Reflect.on(layoutInspectorEditor)
 
  val context = editorReflect.get<LayoutInspectorContext>("myContext")

  propertyTable = context.propertiesTable
  ...
}

...
fun hook() {

  propertyTable.addMouseListener(object : MouseAdapter() {
    ...  
  }
}

双击过后就是显示一个Popup，不同的类型显示不同的Popup。

不支持动画的普通属性

支持动画的属性

颜色属性

Enum类型的属性

Bitwise类型的属性

自定义的属性

可以支持自定义View的自定义的属性无疑是最棒的，实现起来也很简单，在介绍ViewDebug类时，介绍了ExportedProperty注解，我们只需要在自定义的View中运用这个注解就可以了，并设置好setXXX()方法，一个简单例子，注意这个category一定要为custom，插件才会做出响应，属性名中带有color会被认为是颜色。

public class ColorView extends TextView {

  @ViewDebug.ExportedProperty(category = "custom", formatToHexString = true)
  private int color = Color.BLACK;

  @ViewDebug.ExportedProperty(category = "custom")
  private int number = 0;

  @ViewDebug.ExportedProperty(category = "custom")
  private boolean needShowText = true;

  public ColorView(Context context) {
    super(context);
  }

  public ColorView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
  }

  public ColorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

  public void setColor(int color) {
    this.color = color;
    setBackgroundColor(color);
  }

  public void setNeedShowText(boolean needShowText) {
    this.needShowText = needShowText;
    if (!needShowText) {
      setText("");
    } else {
      setText("" + number);
    }
  }

  public void setNumber(int number) {
    this.number = number;
    setText("" + number);
  }

}

之后的细节就不具体展开了，毕竟核心原理已经介绍过了。插件代码开源，感兴趣的同学可以看看，不要喷我代码写的差就行。

结语

如果大家喜欢这个插件，可以在Android Studio或Idea的插件中心下载使用，喜欢这篇文章可以给个喜欢，有什么问题可以评论或私信我。

请给个好评，嘿嘿😜

也可以直接在这里下载：github.com/wuapnjie/La…

安装时不要解压那个zip包

插件项目Github地址：github.com/wuapnjie/La… 欢迎Star和PR

希望这篇文章可以对你有什么帮助，我也会继续努力~