Android性能优化之布局优化篇

2024-05-13 04:59:39

2019独角兽企业重金招聘Python工程师标准>>>

怎样才能写出优秀的Android App，是每一个程序员追求的目标。那么怎么才能写出一个优秀的App呢？相信很多初学者也会有这种迷茫。一句话来回答这个问题：细节很重要。今天我们就从最基础的XML布局来谈谈怎么提高Android性能问题吧！

也许你经常会遇到比较复杂的布局，这种情况下，最简单的方法就是多层嵌套实现效果，但是最简单的方法是否是最优的方法呢？这里需要打一个大大的问号？？？？？经验告诉我们，往往简单的方法，得到的结果不是最优解，那么我们通过一个例子来研究一下怎么去优化我们的XML布局吧，下面通过经典微信中的“发现”tab页面中的布局来看看怎么实现。

上面这张图片是微信界面截图，看到这张效果图的第一眼会让开发者想到使用线性布局实现这种左边图片，右边文字，一行白色背景效果很方便。那么我们就按照一般思路写出如下布局代码：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

<code class="hljs" xml=""><linearlayout xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" tools:context=".MainActivity" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/color_eeeeee">

<linearlayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1">

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg_select" android:paddingright="20dp" android:paddingleft="20dp" android:layout_margintop="20dp" android:gravity="center_vertical" android:clickable="true">

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/afe">

<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="16sp" android:textcolor="@android :color/black" android:text="@string/fiends" android:layout_marginleft="15dp">

</textview></imageview></linearlayout>

<linearlayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:layout_margintop="20dp">

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg_select" android:paddingright="20dp" android:paddingleft="20dp" android:gravity="center_vertical" android:clickable="true">

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/afg">

<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="16sp" android:textcolor="@android:color/black" android:text="@string/scan" android:layout_marginleft="15dp">

</textview></imageview></linearlayout>

<view android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/color_e0e0e0" android:layout_marginleft="10dp" android:layout_marginright="10dp"></view>

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg_select" android:paddingright="20dp" android:paddingleft="20dp" android:gravity="center_vertical" android:clickable="true">

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/afh">

<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="16sp" android:textcolor="@android:color/black" android:text="@string/shake" android:layout_marginleft="15dp">

</textview></imageview></linearlayout>

</linearlayout>

<linearlayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:layout_margintop="20dp">

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg_select" android:paddingright="20dp" android:paddingleft="20dp" android:gravity="center_vertical" android:clickable="true">

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/afd">

<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="16sp" android:textcolor="@android:color/black" android:text="@string/nearby" android:layout_marginleft="15dp">

</textview></imageview></linearlayout>

<view android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/color_e0e0e0" android:layout_marginleft="10dp" android:layout_marginright="10dp"></view>

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg_select" android:paddingright="20dp" android:paddingleft="20dp" android:gravity="center_vertical" android:clickable="true">

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/afb">

<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="16sp" android:textcolor="@android:color/black" android:text="@string/float_bottle" android:layout_marginleft="15dp">

</textview></imageview></linearlayout>

</linearlayout>

<linearlayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:layout_margintop="20dp">

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg_select" android:paddingright="20dp" android:paddingleft="20dp" android:gravity="center_vertical" android:clickable="true">

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/agg">

<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="16sp" android:textcolor="@android:color/black" android:text="@string/shopping" android:layout_marginleft="15dp">

</textview></imageview></linearlayout>

<view android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/color_e0e0e0" android:layout_marginleft="10dp" android:layout_marginright="10dp"></view>

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/item_bg_select" android:paddingright="20dp" android:paddingleft="20dp" android:gravity="center_vertical" android:clickable="true">

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ak6">

<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="16sp" android:textcolor="@android:color/black" android:text="@string/games" android:layout_marginleft="15dp">

</textview></imageview></linearlayout>

</linearlayout>

</linearlayout>

<linearlayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/weixin" android:drawabletop="@drawable/ala">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/countans" android:drawabletop="@drawable/al9">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/finds" android:drawabletop="@drawable/alc">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/me" android:drawabletop="@drawable/ale">

</textview></textview></textview></textview></linearlayout>

</linearlayout>

</code>

以上布局的效果图如下：

是不是差不多实现了微信一样的效果？那么我们怎么来判断以上布局是不是最优的呢？当然，我们是有工具来查看的。相信很多童鞋用过了，第一个就是 Hierarchy View，第二个就是显示GPU过度绘制。< 喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMyBpZD0="hierarchy-view检测布局嵌套层次">Hierarchy View检测布局嵌套层次

如果你是使用AS开发的话，你可以在 AS 工具栏中点击 Tools–>Android–>Android Device Monitor–>Hierarchy View。（至于Hierarchy View怎么使用这里就不仔细介绍了）你可以通过这个工具来查看当前布局的层次结构，如下图的布局的层次结构就是上面微信的布局：

ContentFrameLayout接点之后就是我们上面XML代码的布局了，从上图可以看到，我们布局最多有 5 层，其实你从代码中也可以看到是 5 层，那么我们是否能减少以上的布局的嵌套层次呢？答案是肯定的，废话不多说，我们直接上一份我优化过的布局代码吧。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<code class="hljs" perl=""><relativelayout xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" tools:context=".MainActivity" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/color_eeeeee" xmlns:app="http://schemas.android.com/apk/res-auto">

<textview android:id="@+id/tv_one" android:background="@drawable/item_bg_select" android:layout_margintop="20dp" android:text="@string/fiends" android:drawableleft="@drawable/afe">

<textview android:background="@drawable/item_bg_select" android:text="@string/scan" android:drawableleft="@drawable/afg">

<textview android:background="@drawable/item_bg_select" android:text="@string/shake" android:drawableleft="@drawable/afh">

</textview></textview></android.support.v7.widget.linearlayoutcompat>

<textview android:background="@drawable/item_bg_select" android:text="@string/nearby" android:drawableleft="@drawable/afd">

<textview android:background="@drawable/item_bg_select" android:text="@string/float_bottle" android:drawableleft="@drawable/afb">

</textview></textview></android.support.v7.widget.linearlayoutcompat>

<textview android:background="@drawable/item_bg_select" android:text="@string/shopping" android:drawableleft="@drawable/agg">

<textview android:background="@drawable/item_bg_select" android:text="@string/games" android:drawableleft="@drawable/ak6">

</textview></textview></android.support.v7.widget.linearlayoutcompat>

<include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/bottom_layout" android:layout_alignparentbottom="true">

</include></textview></relativelayout>

</code>

哇，代码量少了很多啊，代码也简洁了许多，让人看着就很舒服，那么我们到底进行了怎样的优化呢？从以下几点总结：

使用 style 主题来定义一个通用的属性，从而重复利用代码，减少代码量。上面代码使用了两个style，一个是textStyle 和 LinerLayoutStyle ，代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<code class="hljs" applescript=""><style type="text/css" name="textStyle"><item name=android:layout_width>match_parent</item>

<item name=android:layout_height>wrap_content</item>

<item name=android:textSize>16sp</item>

<item name=android:textColor>@android:color/black</item>

<item name=android:paddingRight>20dp</item>

<item name=android:paddingLeft>20dp</item>

<item name=android:gravity>center_vertical</item>

<item name=android:clickable>true</item></style>

<style type="text/css" name="LinerLayoutStyle"><item name=android:layout_width>match_parent</item>

<item name=android:layout_height>wrap_content</item>

<item name=android:layout_marginTop>20dp</item>

<item name=android:background>@android:color/white</item>

<item name=android:orientation>vertical</item></style></code>

2.减少布局嵌套的层次，上面布局使用TextView可以设置四个方向图片来直接替代LinerLayout下包裹一个ImageView 和TextView。从而这里减少了一层嵌套布局，再次利用RelativeLayout相对布局又减少了一层桥套，提高了加载布局的效率。看图：

从图中看出，不仅减少了两层嵌套布局，而且组件数目也减少，从而减少布局绘制的时间，大大提高了布局加载效率。

3.使用 LinearLayoutCompat 组件来实现线性布局元素之间的分割线，从而减少了使用View来实现分割线效果。LinearLayoutCompat的具体内容请参考 http://blog.csdn.net/feiduclear_up/article/details/46619637 。

4.使用 include 标签加载底部菜单栏布局，include 标签的目的是重复利用布局，来减少代码了。

?

1

2

3

4

5

6

7

8

9

10

11

12

<code class="hljs" xml="">

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/weixin" android:drawabletop="@drawable/ala">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/countans" android:drawabletop="@drawable/al9">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/finds" android:drawabletop="@drawable/alc">

<textview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textcolor="@color/color_9e9e9e" android:text="@string/me" android:drawabletop="@drawable/ale">

</textview></textview></textview></textview></linearlayout></code>

显示GPU过度绘制

你可以在手机打开设置—->开发者选项—->显示GPU过度绘制，这个开关的作用是按不同颜色值来显示布局的过度绘制，绘制的层次从最优到最差：蓝，绿，淡红，红。给出一张直观的形象图片来表示吧

图片从上到下代表不同层次的OverDraw，我们在布局时候，尽量减少红色 Overdraw，看到更多的蓝色区域。来看看微信的 Overdraw图和我们自定义的布局Overdraw图吧

第一张图是腾讯微信的Overdraw 图，第二张图片是我们自定义的 Overdraw 图片。从上面两张图片看出，我们自己的布局和微信原版的布局 Overdraw 过度绘制情况差不多，没啥区别。那么我们能不能去减少红色部分的过度绘制呢？试试吧！

我们先去掉最顶端布局RelativeLayout的背景

?

1	`<code` `class="hljs"` `perl="">android:background=@color/color_eeeeee</code>`

然后修改每个item选择资源 selector

?

1	`<code` `class="hljs"` `perl=""> android:background=@drawable/item_bg_select1</code>`

之前的 item_bg_select.xml 资源是如下代码：

?

1

2

3

4

5

6

7

8

<code class="hljs" xml="">

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:drawable="@color/color_e0e0e0"></item>

<item android:drawable="@android:color/white"></item>

</selector></code>

修改之后的 item_bg_select1.xml资源代码如下：

?

1

2

3

4

5

6

<code class="hljs" xml="">

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:drawable="@color/color_e0e0e0"></item>

</selector></code>

我们发现，新的 selector资源去除了

?

1	`<code` `class="hljs"` `xml=""><item android:drawable="@android:color/white"></item></code>`

因为整个背景是白色的，无需重复设置正常情况下item的背景颜色。

修改之后的效果图如下：

看出，基本没有红色区域，从而提高布局的绘制效率。

总结：现在看来，我们通过减少背景颜色的设置来减少Overdraw的情况。我们自己布局过度绘制的情况比微信本身的情况有很大的改善，是不是感觉很nice～～。

懒加载布局 ViewStub

除了以上两种方法来优化布局，还有其他办法来继续优化布局，在某些情况下，有些布局是仅在需要时才加载，比如小米手机的添加联系人功能就有在编辑姓名的时候有一个下拉按钮显示更多输入信息，看图

遇到这种情况，我们首先想到的就是将不常用的元素使用INVISIBLE或者GONE进行隐藏，这样是否真的好呢？是否达到了布局优化的最终效果呢？利用 INVISIBLE只是隐藏布局，但是布局还是占居当前位置，且系统在加载布局的时候这一部分还是会绘制出来，同样花费绘制时间。那么有没有好的办法来解决这一问题呢？不言而喻，我们可以使用懒加载布局 ViewStub。

ViewStub是Android为此提供了一种非常轻量级的控件。ViewStub虽说也是View的一种，但是它没有大小，没有绘制功能，也不参与布局，资源消耗非常低，将它放置在布局当中基本可以认为是完全不会影响性能的。

下面我们来学习一下 ViewStub的使用方法吧！

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<code class="hljs" xml="">

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="20dp">

<edittext android:id="@+id/et_name" android:layout_width="150dp" android:layout_height="wrap_content" android:hint="@string/name" android:drawableright="@drawable/a0e">

<viewstub android:id="@+id/view_stub" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout="@layout/item_name">

<edittext android:layout_width="150dp" android:layout_height="wrap_content" android:hint="@string/comp">

<edittext android:layout_width="150dp" android:layout_height="wrap_content" android:hint="@string/lead">

</edittext></edittext></viewstub></edittext></linearlayout></code>

item_name.xml 布局如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

<code class="hljs" xml="">

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">

<edittext android:id="@+id/et_name1" android:layout_width="150dp" android:layout_height="wrap_content" android:hint="@string/name1">

<edittext android:id="@+id/et_name2" android:layout_width="150dp" android:layout_height="wrap_content" android:hint="@string/name2">

<edittext android:id="@+id/et_name3" android:layout_width="150dp" android:layout_height="wrap_content" android:hint="@string/name3">

<edittext android:id="@+id/et_name4" android:layout_width="150dp" android:layout_height="wrap_content" android:hint="@string/name4">

</edittext></edittext></edittext></edittext></linearlayout></code>

然后你在代码中这么使用即可

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<code class="hljs" avrasm="">findViewById(R.id.et_name).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

ViewStub viewStub = (ViewStub) findViewById(R.id.view_stub);

if (null != viewStub) {

//主要是这一句显示更多布局

View view = viewStub.inflate();

EditText name1 = (EditText) view.findViewById(R.id.et_name1);

EditText name2 = (EditText) view.findViewById(R.id.et_name2);

EditText name3 = (EditText) view.findViewById(R.id.et_name3);

EditText name4 = (EditText) view.findViewById(R.id.et_name4);

}

}

});</code>

效果图如下：

从效果图可以看出，当用户点击姓名下拉按钮时，其他关于姓名的布局就加载出来了，而且原来的布局是显示在ViewStub布局之下的，位置显示没有任何异常。当然你可以通过 setVisibility(View.VISIBLE)或者viewStub.inflate()方来来让其显示，通过setVisibility(View.INVISIBLE)来隐藏 ViewStub。

Android Lint 工具

这里不展开介绍 Lint 工具，感兴趣的童鞋可以自己网上搜索一把，这个工具主要是用来检查工程中代码的不合理，布局不合理，资源重复，图片重复，等，让开发者进一步优化自己的应用。如果你是AS 用户，你可以在工具栏 Analyze—>Inspect Code 打开此工具使用。

转载于:https://my.oschina.net/u/268088/blog/698692

Android性能优化之布局优化篇相关推荐

Android系统性能优化（69）---含内存优化、布局优化
Android性能优化:含内存优化.布局优化前言在 Android开发中,性能优化策略十分重要因为其决定了应用程序的开发质量:可用性.流畅性.稳定性等,是提高用户留存率的关键本文全面讲解性能优 ...
Android性能优化：布局优化详细解析（含include、ViewStub、merge讲解）
1. 影响的性能布局性能的好坏主要影响 :Android应用中的页面显示速度 2. 如何影响性能布局影响Android性能的实质:页面的测量 & 绘制时间 1个页面通过递归完成测量 & ...
android布局时长分析,Android性能优化：布局优化详细解析（含、、讲解）
前言在 Android开发中,性能优化策略十分重要本文主要讲解性能优化中的布局优化,希望你们会喜欢. 目录 1. 影响的性能布局性能的好坏主要影响 :Android应用中的页面显示速度 2. ...
Android：最全面详细的性能优化攻略（含内存优化、内存泄漏、绘制优化、布局优化、图片优化、APK优化、多线程优化、列表优化等）
前言:佛教中有一句话:初学者的心态,拥有初学者心态是件了不起的事情.真正的大师永远怀有一颗学徒的心. 一.概述在Android中,性能优化是细分领域中最难且也是知识面涉及最深和最广的方向之一. 更快 ...
Android 系统性能优化（30）---Android性能全面分析与优化方案研究
Android 性能优化 1.结合以下四个部分讲解: 性能问题分类性能优化原则和方法借助性能优化工具分析解决问题性能优化指标 2性能问题分类 1.渲染问题:过度绘制.布局冗杂 2.内存问题:内存 ...
App性能优化（布局优化，线程优化，app瘦身优化，页面切换优化，App启动优化，内存优化）
Android APP性能优化(最新总结) 在目前Android开发中,UI布局可以说是每个App使用频率很高的,随着UI越来越多,布局的重复性.复杂度也随之增长,这样使得UI布局的优化,显得至关重要 ...
Android 性能监测工具，优化内存、卡顿、耗电、APK的方法
导语安卓大军浩浩荡荡,发展已近十个年头,技术优化月新日异,如今 Android 9.0 代号P 都发布了,Android系统性能已经非常流畅了.但是,到了各大厂商手里,改源码自定系统,使得 ...
几乎是史上最全最实用的Android性能全面分析与优化方案研究
结合以下四个部分讲解: 性能问题分类性能优化原则和方法借助性能优化工具分析解决问题性能优化指标性能问题分类 1.渲染问题: 过度绘制.布局冗杂 2.内存问题: 内存浪费(内存管理).内存泄漏 ...
Android 卡顿优化 3 布局优化工具 Hierarchy Viewer
欲善其事, 先利其器. 分析布局, 就不得不用到Hierarchy Viewer了. 本文工具使用皆以GithubApp的详情界面RepoDetailActivity为例说明. 为了不影响阅读体验, ...

最新文章

热门文章