Android UI性能优化实战 识别绘制中的性能问题(1)

{

public String name;

public int imageId;

public String date;

public String msg;

public Droid(String msg, String date, int imageId, String name)

{

this.msg = msg;

this.date = date;

this.imageId = imageId;

this.name = name;

}

public static List generateDatas()

{

List datas = new ArrayList();

datas.add(new Droid(“Lorem ipsum dolor sit amet, orci nullam cra”, “3分钟前”, -1, “alex”));

datas.add(new Droid(“Omnis aptent magnis suspendisse ipsum, semper egestas”, “12分钟前”, R.drawable.joanna, “john”));

datas.add(new Droid(“eu nibh, rhoncus wisi posuere lacus, ad erat egestas”, “17分钟前”, -1, “7heaven”));

datas.add(new Droid(“eu nibh, rhoncus wisi posuere lacus, ad erat egestas”, “33分钟前”, R.drawable.shailen, “Lseven”));

return datas;

}

}

现在的效果是：

注意，我们的需求是整体是Activity是个白色的背景。

开启Show GPU Overdraw以后：

对比上面的参照图，可以发现一个简单的ListView展示Item，竟然很多地方被过度绘制了4X 。 那么，其实主要原因是由于该布局文件中存在很多不必要的背景，仔细看上述的布局文件，那么开始移除吧。

• 不必要的Background 1

我们主布局的文件已经是background为white了，那么可以移除ListView的白色背景

• 不必要的Background 2

Item布局中的LinearLayout的android:background="@android:color/darker_gray"

• 不必要的Background 3

Item布局中的RelativeLayout的android:background="@android:color/white"

• 不必要的Background 4

Item布局中id为id_msg的TextView的android:background="@android:color/white"

这四个不必要的背景也比较好找，那么移除后的效果是：

对比之前的是不是好多了~~~接下来还存在一些不必要的背景，你还能找到吗？

• 不必要的Background 5

这个背景比较难发现，主要需要看Adapter的getView的代码，上述代码你会发现，首先为每个icon设置了背景色（主要是当没有icon图的时候去显示），然后又设置了一个头像。那么就造成了overdraw，有头像的完全没必要去绘制背景，所有修改代码：

Droid droid = getItem(position);

if(droid.imageId ==-1)

{

holder.icon.setBackgroundColor(0x4400ff00);

holder.icon.setImageResource(android.R.color.transparent);

}else

{

holder.icon.setImageResource(droid.imageId);

holder.icon.setBackgroundResource(android.R.color.transparent);

}

ok，还有最后一个，这个也是非常容易被忽略的。

• 不必要的Background 6

记得我们之前说，我们的这个Activity要求背景色是白色，我们的确在layout中去设置了背景色白色，那么这里注意下，我们的Activity的布局最终会添加在DecorView中，这个View会中的背景是不是就没有必要了，所以我们希望调用mDecor.setWindowBackground(drawable);，那么可以在Activity调用getWindow().setBackgroundDrawable(null);。

setContentView(R.layout.activity_overdraw_01);

getWindow().setBackgroundDrawable(null);

ok，一个简单的listview显示item，我们一共找出了6个不必要的背景，现在再看最后的Show GPU Overdraw 与最初的比较。

ok，对比参照图，基本已经达到了最优的状态。

5、Overdraw 的处理方案二：clipRect的妙用

我们在自定义View的时候，经常会由于疏忽造成很多不必要的绘制，比如大家看下面这样的图：

多张卡片叠加，那么如果你是一张一张卡片从左到右的绘制，效果肯定没问题，但是叠加的区域肯定是过度绘制了。

并且material design对于界面设计的新的风格更容易造成上述的问题。那么有什么好的方法去改善呢？

答案是有的，android的Canvas对象给我们提供了很便利的方法clipRect就可以很好的去解决这类问题。

下面通过一个实例来展示，那么首先看一个效果图：

左边显示的时效果图，右边显示的是开启Show Override GPU之后的效果，可以看到，卡片叠加处明显的过度渲染了。 (ps:我对这个View添加了一个背景色~~仔细看下面的代码） * View代码

package com.zhy.performance_01_render;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.view.View;

/**

• Created by zhy on 15/4/30.

*/

public class CardView extends View

{

private Bitmap[] mCards = new Bitmap[3];

private int[] mImgId = new int[]{R.drawable.alex, R.drawable.chris, R.drawable.claire};

public CardView(Context context)

{

super(context);

Bitmap bm = null;

for (int i = 0; i < mCards.length; i++)

{

bm = BitmapFactory.decodeResource(getResources(), mImgId[i]);

mCards[i] = Bitmap.createScaledBitmap(bm, 400, 600, false);

}

setBackgroundColor(0xff00ff00);

}

@Override

protected void onDraw(Canvas canvas)

{

super.onDraw(canvas);

canvas.save();

canvas.translate(20, 120);

for (Bitmap bitmap : mCards)

{

canvas.translate(120, 0);

canvas.drawBitmap(bitmap, 0, 0, null);

}

canvas.restore();

}

}

• Activity代码

/**

• Created by zhy on 15/4/30.

*/

public class OverDrawActivity02 extends AppCompatActivity

{

@Override

protected void onCreate(@Nullable Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(new CardView(this));

}

}

那么大家可以考虑下如何去优化，其实很明显哈，我们上面已经说了使用cliprect方法，那么我们目标直指

自定义View的onDraw方法。

修改后的代码：

@Override

protected void onDraw(Canvas canvas)

{

super.onDraw(canvas);

canvas.save();

canvas.translate(20, 120);

for (int i = 0; i < mCards.length; i++)

{

canvas.translate(120, 0);

canvas.save();

if (i < mCards.length - 1)

{

canvas.clipRect(0, 0, 120, mCards[i].getHeight());

}

canvas.drawBitmap(mCards[i], 0, 0, null);

canvas.restore();

}

canvas.restore();

}

分析得出，除了最后一张需要完整的绘制，其他的都只需要绘制部分；所以我们在循环的时候，给i到n-1都添加了clipRect的代码。

最后的效果图：

可以看到，所有卡片变为了淡紫色，对比参照图，都是1X过度绘制，那么是因为我的View添加了一个

ff00ff00的背景，可以说明已经是最优了。

如果你按照上面的修改，会发现最终效果图不是淡紫色，而是青色（2X），那是为什么呢？因为你还忽略了

一个优化的地方，本View已经有了不透明的背景，完全可以移除Window的背景了，即在Activity中，添加getWindow().setBackgroundDrawable(null);代码。

好了，说完了Overdraw的检测与处理，那么还剩下一个layouts、invalidations过慢的问题，那么这类问题主要可能是你的XML层级过多导致的，当然也有很好的工具可以用来检测，那么就是Hierarchy Viewer。

6、减少不必要的层次：巧用Hierarchy Viewer

1、Hierarchy Viewer工具简介

Android SDK中包含这个工具，不过大家肯定也不陌生了~~~

那么就简单说一下它在哪，如何使用，以及真机无法使用该工具该怎么解决。

• Hierarchy Viewer在哪？

本博客使用IDE为Android Studio，那么只需要按照下图步骤即可找到：

其他IDE的兄弟，找到这个肯定没问题，不过还是建议慢慢的转向AS。

• 如何使用？

一图胜千言：

关注下，所有框住的区域~~

• 无法连接真机调试怎么办？

如果你不存在这样的问题，直接跳过本节。

Android的官方文档中，有这么一句话：

出于安全考虑，Hierarchy Viewer只能连接Android开发版手机或是模拟器

看来的确是存在这样的问题了，并且网上也有一些解决方案，修改源码神马的，有兴趣去试试。

这里推荐一种解决方案：romainguy在github上有个项目ViewServer，可以下载下来导入到IDE中，里面有个ViewServer的类，类注释上也标注了用法，在你希望调试的Activity以下该三个方法中，添加几行代码：

• public class MyActivity extends Activity {

• public void onCreate(Bundle savedInstanceState) {
  

•     super.onCreate(savedInstanceState);
  

•     // Set content view, etc.
  

•     ViewServer.get(this).addWindow(this);
  

• }
  

• public void onDestroy() {
  

•     super.onDestroy();
  

•     ViewServer.get(this).removeWindow(this);
  

• }
  

• public void onResume() {
  

•     super.onResume();
  

•     ViewServer.get(this).setFocusedWindow(this);
  

• }
  

• }

记得先添加依赖，别问我怎么找不到ViewServer这个类，添加以上3行以后，手机运行至该Activity，重启下Android Device Moniter，然后就ok了，我就是这种方法调试的，哈~~

2、优化案例

好了，上面介绍完成了如何使用Hierarchy Viewer，下面使用一个案例来说明问题。

主要就是个布局文件：

• 布局文件

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”>

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“horizontal”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_marginTop=“@dimen/activity_vertical_margin”>

<ImageView

android:id=“@+id/chat_author_avatar1”

android:layout_width=“@dimen/avatar_dimen”

android:layout_height=“@dimen/avatar_dimen”

android:layout_margin=“@dimen/avatar_layout_margin”

android:src=“@drawable/joanna”/>

<LinearLayout

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:orientation=“vertical”>

<TextView

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:text=“@string/line1_text” />

<TextView

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:text=“@string/line2_text”/>

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“horizontal”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_marginTop=“@dimen/activity_vertical_margin”>

<ImageView

android:id=“@+id/chat_author_avatar2”

android:layout_width=“@dimen/avatar_dimen”

android:layout_height=“@dimen/avatar_dimen”

android:layout_margin=“@dimen/avatar_layout_margin”

android:src=“@drawable/joanna”/>

<TextView

android:id=“@+id/rl_line1”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_toRightOf=“@id/chat_author_avatar2”

android:text=“@string/line1_text” />

<TextView

android:id=“@+id/rl_line2”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_below=“@id/rl_line1”

android:layout_toRightOf=“@id/chat_author_avatar2”

android:text=“@string/line2_text” />

• Activity

package com.zhy.performance_01_render;

import android.os.Bundle;

import android.support.v7.app.ActionBarActivity;

import com.android.debug.hv.ViewServer;

public class CompareLayoutActivity extends ActionBarActivity

{

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_compare_layouts);

ViewServer.get(this).addWindow(this);

}

@Override

protected void onResume()

{

super.onResume();

ViewServer.get(this).setFocusedWindow(this);

}

@Override

protected void onDestroy()

{

super.onDestroy();

ViewServer.get(this).removeWindow(this);

}

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

【Android进阶学习视频】、【全套Android面试秘籍】

希望我能够用我的力量帮助更多迷茫、困惑的朋友们，帮助大家在IT道路上学习和发展

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！

842)]

[外链图片转存中…(img-a55kDopw-1711541961843)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

[外链图片转存中…(img-PtpBb7rK-1711541961843)]

【Android进阶学习视频】、【全套Android面试秘籍】

希望我能够用我的力量帮助更多迷茫、困惑的朋友们，帮助大家在IT道路上学习和发展

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！