(十一)Android 性能优化 Layout Inspector

小酌鸡汤

学向勤中得,萤窗万卷书。

本文来源《Android 性能优化 全家桶》

Layout Inspector的前世今生

 Layout Inspector 中的大部分功能以前是由 Hierarchy Viewer 和 Pixel Perfect 工具提供的,但这些工具现已弃用。

Layout Inspector的作用?

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

现在,就一起实操体验 Layout Inspector ~

(1)打开 Layout Inspector
  1. 在连接的设备或模拟器上运行应用。
  2. 依次点击 Tools > Layout Inspector
  3. 在随即显示的 Choose Process 对话框中,选择想要检查的应用进程,然后点击 OK
Layout Inspector 选择应用进程
Layout Inspector 布局检查器

 布局检查器将显示以下内容:

  • 视图层次结构:支持折叠,收起,选中,右键调整视图等。
  • 工具栏:进程选择,视图边界,参考图像叠加,视图时时刷新,3D图层间距调整等。
  • 屏幕截图:设备上显示的应用布局的屏幕截图,支持点击选中视图,右键调整视,放大/缩小视图,适应屏幕,3D视角等。
  • 属性布局:选定视图的布局属性。
(2)选择视图

 要选择某个视图,请在 View Tree 或屏幕截图中点击该视图。选定视图的所有布局属性都会显示在 Properties Table 中。如果您的布局包含重叠的视图,则只有前面的视图可以在屏幕截图中点击。要选择某个不在前面的视图,请在 View Tree 中点击该视图。

(3)隔离视图

 要使用复杂的布局,您可以隔离各个视图,以便只有布局的一部分显示在 View Tree 中并呈现在屏幕截图中。只有在设备仍处于连接状态时,您才能隔离视图。隔离视图要求设备呈现布局,以便 Layout Inspector 可以再截取一个屏幕截图。

 要隔离某个视图,请执行以下某项操作:右键View

Layout Inspector 隔离视图
(3.1)右键 Hide Subtree

 隐藏选中的视图


Layout Inspector 右键 Hide Subtree
(3.2)右键 Show Only Subtree

 仅显示选中的视图


Layout Inspector 右键 Show Only Subtree
(3.3)右键 Show Only Parents

 仅显示选中的视图及其父布局


Layout Inspector右键 Show Only Parents
(3.4)右键 Show All

 展示全部视图(也就是恢复默认视图)

(4)隐藏布局边界 & 隐藏布局模板
Layout Inspector 隐藏布局边界和布局模板
  • Show Borders:显示/隐藏 布局的边界(也就是View的区域块边线),好比我们在开发者模式中打开了 View绘制边界 一样。
  • Show View Label:显示布局的布局模板,比如上图的Memory Profiler他的布局模板就是AppCompatTextView
(5)将应用布局与参考图像叠加层进行比较

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


Lyaout Inspector 应用布局与参考图像叠加层进行比较
  • 要加载叠加层,请点击布局检查器顶部的 Load Overlay 图标。叠加层将会缩放以适合布局。
  • 要调整叠加层的透明度,请使用 Alpha 滑块。
  • 要移除叠加层,请点击 Clear Overlay 图标。
号外:还在为UI细节而烦恼吗?有了叠加层比较器,可以轻松查出像素级的UI问题。只要有了视觉设计稿,一键导入,就可以对比软件产品与视觉设计稿的区别。论UI细节,我们更专业!
(6)视图时时更新,与连接设备随动显示(API >= 29)
Layout Inspector 视图时时更新
(7)缩放拖拽等检查布局细节
Layout Inspector 缩放拖拽等检查布局细节
(8)3D视图功能(API >= 29)
Layout Inspector 3D视图功能
(9)3D视图功能详情
Layout Inspector 3D视图功能详情
(10)3D视图功能的不足(截图太大,功能失效)
Layout Inspector 3D视图功能的不足(截图太大,功能失效)
(11)截取新屏幕截图来捕捉布局更改
  • ;如果设备上的布局发生更改,布局检查器不会自动更新。要捕捉布局更改,请再次依次点击 Tools > Layout Inspector 来创建新的屏幕截图。
  • 每个屏幕截图都保存在 project-name/captures/ 下的一个单独的 .li 文件中并在一个新标签页中打开。
Layout Inspector 窗口中的布局检查器屏幕截图(.li 文件)
  • 您可以通过双击 project-name/captures/ 下的 .li 文件,重新加载以前的屏幕截图。
一起来查看自己项目的 Layout Inspector 吧~

小编的扩展链接

参考链接

风吹秀发飘,日出倩影娇

举手之劳,赞有余香! ❤ 比心 ❤

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

推荐阅读更多精彩内容