日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

今天我們來更深入了解一下Android開發(fā)上的模糊技術(shù)。我讀過幾篇有關(guān)的文章，也在StackOverFlow上看過一些相關(guān)教程的帖子，所以我想在這里總結(jié)一下學(xué)到的東西。

為什么學(xué)習(xí)這個(gè)模糊技術(shù)？

現(xiàn)在越來越多的開發(fā)者喜歡在自定義控件的時(shí)候加上各種模糊背景，看看RomanNurik開發(fā)的Muzei或者Yahoo的Weather應(yīng)用app都非常不錯(cuò)。我非常喜歡他們的設(shè)計(jì)。

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

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

預(yù)備知識

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

這是主Activity的布局文件內(nèi)容：

 
 
 
 

  
  
  
  

  
  
  
  
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)容：

 
 
 
 

  
  
  
  
 
  
  
  
  
  
  
  
  
  

  
  
  
  
    android:layout_width="match_parent" 
  
  
  
  
    android:layout_height="match_parent"> 
  
  
  
  
  
  
  
  
  
    
  
  
  
  
        android:id="@+id/picture" 
  
  
  
  
        android:layout_width="match_parent" 
  
  
  
  
        android:layout_height="match_parent" 
  
  
  
  
        android:src="@drawable/picture" 
  
  
  
  
        android:scaleType="centerCrop" /> 
  
  
  
  
  
  
  
  
  
    
  
  
  
  
        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:layout_gravity="center_vertical" 
  
  
  
  
        android:textStyle="bold" 
  
  
  
  
        android:textSize="48sp" /> 
  
  
  
  
    
  
  
  
  
        android:id="@+id/controls" 
  
  
  
  
        android:layout_width="match_parent" 
  
  
  
  
        android:layout_height="wrap_content" 
  
  
  
  
        android:background="#7f000000" 
  
  
  
  
        android:orientation="vertical" 
  
  
  
  
        android:layout_gravity="bottom"/> 
  
  
  
  
 
 
 
 
 

我們只是在布局上放了一個(gè)ImageView，然后在中間加一個(gè)TextView，還有一些作為效果顯示和測試的控件（如 @+id/controls）。

最普遍的模糊技術(shù)是這樣做的：

• 從TextView的后一層背景中截取一部分；
• 進(jìn)行模糊處理；
• 把模糊處理后的部分設(shè)置為TextView的背景。

Renderscript

那怎么在Android中實(shí)現(xiàn)模糊處理呢？最好的答案就是Renderscript。這是一個(gè)功能強(qiáng)大的圖形處理“引擎”。RenderScript的底層原理就不做介紹了（因?yàn)槲乙膊恢溃?，而且這超過了我們這篇文章的范圍。

先看下面的代碼：

 
 
 
 

  
  
  
  
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)建的時(shí)候，我先載入了布局文件，然后把TextView添加到我在布局文件中定義的LinearLayout中（用來顯示模糊效果，進(jìn)行效果測試），最后對圖片做模糊處理。
• 在applyBlur()函數(shù)中我注冊了onPreDrawListener()。因?yàn)樵?code>applyBlur()方法調(diào)用的時(shí)候界面還沒有開始布局，所以我需要實(shí)現(xiàn)這個(gè)監(jiān)聽器否則不能進(jìn)行模糊處理。需要等到布局文件全都經(jīng)過measured、laid out、displayed的時(shí)候，才能進(jìn)行操作。
• 在onPreDraw()回調(diào)函數(shù)中，我首先把返回值false改成true。這個(gè)很重要，如果返回false的話，剛開始出現(xiàn)的那一幀畫面會(huì)被跳過，但是我們需要顯示這第一幀，所以要返回true。
• 接著我去掉了里面的回調(diào)方法，因?yàn)槲覀儾恍枰O(jiān)聽它的preDraw事件。
• 然后我們需要從ImageView中獲取Bitmap，然后用getDrawingCache()函數(shù)創(chuàng)建drawing cache并保存。
• 最后就是進(jìn)行模糊處理了，我們接下來會(huì)詳細(xì)討論這個(gè)環(huán)節(jié)。

需要說明的是，我的代碼中在兩種情況下考慮不是很周全：

• 在布局文件改變時(shí)不會(huì)再自動(dòng)重新模糊處理。這個(gè)問題可以通過注冊onGlobalLayoutListener監(jiān)聽器解決，在布局文件改變時(shí)重新進(jìn)行模糊處理就可以了。
• 這個(gè)模糊處理操作是在主線程中進(jìn)行的。我們知道在實(shí)際開發(fā)中不會(huì)這么做，但是為了方便暫時(shí)先這么做了。

現(xiàn)在回到blur()方法：

• 首先我創(chuàng)建了一個(gè)空的bitmap，把背景的一部分復(fù)制進(jìn)去，之后我會(huì)對這個(gè)bitmap進(jìn)行模糊處理并設(shè)置為TextView的背景。
• 通過這個(gè)bitmap保存Canvas的狀態(tài)；
• 在父布局文件中把Canvas移動(dòng)到TextView的位置；
• 把ImageView的內(nèi)容繪到bitmap中；
• 此時(shí)，我們就有了一個(gè)和TextView一樣大小的bitmap，它包含了ImageView的一部分內(nèi)容，也就是TextView背后一層布局的內(nèi)容；
• 創(chuàng)建一個(gè)Renderscript的實(shí)例；
• 把bitmap復(fù)制一份到Renderscript需要的數(shù)據(jù)片中；
• 創(chuàng)建Renderscript模糊處理的實(shí)例；
• 設(shè)置輸入，半徑范圍然后進(jìn)行模糊處理；
• 把處理后的結(jié)果復(fù)制回之前的bitmap中；
• 好了，我們已經(jīng)把bitmap驚醒模糊處理了，可以將它設(shè)置為TextView背景了；

這是我們處理后的效果：

可以看到效果還不錯(cuò)，但是它用了57ms的時(shí)間。我們知道在Android中渲染一幀的時(shí)間應(yīng)該不超過16ms（60fps），但如果在UI線程中做模糊處理就會(huì)讓幀率降到了17fps。顯然這是不可接受的，我們需要把這個(gè)操作移到AsyncTask上或者使用別的機(jī)制實(shí)現(xiàn)。

而且有必要說明的是，ScriptIntrinsicBlur只支持API17以上，當(dāng)然也可以用Renderscript的support lib降低一些API版本的要求。

可是我們還是需要支持一些老一些的API版本，它們不支持Renderscript，現(xiàn)在我們看看該怎么辦吧。

FastBlur

因?yàn)槲覀冎溃@種模糊處理的過程也就是像素處理而已，所以我們可以嘗試著手動(dòng)進(jìn)行模糊操作。幸運(yùn)的是，Java上已經(jīng)有了很多實(shí)現(xiàn)模糊處理方案的例子。我們唯一要做的就是找到一個(gè)相對快速的實(shí)現(xiàn)方案。

感謝在StackOverFlow上的一篇帖子，我找到了一個(gè)能快速實(shí)現(xiàn)模糊處理的方案。先看看它是怎么樣的。

因?yàn)楹芏啻a都是一樣的，所以這里只討論關(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"); 
  
  
  
  
} 
 
 
 
 

實(shí)現(xiàn)的效果如下：

可以看到，模糊處理的效果也相當(dāng)不錯(cuò)。使用FastBlur的好處是，我們可以去掉對Renderscript的依賴（還有最低API版本的限制）。但是可惡的是，理模糊操作竟然花費(fèi)了147ms！這還不是最慢的SW模糊算法，我都不敢用高斯模糊了…

繼續(xù)深入

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

既然這樣，為什么不把bitmap的尺寸先降低然后進(jìn)行模糊處理，然后再放大尺寸呢？我試著實(shí)現(xiàn)了一下這個(gè)想法，這是處理后得到的效果：

看到了嗎！Renderscript只用了13ms，F(xiàn)astBlur只用了2ms！還不錯(cuò)。

再看看代碼。這里只討論FastBlur版本，因?yàn)镽enderscript也是一樣的，全部代碼都可以從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"); 
  
  
  
  
} 
 
 
 
 

我們過一遍這個(gè)代碼：

• scaleFactor提供了需要縮小的等級，在代碼中我把bitmap的尺寸縮小到原圖的1/8。因?yàn)檫@個(gè)bitmap在模糊處理時(shí)會(huì)先被縮小然后再放大，所以在我的模糊算法中就不用radius這個(gè)參數(shù)了，所以把它設(shè)成2。
• 接著需要?jiǎng)?chuàng)建bitmap，這個(gè)bitmap比最后需要的小八倍。
• 請注意我給Paint提供了FILTER_BITMAP_FLAG標(biāo)示，這樣的話在處理bitmap縮放的時(shí)候，就可以達(dá)到雙緩沖的效果，模糊處理的過程就更加順暢了。
• 接下來和之前一樣進(jìn)行模糊處理操作，這次的圖片小了很多，幅度也降低了很多，所以模糊過程非常快。
• 把模糊處理后的圖片作為背景，它會(huì)自動(dòng)進(jìn)行放大操作的。

之前說到FastBlur進(jìn)行模糊操作比Renderscript還要快，這是因?yàn)镕astBlur在進(jìn)行bitmap復(fù)制操作時(shí)還會(huì)同時(shí)進(jìn)行其他 操作，節(jié)省了時(shí)間。經(jīng)過了這些處理后，我們應(yīng)該已經(jīng)掌握了相對快速的模糊處理方案和原理，并去掉了對Renderscript的依賴。

本文的示例代碼：GitHub – blurring。

原文鏈接： trickyandroid   翻譯： chris

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

本文名稱：Android高級模糊技術(shù)學(xué)習(xí)
文章網(wǎng)址：http://www.5511xx.com/article/dhhgspi.html