Android 布局优化：掌握 <include> 与 <merge> 的实战技巧

引言

在 Android 开发中，布局文件是 UI 设计的核心载体，但随着项目复杂度增加，布局冗余、嵌套层级过深等问题会导致性能下降。本文将通过 代码级实战示例 ，详细解析如何利用 <include> 和 <merge> 标签优化布局，并对比其他常用技术（如 ViewStub、自定义组件）的适用场景，助你打造高性能 UI。

---

一、<include> 标签：代码复用的利器

1. 基础用法与代码示例

场景 ：多个页面共享同一个标题栏。
实现步骤：

1. 创建公共标题栏布局 layout_common_header.xml：

   <!-- layout_common_header.xml -->
   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="56dp"
       android:orientation="horizontal">
       
       <ImageView
           android:id="@+id/iv_back"
           android:layout_width="24dp"
           android:layout_height="24dp"
           android:src="@drawable/ic_back"/>
       
       <TextView
           android:id="@+id/tv_title"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:textSize="18sp"/>
   </LinearLayout>

2. 在目标布局中通过 <include> 复用：

   <!-- activity_main.xml -->
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
       
       <include layout="@layout/layout_common_header"/>
       
       <!-- 其他内容 -->
   </LinearLayout>

2. 高级技巧：动态覆盖布局参数

需求 ：在复用标题栏时，调整高度和边距。
实现 ：直接在 <include> 标签中覆盖参数：

<include
    layout="@layout/layout_common_header"
    android:layout_width="match_parent"
    android:layout_height="64dp"
    android:layout_marginBottom="8dp"/>

3. 对比：<include> vs 自定义 View 组件

维度	<include>	自定义 View
复杂度	简单，仅 XML 布局复用	高，需处理测量、绘制逻辑
灵活性	适合静态布局复用	适合动态交互或复杂 UI 逻辑
性能开销	低	较高（若逻辑复杂）
典型场景	标题栏、按钮组、表单控件	图表、自定义动画、复杂组合控件

---

二、<merge> 标签：层级优化的秘密武器

1. 核心作用与代码实战

场景 ：一个包含两个按钮的布局被多次复用，且外层容器与父布局类型相同（如 LinearLayout）。

传统实现（冗余嵌套）：

<!-- layout_buttons.xml -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <Button android:id="@+id/btn_ok"/>
    <Button android:id="@+id/btn_cancel"/>
</LinearLayout>

优化实现（使用 <merge>）：

<!-- layout_buttons_merged.xml -->
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/btn_ok"
        android:layout_width="wrap_content"
        android:layout_height="48dp"/>
    
    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="48dp"/>
</merge>

外层布局调用：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <include
        layout="@layout/layout_buttons_merged"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"/>
</LinearLayout>

优化效果 ：减少一层 LinearLayout，降低视图层级。

2. 必须注意的细节

• 布局参数传递 ：<merge> 标签的子元素必须通过 <include> 的 android:layout_* 属性设置参数。
• 父容器类型匹配 ：<merge> 的子元素最终会直接添加到父容器中，因此其布局参数必须与父容器兼容。

---

三、组合拳：<include> + <merge> 实战案例

1. 场景：表单页面优化

原始布局（冗余代码）：

<!-- activity_form.xml -->
<LinearLayout>
    <LinearLayout>
        <TextView android:text="用户名"/>
        <EditText/>
    </LinearLayout>
    
    <LinearLayout>
        <TextView android:text="密码"/>
        <EditText/>
    </LinearLayout>
</LinearLayout>

优化步骤：

1. 创建复用布局 layout_form_item.xml（使用 <merge>）：

   <merge xmlns:android="http://schemas.android.com/apk/res/android">
       <TextView
           android:id="@+id/tv_label"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>
       
       <EditText
           android:id="@+id/et_input"
           android:layout_width="match_parent"
           android:layout_height="48dp"/>
   </merge>

2. 重构主布局：

   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       
       <include
           layout="@layout/layout_form_item"
           android:layout_margin="16dp">
           <!-- 动态设置 TextView 文本 -->
           <TextView
               android:id="@+id/tv_label"
               android:text="用户名"/>
       </include>
       
       <include
           layout="@layout/layout_form_item"
           android:layout_margin="16dp">
           <TextView
               android:id="@+id/tv_label"
               android:text="密码"/>
       </include>
   </LinearLayout>

优化效果：

• 代码量减少 50%
• 层级从 3 层降为 2 层

---

四、与其他技术的对比与选型

1. <include> vs ViewStub

特性	<include>	ViewStub
加载时机	立即加载	延迟加载（调用 inflate() 时）
内存占用	较高（始终存在）	低（按需加载）
适用场景	高频使用的可见布局	低频使用或条件显示的布局（如错误页）

ViewStub 示例：

<ViewStub
    android:id="@+id/stub_network_error"
    android:layout="@layout/layout_network_error"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

2. <merge> vs Fragment

维度	<merge>	Fragment
复用粒度	UI 布局片段	带逻辑的完整 UI 模块
生命周期	无	完整生命周期管理
性能开销	低	较高（需维护 FragmentManager）
典型场景	静态布局复用	模块化页面（如底部导航栏）

---

五、关键步骤总结

1. 使用 <include> 的步骤

1. 识别重复布局：找出多个页面中重复的 UI 模块。
2. 提取公共布局：将重复部分抽取到独立 XML 文件。
3. 替换为 <include> ：在原布局中使用 <include> 标签引用。
4. 动态调整参数 ：通过 android:layout_* 覆盖布局参数。

2. 使用 <merge> 的步骤

1. 识别冗余容器：查找因复用导致的重复父容器。
2. 替换根标签为 <merge> ：将被复用布局的根标签改为 <merge>。
3. 调整父容器参数 ：通过 <include> 的 android:layout_* 传递参数。
4. 验证层级优化：使用 Layout Inspector 检查视图层级。

---

六、注意事项与最佳实践

1. 避免过度设计 ：简单布局（如单个 TextView）无需使用 <include>。
2. 统一命名规范 ：被复用的布局文件建议以 layout_ 或 common_ 前缀命名。
3. 性能监控 ：通过 Android Studio 的 Profile GPU Rendering 工具检测布局渲染时间。
4. ID 管理 ：被 <include> 的布局根元素建议不设置 ID，避免冲突。

---

七、总结与效果验证

优化效果对比（示例）

指标	优化前	优化后
布局层级	5 层	3 层
测量时间（ms）	12.3	8.1
代码行数	200 行	120 行

核心收获

• 减少嵌套 ：合理使用 <merge> 可显著降低视图层级。
• 提升可维护性 ：通过 <include> 实现模块化布局，修改一处即可全局生效。
• 灵活组合 ：结合 ViewStub 实现按需加载，进一步优化性能。

---

工具推荐：

• Layout Inspector
• Android Profiler