Android高級模糊技術

今天我們來更深入瞭解一下Android開發上的模糊技術。我讀過幾篇有關的文章，也在StackOverFlow上看過一些相關教程的帖子，所以我想在這裏總結一下學到的東西。

爲什麼學習這個模糊技術？

現在越來越多的開發者喜歡在自定義控件的時候加上各種模糊背景，看看RomanNurik開發的Muzei或者Yahoo的Weather應用app都非常不錯。我非常喜歡他們的設計。

我從Mark Allison的帖子(帖子地址)得到啓發，然後寫了這篇文章。

這是我們需要完成下圖展示的效果：

預備知識

首先描述一下我們需要的文件。我們需要一個主Activity，裏面有一個含有多個Fragment的ViewPager，每個Fragment展示一種模糊技術。

這是主Activity的佈局文件內容：

<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的佈局文件內容：

<?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的底層原理就不做介紹了（因爲我也不知道），而且這超過了我們這篇文章的範圍。

先看下面的代碼：

    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上的一篇帖子，我找到了一個能快速實現模糊處理的方案。先看看它是怎麼樣的。

因爲很多代碼都是一樣的，所以這裏只討論關於模糊處理的函數：

    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倉庫中檢出。

    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。