设计测试/调试的大纲视图

Posted 2023-02-26

【中文标题】设计测试/调试的大纲视图

【英文标题】：outline views for design testing/debugging

【发布时间】：2011-10-21 16:25:01

【问题描述】：

当您运行应用程序以查看视图的位置和大小时，是否有一种简单的方法可以用某种颜色的边框勾勒出视图的轮廓？ 就像您可以使用插件“web developer”在 Firefox 中概述网页上的元素一样。

现在我有一些用于不同颜色的“可绘制形状”xml 文件，用于不同的视图。但是，仅仅为了打开和关闭轮廓而需要在布局 xml 文件中的视图中添加和删除所有这些可绘制的形状并不是最佳选择。

我认为可能可行的一个解决方案（但假设有更好的方法）是，如果可以在一个 xml 中添加所有“形状：s”并且仍然能够“链接”到每个单独的布局xml文件？ 在这种情况下，我可以只有两个 xml 文件，一个在“形状”中有“笔划”，一个没有（只是空的“形状：s”），只需更改它们之间的名称，即可打开和关闭大纲。

现在每个形状文件都是这样的（ex drawable/test_border_red.xml）

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <stroke 
    android: 
    android:color="#ff0000" 
    />
  <padding 
    android:left="1dp" 
    android:top="1dp" 
    android:right="1dp"
    android:bottom="1dp" 
    />   
  </shape>

然后添加...

android:background="@drawable/test_border_red"

到布局 xml 文件中的每个有趣的视图。

如果可以在一个xml文件中包含所有“形状”，代码应该是什么样子？

【问题讨论】：

通常，人们使用 Hierarchy View 进行这种调试，因为它往往提供更多信息并且不需要更改代码。最大的缺点是您需要在模拟器上测试您的应用才能使用 Hierarchy View。

1+ 好问题我也在关注这个答案，这是我发布的问题***.com/questions/9521889/… 你会在我的问题中看到这个我已经发布了图片，你可以轻松地打开/关闭大纲，但我不确定。

【参考方案1】：

无需代码：

在您用于测试的设备上转到settings -> developer options 并打开Show layout boundaries

问题解决了

【参考方案2】：

使用活动的根视图尝试这种递归方法

private void outlineViews(View parent)
    if (!(parent instanceof ViewGroup))
        return;
    
    ViewGroup vg = (ViewGroup) parent;
    for (int i=0; i<vg.getChildCount(); i++)
        View view = vg.getChildAt(i);
        GradientDrawable gd = new GradientDrawable();
        gd.setStroke(3, Color.RED);
        view.setBackgroundDrawable(gd);
        outlineViews(view);
    

您也可以从“设备”选项卡中选择“转储视图层次结构”，它会转储您当前的布局以及有关视图的所有信息

【参考方案3】：

一种可能的解决方案是您可以有一些自定义布局，例如你可以扩展LinearLayout，覆盖onDraw方法，

在您新的自定义布局的 onDraw 方法中，您可以获取所有子视图的位置并递归地在它们上绘制笔触