今天我們來更深入了解一下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_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_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: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");
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
-
applyBlur()
onPreDrawListener()
applyBlur()
-
onPreDraw()
- 接着我去掉了裡面的回調方法，因為我們不需要監聽它的
preDraw
- 然後我們需要從
ImageView
Bitmap
getDrawingCache()
- 最後就是進行模糊處理了，我們接下來會詳細讨論這個環節。
需要說明的是，我的代碼中在兩種情況下考慮不是很周全：
- 在布局檔案改變時不會再自動重新模糊處理。這個問題可以通過注冊
onGlobalLayoutListener
- 這個模糊處理操作是在主線程中進行的。我們知道在實際開發中不會這麼做，但是為了友善暫時先這麼做了。
現在回到
blur()
方法：
- 首先我建立了一個空的bitmap，把背景的一部分複制進去，之後我會對這個bitmap進行模糊處理并設定為
TextView
- 通過這個bitmap儲存
Canvas
- 在父布局檔案中把
Canvas
TextView
- 把
ImageView
- 此時，我們就有了一個和
TextView
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倉庫中檢出。
float scaleFactor = 1;
if (downScale.isChecked()) {
scaleFactor = 8;
radius = 2;
Bitmap overlay = Bitmap.createBitmap((int) (view.getMeasuredWidth()/scaleFactor),
(int) (view.getMeasuredHeight()/scaleFactor), Bitmap.Config.ARGB_8888);
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);
我們過一遍這個代碼：
- scaleFactor提供了需要縮小的等級，在代碼中我把bitmap的尺寸縮小到原圖的1/8。因為這個bitmap在模糊處理時會先被縮小然後再放大，是以在我的模糊算法中就不用radius這個參數了，是以把它設成2。
- 接着需要建立bitmap，這個bitmap比最後需要的小八倍。
- 請注意我給Paint提供了FILTER_BITMAP_FLAG标示，這樣的話在處理bitmap縮放的時候，就可以達到雙緩沖的效果，模糊處理的過程就更加順暢了。
- 接下來和之前一樣進行模糊處理操作，這次的圖檔小了很多，幅度也降低了很多，是以模糊過程非常快。
- 把模糊處理後的圖檔作為背景，它會自動進行放大操作的。
之前說到FastBlur進行模糊操作比Renderscript還要快，這是因為FastBlur在進行bitmap複制操作時還會同時進行其他操作，節省了時間。經過了這些處理後，我們應該已經掌握了相對快速的模糊處理方案和原理，并去掉了對Renderscript的依賴。