Android Studio 调试利器-使用布局检查器和布局验证工具调试布局Layout Inspector

使用 Android Studio 中的布局检查器,您可以将应用布局与设计模型进行比较、显示应用的放大视图或 3D 视图,以及在运行时检查应用布局的细节。如果布局是在运行时(而不是完全在 XML 中)构建的并且布局行为出现异常,该工具会非常有用。

使用布局验证,您可以在不同的设备和显示配置(包括可变字体大小或用户语言)上同时预览布局,以便轻松测试各种常见的布局问题。

打开布局检查器

如需打开 Layout Inspector,请执行以下操作:

  1. 在连接的设备或模拟器上运行应用
  2. 依次点击 Tools > Layout Inspector

如图 1 所示,布局检查器将显示以下内容:

  1. Component Tree:布局中视图的层次结构。
  2. Layout Display:按照应用布局在设备或模拟器上的显示效果呈现布局,并显示每个视图的布局边界。
  3. 布局检查器工具栏:布局检查器的工具。
  4. Attributes:所选视图的布局属性。
image.png

图 1. 布局检查器

选择视图

如要选择某个视图,请在 Component TreeLayout Display 中点击该视图。所选视图的所有布局属性都会显示在 Attributes 面板中。

如果布局包含重叠的视图,您可以选择不在前面的视图,方法是在 Component Tree 中点击该视图,或者旋转布局并点击所需视图。

隔离视图

如要使用复杂的布局,您可以隔离各个视图,以便只有布局的一部分显示在 Component Tree 中并呈现在 Layout Display 中。

如要隔离某个视图,请在 Component Tree 中右键点击该视图,然后选择 Show Only SubtreeShow Only Parent

如需返回完整视图,请右键点击该视图,然后选择 Show All

隐藏布局边框和视图标签

如需隐藏布局元素的边界框或视图标签,请点击 Layout Display 顶部的 View Options 图标

image.png

,然后切换 Show BordersShow View Label

将应用布局与参考图像叠加层进行比较

如需将应用布局与参考图像(如界面模型)进行比较,您可以在布局检查器中加载位图图像叠加层。

  • 如需加载叠加层,请点击布局检查器顶部的 Load Overlay 图标
    image.png

    。系统会缩放叠加层以适合布局。
  • 如需调整叠加层的透明度,请使用 Overlay Alpha 滑块。
  • 如需移除叠加层,请点击 Clear Overlay 图标
    image.png

实时布局检查器

实时布局检查器可以在应用被部署到搭载 API 级别 29 或更高版本的设备或模拟器时,提供应用界面的完整实时数据分析。

如需启用实时布局检查器,请依次转到 File > Settings > Experimental,勾选 Enable Live Layout Inspector 旁边的框,然后点击 Layout Display 上方 Live updates 旁边的复选框。

实时布局检查器包含动态布局层次结构,可随着设备上视图的变化更新 Component TreeLayout Display

此外,使用属性值解析堆栈,您可以调查资源属性值在源代码中的来源位置,并按照属性窗格中的超链接导航到其位置。

图 2. “Attributes”面板中的属性值,其中包含指向属性定义的超链接。

最后,Layout Display 可在运行时对应用的视图层次结构进行高级 3D 可视化。如需使用该功能,只需在实时布局检查器窗口中点击相应布局,然后拖动鼠标旋转该布局即可。如需展开或收起布局的图层,请使用 Layer Spacing 滑块。

图 3. 布局的旋转 3D 视图

布局验证

“布局验证”是一款可视化工具,用于同时预览不同设备中及采用不同配置的布局,有助于您在此过程的早期发现布局存在的问题。如需使用该功能,请点击 IDE 窗口右上角的 Layout Validation 标签页:

image.png

如需在可用的配置集之间切换,请从“Layout Validation”窗口顶部的下拉列表中选择以下某个配置:

  • Pixel Devices
  • 自定义
  • 色盲
  • 字体大小

image.png

动态图地址

Pixel Devices

预览布局在 Pixel 设备上的显示效果:

图 4. 布局验证工具中的 Pixel 设备预览

图 4. 布局验证工具中的 Pixel 设备预览

自定义

如需自定义要预览的显示配置,请从各种设置(包括语言、设备或屏幕方向)中进行选择:

image.png

动态图地址

图 5. 在布局验证工具中配置自定义显示

色盲

为了方便色盲用户使用您的应用,请通过常见色盲类型的模拟验证布局:

图 6.布局验证工具中的色盲模拟预览

图 6. 布局验证工具中的色盲模拟预览

字体大小

验证各种字体大小下的布局,并通过使用较大的字体测试布局,改进适用于视力障碍用户的无障碍功能:

图 7. 布局验证工具中的可变字体大小预览

图 7. 布局验证工具中的可变字体大小预览

HierarchyviewerAndroid Studio(3.1)以上

作为传统的Android 层级视图浏览器,在Android 开发领域,受到了广大开发者的青睐,但是很遗憾,在Android SDK 25.3.0 google已经废弃了。。。
如果你还是不想舍弃,使用它还是按照如下方式可以找到的:

image
image

到这里我们已经找到另一个被Google废弃的“Android device Monitor”工具,点击下图图标

image

哇!!!看到了我们熟悉的界面,喜欢的快拿去玩耍吧!
不过,由于Google对已废弃的东西,不是很友好,现在AS调用它奇卡无比(不知道是不是我的电脑太low了),所以我还是推荐大家使用如下替代产品!

Layout Inspector

打开方式AS→tools→Layout Inspector:

image

选择我们的视图打开:

image

视图层级一幕了然,界面美观易用,快去愉快的玩耍吧!

参考网址:
官方文档:使用布局检查器和布局验证工具调试布局
Android进阶 - 视图层级实时分析
Android Studio(3.1)以上查看UI布局层级

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335