今天我們來更深入了解一下Android開發上的模糊技術。我讀過幾篇有關的文章,也在StackOverFlow上看過一些相關教程的帖子,所以我想在這里總結一下學到的東西。
為什么學習這個模糊技術?
現在越來越多的開發者喜歡在自定義控件的時候加上各種模糊背景,看看RomanNurik開發的Muzei或者Yahoo的Weather應用app都非常不錯。我非常喜歡他們的設計。
我從Mark Allison的帖子(帖子地址)得到啟發,然后寫了這篇文章。
這是我們需要完成下圖展示的效果:
預備知識
首先描述一下我們需要的文件。我們需要一個主Activity
,里面有一個含有多個Fragment
的ViewPager
,每個Fragment
展示一種模糊技術。
這是主Activity
的布局文件內容:
1 <android.support.v4.view.ViewPager 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:id="@+id/pager" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 tools:context="com.paveldudka.MainActivity" />
這是Fragment
的布局文件內容:
1 <?xml version="1.0" encoding="utf-8"?> 2 3 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 7 <ImageView 8 android:id="@+id/picture" 9 android:layout_width="match_parent" 10 android:layout_height="match_parent" 11 android:src="@drawable/picture" 12 android:scaleType="centerCrop" /> 13 14 <TextView 15 android:id="@+id/text" 16 android:gravity="center_horizontal" 17 android:layout_width="match_parent" 18 android:layout_height="wrap_content" 19 android:text="My super text" 20 android:textColor="<a href="http://www.jobbole.com/members/android/" rel="nofollow">@android</a>:color/white" 21 android:layout_gravity="center_vertical" 22 android:textStyle="bold" 23 android:textSize="48sp" /> 24 <LinearLayout 25 android:id="@+id/controls" 26 android:layout_width="match_parent" 27 android:layout_height="wrap_content" 28 android:background="#7f000000" 29 android:orientation="vertical" 30 android:layout_gravity="bottom"/> 31 </FrameLayout>
我們只是在布局上放了一個ImageView
,然后在中間加一個TextView
,還有一些作為效果顯示和測試的控件(如 @+id/controls)。
最普遍的模糊技術是這樣做的:
- 從
TextView
的后一層背景中截取一部分; - 進行模糊處理;
- 把模糊處理后的部分設置為
TextView
的背景。
Renderscript
那怎么在Android中實現模糊處理呢?最好的答案就是Renderscript。這是一個功能強大的圖形處理“引擎”。RenderScript的底層原理就不做介紹了(因為我也不知道),而且這超過了我們這篇文章的范圍。
先看下面的代碼:
1 public class RSBlurFragment extends Fragment { 2 private ImageView image; 3 private TextView text; 4 private TextView statusText; 5 6 @Override 7 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 8 View view = inflater.inflate(R.layout.fragment_layout, container, false); 9 image = (ImageView) view.findViewById(R.id.picture); 10 text = (TextView) view.findViewById(R.id.text); 11 statusText = addStatusText((ViewGroup) view.findViewById(R.id.controls)); 12 applyBlur(); 13 return view; 14 } 15 16 private void applyBlur() { 17 image.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { 18 @Override 19 public boolean onPreDraw() { 20 image.getViewTreeObserver().removeOnPreDrawListener(this); 21 image.buildDrawingCache(); 22 23 Bitmap bmp = image.getDrawingCache(); 24 blur(bmp, text); 25 return true; 26 } 27 }); 28 } 29 30 @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) 31 private void blur(Bitmap bkg, View view) { 32 long startMs = System.currentTimeMillis(); 33 34 float radius = 20; 35 36 Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()), 37 (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888); 38 39 Canvas canvas = new Canvas(overlay); 40 41 canvas.translate(-view.getLeft(), -view.getTop()); 42 canvas.drawBitmap(bkg, 0, 0, null); 43 44 RenderScript rs = RenderScript.create(getActivity()); 45 46 Allocation overlayAlloc = Allocation.createFromBitmap( 47 rs, overlay); 48 49 ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create( 50 rs, overlayAlloc.getElement()); 51 52 blur.setInput(overlayAlloc); 53 54 blur.setRadius(radius); 55 56 blur.forEach(overlayAlloc); 57 58 overlayAlloc.copyTo(overlay); 59 60 view.setBackground(new BitmapDrawable( 61 getResources(), overlay)); 62 63 rs.destroy(); 64 statusText.setText(System.currentTimeMillis() - startMs + "ms"); 65 } 66 67 @Override 68 public String toString() { 69 return "RenderScript"; 70 } 71 72 private TextView addStatusText(ViewGroup container) { 73 TextView result = new TextView(getActivity()); 74 result.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); 75 result.setTextColor(0xFFFFFFFF); 76 container.addView(result); 77 return result; 78 } 79 }
- 在
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 private void blur(Bitmap bkg, View view) { 2 long startMs = System.currentTimeMillis(); 3 float radius = 20; 4 5 Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()), 6 (int) (view.getMeasuredHeight()), Bitmap.Config.ARGB_8888); 7 Canvas canvas = new Canvas(overlay); 8 canvas.translate(-view.getLeft(), -view.getTop()); 9 canvas.drawBitmap(bkg, 0, 0, null); 10 overlay = FastBlur.doBlur(overlay, (int)radius, true); 11 view.setBackground(new BitmapDrawable(getResources(), overlay)); 12 statusText.setText(System.currentTimeMillis() - startMs + "ms"); 13 }
實現的效果如下:
可以看到,模糊處理的效果也相當不錯。使用FastBlur的好處是,我們可以去掉對Renderscript的依賴(還有最低API版本的限制)。但是可惡的是,理模糊操作竟然花費了147ms!這還不是最慢的SW模糊算法,我都不敢用高斯模糊了…
繼續深入
現在我們要想想該怎么做。模糊處理的過程都會有精度損失,你知道什么是精度損失嗎?對,要降低尺寸。
既然這樣,為什么不把bitmap的尺寸先降低然后進行模糊處理,然后再放大尺寸呢?我試着實現了一下這個想法,這是處理后得到的效果:
看到了嗎!Renderscript只用了13ms,FastBlur只用了2ms!還不錯。
再看看代碼。這里只討論FastBlur版本,因為Renderscript也是一樣的,全部代碼都可以從GitHub倉庫中檢出。
1 private void blur(Bitmap bkg, View view) { 2 long startMs = System.currentTimeMillis(); 3 float scaleFactor = 1; 4 float radius = 20; 5 if (downScale.isChecked()) { 6 scaleFactor = 8; 7 radius = 2; 8 } 9 10 Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()/scaleFactor), 11 (int) (view.getMeasuredHeight()/scaleFactor), Bitmap.Config.ARGB_8888); 12 Canvas canvas = new Canvas(overlay); 13 canvas.translate(-view.getLeft()/scaleFactor, -view.getTop()/scaleFactor); 14 canvas.scale(1 / scaleFactor, 1 / scaleFactor); 15 Paint paint = new Paint(); 16 paint.setFlags(Paint.FILTER_BITMAP_FLAG); 17 canvas.drawBitmap(bkg, 0, 0, paint); 18 19 overlay = FastBlur.doBlur(overlay, (int)radius, true); 20 view.setBackground(new BitmapDrawable(getResources(), overlay)); 21 statusText.setText(System.currentTimeMillis() - startMs + "ms"); 22 }
我們過一遍這個代碼:
- scaleFactor提供了需要縮小的等級,在代碼中我把bitmap的尺寸縮小到原圖的1/8。因為這個bitmap在模糊處理時會先被縮小然后再放大,所以在我的模糊算法中就不用radius這個參數了,所以把它設成2。
- 接着需要創建bitmap,這個bitmap比最后需要的小八倍。
- 請注意我給Paint提供了FILTER_BITMAP_FLAG標示,這樣的話在處理bitmap縮放的時候,就可以達到雙緩沖的效果,模糊處理的過程就更加順暢了。
- 接下來和之前一樣進行模糊處理操作,這次的圖片小了很多,幅度也降低了很多,所以模糊過程非常快。
- 把模糊處理后的圖片作為背景,它會自動進行放大操作的。
之前說到FastBlur進行模糊操作比Renderscript還要快,這是因為FastBlur在進行bitmap復制操作時還會同時進行其他操作,節省了時間。經過了這些處理后,我們應該已經掌握了相對快速的模糊處理方案和原理,並去掉了對Renderscript的依賴。
本文的示例代碼:GitHub – blurring。
原文鏈接: trickyandroid 翻譯: 伯樂在線 - chris
譯文鏈接: http://blog.jobbole.com/63894/