前言

最近在编写布局时，发现这一块是有很多值得深入学习的地方的。毕竟应用开发，界面展示是十分重要的部分。另外在开发时，为自己的代码做好规范，你不仅需要让几周几个月之后的你简单清晰地理解目前的代码，也要让一同参与开发的同伴理解。

这里有一篇文章可以进行参考：[Android]命名规范和编码规范

本次文章我们讲一下 Layout 布局的优化，一个层次分明无冗余的布局，不仅能带来更流畅的加载，还能使维护代码变得简单清晰。

检查和优化 Layout 层次

程序的每个组件和 Layout 都需要经过初始化、布局和绘制，如果布局嵌套层次过深，就会导致加载操作更为耗时，更严重的话还可能导致内存溢出。本节我们学习使用两个工具来检查和优化 Layout。

HierarchyViewer

HierarchyViewer 能够从可视化的角度直观地获得布局设计结构，帮助优化布局设计，然而似乎在没有 Root 的真机上使用不了，不知道是否有类似的工具。

如果你使用的是真机，暂时可以使用 Android Device Monitor 的 Dump View Hierarchy for UI Automator 功能来查看布局层次。

HierarchyViewer 位于 android_sdk\tools\hierarchyviewer.bat

1. 连接设备启动要观察的应用
2. 打开 HierarchyViewer，点击 Load View Hierarchy 来查看所选组件的层级

如图所示：

可以点击查看各个节点加载所耗费的时间，找出布局的不合理之处。

Lint

Android Lint是在 ADT 16 提供的新工具，它是一个代码扫描工具，能够帮助我们识别代码结构存在的问题。Lint 包含的一些检测规则有：

• 使用 compound drawable 替代一个包含 ImageView 和 TextView 的 LinearLayout。
• 合并根 FrameLayout
• 没用的子节点或父节点
• 硬编码问题
• 拼写检查

如果你使用的 IDE 是 Android Studio，那么在平时编写 XML 布局时，肯定有接收到 Lint 显示的警告或错误提示，这些问题不一定会导致布局无法使用，但对于项目的规范性和维护性来说是十分重要的。

Android Studio 可在菜单项 Analyze – Inspect Code，选择范围后对代码进行 Lint 检查，从检查结果中可以得到代码中不规范的编码，以便开发者进行修正。

<include> 标签

当你需要重用到一些比较复杂的组件，如一个 Toolbar 时，你可以使用 <include> 标签来把其他 Layout 嵌入到当前 Layout。

创建可重用布局

首先创建一个新的 XML 文件并定义 Layout。例如下面的 titlebar.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width=”match_parent”
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg">

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

使用重用布局

在你想要插入重用布局的地方使用 <include> 标签：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width=”match_parent”
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />

    ...

</LinearLayout>

通过这种方式，可以提高布局的制作效率，也使得重用布局更加规整和易维护。当然，这种方式并不能减少布局的层次结构，只是便于代码管理。

<merge> 标签

<merge> 标签在你嵌套 Layout 时取消了 UI 层次中冗余的 ViewGroup，如上一节中的重用布局中，外层 ViewGroup 是一个 LinearLayout。但如果当我们重用该布局时，是插入到另一个 LinearLayout 中的话，就会导致 Layout 冗余，即其实只需要一个便足够了。

这时，<merge> 标签就派上用场了，你可以这样编写布局：

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

当使用该布局文件时，系统会忽略掉 <merge> 标签，相当于只有两个 Button 组件插入到了父布局中。

通过该标签，可减少层次避免嵌套过深的情况发生。

ViewStub

ViewStub 是一个轻量视图，不需要大小信息，也不会在被加入的 Layout 中绘制任何东西，当你引入只在特殊情况才显示的布局，如进度条，出错信息，提示信息等布局时，就可以使用 ViewStub。

定义 ViewStub

<ViewStub
    android:id="@+id/stub_import"
    android:inflatedId="@+id/panel_import"
    android:layout="@layout/progress_overlay"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom" />

其中 Android:id 指 ViewStub 的 id，仅在 ViewStub 可见之前使用。

inflatedId 是引入布局的 id。

加载 ViewStub

载入用 ViewStub 声明的布局有两种方式：

((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);
// or
View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();

第一种是设置可见性，第二种是调用 inflate() 方法。

后者会返回引入的布局以便多次使用。

总结

以上便是本次布局优化的内容，我感觉还有更多的地方能够加以优化，但在网上搜索，对于 Layout 的优化，不外乎是上面几种方式。

更重要的还是对一个 UI 界面加以拆解，多思考能否用更简单的方式来实现界面，编写一份足够简单、层次清晰的 XML 文件。

参考资料

Android Training – Improving layouts

Android 布局优化

谈谈 Android 布局的优化