Android 高級進階之overdraw分析及解決

時間 2019-11-07

標籤 android 高級進階 overdraw 分析解決欄目 Android 简体版

原文原文鏈接

前言

最近在看Android中性能優化的，其中提到了LinearLayout會引發overdraw,可是並無具體的分析緣由，我本身查找了一些資料從LinearLayout的繪製等方面來講明爲何使用LinearLayout會引發overdraw和哪些狀況下使用LinearLayout會引發overdraw。但願你們看完以後對view的繪製和測量過程更加了解。html

什麼是overdraw

Android中在屏幕上繪製一個像素會花必定的時間，若是在屏幕的同一個位置屢次繪製就會花大量的時間，屢次在屏幕上同一位置繪製的狀況就成爲overdraw。overdraw會很是影響應用的性能。一個高效的佈局要作到兩點： 一、減小overdraw。java

二、簡化佈局結構。android

看下一個overdraw的例子 git

上面的六張牌的重合部分被屢次繪製引起了overdraw，

檢測overdraw

能夠經過手機的設置來直觀的查看應用的overdraw狀況。 一、打開設置，打開開發者選項。 二、選擇調試GPU過分渲染。 三、打開顯示過分渲染區域。 github

上面左邊是正常的未打開，調試GPU過分渲染的情形，右邊是打開GPU過分渲染檢測以後的。上面右圖中不一樣的顏色對應不一樣的overdraw的次數。對應關係以下：

以下三幅圖，最右邊的是基本上沒有overdraw或者只有一次overdraw的，而中間的紅色區域不少，大部分是有三次及以上的overdraw。overdraw的次數越多越影響性能，因此中間的這種是不提倡的。

減小overdraw的方法

一、減小沒必要要的backgroundcanvas

由於有background的時候會先繪製一遍background而後再在background的基礎上面繪製其餘元素，因此會增長一次overdraw。全部用戶看不到的background都應該刪除掉。以下面的這個例子：性能優化

刪除background以前app

<ImageView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:src="@drawable/beach"
   android:background="@android:color/white">
</ImageView>
複製代碼

刪除background以後less

<ImageView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:src="@drawable/beach" >
</ImageView>
複製代碼

由於imageView的background在有src的時候根本就不會被用戶觀察到，因此應該刪除掉。ide

二、統一整個app的background顏色

能夠經過設置整個app的統一背景色來防止不一樣的activity設置不一樣的背景色而致使多個background。能夠在AndroidManifest.xml添加：

android:theme="@android:style/Theme.Light"
複製代碼

或者想要的背景色。

二、使用clip減小渲染區域

clip具備裁剪功能，在自定義view的時候，渲染的圖像可能和用戶觀察到的圖像不同，自定義view的ondraw方法裏面不只僅只渲染用戶可見的圖像並且會渲染到被遮擋的圖像，使用clip方法裁剪出用戶可見的區域，這樣能夠減小overdraw。

使用clipRect()方法

在自定義view中使用 Canvas.clipRect()方法能夠有效的減小overdraw。這個方法能夠爲自定義的view提供一個rectangle 區域，而且只有在這個區域中的內容纔會被繪製。上面的撲克牌就可使用Canvas.clipRect()來減小繪製。以下：

下面經過一個自定義的view來進行一個對比：

未使用clipRect()的自定義view

/** * Created time 20:54. * * @author huhanjun * @since 2019/6/12 */
public class MyView extends View {
    private Paint mPaint;
    private Bitmap mBitmap;
    private int mPadding = 0;

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.over_draw);
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.over_draw);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < 5; i++) {
            canvas.save();
            canvas.drawBitmap(mBitmap,mPadding,0,mPaint);
            canvas.restore();
            mPadding += 200;
        }
    }
}
複製代碼

在開啓檢測overdraw後的顯示效果以下：

上圖從左到右能夠由顏色看出分別進行了一次，兩次，三次和屢次的overdraw，下面看看使用clipRect()後的顯示效果。

使用clipRect()的自定義view

/** * Created time 20:54. * * @author huhanjun * @since 2019/6/12 */
public class MyView extends View {
    private Paint mPaint;
    private Bitmap mBitmap;
    private int mPadding = 0;

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.over_draw);
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.over_draw);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < 5; i++) {
            canvas.save();
            Rect rect = new Rect(mPadding, 0,  200+mPadding, mBitmap.getWidth() + mPadding);
            canvas.clipRect(rect);//此處增長clipRect方法
            canvas.drawBitmap(mBitmap,mPadding,0,mPaint);
            canvas.restore();
            mPadding += 200;
        }
    }
}
複製代碼

運行後的顯示效果以下：

能夠看出從左到右全部的圖片都只進行了一次overdraw。大大減小了渲染次數。 Canvas.clipRect()該方法用於裁剪畫布，也就是設置畫布的顯示區域調用clipRect()方法後，只會顯示被裁剪的區域，以外的區域將不會顯示 .

三、儘可能少用透明（alpha ）效果

Alpha是圖形界面開發中經常使用的特效，一般咱們會使用如下代碼來實現Alpha特效：

view.setAlpha(0.5f);
    View.ALPHA.set(view, 0.5f);
    ObjectAnimator.ofFloat(view, "alpha", 0.5f).start();
    view.animate().alpha(0.5f).start();
    view.setAnimation(new AlphaAnimation(1.0f, 0.5f));
複製代碼

其效果都等同於：

canvas.saveLayer(l, r, t, b, 127, Canvas.CLIP_TO_LAYER_SAVE_FLAG);
複製代碼

渲染帶有透明度像素被稱爲：alpha rendering，alpha rendering會致使overdraw，由於系統會先渲染透明像素，而後渲染透明像素下面的view的像素，最後結合二者，從而產生透明度的效果，所以會致使overdraw。以下圖：

上圖左邊是沒有加透明度的像素，右邊是在其上面加上一個透明度的蒙層，下面的圖是加上透明度後最終產生的效果。相似於透明動畫，淡入，淡出等或者帶有陰影的效果都會致使alpha rendering。所以會致使overdraw。下面看一個因爲設置alpha引發性能問題的實例。

Android Performance Case

在開發者模式中打開GPU profiling 工具後，發現上圖中右邊存在明顯的掉幀現象（底下紅柱超過藍線部分的），打開Tracer for OpenGL工具來檢測後發現：

是由viewpager上面滑動時標誌當前位置和其餘位置的白色小點引發的，這些白色的小點，設置了透明度，每次都會調用Canvas.saveLayer()生成一個臨時圖層。正好知足瞭如下條件：

getAlpha() returns a value < 1
onSetAlpha() returns false getLayerType() returns LAYER_TYPE_NONE hasOverlappingRendering() returns true 複製代碼

上面的用紅色區域標記出來的圓點，在每次滑動viewpager的時候都會動態調用setAlpha()方法來改變顏色和透明度，所以引發了overdraw和掉幀。爲了解決上面的問題，能夠採用下面的任一種方法：

一、Use a customizable 「inactive」 color instead of setting an opacity on the View

二、 Return false from hasOverlappingRendering() and the framework will set the proper alpha on the Paint for you

（注意：在android的View裏有透明度的屬性，當設置透明度setAlpha的時候，android裏默認會把當前view繪製到offscreen buffer中，而後再顯示出來。這個offscreen buffer 能夠理解爲一個臨時緩衝區，把當前View放進來並作透明度的轉化，而後在顯示到屏幕上。這個過程是消耗資源的，因此應該儘可能避免這個過程。而當繼承了hasOverlappingRendering()方法返回false後，android會自動進行合理的優化，避免使用offscreen buffer。）

三、Return true from onSetAlpha() and set an alpha on the Paint used to draw the 「gray」 circles

如何高效的使用alpha屬性

上面已經說到了使用alpha屬性的時候會致使overdraw，那麼應該如何避免這些狀況以減小overdraw呢？下面分別對textview，imageview，和customview中使用到alpha狀況進行說明：

textview 對於TextView咱們一般須要文字透明效果，而不是View自己透明，因此，直接設置帶有alpha值的TextColor是比較高效的方式。

// 錯誤使用方式
    textView.setAlpha(alpha);
 //---------------------------------------------------------------- 
 //正確方式 
    // 如下方式能夠避免建立 offscreen buffer
    int newTextColor = (int) (0xFF * alpha) << 24 | baseTextColor & 0xFFFFFF;
    textView.setTextColor(newTextColor);
複製代碼

ImageView 一樣的對於只具備src image的ImageView，直接調用setImageAlpha()方法更爲合理。

//一、 錯誤方式, setAlpha方法由View繼承而來，性能不佳
    imageView.setAlpha(0.5f);
//------------------------------------------------------------- 
 //正確方式 
    // 使用如下方式時，ImageView會在繪製圖片時單獨爲圖片指定Alpha
    // 能夠避免建立 offScreenBuffer
    imageView.setImageAlpha((int) alpha * 255);
複製代碼

CustomView 相似的，自定義控件時，應該直接去設置paint的alpha。

//錯誤方式
    customView.setAlpha(alpha);
//---------------------------------------------------- 
    // 正確方式 But this
    paint.setAlpha((int) alpha * 255);
    canvas.draw*(..., paint);
複製代碼