安卓的磨砂效果如何完成

為什么學習這個模糊技術？

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

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

預備知識

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

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

<android.support.v4.view.ViewPagerxmlns: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模糊算法， 我都不敢用高斯模糊了…

繼續深入

現在我們要想想該怎么做。 模糊處理的過程都會有精度損失， 你知道什么是精度損失嗎？對， 要降低尺寸。

這里只討論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的依賴。