前言

最近在看Android中性能優(yōu)化的，其中提到了LinearLayout會引起overdraw,但是并沒有具體的分析原因，我自己查找了一些資料從LinearLayout的繪制等方面來說明為什么使用LinearLayout會引起overdraw和哪些情況下使用LinearLayout會引起overdraw。希望大家看完之后對view的繪制和測量過程更加了解。

什么是overdraw

Android中在屏幕上繪制一個像素會花一定的時間，如果在屏幕的同一個位置多次繪制就會花大量的時間，多次在屏幕上同一位置繪制的情況就成為overdraw。overdraw會非常影響應(yīng)用的性能。一個高效的布局要做到兩點： 1、減少overdraw。

2、簡化布局結(jié)構(gòu)。

看下一個overdraw的例子

上面的六張牌的重合部分被多次繪制引發(fā)了overdraw，

檢測overdraw

可以通過手機的設(shè)置來直觀的查看應(yīng)用的overdraw情況。 1、打開設(shè)置，打開開發(fā)者選項。 2、選擇調(diào)試GPU過度渲染。 3、打開顯示過度渲染區(qū)域。

上面左邊是正常的未打開，調(diào)試GPU過度渲染的情形，右邊是打開GPU過度渲染檢測之后的。 上面右圖中不同的顏色對應(yīng)不同的overdraw的次數(shù)。對應(yīng)關(guān)系如下：

如下三幅圖，最右邊的是基本上沒有overdraw或者只有一次overdraw的，而中間的紅色區(qū)域很多，大部分是有三次及以上的overdraw。overdraw的次數(shù)越多越影響性能，所以中間的這種是不提倡的。

減少overdraw的方法

1、減少不必要的background

因為有background的時候會先繪制一遍background然后再在background的基礎(chǔ)上面繪制其他元素，所以會增加一次overdraw。 所有用戶看不到的background都應(yīng)該刪除掉。 如下面的這個例子：

刪除background之前

<ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/beach"android:background="@android:color/white"> </ImageView> 復(fù)制代碼

刪除background之后

<ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/beach" > </ImageView> 復(fù)制代碼

因為imageView的background在有src的時候根本就不會被用戶觀察到，所以應(yīng)該刪除掉。

2、統(tǒng)一整個app的background顏色

可以通過設(shè)置整個app的統(tǒng)一背景色來防止不同的activity設(shè)置不同的背景色而導(dǎo)致多個background?？梢栽贏ndroidManifest.xml添加：

android:theme="@android:style/Theme.Light" 復(fù)制代碼

或者想要的背景色。

2、使用clip減少渲染區(qū)域

clip具有裁剪功能，在自定義view的時候，渲染的圖像可能和用戶觀察到的圖像不一樣，自定義view的ondraw方法里面不僅僅只渲染用戶可見的圖像而且會渲染到被遮擋的圖像，使用clip方法裁剪出用戶可見的區(qū)域，這樣可以減少overdraw。

使用clipRect()方法

在自定義view中使用 Canvas.clipRect()方法可以有效的減少overdraw。這個方法可以為自定義的view提供一個rectangle 區(qū)域，并且只有在這個區(qū)域中的內(nèi)容才會被繪制。上面的撲克牌就可以使用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);}@Overrideprotected 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;}} } 復(fù)制代碼

在開啟檢測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);}@Overrideprotected 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;}} } 復(fù)制代碼

運行后的顯示效果如下：

可以看出從左到右所有的圖片都只進行了一次overdraw。大大減少了渲染次數(shù)。 Canvas.clipRect()該方法用于裁剪畫布，也就是設(shè)置畫布的顯示區(qū)域 調(diào)用clipRect()方法后，只會顯示被裁剪的區(qū)域，之外的區(qū)域?qū)⒉粫@示 .

3、盡量少用透明（alpha ）效果

Alpha是圖形界面開發(fā)中常用的特效，通常我們會使用以下代碼來實現(xiàn)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)); 復(fù)制代碼

其效果都等同于：

canvas.saveLayer(l, r, t, b, 127, Canvas.CLIP_TO_LAYER_SAVE_FLAG); 復(fù)制代碼

渲染帶有透明度像素被稱為：alpha rendering，alpha rendering會導(dǎo)致overdraw，因為系統(tǒng)會先渲染透明像素，然后渲染透明像素下面的view的像素，最后結(jié)合兩者，從而產(chǎn)生透明度的效果，因此會導(dǎo)致overdraw。如下圖：

上圖左邊是沒有加透明度的像素，右邊是在其上面加上一個透明度的蒙層，下面的圖是加上透明度后最終產(chǎn)生的效果。 類似于透明動畫，淡入，淡出等或者帶有陰影的效果都會導(dǎo)致alpha rendering。因此會導(dǎo)致overdraw。下面看一個由于設(shè)置alpha引起性能問題的實例。

Android Performance Case

在開發(fā)者模式中打開GPU profiling 工具后，發(fā)現(xiàn)上圖中右邊存在明顯的掉幀現(xiàn)象（底下紅柱超過藍線部分的），打開Tracer for OpenGL工具來檢測后發(fā)現(xiàn)： 是由viewpager上面滑動時標志當(dāng)前位置和其他位置的白色小點引起的，這些白色的小點，設(shè)置了透明度，每次都會調(diào)用Canvas.saveLayer()生成一個臨時圖層。正好滿足了以下條件：

getAlpha() returns a value < 1 onSetAlpha() returns false getLayerType() returns LAYER_TYPE_NONE hasOverlappingRendering() returns true 復(fù)制代碼

上面的用紅色區(qū)域標記出來的圓點，在每次滑動viewpager的時候都會動態(tài)調(diào)用setAlpha()方法來改變顏色和透明度，因此引起了overdraw和掉幀。為了解決上面的問題，可以采用下面的任一種方法：

1、Use a customizable “inactive” color instead of setting an opacity on the View

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

（注意：在android的View里有透明度的屬性，當(dāng)設(shè)置透明度setAlpha的時候，android里默認會把當(dāng)前view繪制到offscreen buffer中，然后再顯示出來。 這個offscreen buffer 可以理解為一個臨時緩沖區(qū)，把當(dāng)前View放進來并做透明度的轉(zhuǎn)化，然后在顯示到屏幕上。這個過程是消耗資源的，所以應(yīng)該盡量避免這個過程。而當(dāng)繼承了hasOverlappingRendering()方法返回false后，android會自動進行合理的優(yōu)化，避免使用offscreen buffer。 ）

3、Return true from onSetAlpha() and set an alpha on the Paint used to draw the “gray” circles

如何高效的使用alpha屬性

上面已經(jīng)說到了使用alpha屬性的時候會導(dǎo)致overdraw，那么應(yīng)該如何避免這些情況以減少overdraw呢？ 下面分別對textview，imageview，和customview中使用到alpha情況進行說明：

textview 對于TextView我們通常需要文字透明效果，而不是View本身透明，所以，直接設(shè)置帶有alpha值的TextColor是比較高效的方式。

// 錯誤使用方式textView.setAlpha(alpha);//---------------------------------------------------------------- //正確方式 // 以下方式可以避免創(chuàng)建 offscreen bufferint newTextColor = (int) (0xFF * alpha) << 24 | baseTextColor & 0xFFFFFF;textView.setTextColor(newTextColor); 復(fù)制代碼

ImageView 同樣的對于只具有src image的ImageView，直接調(diào)用setImageAlpha()方法更為合理。

//1、 錯誤方式, setAlpha方法由View繼承而來，性能不佳imageView.setAlpha(0.5f); //------------------------------------------------------------- //正確方式 // 使用以下方式時，ImageView會在繪制圖片時單獨為圖片指定Alpha// 可以避免創(chuàng)建 offScreenBufferimageView.setImageAlpha((int) alpha * 255); 復(fù)制代碼

CustomView 類似的，自定義控件時，應(yīng)該直接去設(shè)置paint的alpha。

//錯誤方式customView.setAlpha(alpha); //---------------------------------------------------- // 正確方式 But thispaint.setAlpha((int) alpha * 255);canvas.draw*(..., paint); 復(fù)制代碼

LinearLayout導(dǎo)致的overdraw

未完待續(xù)

參考文獻

1、google-developer-training.github.io/android-dev… 2、sriramramani.wordpress.com/2015/05/06/… 3、helw.net/2016/01/27/… 4、www.cnblogs.com/tianzhijiex… 5、www.androidperformance.com/2015/03/31/… 6、www.curious-creature.com/2015/03/25/… 7、www.curious-creature.com/2012/12/01/… 8、yangm90.github.io/android-Alp…

轉(zhuǎn)載于:https://juejin.im/post/5d01b4b45188251ed0326930

總結(jié)

以上是生活随笔為你收集整理的Android 高级进阶之overdraw分析及解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。