4、布局优化（上）：过度绘制（Overdraw）的检测与优化，Hierarchy Viewer 与 Layout Inspector 的使用
布局优化这个话题，我每次在团队内部分享时都会强调一句话：「你看到的界面，可能有一半的像素是白画的」。听起来有点夸张？但我在好几个项目里用工具一测，发现过度绘制的情况比想象中严重得多。今天我们就来聊聊过度绘制（Overdraw）的检测与优化，以及两个核心工具——Hierarchy Viewer 和 Layout Inspector 的使用。
4.1 什么是过度绘制？
说白了，过度绘制就是屏幕上的同一个像素点，在一帧内被重复绘制了多次。你想想看，如果某个区域先画了红色背景，又画了蓝色背景，最后再画一个白色文字——那这个像素点就被画了三次。前两次的绘制其实都是浪费的。
Android 的渲染机制是每 16ms 刷新一帧。如果过度绘制严重，GPU 就要花更多时间去处理这些「无用功」。结果就是掉帧、卡顿，用户滑动时明显感觉不流畅。
核心原则：每帧的绘制次数越少越好。理想情况下，一个像素点只被绘制 1 次。超过 2 次就需要警惕了。
4.2 如何检测过度绘制？
检测过度绘制，Android 自带了一个非常方便的工具——开发者选项里的「调试 GPU 过度绘制」。我个人习惯在开发阶段一直开着这个开关，随时观察界面变化。
4.2.1 开启方式
- 进入「设置」→「关于手机」→ 连续点击「版本号」7 次，开启开发者模式。
- 返回「设置」→「系统」→「开发者选项」。
- 找到「调试 GPU 过度绘制」→ 选择「显示过度绘制区域」。
开启后，屏幕会变成五颜六色的。别慌，这是正常的。颜色代表不同的绘制次数：
| 颜色 | 绘制次数 | 说明 |
|---|---|---|
| 无色/蓝色 | 1 次 | 理想状态 |
| 绿色 | 2 次 | 可接受 |
| 淡红 | 3 次 | 需要优化 |
| 深红 | 4 次及以上 | 严重问题，必须优化 |
注意：深红色区域如果超过屏幕面积的 1/4，基本可以断定这个页面存在严重的性能问题。我曾经在一个第三方 SDK 的弹窗里看到满屏深红，排查后发现是背景层叠了 5 层——嗯，这就是典型的「代码写多了，没人管」的情况。
4.3 过度绘制的常见原因与优化方案
检测到问题后，怎么修？我总结了几个最常见的场景，几乎覆盖了 90% 的过度绘制问题。
4.3.1 背景重复绘制
这是最常见的问题。Activity 设置了背景，布局文件里又设置了背景，子 View 又设置了背景。结果一个像素点被画了三次。
优化方案：
- 只在最顶层设置背景，子 View 尽量不设背景。
- 如果必须设置，考虑使用
android:windowBackground统一管理。
<!-- 错误示例：三层背景 -->
<!-- Activity 主题中设置了 windowBackground -->
<!-- 布局文件中又设置了 -->
<LinearLayout android:background="@color/white">
<TextView android:background="@color/white" />
</LinearLayout>
<!-- 优化后：只保留一层 -->
<LinearLayout>
<TextView />
</LinearLayout>
4.3.2 不必要的裁剪
有时候我们会在布局里用 ViewGroup 嵌套，但子 View 其实完全在父容器的范围内。这时候可以用 clipChildren 或 clipToPadding 来减少绘制区域。
小技巧：在自定义 View 中，如果确定某个区域不需要绘制，可以调用 canvas.clipRect() 来裁剪掉。我曾在列表项的优化中，用这个方法减少了 30% 的绘制区域。
4.3.3 透明叠加层
比如一个半透明的遮罩层盖在图片上，图片本身又被绘制了一次。这种场景在弹窗、引导页中很常见。
优化方案：
- 能用
alpha属性解决的，不要用两个 View 叠加。 - 考虑使用
View.setLayerType()将复杂视图渲染到离屏缓冲中。
4.4 Hierarchy Viewer 的使用
Hierarchy Viewer 是 Android Studio 中一个老牌工具，专门用来分析布局层级。虽然现在有了更现代的 Layout Inspector，但 Hierarchy Viewer 在某些场景下依然好用——尤其是查看 View 树的嵌套深度。
4.4.1 如何打开
在 Android Studio 中，选择 Tools → Layout Inspector（旧版本叫 Hierarchy Viewer）。连接设备后，选择你要分析的 Activity。
4.4.2 核心指标
你会看到一个树状结构，每个节点代表一个 View。重点关注三个颜色指标：
- 绿色：测量、布局、绘制速度都很快。
- 黄色：相对较慢，需要关注。
- 红色：性能瓶颈，必须优化。
我记得有一次排查一个列表卡顿问题，用 Hierarchy Viewer 一看，发现一个列表项竟然嵌套了 8 层 LinearLayout。这就是典型的「布局过深」问题。
经验之谈：View 树的深度建议控制在 5 层以内。超过 5 层，测量和布局的时间会成倍增加。能用 ConstraintLayout 扁平化布局的，尽量用。
4.5 Layout Inspector 的使用
Layout Inspector 是 Hierarchy Viewer 的升级版。它不仅能看布局层级，还能实时查看每个 View 的属性、背景、边距等。我个人现在主要用这个工具。
4.5.1 打开方式
在 Android Studio 中：View → Tool Windows → Layout Inspector。或者直接点击工具栏上的手机图标。
4.5.2 核心功能
- 3D 视图：可以旋转查看布局的立体结构，直观看到哪些 View 被遮挡了。
- 属性面板：点击任意 View，右侧会显示它的所有属性，包括背景、padding、margin 等。
- 实时刷新：修改代码后，重新编译即可看到最新布局，不需要重新打开工具。
使用技巧：在 Layout Inspector 中，可以按住 Alt 键点击某个 View，它会高亮显示该 View 的绘制区域。配合过度绘制检测，能快速定位到「哪个 View 导致了深红色区域」。
4.6 实战：优化一个典型的过度绘制页面
假设我们有一个页面，包含标题栏、列表和底部按钮。用过度绘制检测一看，整个页面都是淡红色和深红色。怎么优化？
步骤一：用 Layout Inspector 分析层级
打开 Layout Inspector，发现标题栏的背景是 @color/blue，列表项的背景是 @color/white，底部按钮的背景是 @color/gray。但 Activity 的主题中已经设置了 windowBackground 为白色。这就导致每个区域都被绘制了两次。
步骤二：去除冗余背景
把 Activity 主题中的 windowBackground 去掉，或者把布局中的背景去掉。只保留最需要的那一层。
步骤三：优化列表项
列表项中有一个 CardView，里面又套了一个 LinearLayout。其实 CardView 本身就可以作为容器，不需要再嵌套。直接去掉 LinearLayout，把子 View 放在 CardView 中。
步骤四：使用 merge 标签
如果列表项的根布局是 FrameLayout，可以考虑用 <merge> 标签来减少一层嵌套。
<!-- 优化前 -->
<FrameLayout>
<LinearLayout>
<ImageView />
<TextView />
</LinearLayout>
</FrameLayout>
<!-- 优化后 -->
<merge>
<ImageView />
<TextView />
</merge>
优化完成后，再次打开过度绘制检测，你会发现深红色区域消失了，大部分变成了无色或绿色。这就是一个典型的优化流程。
避坑指南：我曾经在优化一个 Fragment 时，把背景全部去掉了，结果发现 Fragment 切换时出现了黑色闪屏。后来才意识到，windowBackground 不能随便去掉，它其实是用来做「启动窗口」的。正确的做法是：保留 windowBackground，但去掉布局中重复的背景。
4.7 总结
过度绘制优化，说白了就是「少画几笔」。工具只是辅助，关键还是要有意识地去检查。我建议大家在每个页面开发完成后，都打开过度绘制检测看一眼。养成习惯后，你会发现很多问题在编码阶段就能避免。
下一章我们会继续聊布局优化的进阶技巧，包括 ConstraintLayout 的高级用法和异步布局。嗯，到时候再细聊。