安卓布局优化

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

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

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

image.png

注意:
1.在真机上使用Hierarchy Viewer有些问题,我使用的是模拟器。
2.需要使用一个库ViewServer

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

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

<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

可以看到measure消耗的时间是20多ms,这已经大于了每个视图的最大渲染时间了(16ms),这是因为我们嵌套了多个RelativeLayout,每个RelativeLayout都会对子view测量两次,这样就造成了measure时间随层级的加深呈指数型增长RelativeLayout性能分析
下面,我们把多余的ViewGroup取消,使布局层级扁平化,如下所示

<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布局优化(二),减少过度绘制

推荐阅读更多精彩内容