今天我們來更深入瞭解一下Android開發上的模糊技術。我讀過幾篇有關的文章，也在StackOverFlow上看過一些相關教程的帖子，所以我想在這裡總結一下學到的東西。
為什麼學習這個模糊技術？
現在越來越多的開發者喜歡在自定義控制元件的時候加上各種模糊背景，看看RomanNurik開發的Muzei或者Yahoo的Weather應用app都非常不錯。我非常喜歡他們的設計。
我從Mark Allison的帖子(帖子地址)得到啟發，然後寫了這篇文章。
這是我們需要完成下圖展示的效果：
預備知識
首先描述一下我們需要的檔案。我們需要一個主Activity，裡面有一個含有多個Fragment的ViewPager，每個Fragment展示一種模糊技術。
這是主Activity的佈局檔案內容：
|
1 2 3 4 5 6 7 8 |
; html-script: false ] <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.paveldudka.MainActivity" /> |
這是Fragment的佈局檔案內容：
|
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 |
; html-script: false ] <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/picture" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/picture" android:scaleType="centerCrop" /> <TextView android:id="@+id/text" android:gravity="center_horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="My super text" android:textColor="@android:color/white" android:layout_gravity="center_vertical" android:textStyle="bold" android:textSize="48sp" /> <LinearLayout android:id="@+id/controls" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#7f000000" android:orientation="vertical" android:layout_gravity="bottom"/> </FrameLayout> |
我們只是在佈局上放了一個ImageView，然後在中間加一個TextView，還有一些作為效果顯示和測試的控制元件（如 @+id/controls）。
最普遍的模糊技術是這樣做的：
- 從
TextView的後一層背景中擷取一部分； - 進行模糊處理；
- 把模糊處理後的部分設定為
TextView的背景。
Renderscript
那怎麼在Android中實現模糊處理呢？最好的答案就是Renderscript。這是一個功能強大的圖形處理“引擎”。RenderScript的底層原理就不做介紹了（因為我也不知道），而且這超過了我們這篇文章的範圍。
先看下面的程式碼：
|
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 |
; html-script: false ] public class RSBlurFragment extends Fragment { private ImageView image; private TextView text; private TextView statusText; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_layout, container, false); image = (ImageView) view.findViewById(R.id.picture); text = (TextView) view.findViewById(R.id.text); statusText = addStatusText((ViewGroup) view.findViewById(R.id.controls)); applyBlur(); return view; } private void applyBlur() { image.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { image.getViewTreeObserver().removeOnPreDrawListener(this); image.buildDrawingCache(); Bitmap bmp = image.getDrawingCache(); blur(bmp, text); return true; } }); } @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) private void blur(Bitmap bkg, View view) { long startMs = System.currentTimeMillis(); float radius = 20; Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()), (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(overlay); canvas.translate(-view.getLeft(), -view.getTop()); canvas.drawBitmap(bkg, 0, 0, null); RenderScript rs = RenderScript.create(getActivity()); Allocation overlayAlloc = Allocation.createFromBitmap( rs, overlay); ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create( rs, overlayAlloc.getElement()); blur.setInput(overlayAlloc); blur.setRadius(radius); blur.forEach(overlayAlloc); overlayAlloc.copyTo(overlay); view.setBackground(new BitmapDrawable( getResources(), overlay)); rs.destroy(); statusText.setText(System.currentTimeMillis() - startMs + "ms"); } @Override public String toString() { return "RenderScript"; } private TextView addStatusText(ViewGroup container) { TextView result = new TextView(getActivity()); result.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); result.setTextColor(0xFFFFFFFF); container.addView(result); return result; } } |
- 在
Fragment建立的時候，我先載入了佈局檔案，然後把TextView新增到我在佈局檔案中定義的LinearLayout中（用來顯示模糊效果，進行效果測試），最後對圖片做模糊處理。 - 在
applyBlur()函式中我註冊了onPreDrawListener()。因為在applyBlur()方法呼叫的時候介面還沒有開始佈局，所以我需要實現這個監聽器否則不能進行模糊處理。需要等到佈局檔案全都經過measured、laid out、displayed的時候，才能進行操作。 - 在
onPreDraw()回撥函式中，我首先把返回值false改成true。這個很重要，如果返回false的話，剛開始出現的那一幀畫面會被跳過，但是我們需要顯示這第一幀，所以要返回true。 - 接著我去掉了裡面的回撥方法，因為我們不需要監聽它的
preDraw事件。 - 然後我們需要從
ImageView中獲取Bitmap，然後用getDrawingCache()函式建立drawing cache並儲存。 - 最後就是進行模糊處理了，我們接下來會詳細討論這個環節。
需要說明的是，我的程式碼中在兩種情況下考慮不是很周全：
- 在佈局檔案改變時不會再自動重新模糊處理。這個問題可以通過註冊
onGlobalLayoutListener監聽器解決，在佈局檔案改變時重新進行模糊處理就可以了。 - 這個模糊處理操作是在主執行緒中進行的。我們知道在實際開發中不會這麼做，但是為了方便暫時先這麼做了。
現在回到blur()方法：
- 首先我建立了一個空的bitmap，把背景的一部分複製進去，之後我會對這個bitmap進行模糊處理並設定為
TextView的背景。 - 通過這個bitmap儲存
Canvas的狀態； - 在父佈局檔案中把
Canvas移動到TextView的位置； - 把
ImageView的內容繪到bitmap中； - 此時，我們就有了一個和
TextView一樣大小的bitmap，它包含了ImageView的一部分內容，也就是TextView背後一層佈局的內容； - 建立一個Renderscript的例項；
- 把bitmap複製一份到Renderscript需要的資料片中；
- 建立Renderscript模糊處理的例項；
- 設定輸入，半徑範圍然後進行模糊處理；
- 把處理後的結果複製回之前的bitmap中；
- 好了，我們已經把bitmap驚醒模糊處理了，可以將它設定為
TextView背景了；
這是我們處理後的效果：
可以看到效果還不錯，但是它用了57ms的時間。我們知道在Android中渲染一幀的時間應該不超過16ms（60fps），但如果在UI執行緒中做模糊處理就會讓幀率降到了17fps。顯然這是不可接受的，我們需要把這個操作移到AsyncTask上或者使用別的機制實現。
而且有必要說明的是，ScriptIntrinsicBlur只支援API17以上，當然也可以用Renderscript的support lib降低一些API版本的要求。
可是我們還是需要支援一些老一些的API版本，它們不支援Renderscript，現在我們看看該怎麼辦吧。
FastBlur
因為我們知道，這種模糊處理的過程也就是畫素處理而已，所以我們可以嘗試著手動進行模糊操作。幸運的是，Java上已經有了很多實現模糊處理方案的例子。我們唯一要做的就是找到一個相對快速的實現方案。
感謝在StackOverFlow上的一篇帖子，我找到了一個能快速實現模糊處理的方案。先看看它是怎麼樣的。
因為很多程式碼都是一樣的，所以這裡只討論關於模糊處理的函式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
; html-script: false ] private void blur(Bitmap bkg, View view) { long startMs = System.currentTimeMillis(); float radius = 20; Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()), (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(overlay); canvas.translate(-view.getLeft(), -view.getTop()); canvas.drawBitmap(bkg, 0, 0, null); overlay = FastBlur.doBlur(overlay, (int)radius, true); view.setBackground(new BitmapDrawable(getResources(), overlay)); statusText.setText(System.currentTimeMillis() - startMs + "ms"); } |
實現的效果如下：
可以看到，模糊處理的效果也相當不錯。使用FastBlur的好處是，我們可以去掉對Renderscript的依賴（還有最低API版本的限制）。但是可惡的是，理模糊操作竟然花費了147ms！這還不是最慢的SW模糊演算法，我都不敢用高斯模糊了…
繼續深入
現在我們要想想該怎麼做。模糊處理的過程都會有精度損失，你知道什麼是精度損失嗎？對，要降低尺寸。
既然這樣，為什麼不把bitmap的尺寸先降低然後進行模糊處理，然後再放大尺寸呢？我試著實現了一下這個想法，這是處理後得到的效果：
看到了嗎！Renderscript只用了13ms，FastBlur只用了2ms！還不錯。
再看看程式碼。這裡只討論FastBlur版本，因為Renderscript也是一樣的，全部程式碼都可以從GitHub倉庫中檢出。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
; html-script: false ] private void blur(Bitmap bkg, View view) { long startMs = System.currentTimeMillis(); float scaleFactor = 1; float radius = 20; if (downScale.isChecked()) { scaleFactor = 8; radius = 2; } Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()/scaleFactor), (int) (view.getMeasuredHeight()/scaleFactor), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(overlay); canvas.translate(-view.getLeft()/scaleFactor, -view.getTop()/scaleFactor); canvas.scale(1 / scaleFactor, 1 / scaleFactor); Paint paint = new Paint(); paint.setFlags(Paint.FILTER_BITMAP_FLAG); canvas.drawBitmap(bkg, 0, 0, paint); overlay = FastBlur.doBlur(overlay, (int)radius, true); view.setBackground(new BitmapDrawable(getResources(), overlay)); statusText.setText(System.currentTimeMillis() - startMs + "ms"); } |
我們過一遍這個程式碼：
- scaleFactor提供了需要縮小的等級，在程式碼中我把bitmap的尺寸縮小到原圖的1/8。因為這個bitmap在模糊處理時會先被縮小然後再放大，所以在我的模糊演算法中就不用radius這個引數了，所以把它設成2。
- 接著需要建立bitmap，這個bitmap比最後需要的小八倍。
- 請注意我給Paint提供了FILTER_BITMAP_FLAG標示，這樣的話在處理bitmap縮放的時候，就可以達到雙緩衝的效果，模糊處理的過程就更加順暢了。
- 接下來和之前一樣進行模糊處理操作，這次的圖片小了很多，幅度也降低了很多，所以模糊過程非常快。
- 把模糊處理後的圖片作為背景，它會自動進行放大操作的。
之前說到FastBlur進行模糊操作比Renderscript還要快，這是因為FastBlur在進行bitmap複製操作時還會同時進行其他操作，節省了時間。經過了這些處理後，我們應該已經掌握了相對快速的模糊處理方案和原理，並去掉了對Renderscript的依賴。
本文的示例程式碼：GitHub – blurring。