我们在XML资源文件上一顿<RelativeLayout>、<ImageView>等操作，就可以完成视图的布局。
安卓中的view呈树状结构分布，最顶层是window、docorView，然后是我们自定义的view。
每一个view都要经过measure，layout，draw三个步骤后才会被渲染到屏幕上。
安卓设备大多数都是一秒钟刷新60次，也就是每一个视图应该在1/60s=16ms的时间内完成measure，layout，draw。
如果我们不恰当地布局视图，如：view层级太高，使用过多复杂的view等，有可能会造成视图不能在16ms之内完成试图内所有view的measure，layout，draw。这样会造成操作不流畅的不良后果。

一、使用Hierarchy Viewer查看视图结构和渲染时间

我们可以使用Hierarchy Viewer来查看视图的结构和渲染时间。

image.png

二、布局优化-视图结构扁平化

我们需要减少布局的层级，使布局结构更加扁平化。
我们首先来看一个极端的反例。

<LinearLayout
    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"
    android:orientation="vertical"
    tools:context="com.tinymonster.hierarchyviewertest.MainActivity">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                >
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    >
                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        >
                        <TextView
                            android:id="@+id/text1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Hello World!"/>
                        <TextView
                            android:id="@+id/text2"
                            android:layout_below="@id/text1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Hello World!"/>
                    </RelativeLayout>
                </RelativeLayout>
            </RelativeLayout>
        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

上面的布局中，嵌套了多个无用的RelativeLayout，实际显示的只有两个TextView，我们可以查看一下这个布局的measure，layout，drawlayout时间，如下图所示：

image.png

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.tinymonster.hierarchyviewertest.MainActivity">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1"
        android:text="Hello World!" />
</LinearLayout>

在此查看测量时间，测量时间变成了0ms(是太快了已经不能计算了？还是哪里出了错误？感觉这个测量时间很不稳定，我继续学习一下)

三、布局优化-减少过度绘制

在多层次重叠的UI结构里面，如果不可见的UI也在做绘制操作，会导致某些像素区域被绘制了多次，这样就会造成CPU和GPU资源的浪费。
我们可以通过手机自带的“调试GPU过度绘制”功能来诊断是否有过度绘制的情况。

开启手机上的GPU过度绘制调试工具

1.点击进入“设置”；
2.点击进入“开发者选项”
3.选中“调试GPU过度绘制”
4.选中“显示过度绘制区域”
这时候你会发现手机出现了奇怪的颜色，这不是手机坏了。

运行过度绘制反例

<RelativeLayout 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="com.tinymonster.hierarchyviewertest.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="500dp"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="400dp"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        />
</RelativeLayout>

上面的布局中，多个imageView有重叠部分，重叠部分肯定出现了过度绘制。
运行APP，我们可以看到下面的图像

image.png

屏幕上不同的颜色表示过度绘制的程度：
1.原色：没有过度绘制，只绘制了一次
2.蓝色：一次过度绘制
3.绿色：两次过度绘制
4.粉色：三次过度绘制
5.红色，三次以上的过度绘制
我们修改布局，去掉ImageView的重叠

<RelativeLayout 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"
    android:orientation="vertical"
    tools:context="com.tinymonster.hierarchyviewertest.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        />
</RelativeLayout>

运行程序，可以看到view的颜色不变，没有过度绘制。

image.png

避免过度绘制的方法

1.选择合适的Layout。LinearLayout的消耗较小，但是表达能力有效，RelativeLayout的表达能力很好，但是性能不高。在合适的情况选择合适的Layout。

2.去掉window的默认背景。当我们使用了Android自带的一些主题时，window会被默认添加一个纯色的背景，这个背景是被DecorView持有的。当我们的自定义布局时又添加了一张背景图或者设置背景色，那么DecorView的background此时对我们来说是无用的，但是它会产生一次Overdraw，带来绘制性能损耗。去掉window的背景可以在onCreate()中setContentView()之后调用getWindow().setBackgroundDrawable(null);或者在theme中添加android:windowbackground="null"。

3.使用viewStub占位。我们经常会遇到这样的情况，运行时动态根据条件来决定显示哪个View或布局。常用的做法是把View都写在上面，先把它们的可见性都设为View.GONE，然后在代码中动态的更改它的可见性。这样的做法的优点是逻辑简单而且控制起来比较灵活。但是它的缺点就是，耗费资源。虽然把View的初始可见View.GONE但是在Inflate布局的时候View仍然会被Inflate，也就是说仍然会创建对象，会被实例化，会被设置属性。也就是说，会耗费内存等资源。推荐的做法是使用android.view.ViewStub，ViewStub是一个轻量级的View，它一个看不见的，不占布局位置，占用资源非常小的控件。可以为ViewStub指定一个布局，在Inflate布局的时候，只有ViewStub会被初始化，然后当ViewStub被设置为可见的时候，或是调用了ViewStub.inflate()的时候，ViewStub所向的布局就会被Inflate和实例化，然后ViewStub的布局属性都会传给它所指向的布局。这样，就可以使用ViewStub来方便的在运行时，要还是不要显示某个布局。

四、总结

手机资源是有限和宝贵的，分配给每个APP的资源更是有限的，我们在布局的时候，可以通过减少视图层级、避免过度绘制来达到较少资源消耗的目的。同时可以使用Hierarchy Viewer、GPU过度绘制调制等工具帮助我们分析布局。

五、参考文献

Hierarchy Viewer使用详解
Android中RelativeLayout和LinearLayout性能分析
Android布局优化（二），减少过度绘制