Android高級模糊技術學習

Android高級模糊技術學習

2014-04-01 13:29  佚名  blog.jobbole 字號：T | T

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

AD：WOT2014課程推薦：實戰MSA：用開源軟件搭建微服務系統

今天咱們來更深刻了解一下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="<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）。

最廣泛的模糊技術是這樣作的：

• 從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。

原文連接： trickyandroid   翻譯： chris

譯文連接： http://blog.jobbole.com/63894/