Android 过分渲染及优化方法--3D效果（JakeWharton大神的scalpel）

关注微信公众号：程序员小安，精彩文章按期推送。android

1.前言

Android 中的过分绘制是指同一个像素被绘制屡次，从绘制性能角度讲，同一像素点被绘制的次数固然越少越好，这样有利于减轻 GPU 的工做压力，事实上，在具体开发过程当中，不可避免的可能会出现过分绘制，这里，Android 系统自己在开发者选项里已经提供了一个选项开关 Debug GPU overdraw(调试 GPU 过分绘制)，用于检测 App 的过分绘制，只要打开这个开关，App 界面就会在不一样的界面区域根据像素的绘制次数显示出不一样的颜色。git

2.基本介绍

1）打开手机的过分绘制开关。操做顺序：【设置--->更多设置--->开发者模式--->调试GPU过分绘制--->显示过分绘制区域】程序员

最后打开后如图所示： github

2）颜色的标识xcode

从好到差:蓝-绿-淡红-红，具体表现为： 1.蓝色1x过分绘制 2.绿色2x过分绘制 3.淡红色3x过分绘制 4.红色超过4x过分绘制微信

官方对过分渲染的图片介绍： markdown

3）验收标准 1.控制过分绘制为2x 2.不容许存在4x过分绘制 3.不容许存在面积超过屏幕1/4区域的3x过分绘制（淡红色区域）ide

3.优化措施

因为公司项目不能拿来开放，本身写了个相似的登录界面，以下所示：能够看到，由于该界面布局简单，可是简单的界面也出现了红色，说明出现了过分渲染，下面咱们就解决掉当前界面的过分渲染问题。工具

1）利用DDMS观察其余应用布局实现方式具体使用方法前面已经介绍过：blog.csdn.net/dfskhgalshg… 缺点：只能看清楚层次，不能知道具体什么缘由致使过分渲染。oop

2）JakeWharton大神的scalpel github链接：github.com/JakeWharton… 将当前页面的布局3D化，有点像xcode上的view ui hierarchy工具，效果如图所示：

优势： 1.能够很方便的在页面上看到布局的id，从而快速找出对应出问题的控件。 2.支持3D跟缩放功能，能够清晰看到布局文件的层次结构，跟引发过分渲染的层次或者对应的布局块，很是灵活。

使用步骤： 1.build.gralde中加入以下代码：

compile 'com.jakewharton.scalpel:scalpel:1.1.2'
复制代码

2.使用的时候你的layout根节点必须是 ScalpelFrameLayout

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        View mainView = getLayoutInflater().inflate(R.layout.activity_main,null);
        ScalpelFrameLayout scalpelFrameLayout = new ScalpelFrameLayout(this);
        scalpelFrameLayout.addView(mainView);
        scalpelFrameLayout.setLayerInteractionEnabled(true);
        scalpelFrameLayout.setDrawIds(true);
        setContentView(scalpelFrameLayout);

        initView();
        loadData();
    }
复制代码

3.其余方法

开启3D效果 ： setLayerInteractionEnabled(boolean).
显隐DrawViews：setDrawViews(boolean).
显隐 view ID： setDrawIds(boolean).
修改边框的颜色和阴影 setChromeColor(int) and setChromeShadowColor(int).
复制代码

配置完成后，运行项目，当前页面则会呈现上图的效果。经过触摸页面，能够清楚的看到每一个控件的id以及布局层次。从上图能够看到，过分渲染呈现出来的绿色，红色都是成块的，我这边LinearLayout没有定义id，若是定义id就更容易看出来，成块的都是LinearLayout布局，也就是背景颜色设置重复形成页面过分渲染。

4.查看xml文件

<?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:background="#ffffff"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@mipmap/service_top_bg" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="#ffffff"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:text="用户名"
                android:textSize="20sp" />

            <EditText
                android:id="@+id/user_name"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginLeft="12dp"
                android:background="@null"
                android:hint="请输入用户名"
                android:textSize="20sp" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000000" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:text="密码"
                android:textSize="20sp" />

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginLeft="12dp"
                android:background="@null"
                android:hint="请输入密码"
                android:textSize="20sp" />
        </LinearLayout>


        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000000" />

        <Button
            android:id="@+id/login"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="登陆" />
    </LinearLayout>
</LinearLayout>

复制代码

第5,17,23都设置了背景颜色，并且都是LinearLayout，这样对于26行的textview来讲，已经多了三层背景色，再加上自身内容的渲染，已经四层，确定显示红色，也对应了3D模型显示的结果，咱们的作法是去掉没有必要的背景颜色。更改后的xml文件以下所示：

<?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:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@mipmap/service_top_bg" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:text="用户名"
                android:textSize="20sp" />

            <EditText
                android:id="@+id/user_name"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginLeft="12dp"
                android:background="@null"
                android:hint="请输入用户名"
                android:textSize="20sp" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000000" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:text="密码"
                android:textSize="20sp" />

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginLeft="12dp"
                android:background="@null"
                android:hint="请输入密码"
                android:textSize="20sp" />
        </LinearLayout>


        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000000" />

        <Button
            android:id="@+id/login"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="登陆" />
    </LinearLayout>
</LinearLayout>
复制代码

5.效果对比

优化前：

优化后：这样页面已经没有了红色，都是蓝色，已经很是好了。可见，手机GPU过分绘制功能打开后再配合JakeWharton大神的Scalpel插件能够很是有效地定位过分绘制问题，彻底能够代替SDK的Hierarchy UI功能，让开发者更好的优化布局层次。 4.优化总结

1.根布局的背景色谨慎设置，避免无效背景色。 2.减小布局层次，虽然布局层次不影响GPU过分渲染，可是复杂的嵌套势必会影响xml加载效率，也会增长像素点屡次绘制的概率。

5.源码下载地址

关注下方公众号，留言获取源码。

若有错误欢迎指出来，一块儿学习。