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/