安卓布局优化

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,348评论 4 355
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,906评论 1 283
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,191评论 0 235
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,295评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,606评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,107评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,507评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,217评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,848评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,183评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,734评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,084评论 2 247
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,608评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,921评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,627评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,103评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,054评论 2 257

推荐阅读更多精彩内容