小酌鸡汤
学向勤中得,萤窗万卷书。
本文来源《Android 性能优化 全家桶》
Layout Inspector的前世今生
Layout Inspector 中的大部分功能以前是由 Hierarchy Viewer 和 Pixel Perfect 工具提供的,但这些工具现已弃用。
Layout Inspector的作用?
使用 Android Studio 中的布局检查器,您可以将应用布局与设计模型进行比较、显示应用的放大视图以及在运行时检查应用布局的细节。如果您的布局是在运行时(而不是完全在 XML 中)构建的并且布局表现出意外行为,这会很有用。
现在,就一起实操体验 Layout Inspector ~
(1)打开 Layout Inspector
- 在连接的设备或模拟器上运行应用。
- 依次点击 Tools > Layout Inspector。
- 在随即显示的 Choose Process 对话框中,选择想要检查的应用进程,然后点击 OK。
布局检查器将显示以下内容:
- 视图层次结构:支持折叠,收起,选中,右键调整视图等。
- 工具栏:进程选择,视图边界,参考图像叠加,视图时时刷新,3D图层间距调整等。
- 屏幕截图:设备上显示的应用布局的屏幕截图,支持点击选中视图,右键调整视,放大/缩小视图,适应屏幕,3D视角等。
- 属性布局:选定视图的布局属性。
(2)选择视图
要选择某个视图,请在 View Tree 或屏幕截图中点击该视图。选定视图的所有布局属性都会显示在 Properties Table 中。如果您的布局包含重叠的视图,则只有前面的视图可以在屏幕截图中点击。要选择某个不在前面的视图,请在 View Tree 中点击该视图。
(3)隔离视图
要使用复杂的布局,您可以隔离各个视图,以便只有布局的一部分显示在 View Tree 中并呈现在屏幕截图中。只有在设备仍处于连接状态时,您才能隔离视图。隔离视图要求设备呈现布局,以便 Layout Inspector 可以再截取一个屏幕截图。
要隔离某个视图,请执行以下某项操作:右键View
(3.1)右键 Hide Subtree
隐藏选中的视图
(3.2)右键 Show Only Subtree
仅显示选中的视图
(3.3)右键 Show Only Parents
仅显示选中的视图及其父布局
(3.4)右键 Show All
展示全部视图(也就是恢复默认视图)
(4)隐藏布局边界 & 隐藏布局模板
- Show Borders:显示/隐藏 布局的边界(也就是View的区域块边线),好比我们在开发者模式中打开了 View绘制边界 一样。
-
Show View Label:显示布局的布局模板,比如上图的
Memory Profiler
他的布局模板就是AppCompatTextView
。
(5)将应用布局与参考图像叠加层进行比较
要将应用布局与参考图像(如界面模型)进行比较,可以在布局检查器中加载位图图像叠加层。
- 要加载叠加层,请点击布局检查器顶部的 Load Overlay 图标。叠加层将会缩放以适合布局。
- 要调整叠加层的透明度,请使用 Alpha 滑块。
- 要移除叠加层,请点击 Clear Overlay 图标。
号外:还在为UI细节而烦恼吗?有了叠加层比较器,可以轻松查出像素级的UI问题。只要有了视觉设计稿,一键导入,就可以对比软件产品与视觉设计稿的区别。论UI细节,我们更专业!
(6)视图时时更新,与连接设备随动显示(API >= 29)
(7)缩放拖拽等检查布局细节
(8)3D视图功能(API >= 29)
(9)3D视图功能详情
(10)3D视图功能的不足(截图太大,功能失效)
(11)截取新屏幕截图来捕捉布局更改
- ;如果设备上的布局发生更改,布局检查器不会自动更新。要捕捉布局更改,请再次依次点击 Tools > Layout Inspector 来创建新的屏幕截图。
- 每个屏幕截图都保存在 project-name/captures/ 下的一个单独的 .li 文件中并在一个新标签页中打开。
- 您可以通过双击 project-name/captures/ 下的 .li 文件,重新加载以前的屏幕截图。
一起来查看自己项目的 Layout Inspector 吧~
小编的扩展链接
参考链接
风吹秀发飘,日出倩影娇
举手之劳,赞有余香! ❤ 比心 ❤