在app开发中布局几乎是必不可少的基础，随着UI越来越多，布局的重复性、复杂度也会随之增长。而每一个view都需要measure ,layout ,draw这三步来完成，如果层级太深自然会导致整个绘制过程耗时大量的时间，从而造成启动速度慢，卡顿都问题。而ondraw在频繁刷新时可能多次触发，因此他又不能做耗时的操作，还可能内存抖动。对于布局检查我们主要使用Layout Inspector.

Layout Inspector布局分析工具

Android Studio IDE的菜单Tools--->Layout Inspector子菜单，如下图：

布局分析工具

布局分析关联应用

显示隐藏view

​ Attributes窗口：选择Component Tree窗口中的一个子View视图时，呈现该子视图的全部配置属性。

总结：

Layout Inspector 只能用于查看布局view树层级，不能查看布局性能；并且对设备的api的要求比较高（API29-30）

从上面分析的布局层级中，Google给我们提供了三个优化布局的方案，下面就逐一介绍一下：

include标签（简化布局结果，提供复用性）

​

​ app开发过程中，会遇到不同的Activity里面有相同的布局，这时我们可以将这些通用的布局提取出来到一个单独的layout文件里，再使用include标签引入到相应的页面布局文件里。

使用场景：

​ 一个APP的顶部布局、侧边栏布局、底部Tab栏布局、ListView和GridView每一项的布局等

特别说明：

1. 如果我们需要给include标签和其所在加载的布局根节点设置id的话，这两个id必须一致，或者只给其中一个设置id即可；
2. include 引用的布局文件的id不要和外面主布局中的id设置相同了，否则会出现找错视图；
3. 如果需要给include设置位置时，那么必须要设置大小width ,height，否则编译会出问题，一般情况不需要设置；
4. 如果一个布局文件中引入两个相同的include布局，那么就需要给include设置不同的id来进行区分；
5. 当你使用了databinding时，就必须要给include标签制定id

使用方法：

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

Merge标签（减少布局层次）

​ merger标签相当于一个包裹的作用，他在优化UI接口的时候主要目的是通过删减多余或额外的层级，从而优化整个android layout的结果。

使用场景（典型）

1.布局顶节点是FrameLayout且不需要设置background或Padding等属性时，可以用merge标签来替代，因为Activity内容视图的parent view就是FrameLayout

2.当某一个布局作为子布局include时，使用merge当作该子布局的顶节点，这样在被引入的时候回自动被忽略掉，而将其子节点布局全部合并到主布局中

3.自定义一个组合视图时（自定义多个系统widget组合的视图，自定义视图继承于Linearlayout ,RelativeLayout等）

特别说明：

1. 只能作为根布局使用

2. 当Infalte以merge标签开始的布局文件时，必须制定一个父viewGroup ,并且必须要设定attachToRoot为true

   RelativeLayout mRootLayout = (RelativeLayout) mLayoutInflater
                   .inflate(R.layout.customview_titlebar_layout, this,true);
   

简单使用：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:clickable="true"
            android:src="@drawable/vector"
            tools:ignore="MissingConstraints"
            app:tint="@color/selector" />
</merge>

由于activity 在加载布局setContent时，是加载到ContentFrameLayout中去，而我们从源码可以看到ContentFrameLayout是继承自FrameLayout的：

public class ContentFrameLayout extends FrameLayout {

    public interface OnAttachListener {
        void onDetachedFromWindow();
        void onAttachedFromWindow();
    }
    //............
}

所以我们可以直接使用merge标签来作为布局的根节点，我们再次使用Layout Inspector分析工具来分析，发现并没有merge标签这一层级，如下：

merge标签布局分析

ViewStub标签（需要时加载）

他是在需要的时候去加载，不需要时则不用加载，这样可以节约内存使用。我们通常使用的visiable ,gone ,invisiable来控制显示隐藏，其实这些视图时已经加载好了的。

ViewStub 是一个轻量级的View，它一个看不见的，不占布局位置，占用资源非常小的控件。他是一个宽高都为0的view ,默认是不可见的。只有通过调用setVisibility函数或者Inflate函数才会将其要装载的目标布局给加载出来，从而达到延迟加载的效果，这个要被加载的布局通过android:layout属性来设置。

使用场景

1. 在程序的运行期间，某个布局在Inflate后，就不会有变化，除非重新启动。
2. 想要 单次 控制显示与隐藏的是一个布局文件，而非某个View。

特别说明：

1. ViewStub只能Inflate一次，之后ViewStub对象会被置为空。按句话说，某个被ViewStub指定的布局被Inflate后，就不会够再通过ViewStub来控制它了。

2. ViewStub只能用来Inflate一个布局文件，而不是某个具体的View，当然也可以把View写在某个布局文件中。

简单使用：

<!--自定义个布局-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/introduce"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimary"
        android:textSize="18sp"
        android:text="I am a subview of viewstub "/>
</LinearLayout>

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

viewStub.inflate().findViewById(R.id.introduce);//在调用inflate()时，view就已经加载好了

个人觉得在列表页面使用时比较方便，例如在页面加载时，不需要加载RecycleView,待网络请求响应后，再加载列表，这样可以使页面加载速度加快。

扁平化布局constraintLayout

  尽量使用constraintLayout约束布局来使布局尽量扁平化，减少非必需的UI组件。
  关于ConstraintLayout的使用将在新的文章中介绍。

温馨提示：上述三个布局的使用都有一些限制，在使用时一定一定要多加注意。