Android高級模糊技術(shù)學(xué)習(xí)
今天我們來更深入了解一下Android開發(fā)上的模糊技術(shù)。我讀過幾篇有關(guān)的文章，也在StackOverFlow上看過一些相關(guān)教程的帖子，所以我想在這里總結(jié)一下學(xué)到的東西。
為什么學(xué)習(xí)這個模糊技術(shù)？
現(xiàn)在越來越多的開發(fā)者喜歡在自定義控件的時候加上各種模糊背景，看看RomanNurik開發(fā)的Muzei或者Yahoo的Weather應(yīng)用app都非常不錯。我非常喜歡他們的設(shè)計。
我從Mark Allison的帖子(帖子地址)得到啟發(fā)，然后寫了這篇文章。
這是我們需要完成下圖展示的效果：
預(yù)備知識
首先描述一下我們需要的文件。我們需要一個主Activity，里面有一個含有多個Fragment的ViewPager，每個Fragment展示一種模糊技術(shù)。
這是主Activity的布局文件內(nèi)容：
- <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的布局文件內(nèi)容：
- <?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="<a href="http://www.jobbole.com/members/android/" rel="nofollow">@android</a>: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）。
最普遍的模糊技術(shù)是這樣做的：
- 從TextView的后一層背景中截取一部分；
- 進行模糊處理；
- 把模糊處理后的部分設(shè)置為TextView的背景。
Renderscript
那怎么在Android中實現(xiàn)模糊處理呢？最好的答案就是Renderscript。這是一個功能強大的圖形處理“引擎”。RenderScript的底層原理就不做介紹了（因為我也不知道），而且這超過了我們這篇文章的范圍。
先看下面的代碼：
- 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創(chuàng)建的時候，我先載入了布局文件，然后把TextView添加到我在布局文件中定義的LinearLayout中（用來顯示模糊效果，進行效果測試），最后對圖片做模糊處理。 - 在
applyBlur()函數(shù)中我注冊了onPreDrawListener()。因為在applyBlur()方法調(diào)用的時候界面還沒有開始布局，所以我需要實現(xiàn)這個監(jiān)聽器否則不能進行模糊處理。需要等到布局文件全都經(jīng)過measured、laid out、displayed的時候，才能進行操作。 - 在
onPreDraw()回調(diào)函數(shù)中，我首先把返回值false改成true。這個很重要，如果返回false的話，剛開始出現(xiàn)的那一幀畫面會被跳過，但是我們需要顯示這第一幀，所以要返回true。 - 接著我去掉了里面的回調(diào)方法，因為我們不需要監(jiān)聽它的
preDraw事件。 - 然后我們需要從
ImageView中獲取Bitmap，然后用getDrawingCache()函數(shù)創(chuàng)建drawing cache并保存。 - 最后就是進行模糊處理了，我們接下來會詳細(xì)討論這個環(huán)節(jié)。
需要說明的是，我的代碼中在兩種情況下考慮不是很周全：
- 在布局文件改變時不會再自動重新模糊處理。這個問題可以通過注冊
onGlobalLayoutListener監(jiān)聽器解決，在布局文件改變時重新進行模糊處理就可以了。 - 這個模糊處理操作是在主線程中進行的。我們知道在實際開發(fā)中不會這么做，但是為了方便暫時先這么做了。
現(xiàn)在回到blur()方法：
- 首先我創(chuàng)建了一個空的bitmap，把背景的一部分復(fù)制進去，之后我會對這個bitmap進行模糊處理并設(shè)置為
TextView的背景。 - 通過這個bitmap保存
Canvas的狀態(tài)； - 在父布局文件中把
Canvas移動到TextView的位置； - 把
ImageView的內(nèi)容繪到bitmap中； - 此時，我們就有了一個和
TextView一樣大小的bitmap，它包含了ImageView的一部分內(nèi)容，也就是TextView背后一層布局的內(nèi)容； - 創(chuàng)建一個Renderscript的實例；
- 把bitmap復(fù)制一份到Renderscript需要的數(shù)據(jù)片中；
- 創(chuàng)建Renderscript模糊處理的實例；
- 設(shè)置輸入，半徑范圍然后進行模糊處理；
- 把處理后的結(jié)果復(fù)制回之前的bitmap中；
- 好了，我們已經(jīng)把bitmap驚醒模糊處理了，可以將它設(shè)置為
TextView背景了；
這是我們處理后的效果：
可以看到效果還不錯，但是它用了57ms的時間。我們知道在Android中渲染一幀的時間應(yīng)該不超過16ms（60fps），但如果在UI線程中做模糊處理就會讓幀率降到了17fps。顯然這是不可接受的，我們需要把這個操作移到AsyncTask上或者使用別的機制實現(xiàn)。
而且有必要說明的是，ScriptIntrinsicBlur只支持API17以上，當(dāng)然也可以用Renderscript的support lib降低一些API版本的要求。
可是我們還是需要支持一些老一些的API版本，它們不支持Renderscript，現(xiàn)在我們看看該怎么辦吧。
FastBlur
因為我們知道，這種模糊處理的過程也就是像素處理而已，所以我們可以嘗試著手動進行模糊操作。幸運的是，Java上已經(jīng)有了很多實現(xiàn)模糊處理方案的例子。我們唯一要做的就是找到一個相對快速的實現(xiàn)方案。
感謝在StackOverFlow上的一篇帖子，我找到了一個能快速實現(xiàn)模糊處理的方案。先看看它是怎么樣的。
因為很多代碼都是一樣的，所以這里只討論關(guān)于模糊處理的函數(shù)：
- 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");
- }
實現(xiàn)的效果如下：
可以看到，模糊處理的效果也相當(dāng)不錯。使用FastBlur的好處是，我們可以去掉對Renderscript的依賴（還有最低API版本的限制）。但是可惡的是，理模糊操作竟然花費了147ms！這還不是最慢的SW模糊算法，我都不敢用高斯模糊了…
繼續(xù)深入
現(xiàn)在我們要想想該怎么做。模糊處理的過程都會有精度損失，你知道什么是精度損失嗎？對，要降低尺寸。
既然這樣，為什么不把bitmap的尺寸先降低然后進行模糊處理，然后再放大尺寸呢？我試著實現(xiàn)了一下這個想法，這是處理后得到的效果：
看到了嗎！Renderscript只用了13ms，F(xiàn)astBlur只用了2ms！還不錯。
再看看代碼。這里只討論FastBlur版本，因為Renderscript也是一樣的，全部代碼都可以從GitHub倉庫中檢出。
- 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這個參數(shù)了，所以把它設(shè)成2。
- 接著需要創(chuàng)建bitmap，這個bitmap比最后需要的小八倍。
- 請注意我給Paint提供了FILTER_BITMAP_FLAG標(biāo)示，這樣的話在處理bitmap縮放的時候，就可以達到雙緩沖的效果，模糊處理的過程就更加順暢了。
- 接下來和之前一樣進行模糊處理操作，這次的圖片小了很多，幅度也降低了很多，所以模糊過程非常快。
- 把模糊處理后的圖片作為背景，它會自動進行放大操作的。
之前說到FastBlur進行模糊操作比Renderscript還要快，這是因為FastBlur在進行bitmap復(fù)制操作時還會同時進行其他 操作，節(jié)省了時間。經(jīng)過了這些處理后，我們應(yīng)該已經(jīng)掌握了相對快速的模糊處理方案和原理，并去掉了對Renderscript的依賴。
本文的示例代碼：GitHub – blurring。
原文鏈接： trickyandroid 翻譯： chris
