『Android性能优化手册』布局分析与调优

前言

Android开发中，一个好的应用，除了要有吸引人的功能和交互之外，在性能上也应该有高的要求，如果单单实现页面和业务功能只是完成了基本任务，Android系统对内存要求也是非常高的，稍不注意，就会发生某个页面绘制突然发生卡顿甚至OOM，这对产品的用户体验都是致命性的打击，这就需要我们在日常开发中注意性能方面的优化。


封面

 

目录

  • 造成卡顿的原因
  • 如何分析当前页面绘制情况
    - 使用GPU过度绘制检测页面渲染层级
    - 使用Layout Inspector查看布局层级
  • 如何优化
    - 移除叠加的背景
    - 合理使用布局设计
    - 采用布局标签减少布局嵌套
    ------ include和merge的用法
    ------ ViewStub的用法

 

正文

布局实现是Android开发中必不可少的一部分，绝大部分页面都离不开布局文件的支持，对于有一定经验的开发者来说，通过编写布局文件实现页面展示是一个很简单的操作，然而当页面设计复杂起来，层级越来越深，页面会变得越来越卡顿，作为开发者都应该关注下性能优化，在平时的开发工作中注意一些细节，针对布局文件进行多方位分析和调优，尽可能地去优化应用。
 

造成卡顿的原因

我们都知道，Android中是以层级叠加来实现页面的展示，一个Activity绑定着一个Window，Window又管理着页面的根ViewGroup，然后ViewGroup中包含着View，层层包裹，就如同Photoshop中的图层：

View层级示意图

因此如果同一个位置上面叠加了多个层级，该像素点就会被绘制多次。本来用户只需要看到最上面的那一层就够了，但我们多余的渲染了多次，这就浪费了大量的GPU和CPU资源，并且也增加了绘制时长。而人眼与大脑之间的协作无法感知超过60fps的画面更新，也就是1秒内如果必须展示60帧，才能看起来流畅，1s=1000ms，因此，平均每16ms就要绘制一帧，如果布局层级很深，渲染时长超过16ms，就会看起来稍显卡顿。

 

如何分析当前页面绘制情况

1）使用GPU过度绘制检测页面渲染层级

Android系统支持我们查看页面绘制情况的功能，在手机的设置-开发者选项中有一个调试GPU绘制的开关：

GPU过度绘制开关

打开之后，会发现手机界面上出现了很多颜色区域：
 
显示GPU过度绘制

GPU过度绘制帮我们显示了每个像素点的绘制情况，并通过几种颜色来代表当前像素点的绘制次数（比如说上图中只有背景的区域都是蓝色，有文字或者图标叠加的地方变成了绿色），GPU过度绘制一共有以下几种颜色：

原色：没有过度绘制
蓝色：1 次过度绘制
绿色：2 次过度绘制
粉色：3 次过度绘制
红色：4 次及以上过度绘制

过度绘制颜色意义

平常开发的界面中，应该尽可能地将过度绘制控制为 2 次（绿色）及其以下，原色和蓝色是最理想的。粉色和红色应该尽可能避免，在实际项目中避免不了时，应该尽可能减少粉色和红色区域。

2）使用Layout Inspector查看布局层级

在SDK以前的旧版本，是可以通过Hierarchy Viewer来查看，但后面更新了版本，Google采用Layout Inspector来代替Hierarchy Viewer，详见 Android SDK Tools Revision 25.3.0。
可以在新版本的AndroidStudio中，菜单栏的Tools里面找到Layout Inspector：

Layout Inspector

然后选择所要分析的进程，比如选择你自己正在运行中的应用，然后跳转到你要分析的页面，确认之后会在项目目录下生成一个captuers文件夹，Layout Inspector会根据当前手机正在显示的页面生成一个文件存放在这个目录下：

Layout Inspector预览面板

一共有三块区域，左边可以看到页面的层级，从最顶层的DecorView开始，其下所有当前页面存在的View都会显示在这里（关于DecorView的层级可见我另一篇文章Android 从源码看懂窗口绘制流程），中间显示的是当前页面的预览，右边显示的是每个View的布局属性，包括宽高、padding等等。通过Layout Inspector能清晰地看到页面的层次结构，比如说布局文件中某一处重复包裹了两层View，或者不小心在自定义ViewGroup的时候多加了一层根View，在这里都能看得出来。

注意：Layout Inspector有一定限制，要求运行的机器Android版本为16（Android4.1）以上，且要是当前正在运行的应用进程才可以，其实它就相当于对当前界面的一个快照。

 

如何优化

1）移除叠加的背景

我们注册Activity时一般都会为它设置主题，主题一般都会有默认背景 windowBackground，比如下面这种：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowBackground">@color/colorPrimary</item>
</style>

它会为我们的页面设置一个背景，但有些时候，布局文件里面的根布局也会设置一个背景，这个时候window的background用户完全看不到，实际上没有作用，这种情况下我们可以移除它的背景：

<item name="android:windowBackground">@null</item>

刚才是针对window的背景做了处理，同理，布局嵌套中也有可能出现这种情况，比如说一个LinearLayout里包裹了两个子View，而且这两个子View刚好占满了LinearLayout的全部空间，那LinearLayout同样就没必要设置背景了。
 

2）合理使用布局设计

我们平时都是用五大布局组合成页面的结构，相同的效果，可以用不同的ViewGroup来组合实现，但是RelativeLayout底层会测绘两次，而LinearLayout和FrameLayout只会绘制一次（详见 RelativeLayout和LinearLayout及FrameLayout性能分析）。因此性能上不如LinearLayout和FrameLayout，比如下面这个布局：

布局优化demo

我们可以采用 RelativeLayout 来实现：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:padding="16dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Describe"/>
</RelativeLayout>

也可以采用 FrameLayout 来实现：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:padding="16dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="Title"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Describe"/>
</FrameLayout>

但是注意，以上是在不增加页面层级的情况下，可以用FrameLayout和LinearLayout代替RelativeLayout实现，但是RelativeLayout也有它的优点，利用它的各种相对属性可以减少我们的页面层级，所以总的来说就是，如果能减少页面层级可以考虑采用RelativeLayout，如果是相同层级的情况下，优先考虑采用FrameLayout和LinearLayout。
另外，很多时候我们为了方便喜欢在LinearLayout中，采用它的layout_weight来为子View设置显示的比例，但是layout_weight同样会触发LinearLayout测量两遍，所以慎用。

推荐使用Google推出的一个约束布局——ConstraintLayout，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。它与 RelativeLayout 一样有相对的属性，但性能上比RelativeLayout更胜一筹。另外它还能按照比例约束控件的位置和尺寸。

 

3）采用布局标签减少布局嵌套

Android中提供了几种布局标签——merge、include、ViewStub。利用它们能够为我们减少很多不必要的嵌套。

include和merge的用法

比如说一个项目中多处使用到一个重复的布局，如下：


布局优化demo

就是一个纯色背景上面叠加一个文字居中的布局，布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/colorPrimary"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="#ffffff"
            android:text="Common Card"/>
    </FrameLayout>
</FrameLayout>

这样一方面布局文件显得很累赘，当View多起来时不方便查看，另一方面万一项目中要统一更改该布局，也要一处处改动，这个时候可以考虑将我们重复的部分抽取成一个xml文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/colorPrimary"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="#ffffff"
            android:text="Common Card"/>
    </FrameLayout>

通过 include 标签来将刚才的布局引入：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/layout_item"/>

</FrameLayout>

但是通过include只是换了种方式包裹布局，我们使用Layout Inspector查看该页面，本质上布局层级还是跟刚才一样：

include包裹之后的布局层级

这个时候就要结合merge标签来进行合并了，使用merge标签可以帮我们忽略掉我们的子布局的根View，相当于直接将子布局添加到我们主布局下，我们将刚才的 layout_item的根FrameLayout改为merge标签：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="#ffffff"
        android:text="Common Card"/>
</merge>

再次运行，查看布局层级如下：

merge优化后布局层级

可以看到少了一层FrameLayout，我们的ImageView和TextView都被直接添加到activity的根FrameLayout下，因此merge经常与include搭配使用，减少include场景下的布局嵌套。
merge还有其他使用场景，比如Activity的xml文件的根View是FrameLayout，并且只有宽高，没有设置任何其他属性时，可以考虑采用merge来替换它，因为我们xml根View的父View其实也是个FrameLayout，所以实际上是重叠了两层。

但是，merge标签有很多要注意的地方：

merge标签必须使用在根布局（这也正是为何推荐搭配include使用的原因）
merge会帮我们忽略掉根View，因此根View的布局属性也全都会失效，会直接采用主布局中其父View的布局属性
merge标签本质上不是一个View，对它设置的任何布局属性都是没有意义的，并且在通过LayoutInflate.inflate()方法获取它的时候，第二个参数必须指定一个父容器，且第三个参数必须为true，也就是必须为merge下的视图指定一个父亲节点。（详见我另一篇 LayoutInflater.inflate各个参数作用了解一下？）

 

ViewStub的用法

ViewStub可以用来包裹布局，被包裹的布局在页面加载时是没有被加载出来的，只有调用了viewStub.inflate()或者viewStub.setVisible()时，才会被加载出来，也就是类似一种懒加载的机制，很适用于用来包裹我们的一些缺省布局，比如无网络提示、加载错误提示等等，或者一些不需要页面一启动就显示出来的View，因为这些布局不一定会展示给用户，如果全部写在layout文件里面的话，页面加载的时候无论可不可见实际上都是会加载出来的（注意区分加载和可见的概念）。
以无网络提示为例子，首先定义我们的无网络布局：

<?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:gravity="center"
    android:orientation="vertical">
    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/ic_nonet"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Check Your Internet Connection"/>
</LinearLayout>

将其通过ViewStub引入到主布局文件中：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ViewStub
        android:id="@+id/no_net_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/layout_no_net"/>
    <TextView
        android:id="@+id/loading_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="正在加载中..."/>
</FrameLayout>

在Activity中模拟无网络提示，让其延迟2秒加载：

viewStub = findViewById(R.id.no_net_view);
loadingTv = findViewById(R.id.loading_tv);

Handler handler = new Handler();
handler.postDelayed(new Runnable() {
    @Override
    public void run() {
        loadingTv.setVisibility(View.GONE);
        viewStub.inflate();
    }
}, 2000);

效果如下：

ViewStub效果图.gif

ViewStub使用时也有一些要注意的点：

ViewStub通过inflate来进行布局的渲染，但是该方法只能调用一次。
ViewStub包裹的布局根部不能是merge标签

 

结语

Android开发中布局优化不是一两天的事，日常开发中灵活运用，根据场景所需采用对应的优化策略，虽然这些都是比较小的细节处理，但是老话说的好，细节决定成败，养成优化的习惯，才能让你的页面体验纵享丝滑。
 

关于作者

一个在奋斗路上的Android小生，欢迎关注，互相交流Android开发的那些事~

GitHub：GitHubZJY
CSDN博客：IT_ZJYANG
简 书：Android小Y

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,784评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,745评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,702评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,229评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,245评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,376评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,798评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,471评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,655评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,235评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,793评论 3赞 304
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2赞 341

推荐阅读更多精彩内容